Configuring Typography

Setup responsive 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 _config-typography.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:

$global-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.

$global-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 _config-ratios.scss. Many of them are common in musical notation and the art world.

$responsive-text: true;

You can control wether or not the text scales with browser or device by setting this to either true or false respectively. By default this is set up for the perfect-fourth ratio.

These values will still work for other ratios, but they are mathematically correct for the perfect fourth. Essentially on a very large screen with a with $global-base-font-size set to 16px, it will crank the text up to 20px using percentages, and at the other end on very small screens the text will end up being 12px.

This is controlled through a set of variables that adjustment the scale at various break points. For example:

$rt-bp-xl: 125%;

This scales the text 125% of 16px at the $bp-xl breakpoint, which equates to a font size of 20px. The percentages have all been calculated based on the perfect fourth ratio.

If you change the ratio, you could leave these values as is, but really they should be recalculated to match the ratio. If we can find away to automate this in future to avoid manual calculation, we will definitely add it as a feature.

Lastly, for the responsive text scaling to work, you must include the mixin on elements where you want scaling to happen. Alternatively, you can just add it to the html element to have it adjust eveything everywhere.

@include responsive-type;

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 $global-base-font-size) is $modular-step-zeta. This should be left at 0. Negative values step down from the $global-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 and here.

Font Stacks

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

$sgillsans: Frutiger, "Frutiger Linotype", Univers, Calibri, "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Gill Sans MT", "Gill Sans", sans-serif;

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

Built with the Best

Slate was built by Hash&Salt, a company who loves building for the internet. Using the very best in industry leading software and practices honed over the last 20 years in the industry. You're in good hands.