We use the custom web font "Lato" from Google Fonts and the system default font Helvetica Neue (Mac) or Helvetica (Windows).
| Font Family | Used For |
|---|---|
| Lato | H1-H6 |
| Helvetica Neue | Body text, links, navigation |
Establish a visual and semantic hierarchy by nesting headings correctly. For example, an H3 follows an H2 when it denotes a section contained within the H2's content. Don't skip to an H4 after an H2, etc. Don't use headings arbitrarily based on their presentation.
| Element | Font sizes | Description |
|---|---|---|
h1 - First-level Heading |
26px |
The main page heading is a h1 element. |
h2 - Second-level Heading |
22px |
The secondary heading is a h2 element. |
h3 - Third-level Heading |
18px |
The heading is a H3 element, which may be used after an h2 heading in the document hierarchy |
h4 - Fourth-level heading |
16px |
The heading is a H4 element, which may be used after an H3 heading in the document hierarchy |
h5 - Fifth-level heading |
14px uppercase |
The heading is a H5 element, which may be used after an H4 heading in the document hierarchy |
h6 - Sixth-level heading |
12px uppercase |
The heading is a H6 element, which may be used after an H5 heading in the document hierarchy |
| This is a paragraph, using Helvetica Neue, with 12px font size and 1.42857143 line height. | 13px |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, natus! Ducimus modi fuga totam, sed itaque ad praesentium voluptate facilis! Repudiandae enim quaerat, nulla culpa, cupiditate tempora! Nihil, earum, esse! |