Typography

Typesetting

We follow the guidelines in the U.S. Web Design System for our typesetting:

Left alignment. This provides a consistent starting point for each line, and supports the common F-shaped reading pattern.

**A line length of 50-75 characters**. This follows usability research that indicates this to be the most comfortable length.

SCSS Variable

The `uswds` npm package provides variables for the line length of both the default body text style (`$text-max-width`) and the lead paragraph text style (`$lead-max-width`).

**Spacing that matches the baseline grid**. The U.S. Web Design System recommends that the margin rules for typographic elements fit the following scale: 60px, 30px, 20px, or 15px. These margins combine with the different line heights to create optical spaces between typographic elements that match the underlying baseline grid created by the base line height, producing a strong vertical rhythm.

The U.S. Web Design System defines text spacing with `em` units: 

```
h1, h2, h3, h4, h5 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

p {
  margin-top: 1em;
  margin-bottom: 1em;
}
```

Typeset Example

Roboto Slab Bold - Displays and Headings

Display

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
HEADING 6

Typeset Example

Roboto - Body

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

! @ # $ % ^ & * ( ) - _ + = { } | \ / " , . ; : [ ]

To Contribute


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