Text is the primary way that users digest content and accomplish work, so it’s important to use good typographic principles to establish a clear visual hierarchy and to maximize legibility.
The primary font used in SDC is ‘Lato‘.
Lato, with its broad range of weights and extensive unicode support was chosen to provide a good balance between legibility, personality and readability. As the majority of our User Interface (UI) is text based, we use weight and size to denote hierarchy and separation between content. Lato’s letterforms also provide a good level of contrast which aid readability on poorer quality displays and for users with visual impairment.
| 320 | 321-599 | 600+ |
|---|---|---|
Jupiter Lato Bold - 2rem/28px |
Jupiter Lato Bold - 2rem/28px |
Jupiter Lato Bold - 2rem/36px |
Saturn Lato Bold - 1.5rem/24px |
Saturn Lato Bold - 1.5rem/24px |
Saturn Lato Bold - 1.5rem/28px |
Neptune Lato Bold - 1.2rem/18px |
Neptune Lato Bold - 1.2rem/20px |
Neptune Lato Bold - 1.2rem/22px |
Venus Lato Bold - 1rem/16px |
Venus Lato Bold - 1rem/16px |
Venus Lato Bold - 1rem/18px |
Mars Lato Regular - 1rem/16px |
Mars Lato Regular - 1rem/16px |
Mars Lato Regular - 1rem/18px |
Mercury Lato Bold - 0.7rem/14px |
Mercury Lato Bold - 0.7rem/14px |
Mercury Lato Bold - 0.7rem/14px |
Pluto Lato Regular - 0.7rem/14px |
Pluto Lato Regular - 0.7rem/14px |
Pluto Lato Regular - 0.7rem/14px |
The typographic hierarchy provides a logical visual guide to the structural hierarchy of a group.
Lato Bold
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890 £$%-_+()!@;:,.?[]{}<>/
Accented Welsh - âêíîôûŵŷ ÂÊÍÎÔÛŴŶ
Lato Regular
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890 £$%-_+()!@;:,.?[]{}<>/
Accented Welsh - âêíîôûŵŷ ÂÊÍÎÔÛŴŶ
Line height 1.4rem Letter Spacing 0.05rem/10%
Font stack - Lato, “Helvetica Neue”, Helvetica, Arial, sans-serif;