While trying to get a deeper understanding of how exactly the vertical-align CSS property works and in what conditions does it trigger alignment on an element, I stumbled upon the topic of rhythms in design in terms of layout and typography. As frontend CSS developers I believe we must have a fair understanding of this idea, specifically vertical rhythm (and a bit of horizontal rhythm as well) in web typography.

I will not try to explain the subject myself because there are some other folks who have done a fantastic job, I’ll just try to summarise my understandings from the following resources and try to simplify things down further:

• Why is Vertical Rhythm an Important Typography Practise ? (Zellwk)
• Rhythm in Web Typography (Better Web Type or BWT)
• CSS Baseline: The Good, The Bad And The Ugly (Smashing Magazine or SM)

I highly recommend reading these articles in the order listed for much deeper insights. In the following sections I will try to go through vertical rhythm first, followed by how it differs from horizontal rhythm. Also we will be mostly talking in the context of web (for frontend devs), not print or graphic design.

What is Vertical Rhythm and Why is it needed ?

The comparison of rhythm in design, be it vertical or horizontal, is generally done with rhythm in music. Rhythm in design is affected by layout and typography (typefaces and fonts). While processing a musical piece, our brains find it good, professional, satisfying, calming (and possibly other positive adjectives) when there’s a certain rhythm to it. Similarly while processing pieces of text or information on a printed page (hardcopy) or in digital form, our brains does a better job when the information laid out has a specific rhythm in terms of the spacing and structure.

In terms of CSS, all this is supposed to mean is that while laying out blocks of texts and possibly other content pieces on a page the margins, paddings, borders, line heights of the text should not be random. What kind of content pieces are we talking about though ? A good example is the homepage of a blog that lists articles with repeating blocks of post headings followed by post summaries. Ideally the layout should have a specific framework or math behind it so that the information or content it presents can be consumed by our brains in the most optimum way – easy to read, process and understand.

Here’s an image (taken from the Zellwk article linked above) that shows what happens when vertical rhythm is added to a block of text:

At this point you may think – I thought the term “vertical rhythm” would be a complicated topic and involve lots of work to achieve, but based on the image above, it seems pretty simple ?! – and yes, you may be right to some extent. It’s just a set of best principles that we should follow for our website content design.

In practical terms, as a designer or developer, one of the tools that we can use to add rhythm to your content layout is grids. The image above has used grids on the left side content to add a good amount of spacing as seen in the right side content. Although most of the designers would already know this, but if you’re confused about what grid concept I’m talking about, then:

1. Watch this 10min video quickly that’d do the explanation much better than this article can.
2. Watch this 6min video to understand the principles behind why grids are useful on a general level.

So just keep this in mind for now, the vertical lines in a grid (or baselines) are what we use to achieve vertical rhythm. We’ll look at the implementation a bit but before that, let’s talk a bit more on the whys and hows.

This is what the Zellwk article says on the topic:

Vertical Rythm is keeping spaces between elements on a page consistent with each other. Vertical rythm is created or maintained with the help of a baseline. Baseline (provided by grids) is a common denominator often used to create consistent spacing.

Laying out the content with right amounts of spacing is achieved easily with a grid which should be just considered as a tool. This tool helps achieve the principle of repetition, which is basically repeating anything multiple times – typeface, line, shape, etc. What does repetition do ?

Repetition breeds familiarity. It has the ability to make things feel as if they belong together. It gives the feeling that someone has thought it all out, like it’s part of the plan.

Layouts with repetitions feel all positive and easier for our brain to process. So vertical rhythm is about laying out a consistent pattern with repetition that leads to better familiarity. Repetition of what though ? Repetition of the vertical lines from the grid we just talked about earlier:

If this is still a confusion, then watch this design principles video on repetition where you can understand the concept a lot more visually. It clearly shows how and why repetition is useful with practical examples and when to break it as well (for elements like call to actions).

In simple words, if a piece of content lays out perfectly on a grid with the baselines as the bases of different lines and elements of the layout, then we can easily achieve rhythm.

To break it further, we’re able to achieve a consistency or a rhythm when we’re able to make sure that:

1. Our textual content sits on the grid lines (baselines) and
2. We take the space between two baselines (also known as leading) and use that amount or a multiple of that amount everywhere else in our layout in terms of margins, paddings, heights, etc.

A specific piece of content, for instance a header, can consume more than one line (or line box in CSS) which is equivalent to the space between two baselines. This is why in the second point above, I said “multiple of that amount”. This is also illustrated in the image right above.

I really like how the SM article explains the importance of the rhythm:

Why is vertical rhythm important? Well, it has to do with how our mind works and how we use pattern recognition to decipher the world around us. Without going into the subject at length (other people much smarter than me would be more suited to that task), one can say that pattern recognition allows the human brain to store similar or identical impressions (such as primary shapes or colors) in a pattern library and retrieve them for quick analysis of new stimuli. This is the reason why we don’t look at individual letters when reading, but instead recognize whole words at a time (by pulling previous instances of the same pattern from our memory bank). It’s also the reason why we instantly recognize the letters themselves (“A,” “B,” “C,” etc.), even if the font, size and color vary — the basic shapes are stored in our pattern library.

