Why Is Vertical Rhythm an Important Typography Practice?

http://zellwk.com/blog/why-vertical-rhythms/

by zellwk • 10 years ago

93 27 10 years ago

zellwk.com

bchjam• 10 years ago

nice!

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

http://www.amazon.com/Logic-Design-Revised-Science-Mathemati...

matt40772• 10 years ago

Note the related concept of a modular scale (http://alistapart.com/article/more-meaningful-typography, 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.

6stringmerc• 10 years ago

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.

stuart78• 10 years ago

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.newyorker.com/news/news-desk/is-the-islamic-state...

dfc• 10 years ago

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

Chris_Newton3• 10 years ago

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.

darkerside• 10 years ago

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.

matt40772• 10 years ago

The 24px are somewhat arbitrary, based on the idea that 18px/1.25 line height are comfortable to read.

The circle is trying to illustrate that repetition sometimes feels oddly satisfying to us. I don't think the text does a good job of explaining it. I"m not sure there even is a known explanation, but it's certainly a phenomenon everywhere from dance music to architecture. I'd venture a guess and say the brain actually hates all the pattern matching it has to do and enjoys stumbling on simple rules that explain something.

scott_s2• 10 years ago

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.

Chris_Newton3• 10 years ago

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.

RobertKerans• 10 years ago

++ on this. I used to be quite dogmatic about baseline rhythm when the distance between me being a print designer and a developer was a lot shorter, responsive was the thing that finally killed it for me, for the better. I'd just add though that the almost pseudoscientific magic numbers part of it is more than a little silly, for heavily text-based sites the general principles + a good font can produce aesthetically very beautiful typography without a great deal of effort (just the normal plug the ratios into a stylesheet, and then take the base value and reuse it everywhere for margins/padding etc)

ThomPete• 10 years ago

Agree

For web it's more important to have vertical element rhythm.

TheOtherHobbes• 10 years ago

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• 10 years ago

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.

vacri2• 10 years ago

I found your comment

much more difficult to read

than the parent comment's

tighter paragraphs.

This was a problem I also had with

the article's preferred option;

the text is too spaced out

which can make following it

difficult. I also don't buy into

this idea that if you don't

like widely spaced text,

then you're someone who

doesn't 'get' typography.

But I do completely agree

with the idea that you should

be designing with your intended

audience in mind.

scott_s2• 10 years ago

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.

sago• 10 years ago

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.

Jordrok• 10 years ago

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.

goldenchrome• 10 years ago

Typography is very important but it's one of the first things that designers learn about so it's accessible low hanging fruit that gets upvoted often. It's made worse by the fact that design isn't as rigorous as science so it's harder to completely invalidate articles like these. These kinds of posts are similar to debates about how you should comment on code or what version control software you should use. It matters, but it gets a disproportionate amount of press compared to its importance.

conceit• 10 years ago

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• 10 years ago

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

anotheryou• 10 years ago

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

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

niccaluim• 10 years ago

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.

knughit• 10 years ago

In summary:

Snap to grid

Why Is Vertical Rhythm an Important Typography Practice?

Related Stories