Typography
Typography is an important part of a design system that brings consistency across experiences and platforms. Good typographic rules help present content clearly and efficiently.
How it Works
The Typography for the OK.gov ecosystem is structured on a type scale. The type scale gives a hierarchy to the content, guiding the user through the page. There are two type scales. One is designed for Large Breakpoints such as a desktop size device. There is also a type scale for Small and Medium Breakpoints which is simply scaled down proportionally from the larger size.
How to Use
The typescale begins with large headline type followed by increasingly smaller headlines until it reaches body text size. The body text is mainly used for paragraphs of text, as well as in navigation and tables. The typescale also supports smaller text sizes such as Caption Text and Legal Text.
Typeface Design Attributes
Montserrat
- Designed by Julieta Ulanovsky, 2014
- Geometric sans-serif typeface
- Often compared with Gotham and Proxima Nova
- Used for headlines and titling
Open Sans
- Designed by Steve Matteson, 2011
- Humanist sans-serif typeface
- Multiple weights, making it suitable to a wide-ranging system
- Considered the new Arial
- Used for body copy and captions
Large Breakpoint
Heading One (H1)
USAGE
Page Headings
SPECIFICS
Font: Montserrat
Weight: Semibold
Color: Slate Gray Dark
DESKTOP:
Size: 2.75rem
Line Height: 1.25
Letter Spacing: 0px
MOBILE:
Size: 2rem
Line Height: 1.2
Letter Spacing: 0.1px
Heading Two (H2)
USAGE
Subheadings
SPECIFICS
Font: Montserrat
Weight: Semibold
Color: Slate Gray Dark
DESKTOP:
Size: 2.125rem
Line Height: 1.5
Letter Spacing: 0.12px
MOBILE:
Size: 1.75rem
Line Height: 1.2
Letter Spacing: 0.1px
Heading Three (H3)
USAGE
Subheadings
SPECIFICS
Font: Montserrat
Weight: Semibold
Color: Slate Gray Dark
DESKTOP:
Size: 1.75rem
Line Height: 1.2
Letter Spacing: 0.5px
MOBILE:
Size: 1.625rem
Line Height: 1.2
Letter Spacing: 0.09px
Heading Four (H4)
USAGE
Subheadings
SPECIFICS
Font: Montserrat
Weight: Semibold
Color: Slate Gray Dark
DESKTOP:
Size: 1.5rem
Line Height: 1.2
Letter Spacing: 0.5px
MOBILE:
Size: 1.3125rem
Line Height: 1
Letter Spacing: 0.09px
Heading Five (H5)
USAGE
Subheadings
SPECIFICS
Font: Montserrat
Weight: Semibold
Color: Slate Gray Dark
DESKTOP:
Size: 1.3125rem
Line Height: 1.2
Letter Spacing: 0.5px
MOBILE:
Size: 1.125rem
Line Height: 1
Letter Spacing: 0.09px
Heading Six (H6)
USAGE
Subheadings
SPECIFICS
Font: Montserrat
Weight: Semibold
Color: Slate Gray Dark
DESKTOP:
Size: 1.125rem
Line Height: 1.2
Letter Spacing: 0.5px
MOBILE:
Size: 1rem
Line Height: 1
Letter Spacing: 0.09px
Titling
USAGE
Subheadings
SPECIFICS
Font: Montserrat
Weight: Semibold
Color: Slate Gray Dark
DESKTOP:
Size: 1.125rem
Line Height: 1.2
Letter Spacing: 0.5px
MOBILE:
Size: 1rem
Line Height: 1
Letter Spacing: 0.09px
Body Text
USAGE
Navigation
Body Text
Callout Text
SPECIFICS
Font: Open Sans
Weight: Regular
Color: Slate Gray Dark
DESKTOP:
Size: 1.125rem
Line Height: 1.2
Letter Spacing: 0.5px
MOBILE:
Size: 1rem
Line Height: 1
Letter Spacing: 0.09px
Captions
USAGE
Navigation
Body Text
Callout Text
SPECIFICS
Font: Open Sans
Weight: Regular
Color: Slate Gray Dark
DESKTOP:
Size: 1rem
Line Height: 1.5
Letter Spacing: 0.38px
MOBILE:
Size: 0.875rem
Line Height: 1.5
Letter Spacing: 0.34px
Legal Copy
USAGE
Navigation
Body Text
Callout Text
SPECIFICS
Font: Montserrat
Weight: Semibold
Color: Slate Gray Dark
DESKTOP:
Size: 0.875rem
Line Height: 1.5
Letter Spacing: 0.34px
MOBILE:
Size: 0.75rem
Line Height: 1.5
Letter Spacing: 0.29px
Font Styles & Sizes
| FONT STYLES | DESKTOP SIZE | MOBILE SIZE |
|---|---|---|
| H1 | 2.75rem | 2.125rem |
| H2 | 2.125rem | 1.75rem |
| H3 | 1.75rem | 1.5rem |
| H4 | 1.5rem | 1.3125rem |
| H5 | 1.3125rem | 1.125rem |
| H6 | 1.125rem | 1rem |
| Titles | 1.125rem | 1rem |
| Body Text | 1.125rem | 1rem |
| Captions | 1rem | 0.875rem |
| Legal | 0.875rem | 0.75rem |