Fonts
Licensing for fonts are handled through Adobe TypeKit.
Code
<element class=”{font-family}”></element>
Demonstration of Sans Serif text (Freight Sans Pro) and Serif Text (Freight Text Pro)
Classes
{font-family}
Controls which default font to use on the current element (between freight-text-pro and freight-sans-pro).
- Default
- The default serif/sans-serif appearance of a text element depends on what element it is. Note that the body element will cascade to all other elements like spans unless otherwise specified.
-
Element Default Font body, h4, h5, h6 freight-sans-pro (Sans serif) h1, h2, h3 freight-text-pro (Serif) - Sans-serif (
.sans,.base-font) - Changes the font to the sans-serif
freight-sans-profont. - Serif (
.serif) - Changes the font to the serif
freight-text-profont. This will also apply a normal (400) font-weight.
Accessibility Expectations
| Modality | Expected Behavior (All states) | Criterion |
|---|---|---|
| Visual | The color contrast of small text against the background color must be 4.5:1 | 1.4.3 |
| Visual | The color contrast of large text against the background color must be 3:1 | 1.4.3 |
Developer Notes
The default styles for fonts are located in _type-freight.scss.
Designer Notes
Designers are free to make modifications to the base styles by modifying any properties of the text. The modifications should be consistent throughout the site. (Ergo, a modified Heading 1 should apply to all Heading 1s throughout the entire site).