A guide to rhythm in web typography | Hacker News Reader

A guide to rhythm in web typography

betterwebtype.com

256 pointsmatejlatin87 comments

JPEG is not a good choice for UI/typography screenshots. There are ~1MB of JPEGs at quality 50 on the page. By using PNG8 not only you can halve that size but also preserve original quality. Example:

  [1] PNG24 199 144 bytes
  [2] JPEG 94 699 bytes
  [3] PNG8 47 155 bytes

[1] https://user-images.githubusercontent.com/3129436/47068394-d...

[2] https://user-images.githubusercontent.com/3129436/47068393-d...

[3] https://user-images.githubusercontent.com/3129436/47068392-d...

Not to mention [1] could be almost halved size if run through the default (fast) options of optipng (or just compressed properly by whatever generated it).

Thanks for sharing this, will make sure to use PNG8 in the future!

That annoyed me as well, seems like the worst possible choice of format and quality for the given images.

I'm a UX developer who has tried and failed every time to get vertical rhythm working. It doesn't.

Vertical rhythm is great in theory. You can even program it in if you use SASS or something like that.

The problem is every example of vertical rhythm is a blog post on a blank page with a school paper ruler underneath.

Even if you add multiple columns it will look great, but the moment you add any sort of visual offset it will break things.

Cards are all the rage right now in UI design. Usually you want card headers to abutt the top of the card by some padding offset (padding on the card). Now you need to make that heading work without padding and still obey vertical rhythm. Good luck.

Borders? Haha sorry, you've now introduced an off by one error (or two if you put them on top and bottom of your object). You probably thought of that already for tables, but you didn't think of that for your buttons or any of your form elements (who also have labels that you don't want to be oddly distant from their form elements).

I could go on, but outside of a mimnimalist page I've yet to see it be more of a benefit than a PITA

I believe you're right. I also believe you've just demonstrated how adding cards, borders and so on breaks vertical rhythm. You've decided to prefer adding cards and borders to keeping vertical rhythm, but one could also come to the opposite conclusion. What do you think?

That's like saying I prefer kicking puppies to eating broccoli - it's an absurd comparison.

I don't prefer cards and borders anymore than I prefer keeping my job.

Show me a fortune 500 website that uses 0 borders, cards, or forms. If you prefer vertical rhythm to those things you prefer to be unemployed.

I have used a vertical grid in a couple of fairly complex web designs. It's a lot of work to compensate for things like borders and padding and keep all of the text on the baselines. For most paying gigs, it's probably not worth the time.

But it's not impossible. You just gotta to the work.

I don't agree with Hanging punctuation. I want the bullet points to be indented. Probably because that's what I'm used to. Also there's no real benefit of compact text on the web, you are not wasting paper.

That's ok, it's a matter of preference and how emphasized the bullet lists need to be. I even mention this somewhere in the article.

I use bullets intentionally to break the flow. Nowadays many readers are getting tired of too long passages, and bullet points are one way to give the text visually more structure.

Yup, that's a great point. This article is based on a chapter from my book but this is chapter 6 out of 13 already. In earlier chapters, I discuss how we need to know the content, the goals of the text and what are the user's goals (read, skim, search etc.). Of course, we can't be 100% sure on their goals but we can take an educated guess based on the content we're designing with. Decisions like these should be based on that (+ personal preference of course).

> how emphasized the bullet lists need to be

Exactly. For me, the indented list emphasizes the distinct structural entity, contrasting it against the bulk of the text. This makes lists easier to recognize (especially the short ones in narrow columns, like in your example) while previewing and skimming the reading material. You mention pattern recognition at the start of the article, and this is exactly the thing that makes pattern recognition easier, for me at least. And I would prefer “practically useful” over “typographically correct” every time :-).

>And I would prefer “practically useful” over “typographically correct” every time :-).

That is a good guideline.

Spaced paragraphs are another good example of this. Apparently they "make skilled typographers cringe" but break the text up arguably more clearly, and look fine, at least to an unsophisticated rube like me.

It seems like an odd preference in the first place, though. You write "...the bullets should be hanging so they don’t disrupt the flow of the text," but isn't the point of a bullet list to disrupt the flow of text in order to focus on the individual items? Most hanging bullets I've seen have been a distraction because the content of the list is lost in the body of the text plus there's this heavy element (the bullets themselves) sticking out in the margin.

