
Why Is Vertical Rhythm an Important Typography Practice? - zellwk
http://zellwk.com/blog/why-vertical-rhythms/
======
Chris_Newton
It can be interesting to explore what makes good typography, but we should be
cautious. Typography is a field surrounded by an awful lot of dogma but very
little science, particularly in the context of web pages. In this case, while
I appreciate the author’s efforts, I will respectfully disagree with the
conclusion: I _don’t_ think a strict vertical rhythm matched to a baseline
grid is a good idea for a lot of text on the Web.

Unlike a printed page, there is no concern on a screen about text on the other
side showing through. There is therefore no possibility that mismatched
baselines will reduce the contrast in leading areas between lines as a result.

For a single-column article such as the one we’re discussing here, there is no
concern about whether text in adjacent columns may look untidy if the
baselines are slightly misaligned. Nor is there any concern that a reader may
inadvertently continue reading across columns if baselines do line up and
there isn’t a clear enough separation between columns. (However, these might
be relevant concerns in other layouts.)

But mostly, by trying to keep to some artificial mathematical pattern, we
might actually be making the reader’s experience worse. Spacing between
paragraphs usually winds up much wider than it traditionally has been when
this kind of strict baseline grid is present. The same goes double for
headings being moved further away from the material they introduce. We know
human perception is influenced by proximity, and if spacing between related
items becomes too great, that connection can start to weaken. That might
become an issue here. (If you’re familiar with your browser’s developer tools,
you can go ahead and try this for yourself: there are p+p and h2+p rules for
this article, which you can vary to see whether you prefer tighter spacing
even though it doesn’t follow the baseline grid.)

Despite huge amounts of advocacy, there seems to be little evidence that the
kind of strictly uniform baseline grid recommended in this article actually
makes anything better. Does it improve readers’ subjective personal reaction
to a text? Does it improve objective reading performance in some way? I’d be
interested in any relevant research, and very willing to revise my opinions if
proper studies say I’m wrong, but sadly in typography hard data is often hard
to find.

~~~
TheOtherHobbes
I think typography, like any other aesthetic scheme, is probably irrelevant to
1/3 of the population, mildly interesting to another 1/3, and only noticed by
the third that has a feel for it.

(Numbers 100% made up and metaphorical, not scientific.)

I'm one of those who cares. I used to flick through Letraset catalogs before I
even knew what typography was, because I thought the different effects of the
letter shapes were fascinating.

But I'm perfectly fine with the understanding that a lot of people really
don't notice the difference between SvelteStylishFontX and Comic Sans.

So... it's hard to get clean data about this, because if you take the
population as a whole you may not see much of an effect.

But in web design, your target audience won't usually be the population as a
whole. Design effort matters if your audience is more likely to include those
who appreciate it.

Finding and testing that audience scientifically is damn near impossible. So
if you think it may matter, it's best to add design sugar and then check the
analytics to see what happens.

That's going to tell you a lot more about _your_ customers than a theoretical
study in a journal.

~~~
Supraperplex
> and only noticed by the third that has a feel for it.

Everybody feels something. It's just that most people don't realize what it is
what they are feeling. But subconsciously they feel a difference. And that
diference may (or may not) influence the buying decision.

~~~
Chris_Newton
It’s also interesting that in studies of typographical variations like fonts
and line lengths, significant differences have been found in metrics like
reading speed and in measured retention, even when the readers either did not
realise there was a difference or even subjectively preferred a style that was
objectively inferior in some ways. Moreover, while a lot of readers may not
notice or distinguish details to the extent that a trained designer would,
there are often very clear and consistent patterns in their general
preferences.

So while it’s often true that the best typography is “invisible”, that doesn’t
mean it has no effect on either the reader’s subconscious perception of the
text or on more practical matters like how quickly and accurately they will
read it.

------
darkerside
I don't understand the circle analogy at all. I honestly had to pause and
figure out if the article had become a satire at that point.

I also still don't get whether there is anything special about 24px, or if the
baseline is an arbitrary value. The picture of the grid, divided into 24px
chunks, did not clarify things.

~~~
scott_s
That example fell flat for me as well. A much better example would be two sets
of circles: one where they are all evenly spaced from one another, and another
where they have random spacing from one another. I anticipate I would "feel"
much better about the orderly spaced group.

For me, the given example felt borderline pseudo-scientific.

------
scott_s
I prefer the text on the left, which is the "Before" version, which I assume
is the one I'm not supposed to prefer. (The article never explicitly says.)
Personally, I don't like it when spaces between lines of text are too large.
It does not feel "professional" or "calm" to me, it feels loose, disorganized,
arbitrary and lacking content. Perhaps I'm just used to dense text.

------
stuart78
This is one of my most common annoyances on web, and I am glad more and more
people are taking an interest. For those with an interest in a deeper
understanding of typography in general, I can't recommend The Elements of
Typographic Style enough. Web is still primitive in the way it handles a lot
of this, but there are some shining examples out there. The New Yorker is my
favorite of these. To understand why, find a text hyperlink containing a
descender (g,y,j,q,p) and observer how elegantly it is handled.

