Typography
Typography guidelines ensure that we maximize legibility and maintain visual hierarchy throughout all of our content and documents.
Fonts
The primary fonts used by the Office of Advocacy are Source Sans Pro and Merriweather. Advocacy templates have Source Sans Pro and Merriweather pre-loaded and placed, as necessary. Individual staffers are encouraged to use the fonts as they see fit. If there are any questions about visual design, please contact Visual Information and Web Manager, Keisha White.
If you are on a computer that does not have Source Sans Pro or Merriweather uploaded, and you cannot reach the Office of Information to switch type fonts, please use Helvetica Neue in place of Source Sans Pro, and Georgia in place of Merriweather. Use of these fonts over Source Sans Pro or Merriweather should be approved by the Office of Information.
Source Sans Pro
Primary typeface
Source Sans Pro is Advocacy’s primary typeface and is an open-source sans serif typeface created for legibility in UI design. With a variety of weights that read easily at all sizes, Source Sans Pro provides clear headers as well as highly readable body text.
Inspired by twentieth-century American gothic typeface design, its slender but open letters offer a clean and friendly simplicity. Advanced hinting allows Source Sans Pro to render well on Windows systems which run Cleartype, and across browsers and devices. Moreover, it supports a variety of languages and alphabets, including Western and European language, Vietnamese, pinyin Romanization of Chinese, and Navajo.
Merriweather
Secondary typeface
Our secondary body copy, Merriweather is an open-source serif typeface designed for on-screen reading. This font is ideal for text-dense design: the letterforms have a tall x-height but remain relatively small, making for excellent readability across screen sizes while not occupying extra horizontal space.
The combination of slim and thick weights gives the font family stylistic range, while conveying a desirable mix of classic, yet modern simplicity. Merriweather communicates warmth and credibility at both large and smaller font sizes.
Type Hierarchy
One of the most important techniques for effectively communicating content is the use of typographic hierarchy. Using variations in size, weight, color and position of type, typographic hierarchy ensures that important information stands out, while less important details fade into the background. This not only makes the content more legible and easier to understand but also helps create a consistent and recognizable brand identity.