Typography
The Six Webcomponents library uses a carefully selected set of typography tokens to ensure readability and visual hierarchy across all interfaces.
Font Families
--six-font-sans The quick brown fox jumps over the lazy dog
'Noto Sans', sans-serif
--six-font-serif The quick brown fox jumps over the lazy dog
Georgia, 'Times New Roman', serif
--six-font-mono The quick brown fox jumps over the lazy dog
SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace
--six-font-family The quick brown fox jumps over the lazy dog
Default font family (same as --six-font-sans)
Font Sizes
--six-font-size-xxx-small The quick brown fox jumps over the lazy dog
0.5rem (8px)
--six-font-size-xx-small The quick brown fox jumps over the lazy dog
0.625rem (10px)
--six-font-size-x-small The quick brown fox jumps over the lazy dog
0.75rem (12px)
--six-font-size-small The quick brown fox jumps over the lazy dog
0.875rem (14px)
--six-font-size-medium The quick brown fox jumps over the lazy dog
1rem (16px)
--six-font-size-large The quick brown fox jumps over the lazy dog
1.25rem (20px)
--six-font-size-x-large The quick brown fox jumps over the lazy dog
1.5rem (24px)
--six-font-size-xx-large The quick brown fox jumps over the lazy dog
2.25rem (36px)
--six-font-size-xxx-large The quick brown...
3rem (48px)
--six-font-size-xxxx-large The quick...
4.5rem (72px)
Font Weights
--six-font-weight-light The quick brown fox jumps over the lazy dog
300
--six-font-weight-normal The quick brown fox jumps over the lazy dog
400
--six-font-weight-semibold The quick brown fox jumps over the lazy dog
500
--six-font-weight-bold The quick brown fox jumps over the lazy dog
700
Letter Spacing
--six-letter-spacing-dense The quick brown fox jumps over the lazy dog
-0.015em
--six-letter-spacing-normal The quick brown fox jumps over the lazy dog
normal
--six-letter-spacing-loose The quick brown fox jumps over the lazy dog
0.075em
Line Heights
--six-line-height-dense This is an example of dense line height. The text should appear more compact with less space between lines. Here's another line to demonstrate the spacing between multiple lines of text.
1.4
--six-line-height-normal This is an example of normal line height. The text should have a comfortable amount of spacing between lines. Here's another line to demonstrate the spacing between multiple lines of text.
1.8
--six-line-height-loose This is an example of loose line height. The text should have more generous spacing between lines. Here's another line to demonstrate the spacing between multiple lines of text.
2.2
Example Usage
css
.heading {
font-family: var(--six-font-sans);
font-size: var(--six-font-size-x-large);
font-weight: var(--six-font-weight-bold);
letter-spacing: var(--six-letter-spacing-dense);
line-height: var(--six-line-height-dense);
}
.body-text {
font-family: var(--six-font-sans);
font-size: var(--six-font-size-medium);
font-weight: var(--six-font-weight-normal);
letter-spacing: var(--six-letter-spacing-normal);
line-height: var(--six-line-height-normal);
}