[http://www.amazon.com/gp/product/0881792128/ref=pd_lpo_sbs_d...](http://www.amazon.com/gp/product/0881792128/ref=pd_lpo_sbs_dp_ss_1?pf_rd_p=1944687702&pf_rd_s=lpo-
top-
stripe-1&pf_rd_t=201&pf_rd_i=0881791326&pf_rd_m=ATVPDKIKX0DER&pf_rd_r=04FW8H29AX3XT11MQR1H)

[http://www.newyorker.com/news/news-desk/is-the-islamic-
state...](http://www.newyorker.com/news/news-desk/is-the-islamic-state-
hurting-the-presidents-point-man-on-isis-speaks-out?intcid=mod-latest)

~~~
dfc
What am I supposed to be observering? In the image below my mouse was hovered
over the last link. When the descender is largely perpendicular to the text,
like p or j, there is a nice balance between what is below and what is above
the underline. But with g, the most frequently appearing descender in english,
the look is not as nice.

[http://i.imgur.com/IVOHfIg.png](http://i.imgur.com/IVOHfIg.png)

~~~
Chris_Newton
In their links and headings within the main body text, they use a technique
based on text-shadow and background-image in the CSS to draw underlines that
don’t clash with the descender shapes. (Look for attributes in the HTML
starting “data-smart-underline”.)

For whatever reason, they don’t seem to be using the same technique with the
links in the area you screen-capped there.

------
sago
Ugh. This doesn't show the benefits of a baseline grid, but of good interline
spacing (leading in print typography jargon). Baseline grids are used in print
for _multicolumn_ layout, so you don't get lines that are vertically offset
from their neighbours in nearby columns.

Blank-line typography is a big problem with baseline grids. A full line-height
gap between paragraphs is disasterous for vertical rhythm. Any paragraph
spacing is suspicious (there are purists, of which I'm not one, Jan
Tschischold particularly was scathing), but if you have, say 16/24 spacing
then add a blank line between paragraphs, you're losing any kind of coherence,
I think. For that reason baseline grids are either set with indented-paragraph
markings (normal in print) or set with rather close leading to keep paragraphs
from getting lost.

So a bit of a weird post, I didn't find it clear, typographically beautiful,
or giving good advice.

------
niccaluim
I'm not usually one to bang the "everything must be scientific" drum, but the
claims some typographers make seem to be so unscientific as to be absurd. I
know that much of typography is subjective, but still: In this case I prefer
the text on the right, but how do we know this is due to "vertical rhythm" and
not simply increased space between lines? (Or some other effect.) This would
be easy to test.

------
matt4077
Note the related concept of a modular scale
([http://alistapart.com/article/more-meaningful-
typography](http://alistapart.com/article/more-meaningful-typography),
[http://www.modularscale.com/](http://www.modularscale.com/)) which offers a
bit more flexibility (i. e. if everything has to be a multiple of 18px, your
H1s are going to be REALLY BIG.

------
Jordrok
I just don't understand the obsession over typography. It all feels like
endless bikeshedding to me. All those words to explain the concept and I just
can't muster any strong feelings about how the text looks before or after.

~~~
conceit
_Design is best when you don 't notice it._ Maybe that applies here.

edit: I actually share the sentiment sometimes, but a couple of subtle changes
can make a big difference overall. We are just looking at a small change and
the example before seems _heavier_ on the eyes. The lines have less
whitespace, more "ink" and thus are overall darker. it's not enough to be
unreadable and could probably be countered with a different font, but then the
individual character is too light again. As with everything, there might be an
optimal ratio of proportions.

We are rational people after all. On the other hand, we'd be pretty irrational
if we'd willingly let content be distracted by the layout.

The changes are subtle. That's why it's called _fine art_ , I guess.

------
Etheryte
Honestly, this "A or B" comparison, both look equally good to me.

~~~
anotheryou
I think what feels right is best and best found by trial and error (but
learned intuition can get you to the goal faster).

I'd do it like this (mine on the right):
[http://screencast.com/t/JxsySVfG](http://screencast.com/t/JxsySVfG)

Less space between blue title and actual headline and smaller paragraph spaces
within normal text, so reading flow is not disturbed by it.

------
6stringmerc
Quite a super explanation and if it helps spread the consideration of the
formatting into more sites, that'd be great. The technical nature of the piece
itself seemed to fit the subject as well.

------
bchjam
nice!

Logic & Design also has a wonderful chapter on rhythm in visual design

[http://www.amazon.com/Logic-Design-Revised-Science-
Mathemati...](http://www.amazon.com/Logic-Design-Revised-Science-
Mathematics/dp/1592288499)

------
knughit
In summary:

Snap to grid

Snap to grid

Snap to grid

