Configuring Typography
Setup beautiful typography with ease, using scalable ratios and a collection of mixins.
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.
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.
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.
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.
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.