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
[email protected]#$%^%&*
Whitney Light
  • Weight:300
  • Style:normal
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
[email protected]#$%^%&*
Whitney Normal
  • Weight:400
  • Style:normal
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
[email protected]#$%^%&*
Whitney Medium
  • Weight:500
  • Style:normal
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
[email protected]#$%^%&*
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
[email protected]#$%^%&*
System Ultra Thin
  • Weight:100
  • Style:normal
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
[email protected]#$%^%&*
System Light
  • Weight:300
  • Style:normal
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
[email protected]#$%^%&*
System Normal
  • Weight:400
  • Style:normal
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
[email protected]#$%^%&*
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;