# Typography

An intuitive, purposeful set of typographic styles to use throughout our products

Typeface
Typography Update
Styles
Usage
Color
Pairings

# Typeface

We exclusively use Open Sans for product design.

Don't have Open Sans installed?

You can download the font from Google Fonts.

# Typography Update

Skyline typography styles have been updated to being on a scale. Below is how the old heading styles map to the new scale-based ones.

Mapping of old heading styles to new styles
Skyline Old	Skyline New
Heading 1	SkyDisplay Lg
Heading 2	SkyDisplay Md
Heading 3	SkyDisplay Md
Heading 4	SkyDisplay Sm
Heading 5	SkyDisplay Sm
Heading 6	SkyDisplay Xs
Subheading 2	SkyText Strong
Body	SkyText
	SkyText Sm Strong New!
Subheading 4	SkyText Sm
Subheading 1	SkyText Caps
Subheading 3	SkyText Caps

# Styles

Want to use these in a project?

All Display and Text styles are available as components!

View Components

Skyline typography styles should get you 90% of what you need. Sometimes there may be a need to create something bespoke, and that's ok. If you find that you commonly need a typography style that's not in Skyline, it might be a good time to suggest an additional style to the system.

Mapping of old heading styles to new styles
Name	Weight	Line Height	Font Size	REMs
SkyDisplay Lg	600	122%	34px	2.441rem
SkyDisplay Md	400	128%	28px	1.953rem
SkyDisplay Sm	400	128%	22px	1.25rem
SkyDisplay Xs	600	128%	18px	1.25rem
SkyText Strong	600	142%	14px	1rem
SkyText	400	142%	14px	1rem
SkyText Sm Strong	600	142%	12.5px	0.889rem
SkyText Sm	400	142%	12.5px	0.889rem
SkyText Caps	400	142%	12.5px	0.889rem