Configuring Typography

Setup typography with ease, using scalable ratios and a collection of mixins. Good typographical style is one thing often overlooked on a lot of websites.

Don't let your next build make the same mistake. Slate has a powerful typography engine that uses common ratios such as the golden ratio and perfect fourth to generate headings and paragraphs that scale with the browser or device.

Initial Configuration

The first step is to check out _settings.type.scss. Theres a whole raft of variables to control the typography, far to many to go over here but lets just touch on a couple of important ones:

$base-font-size: 16px;

This one sets the base font size for all text. It is also this value that is fed into the ratio you choose to calculate the size of headings.

$line-height: 1.5;

Configure the line-height used across the whole framework by adjusting this value. Do not append a unit to this.

$rem-fallback: true;
$rem-px-only: false;

There are three possibilities depending on how these two variables are set. It will effect both the typography and the the way the rem calc mixin works. For rem only, set both of these to false.

For px units, only set $rem-fallback:false and $rem-px-only: false;. This will cause the rem calc to just pass through px values without conversion, so it wont break if you have used the rem mixin anywhere.

Lastly, if you want both rem and px values, set this to $rem-fallback: true; and $rem-px-only: false;.

$unitless-lineheight: true;

This is a contentious one. Conventional wisdom suggests that you should not use a unit on line-heights at all. However, there are occasions where you might want to explicity set a unit here, just to be extra precise. You toggle this by setting the variable to true.

$type-ratio: $perfect-fourth;

This is default ratio used by the type engine, and provides a nice balance of scale. There are 16 more common ratios, include golden section to be found in _settings.ratios.scss. Many of them are common in musical notation and the art world.

Modular Text

When using the modular text mixin, these steps effect the scaling of the text up and down the scale. The mid point (aka the value of $base-font-size) is $modular-step-zeta. This should be left at 0. Negative values step down from the $base-font-size. This useful for stuff like small tags and sup and sub.

$modular-step-alpha: 5;
$modular-step-beta: 4;
$modular-step-gamma: 3;
$modular-step-delta: 2;
$modular-step-epsilon: 1;
$modular-step-zeta: 0;
$modular-step-eta: -1;
$modular-step-theta: -2;
$modular-step-iota: -3;

All the rest of the variables speak for them selves and allow the setting of text color, link colors, font weights, heading, font stacks and the style to use for hr tags.

Font Mixins

Slate includes two typography mixins to help you generate good type. One is for using the modular scale and the other for setting free type from a given px value. These are both explained in detail here.

Font Stacks

One last thing worth mentioning is the _settings.type-stacks.scss file. This contains common sets of websafe fonts used on the web, with the nicest looking declared first.

These variables can be used anywhere in your designs, and obviously you can add your own to this file.