Typography

Text Styles

The text styles we use are derived from the U.S. Web Design System, which includes specifications for legible hierarchies with visually consistent typographic scales. To create our styles, we use five fonts:

We use the clean and unobtrusive Roboto Regular for body text and the more visually complex and impactful Roboto Slab Bold for headings, creating strong contrast and a sense of narrative within the hierarchy of each page. This pairing mirrors the default pairing of Merriweather headings with Source Sans Pro body text in the U.S. Web Design System.

For large headings, we use a tighter line-height. Roboto Slab has a shorter x-height than Merriweather, and so requires less vertical space to produce a similar optical effect.

Display
SCSS
```
font-family: $font-serif;
font-weight: $font-bold;
font-size: $title-font-size;
line-height: $heading-line-height;
```
CSS
```
font-family: 'Roboto Slab';
font-weight: 700;
font-size: 52px;
line-height: 1.3em/68px;
```

Heading 1

SCSS
```
font-family: $font-serif;
font-weight: $font-bold;
font-size: $h1-font-size;
line-height: $heading-line-height;
```
CSS
```
font-family: 'Roboto Slab';
font-weight: 700;
font-size: 40px;
line-height: 1.3em/52px;
```

Heading 2

SCSS
```
font-family: $font-serif;
font-weight: $font-bold;
font-size: $h2-font-size;
line-height: $heading-line-height;
```
CSS
```
font-family: 'Roboto Slab';
font-weight: 700;
font-size: 30px;
line-height: 1.3em/39px;
```

Heading 3

SCSS
```
font-family: $font-serif;
font-weight: $font-bold;
font-size: $h3-font-size;
line-height: $heading-line-height;
```
CSS
```
font-family: 'Roboto Slab';
font-weight: 700;
font-size: 20px;
line-height: 1.3em/26px;
```

Heading 4

SCSS
```
font-family: $font-serif;
font-weight: $font-bold;
font-size: $h4-font-size;
line-height: $heading-line-height;
```
CSS
```
font-family: 'Roboto Slab';
font-weight: 700;
font-size: 17px;
line-height: 1.3em/22px;
```
Heading 5
SCSS
```
font-family: $font-serif;
font-weight: $font-bold;
font-size: $h5-font-size;
line-height: $heading-line-height;
```
CSS
```
font-family: 'Roboto Slab';
font-weight: 700;
font-size: 15px;
line-height: 1.3em/20px;
```
Heading 6
SCSS
```
font-family: $font-sans;
font-weight: $font-bold;
font-size: $h6-font-size;
line-height: $heading-line-height;
text-transform: uppercase;
```
CSS
```
font-family: 'Roboto';
font-weight: 700;
font-size: 13px;
line-height: 1.3em/17px;
text-transform: uppercase;
```

Lead paragraph

SCSS
```
font-family: $font-sans;
font-weight: $font-normal;
font-size: $lead-font-size;
line-height: $lead-line-height;
```
CSS
```
font-family: 'Roboto';
font-weight: 400;
font-size: 20px;
line-height: 1.3em/34px;
```

Body copy. A series of sentences together which make a paragraph.

SCSS
```
font-family: $font-sans;
font-weight: $font-normal;
font-size: $base-font-size;
line-height: $base-line-height;
```
CSS
```
font-family: 'Roboto';
font-weight: 400;
font-size: 17px;
line-height: 1.5em/26px;
```

Italic body copy. A series of sentences together which make a paragraph.

SCSS
```
font-family: $font-sans;
font-style: italic;
font-weight: $font-normal;
font-size: $base-font-size;
line-height: $base-line-height;
```
CSS
```
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
font-size: 17px;
line-height: 1.5em/26px;
```

Bold body copy. A series of sentences together which make a paragraph.

SCSS
```
font-family: $font-sans;
font-weight: $font-bold;
font-size: $base-font-size;
line-height: $base-line-height;
```
CSS
```
font-family: 'Roboto';
font-weight: 700;
font-size: 17px;
line-height: 1.5em/26px;
```

Bold italic body copy. A series of sentences together which make a paragraph.

SCSS
```
font-family: $font-sans;
font-weight: $font-bold;
font-size: $base-font-size;
line-height: $base-line-height;
```
CSS
```
font-family: 'Roboto';
font-weight: 700;
font-size: 17px;
line-height: 1.5em/26px;
```

To Contribute


If you are interested in contributing, please visit: https://usnavy.github.io/Navy-Design-Guide/
We need you!