Skip all category navigation links
hamburger menu Icon

Top Searches

 

Headings & Text

USPS Digital Heading Style

The Digital Style Guide (DSG) defines 5 levels of headings. In some cases, there are inverse variants as well as variants with certain components.

Heading 1 <H1>

  • Use for page title
  • Only one <H1> per page
  • Font: Helvetica Neue 75Bold
  • Style: 32px, Title Case
  • Color: #333366
  • Inverse style available (#FFFFFF text on #333366 background), example:

Inverse Heading 1

Heading 2 <H2>

  • Font: Helvetica Neue 75Bold
  • Style: 28px, Title Case
  • Color: #333366
  • Inverse style available (#FFFFFF text on #333366 background), example:

Inverse Heading 2

  • Hero variant available (font: 22px), example:

Hero Heading 2 Variant

Heading 3 <H3>

  • Helvetica Neue 75Bold
  • 22px, Title Case

Heading 4 <H4>

  • Helvetica Neue 75Bold
  • 18px, Title or Sentence Case depending on context
Heading 5 <H5>
  • Helvetica Neue 75Bold
  • 16px, Title or Sentence Case depending on context

USPS Digital Text Style

The DSG defines body text as using Helvetica Neue with Arial as an alternative font. For desktop, body/paragraph text defaults to 66% width for improved readability. The default body/paragraph text size is 16px, and there is a limited palette of colors used for USPS Digital text:

  • #000000 Black: Body text color
  • #FFFFFF White (on #333366 background) used for inverse text, example:
Inverse Text
  • #999999 Text Hover/Rules Gray used for utility navigation and ghost text

Special Use USPS Digital Text

There are several special use text styles that differ from standard body/paragraph text:

Inverse Text:
  • Color: #FFFFFF White (on #333366 background), example:
Inverse Text
Disclaimer Text:
  • Size: 10px
  • Color: #000000 Black
  • Used for legal Terms & Conditions (T&Cs), Privacy Policy statements, footnotes, and other compliance text (fine print)
Alert Text:
  • Size: 13px
  • Colors: #E71921 USPS Digital Red or #FFFFFF White
  • Alerts can be used at a global-, section-, page-, tool-, or application-level
Inverse Text
Bulleted (unordered) Lists:
  • Font-size: 16px
  • Line-height: 22px
  • List padding-top: 5px
  • List padding-bottom: 5px
Learn More About:

Text Areas

All body content is left-aligned. Centered text is only used in certain card treatments and marketing components (See Static Components and Application Components).

1-Column Text Areas and Callout Box Variant

On mobile, text areas expand to 100 percent width; however, on desktop, a single-column text area is limited to 60 percent of the overall body container width to improve readability and to accommodate callouts and related content. This paragraph is an example.

When a Callout Box is used, it is floated to the right of the associated text area.

Note: There is no mobile version of the desktop 1-Column Text Area with Callout Box.

<H3> Callout Box Title

  • Related content link 1
  • Related content link 2
  • Related content link 3
  • Related content link 4
  • Related content link 5

2-Column Text Area with Header

2-Column Text Areas are only displayed in desktop (and tablet) views.

Sample First Column Heading

The desktop columns split the overall body container width evenly. 2-column text areas are typically used when there is a large density of content or, sometimes, to compare products or services.

Sample Second Column Heading

On mobile, Two-Column Text Areas stack vertically appearing identically to One-Column Text Areas.

Back to Top