Font families are assigned specific roles — like heading or code — to help keep text styles consistent and easy to customize. By default, these properties use system fonts and generic fallbacks to maximize performance.
| Custom Property | Default Value | Preview |
|---|---|---|
--wa-font-family-body |
ui-sans-serif, system-ui, sans-serif |
Sphinx of black quartz, judge my vow. |
--wa-font-family-heading |
var(--wa-font-family-body) |
Sphinx of black quartz, judge my vow. |
--wa-font-family-code |
ui-monospace, monospace |
Sphinx of black quartz, judge my vow. |
--wa-font-family-longform |
ui-serif, serif |
Sphinx of black quartz, judge my vow. |
Font sizes use the Major Second type scale, rounded to the nearest whole pixel assuming a 16px root font size. To maximize variation in larger font sizes, every other step on the scale is skipped.
Each font size uses a calc() function with --wa-font-size-scale to scale all font sizes at once. By default, this multiplier is 1. The table below lists the result of the calculation.
| Custom Property | Default Value | Preview |
|---|---|---|
--wa-font-size-2xs |
0.6875rem (11px) |
AaBb |
--wa-font-size-xs |
0.75rem (12px) |
AaBb |
--wa-font-size-s |
0.875rem (14px) |
AaBb |
--wa-font-size-m |
1rem (16px) |
AaBb |
--wa-font-size-l |
1.25rem (20px) |
AaBb |
--wa-font-size-xl |
1.625rem (26px) |
AaBb |
--wa-font-size-2xl |
2rem (32px) |
AaBb |
--wa-font-size-3xl |
2.5625rem (41px) |
AaBb |
--wa-font-size-4xl |
3.25rem (52px) |
AaBb |
Font weight properties are given common names or assigned specific roles.
Common weights let you easily adjust the full range of weights for your theme.
| Custom Property | Default Value | Preview |
|---|---|---|
--wa-font-weight-light |
300 |
AaBb |
--wa-font-weight-normal |
400 |
AaBb |
--wa-font-weight-semibold |
500 |
AaBb |
--wa-font-weight-bold |
600 |
AaBb |
Role-based weights allow you to uniformly adjust the weight of certain types of text to keep styles consistent.
| Custom Property | Default Value | Preview |
|---|---|---|
--wa-font-weight-body |
var(--wa-font-weight-normal) |
AaBb |
--wa-font-weight-heading |
var(--wa-font-weight-bold) |
AaBb |
--wa-font-weight-action |
var(--wa-font-weight-semibold) |
AaBb |
In Web Awesome, we use --wa-font-weight-action for interactive text, such as button labels and tab names. We also recommend using --wa-font-weight-action for text that uses color alone to signal interactivity, such as links without text decoration.
Line heights control the distance between lines of text and are unitless to scale proportionately with text size. For readability, --wa-line-height-normal, recommended for paragraph text, should be 1.5 or greater.
| Custom Property | Default Value | Preview |
|---|---|---|
--wa-line-height-condensed |
1.2 |
AaBb |
--wa-line-height-normal |
1.6 |
AaBb |
--wa-line-height-expanded |
2 |
AaBb |
Together with --wa-color-link, these tokens add text decoration to <a> elements to signal their role as hyperlinks.
| Custom Property | Default Value |
|---|---|
--wa-link-decoration-default |
underline color-mix(in oklab, var(--wa-color-text-link) 70%, transparent) dotted |
--wa-link-decoration-hover |
underline |