Ready
Typography
The typographic styles that make up our Basis applications user interfaces. All styles use Source Sans Pro.
Styles
.
type-body-regular-sm
--
type-size-12
--
font-weight-400
--
line-height-16
--
inter
.
type-body-regular-md
--
type-size-14
--
font-weight-400
--
line-height-20
--
inter
.
type-body-regular-lg
--
type-size-16
--
font-weight-400
--
line-height-24
--
inter
.
type-body-semibold-sm
--
type-size-12
--
font-weight-600
--
line-height-16
--
inter
.
type-body-semibold-md
--
type-size-14
--
font-weight-600
--
line-height-20
--
inter
.
type-body-semibold-lg
--
type-size-16
--
font-weight-600
--
line-height-24
--
inter
.
type-body-bold-sm
--
type-size-12
--
font-weight-700
--
line-height-16
--
inter
.
type-body-bold-md
--
type-size-14
--
font-weight-700
--
line-height-20
--
inter
.
type-body-bold-lg
--
type-size-16
--
font-weight-700
--
line-height-24
--
inter
.
type-heading-regular-sm
--
type-size-20
--
font-weight-400
--
line-height-24
--
inter
.
type-heading-regular-md
--
type-size-24
--
font-weight-400
--
line-height-32
--
inter
.
type-heading-regular-lg
--
type-size-32
--
font-weight-400
--
line-height-36
--
inter
.
type-heading-semibold-sm
--
type-size-20
--
font-weight-600
--
line-height-24
--
inter
.
type-heading-semibold-md
--
type-size-24
--
font-weight-600
--
line-height-32
--
inter
.
type-heading-semibold-lg
--
type-size-32
--
font-weight-600
--
line-height-36
--
inter
.
type-heading-light-display
--
type-size-60
--
font-weight-300
--
line-height-72
--
inter
.
type-heading-regular-display
--
type-size-60
--
font-weight-400
--
line-height-72
--
inter
.
type-heading-semibold-display
--
type-size-60
--
font-weight-600
--
line-height-72
--
inter
.
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-heading
--
neutral-1200
.
type-color-default
--
neutral-900
.
type-color-subtle
--
neutral-700
.
type-color-disabled
--
neutral-500
.
type-color-heading-inverse
--
neutral-0
.
type-color-default-inverse
--
neutral-400
.
type-color-subtle-inverse
--
neutral-600
.
type-color-disabled-inverse
--
neutral-700
Best Practices
1
.
Hierarchy
Use the typographic scale to establish content hierarchy.¹ Use smaller text for less important information and larger text for more significant information.
Do
Don't
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. ¹
Do
Don't
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.
Do
Tokens
Name
Value
--
type-size-12
12px
--
type-size-14
14px
--
type-size-16
16px
--
type-size-20
20px
--
type-size-24
24px
--
type-size-26
26px
--
type-size-32
32px
--
type-size-60
60px
--
line-height-16
16px
--
line-height-20
20px
--
line-height-24
24px
--
line-height-32
32px
--
line-height-36
36px
--
line-height-72
72px
--
font-weight-300
300 (light)
--
font-weight-400
400 (regular)
--
font-weight-600
600 (semibold)
--
font-weight-700
700 (bold)
--
inter
inter
--
source-sans-pro-sc
Source Sans Pro Small Caps
More
Additional Reading
7 typography tips for interface design https://uxdesign.cc/7-typography-tips-for-interface-design-b7185e9397c4