Of course there will be times when the rules of grids will have to be broken, for instance when there are images to be laid out. The BWT article suggests this for such cases:

You may be questioning what happens when an image breaks the vertical rhythm. It’s a good question. Images come in various sizes. It’s impossible to expect that we’ll be able to control their height on every occasion, especially for large-scale websites. What do we do then? My suggestion: let it be. Use the baseline grid as a guide, not as a restraint. Your text and your page proportions are still rhythmically correct. It still has an established visual hierarchy. Large solid blocks of content, which images certainly are, don’t visually break the rhythm apart. It may break your grid, yes, but at the end of the day it doesn’t matter. The grid is just a tool.

The most important part stated above is – let it be. Use the baseline grid as a guide, not as a restraint. Grids are just a tool, ok ?

So in essence, this entire concept is about good design. Design which can be consumed better by humans.

Baseline Alignment Differences between Print and the Web

Before we begin to understand how to implement good rhythm in our website via CSS code, let’s make sure we understand one thing clearly – there’s a difference in the baseline grid in print (and graphic) design and that on the web.

In print designs (or even the design work done in sketch, figma or photoshop), the line of text is made to sit nicely on the baseline where as on the web a piece of text does not sit on the baseline. It is kind of placed between two baselines, in the center. If you use dev tools to inspect a piece of line with line height greater than the actual text height, you’ll know what I mean. As frontend developers with some amount of experience, we should already be familiar with this.

Does this fundamentally affect or change our understanding of rhythm or its implementation on the web ? Not really. We can acknowledge the nuance and move forward unaffected. Just make sure if you were to imagine a grid overlay atop your content, then all lines and spacing happen accordingly, i.e., with the content sticking in between baselines. Its about maintaining the default rules consistently!

How Do I Implement this in my Website as a CSS Dev ?

Let’s quickly go through an illustration first that clarifies a few typography terminologies:

While implementing rhythm, it is first important to determine the grid size or the space between the baselines which is also known as leading (as illustrated above). This size is logical or semantical. If you want you can also call it the vertical rhythm spacing for better intuition. Once determined though – 8px, 12px, 16px, 22px or any other value of choice – just make sure all your vertical layout related CSS properties are set as a multiple of this grid size. Our first main focus should be setting the line heights of different elements, because line height depicts the leading or the height between two baselines which is same as the grid size decided upon.

Few things to note here:

1. You can always change the decided grid size later as per your requirements, so it’s not set in stone.
2. When designing for web, as we discussed earlier, the lines will not fit right atop the baselines. Instead they will hover in between because that’s how web browsers render by default.

With the base size decided, let’s see how we would use that in our CSS code to specify the rhythm for a heading and a related paragraph. I’ve setup a demo for this as well where you can click the Toggle Rhythm button to see visual differences.

:root {
  /*
     Our vertical rhythm spacing/grid size/baseline grid size
     I keep using these terms inter-changeably
  */
  --baseline: 8px;
}

h1 {
  font-size: calc(var(--baseline) * 4); /* 32px */
  line-height: 1.5em; /* 32*1.5 = 48px */
  margin: 1em 0; /* 32*1 = 32px */
}

p {
  font-size: calc(var(--baseline) * 2);
  line-height: 1.5em; /* 16*1.5 = 24px */
  margin: 1.5em 0; /* 16*1.5 =24px */
}

This demo above should give you a fair understanding of the implementation process. When you click the Toggle Rhythm button and see increased spacing, that’s when the rhythm is in effect. You may think that with lesser spacing also there is some rhythm, but mathematically browsers generally do not set default line heights, margins, etc. in the same proportion as any given grid size (8 point, 12 point or whatever). In the demo, you’ll notice:

• Heading taking up 6 baselines.
• Paragraph taking up 3 baselines.
• The browser positions them somewhere in the middle according to its rendering logic and we don’t have to think much about that.
• The margins and height on the button is also set according to the same baseline grid size.

A couple of things to keep in mind here:

• You’re free to set the font-size for any element (h1, p, etc.) to any value of your choice. Just make sure the line-height is greater than that so that the text fits inside the line box. For good designs, it is recommend to use somewhere between 125-150% (sometimes even 170-200%) of the font size as line heights. Oh and these line heights you set, should be a multiple of the baseline grid size 🙂
• I’ve used a baseline variable in the code above through which we’re supposed to imagine a baseline grid or the leading between vertical lines of the grid. This baseline variable is then used to set font sizes and line heights on other elements.
• A lot of other articles or implementations around the web don’t use a variable like this but use font-size on body or html and derive the line heights and other properties off that, for layout. This works fine but for me, I find that if I wanted to use smaller grid sizes like say 8px (compared to lots of 16px examples that we get to see), then font-size: 8px on body kind of feels weird which then has to be overwritten by other elements. I can always chose to have smaller grid size and then make my content consume multiple grid lines. This is what happens with headings because a 36px heading won’t fit inside a 16px grid. Instead we may put it in 3 vertical grids of 16px which is 48px.
• Why would I want to use a smaller grid size as mentioned in the previous point though ? We will discuss a pain point or bad part of using baseline grids below that is solved with smaller consistent grid sizes.

