6.7 KiB
title, description, layout
| title | description | layout |
|---|---|---|
| Typography | Get consistent font styles and vertical rhythm with Web Awesome's typography properties. | page-outline |
Font Family
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 Size
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-multiplier 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
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 Height
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 |
Links
Together with --wa-color-link, these custom properties 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 |