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

Source Sans 3 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>Source Sans 3 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

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

Bolding

We’re trying out Source Sans 3 Medium with faux bolding in place of Source Sans 3 Semi Bold, though the results of that experiment have been less predictable, so we may yet revert that decision.

Specs

Paragraph text style Font-weight Font-size Font-size-adjust* Line-height Responsive behavior at <601px
Body text 400 (Regular) 16px 0.517 22px No change

Lead paragraph

Source Sans 3 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">Source Sans 3 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

Paragraph text style Font-weight Font-size Font-size-adjust* Line-height Responsive behavior at <601px
Lead style (also referred to as a subheading) 400 (Regular) H3 (22px) 0.517 27.5px Drops to H4

Guidelines

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

Latest updates

Page last edited:
Show all details
Edit page