Typography

Whitney is used for all Ghost.org official websites and marketing, while System Fonts are utilised for user interfaces. Fonts should be used carefully and consistently, with particular attention to weights and line heights. Weights should always be specified with their numerical value.

Whitney Web

Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^%&*
Whitney Light
  • Weight:300
  • Style:normal
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^%&*
Whitney Normal
  • Weight:400
  • Style:normal
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^%&*
Whitney Medium
  • Weight:500
  • Style:normal
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^%&*
Whitney Bold
  • Weight:600
  • Style:normal

Usage

Whitney is a premium font from Typography.com which must be included via their CDN. It will only work on domains which have been white listed by our license.

CSS
font-family: "Whitney SSm A", "Whitney SSm B", sans-serif;

System Native

Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^%&*
System Ultra Thin
  • Weight:100
  • Style:normal
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^%&*
System Light
  • Weight:300
  • Style:normal
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^%&*
System Normal
  • Weight:400
  • Style:normal
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^%&*
System Bold
  • Weight:600
  • Style:normal

Usage

Our system font stack will load whichever font is most appropriate for the user's native device. Here's a great post which explains how and why this works really well.

CSS
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;