I also thought so (about hanging bullet points), but it's true that in this example: https://codepen.io/matejlatin/full/dRLRpW/ they IMO look better.

Wait, this example is different, the first list has a 40px left padding, which adds unnecessary space at the left of each bullet point. With a 20px left padding it looks way better than the example below in my opinion.

That's unfortunately the default on browsers (with the default `list-style-position: inside`). So we basically have three choices:

1. The bullets itself are indented. This is ugly and rarely what you want but for some reason the default.

2. The bullets line up with the left edge of the rest of the content; the bulletpoint text is indented, naturally.

3. The bullets are hanging; the bulletpoint text lines up with other paragraphs, as recommended in the article.

Note, that the article's recommendation is wrong, we pretty much never need 3, as article suggests. We make lists for a reason, we want them to be easily distinguishable from the rest of the text. We don't want to disrupt the flow by confusing people when they read a next line and don't yet realize it's a list, because a bullet is not placed where they pay attention to. We want people to realize they are about to read a list and process it appropriately, not as a paragraph. Maybe they even want to skip it entirely for now and continue with the text below to avoid breaking context.

The second example looks terrible on my Note 8. The bullets are in the curved screen edge and actually touch the black bezel, making it look like the bezel has little protrusions encroaching into the screen.

I'd actually say the blame here should be on the Note. It would seem fairly insane for web designers to have to consider that the margins of their pages may be on some bezeled edge.

It's not the curved edge that is causing the problem. The bullets are actually partly off the actual edge of the screen and are being clipped.

If I rotate the device to landscape mode, then the page adds some margin and the bullets aren't clipped any more. I didn't look at the page source in detail - perhaps it is using some kind of media query on the width and reducing the left margin on a narrow screen.

I think the real lesson here is that many of these tricks to achieve some kind of "typographical correctness" are simply a bad idea. Users don't expect it, and it's very likely to break on some device you haven't tested.

People who view your page aren't looking for typographical correctness. They are looking for something easy to read that is familiar and comfortable and works on whatever device they happen to be using. The more tricks you put in, the less likely you are to achieve that.

And honestly, some of this just seems weird, even for print. I don't read much on paper any more, it's all phone/PC/Kindle. But I just thumbed through a bunch of my old books, and none of them follow the "correct" conventions. Bullet lists, (a) (b) (c) lists, and 1. 2. 3. lists are all indented much like the default web formatting. They don't outdent a quote mark at the beginning of a paragraph, the quote mark just appears in the first column like any other character.

I don't know where the author got these ideas about "correctness", because I sure don't see it in my professionally typeset books.

In Chrome, open the dev tools, click the Device Toolbar button near the top left, and in said toolbar set it to Responsive and play with the viewport width (or set it to iPhone 5). It's this particular example page at fault for not realizing that "list-style-position: outside" means that it _will_ overflow which means that for said overflow to not fall outside the viewport, you need a container (which in the case is the body element) having some absolute (not relative to the viewport like this example's small percentage) padding/margin at least as large as the overflow. A properly executed version of the hanging technique would do exactly that.

I disagree. You always leave the edges empty or at least put non-essential information there. There are so many contexts where the edges aren't there, such as:

- print (not really applicable to the web) - projectors/TVs (my TV cuts off ~5% from each edge) - sticky notes on the edge of the monitor - anti-glare screen covers

It also feels cramped to read at the edge of the screen. I like having the negative space there to frame the text.

It may be what you're used to but typographers have been doing that for centuries.

Compact text is a design decision, in many but not all cases, that is unrelated to wasting paper.

I really don't agree with many of the points of the article.

Non indented bullets? That is just wrong on so many levels (pun intended). Negative letter spacing is way less legible IMO. Etc.

Also, the web is a different medium than paper. These old school typographic idioms are becoming less and less relevant every day.

The most used websites such as Facebook or Twitter are proof that users don't really care about old school vertical rhythm.

OTOH I will agree that we still haven't distilled the graphical language of the web. Hopefully in a couple of decades we will have a consensus based on a historical body of practices.

Just because Facebook and Twitter don't do it, then it's not important? Just because hamburgers are the most consumed food in the western world, we don't need restaurants that practice fine cuisine?

I don't think people are aware of the subtitles of typography, so it's nice to see articles like this.