Generally these are the CSS properties that you’d use to take care of vertical rhythms with multiples of the grid size:

• line-height
• height (even min-height, max-height)
• margin-top, margin-bottom (or margin)
• padding-top, padding-bottom (or padding)
• top, bottom (or inset)

At this point I’d highly recommend quickly scrolling through this page by Amazeelabs. It starts with how to quickly achieve vertical rhythm with CSS line heights and some of the challenges (that we will also cover below) but the more interesting part is how they use baseline grids to build full page layouts with not just textual content but also other components like – images, navigation, buttons, etc.

What are some pain points of using baseline grids tool to achieve vertical rhythm ?

The SM article explains some of the bad and ugly parts of this concept when implemented on the web. The bad part illustrated is this:

There’s a heading that runs onto two lines. On the left side there is space constraint with a specific baseline. If we use extra line height, i.e., say a 2x multiple of our baseline grid size as seen on the right hand side, the spacing becomes too much to handle (looks awkward). This is definitely a challenge when strictly adhering to the rules. One way to solve this would be to see if we have room to reduce our baseline size and then use a multiple of that for our heading’s line height which is smaller than the current line height set. For this reason using an 8px baseline over say 16px might make more sense.

The other way to solve for this would be to simply reduce the font size and then the line height accordingly. If we only adjust the line height without adjusting the font size, it will break the grid. This option can feel like a massive constraint imposed by the tool. Maybe a smaller baseline is the only good idea here.

The ugly part is more painful though where our baselines across content that breaks into multiple columns may not be maintained (image taken from the same SM article):

Irrespective of how we build this layout – CSS columns, grids, flex, floats – this problem can easily occur and be solved only in some cases with hacky code like additional padding or margin. So you can fix the design (which is not the ugly part) but only with not so “clean” code.

What About Horizontal Rhythm ?

Phew! That’s a lot of information and resources we covered around vertical rhythm. So far we saw rhythm from top to bottom (vertical). But it can also be applicable from left to right (horizontal). For instance setting gutters (gaps) inside grids with the right measurements is part of horizontal rhythm. Spacing between two boxes (divs) in general should follow the same grid size decided upon earlier (or a multiple of that). This is just one aspect of horizontal rhythm though, there are others and again the BWT article does a fantastic job of explaining a bunch of thumb rules for better horizontal rhythm:

• Letter Spacing – Letter spacing is also known as tracking in print design. Ideally letters should be closer than farther because that makes the words harder (and slower) to read and hence processed by our brains. Although in cases of uppercase texts like short headings, increasing the letter spacing facilitates reading.
• Kerning – This is the spacing between letters in a font. Letter spacing (or tracking) adjusts the space between the letters of a word in equal increments where as kerning takes care of spacing between specific neighbouring letters for better aesthetics.
• Text Justification – Ideally one shouldn’t. If must then use hyphenation.

Horizontal rhythm takes care of the content’s legibility (clear enough to read). That’s all we need to know for now!

Do I need to do anything different to make my rhythm responsive or mobile-friendly ?

Not really! Keep tweaking your CSS property values (and even the baseline grid size) to adjust the rhythms or even re-create new ones in different media queries. There’s nothing different we need to do for different screens.

How much should I really care ?

IMHO, things to keep in mind:

• Right amount of spacing in terms of line heights, margins, paddings, etc. are important for reasons like content grouping and good typography that lead to much better content consumption. Here’s a short video that explains this principle with multiple examples.
• Consistent or repeated layout structure leads to better familiarity and better absorption of the content by the user. Achieving this means achieving the rhythm.
• Grids are the most effective (but not necessarily the most successful) tool to achieve the rhythm. Use it. Follow the rules. But it is also ok to break them when required (images for instance).
• Deciding upon a baseline grid size and using multiples of that is the key. Once the math is sorted, then its really about whether the design soothes your own eyes as a developer (or designer). If not, then tweaking the spacing and layout.

Any other interesting resources I should look into ?

Sure:

• Here’s a really informative video on typography design principles.
• Syncope – An online WYSIWYG tool that lets you setup vertical rhythm on sample/demo content after which you can generate base CSS code to replicate the rhythm on your project or sites. There are some similar tools as well – Gridlover, Archetype.
• Setting Type on the Web to a Baseline Grid (Alistapart) – If you just want to quickly go through how baseline grid is implemented on the web via CSS. Although we’ve gone through most of it, I still like how its short and to the point.