Just in case you’ve missed this one, Matej Latin is once again kind enough to share another article of his Better Web Typography for a Better Web
This time, with a heavy focus on typography rhythm, especially for the Web. Horizontal rhythm mostly impacts the legibility
, while vertical rhythm impacts the readability of the text and establishes a sense of visual hierarchy.
Achieving the perfect vertical rhythm is often considered the holy grail of design on the Web; often an impossible task for truly responsive and dynamic content, but Matej shares the thinking behind it, some mathematical considerations and even some CSS/Sass to help us get started. But first: why?
Rhythm in typography is just like rhythm in music. A text can either flow like a masterpiece symphony performed by an in-tune orchestra, or it can be a disjointed flimsy song by a one-man band wannabe. Just like in music, where order is more pleasurable to our ears than chaos, so is a well-designed text with an established rhythm easier to read and more enjoyable to consume by our eyes.
I’ve always found the music analogy to be perfect when talking about rhythm and typography. The patterns, the predictability of visual hierarchy, the flow of information; it all applies to text.
Horizontal Rhythm, aka letter-spacing / alignment / kerning
Often overlooked by web designers, horizontal rhythm can greatly impact a visual design. Letter spacing can have a huge influence on big type such as headlines; kerning can help with tricky typographical combinations, and alignment is a huge step for readability. On letter spacing:
There are two occasions when letter spacing can have a positive impact. Headings tend to be larger and heavier than the body text. Because of their larger size, the spacing between the letters also looks optically larger than at smaller sizes. In this case, it’s a good idea to slightly reduce the letter spacing. We’re talking about 3–5%, not more.
Alignment is always a tricky one for the web. Luckily, in 2018 browser support for text-hyphenation isn’t so bad, so justification in text can be used a bit more often than before, avoiding huge distracting white space gaps in lines like we’ve had before. Again, Matej:
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.
Matej also covers the following topics with some detail: hanging punctuation, paragraph indenting, and list spacing. But for now, let’s finish with the crème de la crème: vertical rhythm.
Thinking about vertical rhythm is all about working with a rhythmical unit, typically line-height in web design. All values for spacing and margins of things revolving around text need to be even multiples of this “magical unit”, in order to create that even scale between typographical elements.
If, let’s say, our line-height for body copy is 30px, an option to style a H3 heading could be:
line-height: 60px; // = 2 × 30px (main body text line-height)
margin-top: 90px; // = 3 × 30px
margin-bottom: 30px; // = 1 × 30px }
This could result in a similar typographical flow that Matej provided, as you can see in this image
. Here’s a top tip regarding margins:
A guideline for heading margins that I like to stick with is that the bottom margin should be noticeably smaller than the top one. A lot of websites make the mistake of having equal top and bottom margins for headings, so they float right in the middle between the blocks of text
There’s a lot more tips, both for the Web and in Sketch, on how to work and think about vertical rhythm in typography. Highly recommended read and bookmark!