Vertical alignment

Visual representation of vertical alignment


In order to align parallel text blocks of varying sizes on the vertical axis using CSS; the distances measured to align with can be pre-determined.

One tool I use to understand the distance is a Baseline Grid, it's a visual aid used to enable text alignment—comparable to ruled paper. The Baseline Grid and Typographic Measuring System are inextricably linked; the latter is used to automate calculations which align text blocks on the former; in conjunction with the Grid System.

I can squeeze even more use out of it by making a single rem equate to any computed value I want by applying percentages to the <html> element. This way a single rem (the measurement used for incrementally traversing the baseline grid) will yield a computed pixel font-size that suits.










If the base font-size is 12px, this means 1rem = 12px, this allows me to traverse/align to the baseline in multiples of 6—providing a suitable range of font-sizes and line-heights for layout.

Vertical rhythm

Everything I’ve learnt recently about typography leads towards units of measurement being the fundamental building blocks of order and harmony in design. A Baseline Grid, in conjunction with a Grid System, can assist by indicating what areas of a layout should accommodate text, and visa-versa.

But can't we already create this level of precision with CSS?

… yes, but it's far from straight forward. When we start to piece the various components of a web page together as part of a system and align blocks vertically, in a way that allows them to be re-assembled in any order, the current spec does not cater toward this way of working—not without working around it. One of the main reasons is there is no concept of cap-height; there are several articles which explain the problem in great detail, here Razvan Onefri explains it from his perspective.

Illustration if cap-height, based on Razvan Onefri's.
Illustration detailing cap-height, line-height and font-size.


Pick a font-stack

I've used Helvetica & system fonts so didn't need to make many adjustments to the default cap-height settings in Interior. If you pick different fonts you’ll need to work out what the cap-height is and apply it. if you plan to use Interior there’s a variable for cap-height—it’s passed into the baseline() mixin.

Establish a unit for the baseline

Multiples of .5rem work really well, depending upon the document base font size, for several reasons:

  1. Granularity—the measure is affected by font size and column width which impacts line-height; using .5rem allows more variety of font sizes, without having to keep resizing the entire document using percentages as the columns get wider—which is another way to vary the baseline grid (and line-heght).
  2. Unit-less values are incorrectly computed in some cases, which can lead to a lot of head scratching, it almost seems counter-intuitive to go for a static unit of measurement but in this case the solution works.
  3. Simplicity—you only need to be concerned with multiples of .5rem, nothing more in terms of line-height.

Make adjustments

Possibly most time consuming—and tricky—part and what the visual baseline grid is for. To align text to “sit” on the baseline I need to see things in action, so I open up a browser window and view text on a baseline grid, if it doesn’t quite sit right I make adjustments until it does and then track my progress using Git.

What I found of most use to get this correct was creating sample pages with varying degrees of content, paragraphs, headings, block-quotes, citations, images, figures with captions etc. then adding and removing things—every element has an impact on it's neighbor.

Use for design

As stated on the previous page, if you want to apply an accurate representation of CSS styles to a working design, for the sake of continuity this method will allow it. Enabling you to work back and forth between the browser and a DTP program such as Illustrator.