Level 3: Vertical Rhythm
To achieve a consistent vertical rhythm, where every line of text and every block line up nicely across columns, the height of every element should be a multiple of the same base. Kingdom's 3rd level helps you achieve this by carefully fitting font-sizes with line-heights that are such multiples.
Every space is a whole multiple
The absolute line-height of the body text will be equal to the vertical rhythm base, whereas the line-height of a larger heading element could be two multiples, or more, of the vertical rhythm base. Because blocks of text take up the height of all their lines combined, the block itself will also be a multiple of the vertical rhythm base.
This webpage is displayed with Level 3 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/_L3-rhythm.scss
and of course, Level 2 is included, so everything from there
applies in Level 3 too.
Consistent text
Whereas the 2nd level of Kingdom generates font-sizes following a modular scale and relative line heights using a linear slope, the 3rd level will fill the $font-sizes and $line-heights Sass-lists with absolute line heights that are perfect multiples of a $vertical-rhythm-base and finding font-sizes that fit within the specified number of "lines". So no more modular scale in Level 3!
Just as in Level 2, the defaults are derived from $desired-body-font-size
(default 18px), $body-line-height-factor (default 1.5), and
$min-line-height-factor (default 1.2), but the calculations are quite different.
In Level 3 the $spacing-base (that is passed to Level 2) is equal to the $vertical-rhythm-base which in turn is
equal to the $body-leading.
The body leading—line height—is the absolute length calculated from
$desired-body-font-size × $body-line-height-factor
converted to rem.
With the default settings this calculated body leading becomes 1.6875rem, but as with everything you
are free to set it yourself!
Either by setting $body-leading directly, or any of the other variables that affect the calculation.
Using that body leading, Kingdom's 3rd level will then fill the $font-sizes and $line-heights, unless already set, and pass them on when importing Level 2.
Elements that need special care to fit
Most elements will just fit right into the vertical rhythm when they inherit the line-height
from their parents, but some need a little extra attention by Kingdom to fit in.
Borders
Whenever you add a top or bottom border to a block of text, its height will no longer be a multiple of the line-height. Kingdom's Borders module provide mixins that help shifting the element slightly up using relative positioning, and applying appropriate negative margin in combination with the border.
For most cases it's easiest to just extend your class with the border placeholders or use the border utility classes directly on your elements.
Thematic breaks
To make <hr> elements not push the vertical flow out of sync, Kingdom gives them a fixed
height and makes the background image a centered 1px line.
If you want tighter spacing around the line you may use the utility class h-px to reduce the vertical
space taken up by the <hr> to none.
Form elements
Form inputs, buttons, <fieldset>, and <legend> have their paddings adjusted
(usually to 0).
The form elements that should take up exactly one line have their line-height decreased to fit the top and
bottom borders within the vertical rhythm base, and the bordered multi-line elements <textarea>,
<fieldset>, and multi-selects are shifted slightly upwards, using the border module.
Tables
Tables themselves can have borders applied as any other block level element without affecting the rhythm, but the table cells are a little problematic. Kingdom currently can't compensate for the shift caused by borders on a table cell, so when doing so you'll unfortunately loose the vertical rhythm by a couple of pixels for each row. If you know of any technique that might help, please get in touch!
What about that baseline?
As you can see, every line of text, regardless of font-size, is positioned in the middle of its line. The center of texts align across columns, but especially when there's larger text in one of the columns, like a heading, this can look a bit weird. This is where Level 4 can help shift lines of text down to the baseline regardless of font-size!