.
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.
Accessibility
Typography should follow the color scale to meet the contrast ratio for AA standards, based on Web Content Accessibility Guidelines (WCAG) guidelines.
Benefits: People with low vision often have difficulty reading text that does not contrast with its background. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a minimum luminance contrast ratio between the text and its background can make the text more readable even if the person does not see the full range of colors. It also works for the rare individuals who see no color.¹
Additional Reading
7 typography tips for interface design https://uxdesign.cc/7-typography-tips-for-interface-design-b7185e9397c4