6 ms·
A guide to rhythm in web typography
- z3t4 8y agoI 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.
- matejlatin 8y agoThat'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.
- arendtio 8y agoI 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.
- matejlatin 8y agoYup, 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).
- temo4ka 8y ago> 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 :-).
- matejlatin 8y ago>And I would prefer “practically useful” over “typographically correct” every time :-). That is a good guideline.
- djrobstep 8y agoSpaced 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.
- deleted 8y ago[deleted]
- uhoh-itsmaciek 8y agoIt 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.
- garretraziel 8y agoI also thought so (about hanging bullet points), but it's true that in this example: https://codepen.io/matejlatin/full/dRLRpW/ https://codepen.io/matejlatin/full/dRLRpW/ they IMO look better.
- topoftheforts 8y agoWait, 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.
- Sharlin 8y agoThat'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.
- zzzcpan 8y agoNote, 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.
- Stratoscope 8y agoThe 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.
- sureaboutthis 8y agoIt 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.
- vladdanilov 8y agoJPEG 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-d58fda00-d1f4-11e8-81c4-1adc13bcb9a2.png https://user-images.githubusercontent.com/3129436/47068394-d... [2] https://user-images.githubusercontent.com/3129436/47068393-d58fda00-d1f4-11e8-9d3e-9b77e67c855b.jpg https://user-images.githubusercontent.com/3129436/47068393-d... [3] https://user-images.githubusercontent.com/3129436/47068392-d58fda00-d1f4-11e8-885e-da1f334d2d9b.png https://user-images.githubusercontent.com/3129436/47068392-d...
- microcolonel 8y agoNot 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).
- bloak 8y agoSee also: http://lbrandy.com/blog/2008/10/my-first-and-last-webcomic/ http://lbrandy.com/blog/2008/10/my-first-and-last-webcomic/
- matejlatin 8y agoThanks for sharing this, will make sure to use PNG8 in the future!
- spiralx 8y agoThat annoyed me as well, seems like the worst possible choice of format and quality for the given images.
- interfixus 8y agotl;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.
- matejlatin 8y agoYou'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!
- interfixus 8y agoDoing 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.
- matejlatin 8y agoThat'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?
- interfixus 8y agoNothing too specific, no, but thanks. Your tone and approach much appreciated.
- paulddraper 8y ago"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 https://en.wikipedia.org/wiki/Typography
- quickthrower2 8y agoThey need to eat their own dog food because the heading fonts are awful
- matejlatin 8y agoThis sounds like a comment based on your personal opinion. That's ok, we all have our preferences when it comes to fonts.
- treerock 8y agoA bigger issue is probably the headings not fitting in the page column. https://screenshots.firefox.com/fsetQcI74tLZbwkd/betterwebtype.com https://screenshots.firefox.com/fsetQcI74tLZbwkd/betterwebty... [Edit: I probably should switch off webfont blocking when checking an article on fonts]
- paulddraper 8y agoHow so?
- quickthrower2 8y agoLetters are too close. It is hard to read. IMHO of course!
- Firadeoclus 8y agoI'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.
- andun 8y agoMy personal guide to web typography: Don't. Use the user's fonts.
- paulddraper 8y agoDon'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.
- andun 8y agoMy personal guide about web typography: Don't change the user's default text spacing, indentation, justification. Respect his and his system's choices.
- paulddraper 8y ago> 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
- hazz99 8y agoI'm willing to bet that 99% of people don't set this, and the changes are improvements.
- Already__Taken 8y agoWhat do you mean? Most computers on the planet have en-US Keyboards attached....
- detritus 8y agoAs 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.
- watersb 8y agoThanks 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.)
- deleted 8y ago[deleted]
- jcelerier 8y ago> https://betterwebtype.com/assets/images/rhythm/078@2x.jpg 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.
- hpwrg 8y agoSimple straight to the point instructions - I like this post.
- jfornear 8y agoGreat guide, looks nice on mobile. Most personal blogs on HN could benefit from following this. :)
- matejlatin 8y agoThanks, a lot of effort is needed to get things to look nice on different devices these days. It's a challenge.
- d55 8y agoI can recommend the book and especially the email web course.
- tomatsu 8y agoI 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.
- losvedir 8y agoI 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.
- tomatsu 8y ago> 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.
- tenaciousDaniel 8y agoEh, 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.
- Udo_Schmitz 8y agoGreat 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/GridSystemsInGraphicDesignJosefMullerBrockmann/page/n57 https://archive.org/details/GridSystemsInGraphicDesignJosefM...
- matejlatin 8y agoThat's so cool, I didn't know that. Thanks for sharing!
- acconrad 8y agoI'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
- Ezku 8y agoI 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?
- acconrad 8y agoThat'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.
- munificent 8y agoI 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.
- jxy 8y agoIf 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.
- pier25 8y agoI 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.
- winkywooster 8y agoJust 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.
- beatgammit 8y agoI (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.
- pier25 8y agoIt'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.
- dragonwriter 8y ago> 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.
- forapurpose 8y ago> 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.
- spiralx 8y agoI 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).
- wodenokoto 8y agoArticle 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.
- dragonwriter 8y ago> 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.
- wodenokoto 8y agoMy 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.
- chipotle_coyote 8y agoWell, 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.
- mcguire 8y ago"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.
- munificent 8y agoSure, 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.
- bbleciel 8y agoWhat's the algorithm you're referring to here? Just curious
- mattbierner 8y agoWhen 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.
- kbp 8y agoIt 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.