Skip to main content

Level 4: Baseline Rhythm

Lining up text in adjacent columns on the same baseline is a thing that is uncommon on the web but prevalent in print design. You probably won't reach for Kingdom's 4th level very often, but if you'd ever need to position text on the baseline it's a good tool.

This webpage is displayed with Level 4 and all utilities of Kingdom applied so you can quickly see its effects in your particular browser.

You can check out the source code at src/_L4-baseline.scss and of course, Level 3 is included, so everything from there applies in Level 4 too.

Shifting text down to the baseline

This page has the "lines" of the vertical rhythm visualized in the background so you can see how it affects the paragraphs and the headings. You can also compare levels 3 and 4 on the demo page where the lines are displayed for both levels.

Level 4 will apply baseline shift to the most common block elements that are usually used for typography. This of course includes the <p> element, as well as the headings, but list items, <blockquote>, and <address> are also shifted.

The shift is created using relative positioning and the amount of shift is specific to each font. Therefore, every font you want to use with the baseline rhythm needs to be registered with its specific baseline-shift-factor in the Kingdom Fonts module.

Resetting the baseline-shift

If you ever find that you want to remove the baseline-shift that is applied to or inside an element, apply the class baseline-shift-none on a shifted element, or an ancestor. This section has it, and the navigation at the top of this page also need it for its list items.

Default fonts

The 4th level is the only one in Kingdom that applies fonts by default; for headlines a sans-serif font and for body text a font with serifs. It's just for the purpose of demonstration, whenever you're in a situation where you reach for baseline shift you will likely have very specific font-stacks you want to use, and calculate the baseline-shift-factor yourself.

Font inheritance

Whenever a font-stack is applied through Kingdom, that font is inherited by all child elements, so browsers' default fonts on all elements are reset. If you need a monospace font back on <code> and other similar elements in Level 4, just include the code extension. Likewise, if you don't want the body font-stack on inputs and form elements you can include the forms extension.

Limitations

  • The amount of shift applied is calculated using CSS calc from CSS custom properties. In browsers not supporting both (notably IE and Opera Mini) the 4th level of Kingdom has no effect, basically rendering like only Level 3 was applied.
  • CSS columns with baseline-shifted elements inside are rendered inconsistently in different browsers. Descenders may be cut off att column breaks and elements after the columns may be shifted out of the vertical rhythm.