TYPOGRAPHY
Typography is an important element of our brand identity. When used correctly, it enhances the message of any communication. Our official font is Roboto, which is freely downloadable from the Google font library available at fonts.google.com.
BASIC FONT USAGE
- Headlines - should be set in Roboto Condensed Bold.
- Subheads - should be set in Roboto Bold.
- Body copy - should be set in Roboto Regular.
- Quotes and callouts - should be set in Roboto Medium Italic.
Note:Use italics for quotes, including comments from petition signers. Unlike larger quotes, quotes in the petitions comments are set in Roboto Medium Italic.
Refer to MoveOn’s writing style guide (e.g. MLA, Chicago, APA) for more information on using italics for titles, such as journals and newspapers.
HOLDING SHAPE
DIAGRAM & RULES
To increase the visual impact of our messaging, our headlines are placed within a colored holding shape. This creates a bold and attention getting block of color on a layout or page, and draws the reader’s eye towards the most important message or theme.
The border between text and holding shape edge is the width of the the vertical portions of the type, e.g. the width of a capital “I”. This width is approx. equal to 1/7 of the point size or pixel size of the type. The leading, or distance between the lines of type, is approx. equal to 90% of the point size of the type.
The preferred treatment is for all lines of type to be left justified. If a staggered treatment is used, the lines should always proceed down and to the right.
The text itself should take its color from the background as much as possible, almost as though the letters are cut out of the bounding rectangles.
An example of blue text on a blue background.
Use black text when the treatment is used on top of photography.
Another exception occurs when a hover state creates the holding shape. In these cases, ensure that the text is legible whether it has the holding shape or not.
HOLDING SHAPE TEMPLATES
To make designing layouts and messaging easier, 1-5 line templates are available. To use the templates simply type in the desired message and the holding shapes automatically adjust. The resulting blocks of type can then be scaled as needed.
As with our logos, the red holding shapes represent resistance and blue holding shapes denote support. Be sure to select the correct color combination for the desired background treatment. All of the same color usage rules from the primary logos apply to the holding shape templates.
