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
Open Sans
- Designed by Julieta Ulanovsky, 2014
- Geometric sans-serif typeface
- Often compared with Gotham and Proxima Nova
- Used for headlines and titling
- 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
H1
Heading 1 with 2 Lines
USAGE
Page Headings
SPECIFICS
Font: Montserrat
Weight: Semibold
Color: Slate Gray Dark
DESKTOP:
Size: 64px
Line Spacing: 72px
Letter Spacing: 0px
MOBILE:
Size: 40px
Line Spacing: 50px
Letter Spacing: 0.1px
H2
Heading Two with Two Lines Lorem Ipsum
USAGE
Subheadings
SPECIFICS
Font: Montserrat
Weight: Semibold
Color: Slate Gray Dark
DESKTOP:
Size: 24px
Line Spacing: 30px
Letter Spacing: 0.12px
MOBILE:
Size: 21px
Line Spacing: 27px
Letter Spacing: 0.1px
H3
Heading Three with Two Lines Lorem Ipsum
USAGE
Subheadings
SPECIFICS
Font: Montserrat
Weight: Semibold
Color: Slate Gray Dark
DESKTOP:
Size: 21px
Line Spacing: 27px
Letter Spacing: 0.5px
MOBILE:
Size: 18px
Line Spacing: 24px
Letter Spacing: 0.09px
H4 to H6
Heading Four to Six with Two Lines Lorem Ipsum
USAGE
Subheadings
SPECIFICS:
Font: Open Sans
Weight: Semibold
Color: Slate Gray Dark
DESKTOP:
Size: 18px
Line Spacing: 27px
Letter Spacing: 0.43px
MOBILE:
Size: 16px
Line Spacing: 24px
Letter Spacing: 0.38px
Titling
ALL CAPS WITH TWO LINES GOES HERE LOREM IPSUM DOLOR SIT
USAGE
Subheadings
SPECIFICS:
Font: Montserrat
Weight: Semibold
Color: Slate Gray Dark
DESKTOP:
Size: 18px
Line Spacing: 27px
Letter Spacing: 1.8px
MOBILE:
Size: 16px
Line Spacing: 24px
Letter Spacing: 1px
Body Text
Body Text with some more lines of text ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia at quis risus sed vulputate odio ut enim blandit volutpat maecenas volutpat
USAGE
Navigation
Body Text
Callout Text
SPECIFICS:
Font: Open Sans
Weight: Regular
Color: Slate Gray Dark
DESKTOP:
Size: 18px
Line Spacing: 27px
Letter Spacing: .43px
MOBILE:
Size: 16px
Line Spacing: 24px
Letter Spacing: .38px
Captions
Captions with some more lines of text ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia at quis risus sed vulputate odio ut enim blandit volutpat maecenas volutpat
USAGE
Navigation
Body Text
Callout Text
SPECIFICS:
Font: Open Sans
Weight: Regular
Color: Slate Gray Dark
DESKTOP:
Size: 16px
Line Spacing: 24px
Letter Spacing: .38px
MOBILE:
Size: 14px
Line Spacing: 21px
Letter Spacing: .34px
Legal Copy
Legal Copy lacus vestibulum sed arcu non odio
USAGE
Navigation
Body Text
Callout Text
SPECIFICS:
Font: Montserrat
Weight: Semibold
Color: Slate Gray Dark
DESKTOP:
Size: 14px
Line Spacing: 21px
Letter Spacing: .34px
MOBILE:
Size: 12px
Line Spacing: 18px
Letter Spacing: .29px
Font Sizes
DESKTOP CHARACTER STYLE
H1
H2
H3
H4-6
Titles
Body Text
Captions
Legal
SIZE
42px
24px
21px
18px
18px
18px
16px
14px
DESKTOP CHARACTER STYLE
H1
H2
H3
H4-6
Titles
Body Text
Captions
Legal
SIZE
32px
21px
18px
16px
16px
16px
14px
12px