Skip to content

# Typography

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

# 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 OldSkyline 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!

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
NameWeightLine HeightFont SizeREMs
SkyDisplay Lg
600122%34px2.441rem
SkyDisplay Md
400128%28px1.953rem
SkyDisplay Sm
400128%22px1.25rem
SkyDisplay Xs
600128%18px1.25rem
SkyText Strong
600142%14px1rem
SkyText
400142%14px1rem
SkyText Sm Strong
600142%12.5px0.889rem
SkyText Sm
400142%12.5px0.889rem
SkyText Caps
400142%12.5px0.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

Need help?

Send us a message in the #skyline-design-system Slack channel.

Have an idea to help us improve?