Typography ΒΆ
Headings
Here is an index of classes to use for headings.
Each style is prefixed by its CSS .class name:
When pairing a heading with a decorative link floated beside it, please use the heading helper.
Margins
Because margin use below headings depends on context, the default heading classes do not include any margins. Please use one of these classes to add margins below your headings:
| CSS class | Mobile bottom-margin | Desktop bottom-margin |
|---|---|---|
.m1 |
20px | 40px |
.m2 |
20px | 30px |
.m3 |
20px | 20px |
.m4 |
10px | 10px |
.m5 |
5px | 5px |
Paragraphs
Here is an index of classes to use for paragraph text.
Each style is prefixed by its CSS .class name:
Standalone links
Each style is prefixed by its CSS .class name:
Miscellaneous typographic styles
Each style is prefixed by its CSS .class name:
Custom font size mixins
To make the site accessible for users who need to set
custom fonts or sizes, we try to provide support for rem
units wherever possible. rem units adjust the font size
relative to the user's browser settings.
Some Sass mixins are included that make working with rem
units a cinch.
To set the font size without setting a line height, or
while setting a relative line height (i.e., a line height
without unit specified or with a relative unit such as
ems specified),
please use the font-size mixin, and provide it a pixel
font size:
.my-class {
@include font-size(14px);
line-height: 1.4;
}
Please make sure you only use pixel units with this mixin. Other units are not currently supported.
To set both font size and line height in pixels, please use the font-line mixin:
.my-class {
@include font-line(14px, 20px);
}
This (above) example will produce a font-size of 14px and a line height of 20px.