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?

Don't have Open Sans installed?

You can download the font from Google Fonts.

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?

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

Usage

Aim To

Color

There are 2 primary variants for type colour, Gray 700 and Gray 800. See Pairings for examples of when to use each value.

Aim To

Don't

Pairings

Below are some examples of some common usages of Skyline typography styles.

SkyDisplay Lg + SkyDisplay Sm

Manage Photos

Run For the Cure Victoria

SkyDisplay Lg + SkyText

Earth Day Clean Up

Demonstrate your support for environmental protection

SkyDisplay Md + SkyText

A Place For All

Belonging is a basic human need. It’s a state of connection; of being part of something; of being included.

SkyDisplay Sm + SkyText Sm

$347.00

Used

SkyText Strong + SkyText

Jabori Achebe

January 23, 2022

SkyText Sm + SkyText Sm Strong

Goal:

$2,000

SkyText Strong + SkyDisplay Ld

Client ID: 1B35400

Donation Report

SkyDisplay Lg + SkyText Caps (Gray 700)

$382

Raised

9

Donors

SkyText Md + SkyText Caps

100%

Donation Matching