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:
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.
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.
px units, only set
$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
px values, set this to
$rem-fallback: true; and
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.
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
$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
$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
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.