Typography

Nested Applications
Style Guide NAV
WSG - Typography

Typography

The NPS website design includes built-in consistency for typography, spacing, and other treatments. Several descriptions of pre-styled elements follow to help you organize your content in a visually appealing, user-friendly way.

Type on the web should not be ornate and detailed ... User studies have shown sans-serif faces work best, as does clean, simple, and easy to read. In that regard, Helvetica Neue, Helvetica, and Arial have been selected as the official font families of NPS’ web presence.

Font Stacks

Display of fonts on the web depends on what fonts are installed on a visitor’s computer. Font stacks address this problem by providing alternatives when the desired font is unavailable.

Font stacks are written as follows:

"primary-font-family, first-alternate-font-family, second-alternate-font-family, etc.”

For example, the NPS Font Stack reads: "Helvetica Neue”, Helvetica, Arial, sans-serif;

Font Styles and Formatting

Consistent formatting across the NPS web space provides users with a comfortable consistency. The following standards have been established to assist NPS content managers in taking advantage of this formatting.

Bold and Italics

Bold and italics formatting should be used to apply emphasis.

Bold and italic formatting should be used sparingly; typically, no more than one complete sentence in any given paragraph should be formatted using bold or italic text.

Underline formatting may only be used to designate links.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Keep in Mind:

  • Good use of headings helps disabled users navigate your page more effectively.
  • Use heading styles as provided in the editor to structure your content. Consider them headlines and subheads.
  • All headings should be flush left. We do not use centered content.
  • Use headers in order. Your page title is h1, so the first level you use in the page body should be h2. When necessary, use h3s and then h4s as subheadings.
  • Reserve underlining for links. Do not underline headings or text unless it is a hyperlink
  • Do not use UPPERCASE for anything except abbreviations or acronyms
  • Do not manually adjust font size.
  • Do not colorize body text