Skip to main content

Module: Fonts

The fonts module keeps track of registered fonts stacks in the $font-stacks Sass map, and provides some mixins. You'll find it in src/modules/_fonts.scss.

Registering font stacks

The register-font-stack mixin can be used to add fonts for later use. Every font stack has a name, a font-family, and a $baseline-shift-factor.

The baseline-shift-factor is used to shift text down to the baseline, and it needs to be calculated per font. Unless you're really lucky, your fallback fonts will unfortunately not match the lines perfectly, so focus on the primary font in the stack when setting the $baseline-shift-factor. Here's an example how the mixin can be used: 

@include register-font-stack('Georgia', (Georgia, serif), 0.62);

There's no easy way to programmatically calculate the $baseline-shift-factor for a font. The font stacks that are preregistered in this module (see source code) are set by trial and error using the visualize-vertical-rhythm class provided by Level 3.

If you find the baseline-shift-factor of a common font, pull requests to this module are welcome!

Where is the baseline-shift-factor used?

Of course Level 4 uses the shift, but also the forms extension where it's used to position checkboxes and radiobuttons. So register your font stacks properly to avoid trouble later!

Applying a font stack

With the hard work done when registering a font stack, actually applying it in your CSS is a breeze. The mixin font-stack will set the font-family property on an element and its descendants as well as the --baseline-shift-factor custom property for use in calculations.