I (web dev) personally just read a book on typography and it was eye opening how much I didn't realize I didn't know.

If your page is mostly memes and 1-2 sentence quips like Facebook and Twitter, sure, this is probably overkill. If your page is text heavy like blogs and documentation, this is your way to stand out.

I'm not very artistic, so my edge is technical. Topography is precisely the type of overlap that can really help my work stand out, so I'd love to see more of this type of content.

It's not important because it really doesn't affect usability, as evidenced by millions of users.

The game has changed and from what I've seen a lot of typographers still live in the paper age.

> The most used websites such as Facebook or Twitter are proof that users don't really care about old school vertical rhythm.

Facebook and Twitter are aggregations of ultra-short-form mixed media content; vertical rhythm is a technique applicable (or at least most applicable) to long-form textual (or at least text-dominant) content.

Thanks for this. I think it looks great.

Hard to get text layout to run true on the many devices that I have tested. I have dropped Internet Explorer as a design target, and Android 4.

These principles were easy enough to follow when I started, 30 years ago, when we set pages for paper and railed against everybody's insistence on (ab)using Microsoft Word.

And now, the browsers render slightly differently, Windows macOS Linux Android iOS need at least some spot-checks to know where the pain points are... And we must adapt to the document width dynamically.

It is a challenge. I don't yet have a sense of measure, how to adjust the information density from small phone to large tablet or desktop.

