Typography
Brand and Style Guides
Print Applications
Web Applications
Video Conferencing Backgrounds
Other Applications
Downloads (Internal Only)
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.
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