Text
Font Family
| Token | Value |
|---|---|
fontFamily("sans")
|
"Source Sans Pro", "Helvetica Neue", Arial, sans-serif |
fontFamily("headings")
|
"Source Sans Pro", "Helvetica Neue", Arial, sans-serif |
Font Weight
| Token | Value |
|---|---|
fontWeight("thin")
|
300 |
fontWeight("normal")
|
400 |
fontWeight("bold")
|
600 |
Font Size
| Token | Value |
|---|---|
fontSize("tiny")
|
0.8rem ~ 12px |
fontSize("base")
|
1rem ~ 15px |
fontSize("smallest")
|
1rem ~ 15px |
fontSize("smaller")
|
1.06667rem ~16px |
fontSize("small")
|
1.2rem ~ 18px |
fontSize("large")
|
1.33333rem ~ 20px |
fontSize("larger")
|
1.6rem ~ 24px |
fontSize("largest")
|
2rem ~ 30px |
Line Height
| Token | Value |
|---|---|
lineHeight("tiny")
|
1.3334 |
lineHeight("base")
|
1.6 |
lineHeight("smallest")
|
1.6 |
lineHeight("smaller")
|
1.5 |
lineHeight("small")
|
1.25 |
lineHeight("large")
|
1.2 |
lineHeight("larger")
|
1.1667 |
lineHeight("largest")
|
1.0667 |
Text Transformation Utilities
| Mixin | Purpose |
|---|---|
u-textTruncate()
|
Used to prevent long, unbroken strings from overflowing their containers by using an ellipsis (…) |