(And while I'm not looking, Variable Fonts add their own dynamic micro typography tweaks. I just set Opticsl Sizing and punt.)

I still think that vertical rhythm is snake oil.

Yes, it does look neater if you have a striped background and the lines of text align with that. However, you won't use a striped background. There is nothing else those lines of text align with unless you stick the text into multiple columns, which you probably won't do since it's annoying (zigzag scrolling) and pointless (there is no height limit on websites).

I think it's more important to pick distinct headline sizes which still look good when they wrap around. If they don't perfectly align with some imaginary stripe pattern which no one is imaging, then so be it.

I agree. I bought the "Bible" Bringhurst's Elements of Typographic Style and while I found it very interesting, I wasn't that convinced it applied to the web.

Vertical rhythm, which is mentioned in the book, is mentioned because when you print on paper pages you want the lines to overlap on the front and back of the page (so they don't bleed through making it harder to read), and so when the one page right next to the other one aren't misaligned.

I don't really think those apply to the web so much.

That said, it's all too easy in CSS to end up with wonky padding/margin if you don't have a consistent rule about whether to apply it to the top or bottom and by how much. So it's possible to end up with headlines up against body text or big gaps before the first paragraph, etc. I think that's worth fixing.

> if you don't have a consistent rule about whether to apply it to the top or bottom and by how much.

I recommend to use only top margins and to apply them to every element which isn't the first child (`whatever:not(:first-child)`).

This way there is no extraneous spacing at the very top or very bottom, which means the only spacing around the content is the padding of the container.

It's the same idea as the "lobotomized owl" selector (`* + *`). It's just more explicit.

Eh, I've seen a few examples of pages with good vertical rhythm and it's pretty incredible. I think the key is (1) it obviously works with certain types of content better than others (articles, etc), and (2) rigidly adhering to the rhythm is literally impossible merely due to flexible images, so vertical rhythm is best applied as a guideline rather than a rule.

It would be great if you could share some examples!

Great overview! To the note under the second figure under “VERTICAL RHYTHM”: “Unlike in print and graphic design, the baseline grid lies right in the middle of the lines.”

Actually – before DTP – designers did it like that in print as well:

https://archive.org/details/GridSystemsInGraphicDesignJosefM...

That's so cool, I didn't know that. Thanks for sharing!

Article recommends indentation on first line of a new paragraph, but as far as I can tell, they use double (or at least extended) vertical spacing as paragraph seperation, which I consider a long established web standard.

First line indentation is a vertical space saving method for extra seperation between paragraphs, but unlike paper, vertical space (at least once you go beyond the fold) is free on the web.

> Article recommends indentation on first line of a new paragraph,

No, it doesn't, generally.

It notes spaced paragraphs are the norm on the web while indentation is common in print, explains how to do indented paragraphs properly on the web, and then recommends indentation for certain content, specifically “for texts that aren’t broken down into different sections, divided by titles or a lot of images.”

> but as far as I can tell, they use double (or at least extended) vertical spacing as paragraph seperation

And the article is divided by both titles every few paragraphs and frequent images, so it doesn’t fall into the class of content for which it recommends indentation of paragraphs.

My reading was that two following paragraphs are supposed to be indented and paragraphs following headings and breaking images should be spaced.

Guess I was too quick on the trigger there.

Well, it's not as if the reason we have the "standard" of blank lines between paragraphs on the web because early web browsers made a considered typographic decision against first-line indents. :) I don't think there was much conscious design in early web browsers at all with respect to typography and presentation, and this is actually one of the few "standards" established in those early days that we're still following over two decades later. That's not to say that it's a bad standard, just that it's a relatively arbitrary one.

Personally, I prefer fiction, even on the web, to have first-line indents rather than spaced paragraphs, because I simply find it easier to read. This is likely in part because fiction often has much shorter paragraphs when you get into heavy dialogue. For non-fiction, I consider it more of a tossup.

When I took a typography and poster design class in Switzerland this past August, the advice about justification was the opposite: always use justification as a reasonable default that machines can handle and only use ragged right if you have the time to adjust each line by hand. Proper ragged right text should alternate long and short lines in a specific way that algorithms can't handle (deciding if/how to break up words and lines, perhaps even modifying the content to fit). This was coming from Lars Müller and typographers with decades of experience so I'm inclined to trust them, but the alternating ragged lines still looks a bit unnatural at first if you are used to MS Word style text alignment. Once you see it done properly though it's hard to miss when it's done poorly.

Their advice was for physical media while typesetting for the web is clearly a different beast. Trying to emulate print media is a great way to create a poor online experience.

It seems weird to say "And because (as we learned earlier) we read word by word, too much spacing between words breaks this rhythm" as a reason to avoid justified text, and then immediately after say that you can temper bad justification by telling it to auto-hyphenate words, so now "masters" is "mas-\nters" and "artisan" is "artis-\nan". That seems like a much bigger hit to quick readability than the poor justification they were initially complaining about. Their "better" example is easily worse than their "bad" example for readability, I would think, and to my eyes it's a bigger difference than between their "bad" and "good".

The spacing between words is better in the "better" version than the "bad" one, but if the point is that we read by words, then breaking up words across lines seems like a much graver sin than bad inter-word spacing.

Great guide, looks nice on mobile. Most personal blogs on HN could benefit from following this. :)

Thanks, a lot of effort is needed to get things to look nice on different devices these days. It's a challenge.

"Web browsers render justified text very poorly. They don’t have the necessary algorithms to properly set the spacing between words and even individual letters (which is what proper text editors do). That’s why justified texts come with patches of space between the words: rivers of white between the black of text. This makes it very hard to read so justifying text on the web should be avoided at all costs. Web browsers are getting better in supporting hyphenation, though. If you do use justified text, complement it with hyphenation. For now, I recommend not using justified alignment at all."

It's not like a good algorithm hasn't been around since the '70s.

Sure, but that algorithm is O(n^2) which is fine for an offline program that spends a minute turning a TeX file into a PDF, but not OK for a 90s web browser that needs to reflow text in milliseconds while the user is resizing the window or a script is changing the DOM.

What's the algorithm you're referring to here? Just curious

I expect the commenter was referring to the Knuth-Plass line breaking algorithm.

Thanks!

> Horizontal rhythm mostly impacts the legibility, while vertical rhythm impacts the readability of the text

What is the difference between legibility and readability? What do those terms mean precisely? Before this moment, I might have used them interchangeably.

I would guess that legibility is whether it is readable at all, where readability is how easy it is to read. Something that is 100% legible might still not be easy to read - large blocks of 9pt text in a low-contrast grey colour on a white background for instance (and IMO).

Simple straight to the point instructions - I like this post.

If you always need to tweak letter spacing for a font family to look right, ditch it. Don't ever use a badly designed font family.

> https://betterwebtype.com/assets/images/rhythm/078@2x.jpg

the text on the bottom, "better", hurts me physically. just looking at it literally gives me nausea.

They need to eat their own dog food because the heading fonts are awful

This sounds like a comment based on your personal opinion. That's ok, we all have our preferences when it comes to fonts.

A bigger issue is probably the headings not fitting in the page column.

https://screenshots.firefox.com/fsetQcI74tLZbwkd/betterwebty...

[Edit: I probably should switch off webfont blocking when checking an article on fonts]

How so?

Letters are too close. It is hard to read.

IMHO of course!

I'd agree with this, and the article itself makes the point that increased spacing for all caps headings can be beneficial. To me those headings lack horizontal rhythm, they're just black rectangular slabs.

I can recommend the book and especially the email web course.

tl;dr: Start out confounding text and typography. Goes on to present various examples of workaday web typography of the kind most of us get along with and are not ashamed to present. These make the author cringe. Then devolves into pixel-based sizings.

You're right about the pixels. I used them because the examples set in pixels are the easiest to understand. I added a note that outside of these examples, the units used should be EM or REM. Thanks for the feedback!

Doing hateful css typography work today. It's hard enough to make ordinary stuff march in formation - I'm hitting both ceiling and deadline, which somewhat spilled over into the harshness of my comment.

That's ok. I actually wanted to include such note about the units in the first place but forgot (in the book I use REMs and pixels only as fallback but changed to pixels in the article for simplicity). Your comment reminded me to add this note in. And I know how frustrating it can be when working on typographic details on the web. Are you having any specific problems?

Nothing too specific, no, but thanks. Your tone and approach much appreciated.

"Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), and adjusting the space between pairs of letters (kerning)."

https://en.wikipedia.org/wiki/Typography

My personal guide to web typography:

Don't. Use the user's fonts.

Don't be afraid actually read the article.

None of it is specific to custom web fonts (@font-face). Rather, it is about text spacing, indentation, justification, etc.

My personal guide about web typography:

Don't change the user's default text spacing, indentation, justification. Respect his and his system's choices.

> Don't change the user's default justification.

I don't know about you, but I set all web pages to be right justified. /s

I'm willing to bet that 99% of people don't set this, and the changes are improvements.

What do you mean? Most computers on the planet have en-US Keyboards attached....

As much right as you have to read content as you wish, the publisher has to present it as she wishes.

This is a guide for people who want to make use of thousands of years of accrued typographic culture to get their message across usefully and beautifully.

- ed

Well, perhaps a thousand or so years. I'm unsure how deep into Roman times good 'type' style lettering stretches.

It would be great if the system's default choices were something more reasonable than what some random Netscape engineer decided circa 1995. The user's choices? I'm sure there are dozens of users on the net who have customized their browser's default styles.

Yes, we should absolutely respect the settings in the "typography" preference pane that all browsers have, where all users lovingly set their preferred text spacing, indentation, and justification. Oh wait! There isn't one. In fact, most users not only haven't explicitly made these choices, they can't explicitly make these choices. Are you arguing that the "system's choices" are some bastion of well-considered design sensibility that we violate at our peril? Really? Nuts to that.

This is a fundamental problem with web design at the moment. Every designer puts their awesome looking font in, but ultimately the web browser renders what it wants, and to get a good pagespeed score you need to render local fonts.

It ends up being a trade off between performance and UI. But why can't we have both? Why can't the user say "always use x and y fonts because I know best" and give the designer the opportunity to put the fonts they want in without impacting performance.

Users can do that, and it is [still!] a first class (ie. not hidden in about:config, but available in preferences) configuration option in Firefox.

Part of a web design job should be testing your creation under different user selectable options. Like zoom, font selection, screens of various quality, etc. But most designers still treat web browsers, like it's a piece of paper they're in complete control over.

Browsers should include popular fonts. Currently there are not enough good cross-platform fonts, that's why designers want custom fonts. Or something should be done for better caching of custom fonts, so if you've used your browser for few weeks, you won't have to load any custom font ever, because they are already cached.

It's easy to disable loading of custom fonts in the browser and set default font to what you want. The only thing I'm missing is browser option for minimal strength of small text, because some designers just don't think about people and combine weight:200 with color:#444 or whatever for body text.

Unfortunately that is not a good option because many designers also use fonts for icons and they all display as squares.

That's the reason they shouldn't abuse fonts to make icons, and use SVG instead, or at least use standard unicode symbols.

I block fonts with uBlock and see this all the time. Usually the icons are pointless and I don't miss them. In bad cases I'll toggle fonts on and reload the page.

Reply on news.ycombinator.com