Typography

USAJOBS uses the two open-source font families from the U.S. Web Design Standards: Source Sans Pro and Merriweather. We use only the regular and bold font weight files, relying on CSS to adjust the typesetting for italic.

Pairings + Styles

For the most part we stick to just using the Source Sans Pro family for headings and body. In a few select instances we've used Merriweather.

Typesetting

Section Header

USAJOBS introduces several section headers which separate and describe blocks of content.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. End of previous section content.

Your Documents

Start of the next section.

Resumes (4/5) Help

Usability

  • The section header separates blocks of content and associates the header with the content that follows.
  • If there is help for the entire section then a link can be used in the section header.

Implementation

  • The U.S. Web Design Standards already underline links within a paragraph element.
  • Do not add text-decoration to any anchor element. Instead, add text-decoration to any anchor element within our main-content area and then defeat that rule for specific elements (buttons, etc).

Usability

  • For mobile usage we've decided to always underline links in main content areas and not only rely on color for link affordance. In areas where a link is also a title we've opted to not underline those links.