Ready
Typography
The typographic styles that make up our Basis applications user interfaces. All styles use Source Sans Pro.
Ready
Typography
The typographic styles that make up our Basis applications user interfaces. All styles use Source Sans Pro.
Ready
Typography
The typographic styles that make up our Basis applications user interfaces. All styles use Source Sans Pro.
Styles
Styles
Styles
.
type-body-regular-sm
--
type-size-12
--
font-weight-400
--
line-height-16
--
source-sans-pro
.
type-body-regular-sm
--
type-size-12
--
font-weight-400
--
line-height-16
--
source-sans-pro
.
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-md
--
type-size-14
--
font-weight-400
--
line-height-20
--
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-regular-lg
--
type-size-16
--
font-weight-400
--
line-height-24
--
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-sm
--
type-size-12
--
font-weight-600
--
line-height-16
--
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-md
--
type-size-14
--
font-weight-600
--
line-height-20
--
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-semibold-lg
--
type-size-16
--
font-weight-600
--
line-height-24
--
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-sm
--
type-size-12
--
font-weight-700
--
line-height-16
--
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-md
--
type-size-14
--
font-weight-700
--
line-height-20
--
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-body-bold-lg
--
type-size-16
--
font-weight-700
--
line-height-24
--
source-sans-pro
.
type-body-bold-lg
--
type-size-16
--
font-weight-700
--
line-height-24
--
source-sans-pro
.
type-heading-regular-sm
--
type-size-20
--
font-weight-400
--
line-height-24
--
source-sans-pro
.
type-heading-regular-sm
--
type-size-20
--
font-weight-400
--
line-height-24
--
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-md
--
type-size-24
--
font-weight-400
--
line-height-32
--
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-regular-lg
--
type-size-32
--
font-weight-400
--
line-height-36
--
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-sm
--
type-size-20
--
font-weight-600
--
line-height-24
--
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-md
--
type-size-24
--
font-weight-600
--
line-height-32
--
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-semibold-lg
--
type-size-32
--
font-weight-600
--
line-height-36
--
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-light-display
--
type-size-60
--
font-weight-300
--
line-height-72
--
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-regular-display
--
type-size-60
--
font-weight-400
--
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-heading-semibold-display
--
type-size-60
--
font-weight-600
--
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-sm
--
type-size-12
--
font-weight-400
--
line-height-16
--
source-sans-pro-sc
.
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-md
--
type-size-14
--
font-weight-400
--
line-height-20
--
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-regular-lg
--
type-size-16
--
font-weight-400
--
line-height-24
--
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-sm
--
type-size-12
--
font-weight-600
--
line-height-16
--
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-md
--
type-size-14
--
font-weight-600
--
line-height-20
--
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-smallcaps-semibold-lg
--
type-size-16
--
font-weight-600
--
line-height-24
--
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-heading
--
neutral-1200
.
type-color-heading
--
neutral-1200
.
type-color-default
--
neutral-900
.
type-color-default
--
neutral-900
.
type-color-default
--
neutral-900
.
type-color-subtle
--
neutral-700
.
type-color-subtle
--
neutral-700
.
type-color-subtle
--
neutral-700
.
type-color-disabled
--
neutral-500
.
type-color-disabled
--
neutral-500
.
type-color-disabled
--
neutral-500
.
type-color-heading-inverse
--
neutral-0
.
type-color-heading-inverse
--
neutral-0
.
type-color-heading-inverse
--
neutral-0
.
type-color-default-inverse
--
neutral-400
.
type-color-default-inverse
--
neutral-400
.
type-color-default-inverse
--
neutral-400
.
type-color-subtle-inverse
--
neutral-600
.
type-color-subtle-inverse
--
neutral-600
.
type-color-subtle-inverse
--
neutral-600
.
type-color-disabled-inverse
--
neutral-700
.
type-color-disabled-inverse
--
neutral-700
.
type-color-disabled-inverse
--
neutral-700
Best Practices
Best Practices
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.
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.
Tokens
Tokens
Tokens
Name
Value
Name
Value
Name
Value
--
type-size-12
12px
--
type-size-12
12px
--
type-size-12
12px
--
type-size-14
14px
--
type-size-14
14px
--
type-size-14
14px
--
type-size-16
16px
--
type-size-16
16px
--
type-size-16
16px
--
type-size-20
20px
--
type-size-20
20px
--
type-size-20
20px
--
type-size-24
24px
--
type-size-24
24px
--
type-size-24
24px
--
type-size-26
26px
--
type-size-26
26px
--
type-size-26
26px
--
type-size-32
32px
--
type-size-32
32px
--
type-size-32
32px
--
type-size-60
60px
--
type-size-60
60px
--
type-size-60
60px
--
line-height-16
16px
--
line-height-16
16px
--
line-height-16
16px
--
line-height-20
20px
--
line-height-20
20px
--
line-height-20
20px
--
line-height-24
24px
--
line-height-24
24px
--
line-height-24
24px
--
line-height-32
32px
--
line-height-32
32px
--
line-height-32
32px
--
line-height-36
36px
--
line-height-36
36px
--
line-height-36
36px
--
line-height-72
72px
--
line-height-72
72px
--
line-height-72
72px
--
font-weight-300
300 (light)
--
font-weight-300
300 (light)
--
font-weight-300
300 (light)
--
font-weight-400
400 (regular)
--
font-weight-400
400 (regular)
--
font-weight-400
400 (regular)
--
font-weight-600
600 (semibold)
--
font-weight-600
600 (semibold)
--
font-weight-600
600 (semibold)
--
font-weight-700
700 (bold)
--
font-weight-700
700 (bold)
--
font-weight-700
700 (bold)
--
source-sans-pro
Source Sans Pro
--
source-sans-pro
Source Sans Pro
--
source-sans-pro
Source Sans Pro
--
source-sans-pro-sc
Source Sans Pro Small Caps
--
source-sans-pro-sc
Source Sans Pro Small Caps
--
source-sans-pro-sc
Source Sans Pro Small Caps
More
More
More
Additional Reading
7 typography tips for interface design https://uxdesign.cc/7-typography-tips-for-interface-design-b7185e9397c4