
A guide to rhythm in web typography - matejlatin
https://betterwebtype.com/rhythm-in-web-typography
======
vladdanilov
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...](https://user-
images.githubusercontent.com/3129436/47068394-d58fda00-d1f4-11e8-81c4-1adc13bcb9a2.png)

[2] [https://user-
images.githubusercontent.com/3129436/47068393-d...](https://user-
images.githubusercontent.com/3129436/47068393-d58fda00-d1f4-11e8-9d3e-9b77e67c855b.jpg)

[3] [https://user-
images.githubusercontent.com/3129436/47068392-d...](https://user-
images.githubusercontent.com/3129436/47068392-d58fda00-d1f4-11e8-885e-da1f334d2d9b.png)

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

------
acconrad
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

~~~
Ezku
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?

~~~
acconrad
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.

------
z3t4
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.

~~~
matejlatin
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.

~~~
temo4ka
> 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
>And I would prefer “practically useful” over “typographically correct” every
time :-).

That is a good guideline.

~~~
djrobstep
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.

------
pier25
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.

~~~
winkywooster
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.

~~~
beatgammit
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.

------
watersb
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.)

------
tomatsu
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.

~~~
losvedir
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.

~~~
tomatsu
> _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.

------
Udo_Schmitz
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...](https://archive.org/details/GridSystemsInGraphicDesignJosefMullerBrockmann/page/n57)

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

------
wodenokoto
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.

~~~
dragonwriter
> 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
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.

------
mattbierner
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.

------
kbp
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.

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

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

------
mcguire
" _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.

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

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

~~~
bbleciel
Thanks!

------
forapurpose
> 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
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).

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

------
jxy
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.

------
jcelerier
>
> [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.

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

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

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

[https://screenshots.firefox.com/fsetQcI74tLZbwkd/betterwebty...](https://screenshots.firefox.com/fsetQcI74tLZbwkd/betterwebtype.com)

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

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

------
interfixus
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.

~~~
matejlatin
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!

~~~
interfixus
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.

~~~
matejlatin
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?

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

------
andun
My personal guide to web typography:

Don't. Use the user's fonts.

~~~
fabricexpert
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.

~~~
vbezhenar
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.

