Typography

Paragraphs

Paragraph text should provide an efficient and pleasant experience on every viewport size. Readable text makes good use of alignment, spacing, line length and height, and contrast.

Web paragraphs

Body text

Avenir Next Regular, 16px / 22px at all browser widths. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

HTML code snippet

<p>Avenir Next Regular, 16px / 22px at all browser widths. Lorem ipsum dolor sit amet, <em>consectetur adipisicing elit</em>, sed do
eiusmod <strong>tempor incididunt</strong> ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</p>

Implementation details

Vertical spacing

  • Applies 15px bottom margin to all p, ul, ol, dl, figure, table, and blockquote elements.
  • Applies -5px top margin to lists following paragraphs to reduce `margin between them to 10px.
  • Applies 8px bottom margin to list items that are not within a nav element.
  • Assumes that the font size of each of these items remains the default.

Italicizing

@webfont-italic: @webfont-regular;

We don’t serve the font file for Avenir Next Italic because we found Avenir Next Regular with browser-created faux italics was an acceptable substitute, and it saves a lot of bytes not to serve it.

Bolding

@webfont-demi: @webfont-medium;

We’re trying out Avenir Next Medium with faux bolding in place of Avenir Next Demi, though the results of that experiment have been less predictable, so we may yet revert that decision.

Specs

  • Avenir Next Regular
  • 16px / 22px at all browser widths

Lead paragraph

Avenir Next Regular, 22px / 28px on large screens and 18px / 22px on small screens. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

HTML code snippet

<p class="lead-paragraph">Avenir Next Regular, 22px / 28px on large screens and 18px / 22px on small screens. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Specs

  • Also referred to as a subheading
  • Avenir Next Regular
  • Text is responsive. Displays as a Heading 3 (22px / 28px) on large screens (>601px wide). Displays at Heading 4 (18px / 22px but still Regular weight) on small screens (<601px wide).

Microcopy

Lorem ipsum dolor sit amet

HTML code snippet

<p class="a-micro-copy">
    Lorem ipsum dolor sit amet
</p>

Specs

  • Good for highlighting small pieces of text, typically legal copy.
  • Avenir Next Regular
  • 14px at all browser widths

Guidelines

Refer to the Guidelines section of the Fonts page for information about alignment, line height, line length, and spacing.

Edit page