

Vertical Rhythm in Typography - pjungwir
http://blog.8thlight.com/chris-peak/2012/12/30/vertical-rhythm.html

======
briansmith
This is some advice from "The Elements of Typographic Style" that is often
better to ignore on the web. Vertical rhythm is mostly unimportant EXCEPT when
you have text printed back-to-back on paper (you must ensure every line of
text aligns so that bleed through isn't as distracting), or when you have
multiple columns of text or facing pages. That is, it is really important for
books and newspapers.

Notice that the links in the left-hand column do not use the same vertical
rhythm so the baselines of the links do not align with the baselines of the
main text. That is the type of bad effect that vertical rhythm is supposed to
help avoid. But, I bet most visitors didn't notice it and weren't bothered by
it.

Most implementations of "vertical rhythm" on the internet for a single column
of text result in vertical gaps that are unnecessarily large. That is,
implementing this concept is often counter-productive for must web pages.
Notice in this blog post that there is too much space about the "Getting to
work" heading, for example.

------
pjungwir
Someone mentioned this site in a comment thread recently, and I thought others
would be interested. Also I have a question if anyone can answer it:

In the author's first image, where the horizontal lines don't line up with the
text, why not just draw the horizontal lines in a different place? As far as I
can tell he doesn't explain why he drew the lines where he did.

~~~
vitovito
> In this example I picked 20px to make things easy on the eyes.

Second sentence after "PARAGRAPHS AND BODY TEXT".

Those lines are 20px apart so that, in his opinion, text sitting within those
lines would be comfortable to read.

If you're rendering typographic baselines in a browser, then you're drawing
the lines every 20px starting with 0,0 in the upper left corner of the browser
viewport, so you want your text to line up with that.

~~~
scott_s
In other words, he decides the line height (his _rhythm_ ) first, then fits
his text into it. I was not clear on that point either.

The problem I have, then, is that he never really explains _why_ that's a good
approach, or from where one would pick a line height to key off from. How will
thinking in terms of rhythms be an improvement over fiddling with font sizes
and line heights until it looks "right"?

~~~
mattdw
"In my experience a line height of 1.5 x the base font size is a great place
to start, and is usually right on target."

You start with your base font size, you choose an appropriate line-height for
that (based largely on designerly notions like visual weight, column width,
contrast, intuition, etc.) then that lineheight (in pixels) becomes your
rhythm.

The idea is that elements like headings, short quotes, possibly images are
less sensitive to line-height than body copy, so it's okay to fudge them a
little bit to keep the overall rhythm intact.

------
unconed
This is great advice, but there is no longer any need to do use cumbersome ems
for this. Just use pixels.

