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.
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:
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
_config-ratios.scss. Many of them are common in musical notation and the art world.
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
This is controlled through a set of variables that adjustment the scale at various break points. For example:
This scales the text
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.
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
$global-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 and here.
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.