.
type-body-regular-sm
type-size-12
font-weight-400
line-height-16
source-sans-pro
.
type-body-regular-md
type-size-14
font-weight-400
line-height-20
source-sans-pro
.
type-body-regular-lg
type-size-16
font-weight-400
line-height-24
source-sans-pro
.
type-body-semibold-sm
type-size-12
font-weight-600
line-height-16
source-sans-pro
.
type-body-semibold-md
type-size-14
font-weight-600
line-height-20
source-sans-pro
.
type-body-semibold-lg
type-size-16
font-weight-600
line-height-24
source-sans-pro
.
type-body-bold-sm
type-size-12
font-weight-700
line-height-16
source-sans-pro
.
type-body-bold-md
type-size-14
font-weight-700
line-height-20
source-sans-pro
.
type-body-bold-lg
type-size-16
font-weight-700
line-height-24
source-sans-pro
.
type-heading-light-sm
type-size-20
font-weight-300
line-height-24
source-sans-pro
.
type-heading-light-md
type-size-24
font-weight-300
line-height-32
source-sans-pro
.
type-heading-light-lg
type-size-32
font-weight-300
line-height-36
source-sans-pro
.
type-heading-regular-sm
type-size-20
font-weight-400
line-height-24
source-sans-pro
.
type-heading-regular-md
type-size-24
font-weight-400
line-height-32
source-sans-pro
.
type-heading-regular-lg
type-size-32
font-weight-400
line-height-36
source-sans-pro
.
type-heading-semibold-sm
type-size-20
font-weight-600
line-height-24
source-sans-pro
.
type-heading-semibold-md
type-size-24
font-weight-600
line-height-32
source-sans-pro
.
type-heading-semibold-lg
type-size-32
font-weight-600
line-height-36
source-sans-pro
.
type-heading-light-display
type-size-60
font-weight-300
line-height-72
source-sans-pro
.
type-heading-regular-display
type-size-60
font-weight-400
line-height-72
source-sans-pro
.
type-heading-semibold-display
type-size-60
font-weight-600
line-height-72
source-sans-pro
.
type-smallcaps-regular-sm
type-size-12
font-weight-400
line-height-16
source-sans-pro-sc
.
type-smallcaps-regular-md
type-size-14
font-weight-400
line-height-20
source-sans-pro-sc
.
type-smallcaps-regular-lg
type-size-16
font-weight-400
line-height-24
source-sans-pro-sc
.
type-smallcaps-semibold-sm
type-size-12
font-weight-600
line-height-16
source-sans-pro-sc
.
type-smallcaps-semibold-md
type-size-14
font-weight-600
line-height-20
source-sans-pro-sc
.
type-smallcaps-semibold-lg
type-size-16
font-weight-600
line-height-24
source-sans-pro-sc
.
type-color-charcoal-grey
Use as primary text color
charcoal-grey
.
type-color-slate-grey
Use as secondary text color
slate-grey
.
type-color-smoke-grey
Use as tertiary text color
smoke-grey
.
type-color-pure-white
Use as primary text color on dark surfaces
pure-white
.
type-color-cloud-grey
Use as secondary text color on dark surfaces
cloud-grey
.
type-color-concrete-grey
Use as tertiary text color on dark surfaces.
concrete-grey
1. Hierarchy
Use the typographic scale to establish content hierarchy.¹ Use smaller text for less important information and larger text for more significant information.
2. Line Length
Maintain a proper line length to improve legibility. The suggested line length for on-screen text is within the range of 60 to 80 characters, this is based on a screen size of 1440px and font size of 16px. ¹
3. Combinations
Here are some examples of frequently used typography combinations that can serve as a helpful starting point. It is important to note that these combinations are not obligatory and can be customized according to design requirements.
Additional Reading
7 typography tips for interface design https://uxdesign.cc/7-typography-tips-for-interface-design-b7185e9397c4