Typography is the foundation of the design system and creates consistency across applications. Good use of typography rules should help present content clearly.
Body Copy
See the text component or description component.
Body
Body copy is used
Capital is OpenGov's design system.
Small Body
Body copy is used
Capital is OpenGov's design system.
Description
Descriptions are used as secondary information to body copy.
Capital is OpenGov's design system.
Condensed Description
Descriptions are used as secondary information to body copy.
Capital is OpenGov's design system.
Usage
Do
Use varying sizes and colors to add hierarchy to text.
Use condensed text where horizontal space is limited.
Use headers or labels instead of body copy when adding titles.
Don't
Use small or minimum sizes as the default.
Combine condensed text with the default font size.
Use bold or medium body copy as labels or headers.
Headers
See the header component.
Hero Header
Description about uses
Hello world
H1 Header
H1 Headers should always be used as the page title. Nothing should sit about this header except the navigation and breadcrumbs.
Benton Sans aligns perfectly with the traits, tone and requirements of the system. Benton Sans is a digital typeface family begun by Tobias Frere-Jones, who studied drawings of Morris Fuller Benton's 1908 typeface News Gothic.
Morris Benton Fuller is an American Type Designer whose typeface, Century Schoolbook, is required on all material submitted to the Supreme Court.
Benton Sans Characteristics
Credible
Benton feels credible – especially its numbers. One PM with a background in finance said, “These look like an accountant’s numbers.”
Relatable
Even though the face is refined and reserved, it has an organic quality and subtle variations. It avoids feeling severe and and moves toward a humanist tone of voice, the perfect balance for OpenGov.
Flexible
Benton offers most of the flexibility that OpenGov requires. Some features that make it especially suited for OpenGov: multiple widths, weight duplexing, and tabular figures.
Classic
With roots in the classic typeface News Gothic, Benton feels universal and established.
