Typography
Type styles
Headline
Font-family: PostoniWide
Font-Weight options: Bold light
| size | Pixel | REM | CSS | Example |
|---|---|---|---|---|
| Small | 20px | 1.25 | font-sm font-bold font--headline | Text |
| Medium | 24px | 1.5 | font-md font-bold font--headline | Text |
| Medium 2 | 28px | 1.75 | font-md2 font-bold font--headline | Text |
| Medium 3 | 32px | 2 | font-md3 font-bold font--headline | Text |
| Large | 40px | 2.5 | font-lg font-bold font--headline | Text |
| X-Large | 56px | 3.5 | font-xl font-bold font--headline | Text |
| XX-Large | 72px | 4.5 | font-xxl font-bold font--headline | Text |
| XXX-Large | 80px | 5 | font-xxxl font-bold font--headline | Text |
Subhead
Font-family: Franklin
Font-Weight options: Bold light
| size | Pixel | REM | CSS | Example |
|---|---|---|---|---|
| XXXX-Small | 12px | 0.75 | font-xxxxs font-bold font-subhead | Text |
| XXX-Small | 14px | 0.875 | font-xxxs font-bold font--subhead | Text |
| XX-Small | 16px | 1 | font-xxs font-bold font--subhead | Text |
| X-Small | 18px | 1.125 | font-xs font-bold font--subhead | Text |
| Small | 20px | 1.25 | font-sm font-bold font--subhead | Text |
| Medium | 24px | 1.5 | font-md font-bold font--subhead | Text |
| Medium 2 | 28px | 1.75 | font-md2 font-bold font--subhead | Text |
| Medium 3 | 32px | 2 | font-md3 font-bold font--subhead | Text |
| Large | 40px | 2.5 | font-lg font-bold font--subhead | Text |
| X-Large | 56px | 3.5 | font-xl font-bold font--subhead | Text |
| XX-Large | 72px | 4.5 | font-xxl font-bold font--subhead | Text |
| XXX-Large | 80px | 5 | font-xxxl font-bold font--subhead | Text |
Meta
Font-family: Franklin
Font-Weight options: Bold light
| size | Pixel | REM | CSS | Example |
|---|---|---|---|---|
| XXXX-Small | 12px | 0.75 | font-xxxxs font-bold font-subhead | Text |
| XXX-Small | 14px | 0.875 | font-xxxs font-bold font--subhead | Text |
| XX-Small | 16px | 1 | font-xxs font-bold font--subhead | Text |
| X-Small | 18px | 1.125 | font-xs font-bold font--subhead | Text |
| Small | 20px | 1.25 | font-sm font-bold font--subhead | Text |
| Medium | 24px | 1.5 | font-md font-bold font--subhead | Text |
| Medium 2 | 28px | 1.75 | font-md2 font-bold font--subhead | Text |
| Medium 3 | 32px | 2 | font-md3 font-bold font--subhead | Text |
| Large | 40px | 2.5 | font-lg font-bold font--subhead | Text |
| X-Large | 56px | 3.5 | font-xl font-bold font--subhead | Text |
| XX-Large | 72px | 4.5 | font-xxl font-bold font--subhead | Text |
| XXX-Large | 80px | 5 | font-xxxl font-bold font--subhead | Text |
Article
Font-family: Georgia
Font-Weight options: Bold light
| size | Pixel | REM | CSS | Example |
|---|---|---|---|---|
| XXXX-Small | 12px | 0.75 | font-xxxxs font-bold font-body | Text |
| XXX-Small | 14px | 0.875 | font-xxxs font-bold font--body | Text |
| XX-Small | 16px | 1 | font-xxs font-bold font--body | Text |
| X-Small | 18px | 1.125 | font-xs font-bold font--body | Text |
| Small | 20px | 1.25 | font-sm font-bold font--body | Text |
| Medium | 24px | 1.5 | font-md font-bold font--body | Text |
| Medium 2 | 28px | 1.75 | font-md2 font-bold font--body | Text |
| Medium 3 | 32px | 2 | font-md3 font-bold font--body | Text |
| Large | 40px | 2.5 | font-lg font-bold font--body | Text |
| X-Large | 56px | 3.5 | font-xl font-bold font--body | Text |
| XX-Large | 72px | 4.5 | font-xxl font-bold font--body | Text |
| XXX-Large | 80px | 5 | font-xxxl font-bold font--body | Text |
Line heights
The following are the supported line-heights that can be paired with Font Sans Serif.
| Name | Value | CSS | Example |
|---|---|---|---|
| 1 | 1 | lh-1 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Velit lorem arcu et volutpat ultricies thoncus diam praesent. Etiam ultrices ornare diam in at arcu nisi, sit. Sed velit sit massa justo, nunc nunc id adipiscing sem. Enim quam tellus, pellentesque ornare posuere elementum vitae. |
| Small | 1.1 | lh-sm | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Velit lorem arcu et volutpat ultricies thoncus diam praesent. Etiam ultrices ornare diam in at arcu nisi, sit. Sed velit sit massa justo, nunc nunc id adipiscing sem. Enim quam tellus, pellentesque ornare posuere elementum vitae. |
| Medium | 1.25 | lh-md | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Velit lorem arcu et volutpat ultricies thoncus diam praesent. Etiam ultrices ornare diam in at arcu nisi, sit. Sed velit sit massa justo, nunc nunc id adipiscing sem. Enim quam tellus, pellentesque ornare posuere elementum vitae. |
| Large | 1.5 | lh-lg | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Velit lorem arcu et volutpat ultricies thoncus diam praesent. Etiam ultrices ornare diam in at arcu nisi, sit. Sed velit sit massa justo, nunc nunc id adipiscing sem. Enim quam tellus, pellentesque ornare posuere elementum vitae. |
| X-Large | 1.1 | lh-xl | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Velit lorem arcu et volutpat ultricies thoncus diam praesent. Etiam ultrices ornare diam in at arcu nisi, sit. Sed velit sit massa justo, nunc nunc id adipiscing sem. Enim quam tellus, pellentesque ornare posuere elementum vitae. |
| XX-Large | 1.1 | lh-xxl | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Velit lorem arcu et volutpat ultricies thoncus diam praesent. Etiam ultrices ornare diam in at arcu nisi, sit. Sed velit sit massa justo, nunc nunc id adipiscing sem. Enim quam tellus, pellentesque ornare posuere elementum vitae. |