Level 2: Spacing & Sizing

The 2nd level of Kingdom applies consistent text sizes, line heights, and spacing between blocks. The defaults include slightly larger text than user-agent stylesheets usually apply, with a hefty line height for improved readability. The font sizes follow a modular scale with gradually smaller line heights as text get larger. Finally, the base spacing used throughout the rest of the CSS defaults to correspond to the line height of the body text, making paragraphs easy to distinguish from each other. All of these defaults can be changed to your own liking by setting Sass-variables before importing the Kingdom level.

This webpage is displayed with Level 2 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/_L2-sizing.scss and of course, Level 1 is included, so everything from there applies in Level 2 too.

Spacing by margin-top

The spacing scheme of Kingdom works by resetting all margins to 0 and then applying margin-top to those elements that need space before them. So, margin-bottom should generally be kept at 0, or negative values for some special use cases.

A base for space

All spacing values in Kingdom are derived from the $spacing-base Sass-variable. If you want to be specific you may set it explicitly, but the default is rather nifty as it's equal to the line-height of the body text, making all spacing related to the rhythm of the text. The spacing base can be set in any CSS length unit, but rem is recommended.

By limiting all spacing in the design to multiples and specific fractions of the spacing base, you not only achieve visual consistency, you also speed up decisions as there is just a finite set of values to select from. If you include the spacing utilities, you also have corresponding CSS classes available making experimenting with spacing directly in your HTML super quick.

Use placeholders

There are plenty of Sass placeholders for you to extend that helps keeping sizing consistent. If you're ever about to set margin or padding, height or width, or any other length property in your CSS, try to find a suitable placeholder first!

Whenever you find that none of the placeholders fit the job, you can use mixins from the sizing module or even the $spacing-base Sass variable or the --spacing-base CSS custom property.

Space elements from the outside

Try to control margin on elements from the outside (using CSS combinators) whenever possible, and avoid having components set their own margins "on themselves". Spacing between elements should be seen as a layout concern, so its usually good to apply it in relation to children, descendants, and sibling elements.

Padding on the other hand is a property that is intrinsic to an element or component itself, so feel free to apply it however you fancy. Keep in mind though that Kingdom provides plenty of handy placeholders, which will help in keeping all spacing consistent, for both margins and padding.

Default spacing between all adjacent elements

After Kingdom has reset all margins to 0, a default vertical spacing between any adjacent elements is added using the "lobotomized owl selector" * + *. This is of course inspired by Heydon Pickering's technique. So, any element that comes after another element will have the default spacing applied before it. That selector has very low specificity so can easily be overridden when needed, and that is just what Kingdom does next…

Keeping related elements close

There are some elements that are usually semantically related to their following elements, and it's a good idea to keep those siblings visually close together as well. This thinking is applied to heading and list item elements, so Kingdom will make sure the space between them and their next sibling is set to 0.

Some elements are meant to group other elements that are all closely related, so Kingdom will also make sure there's no vertical spacing between elements inside <table>, <figure>, <picture> and some other grouping elements.

Spacing above inline elements would also mess up most designs, so their margin-top is also set to 0. This includes <a>, <del>, and <ins> tags, as well as buttons, form inputs and images within paragraphs, although techically they're not inline elements.

Consistent text

To get rid of any user-agent quirks related to text sizes, Kingdom's 2nd level will make sure all elements inherit font-size and line-height from their parent by default. Then, those properties are specifically set on the <body>, the heading elements 1–6, as well as the inline elements <small>, <sub>, and <sup>.

The list of font-sizes

The font sizes are kept in a Sass-list named $font-sizes that will have at least 6 sizes in it. If the list is empty, the first font size defaults to a rem value converted from $desired-body-font-size—which in turn defaults to 18px. The $font-sizes list is filled up to length 6 with gradually increasing values by multiplying the previous size with $modular-scale (default 1.2).

The first size in the list is applied to body text and <h4> elements. Headings above level 4 will get gradually larger sizes from the list and heading levels 5 and 6 will use relative sizes derived from $font-size-smaller (which is calculated from $modular-scale by default).

The list of line heights

Each of the font sizes have a corresponding line-height kept in $line-heights, another Sass-list. If not set before, these line heights are generated along a linear slope from $body-line-height-factor (default 1.5) for the first font-size, all the way down to $min-line-height-factor (default 1.2) for the 6th font-size.

Whenever an inline element having a different text size than the block level element containing it, the line-height of that inline element is adjusted to 0 if the text fits within the block's line-height, or 1 if it needs more space on the line. The effect can be seen on size 4, which is the first text size to exceed the line-height of the body text.