Typography
Font styles and modifiers, and why components never override them.
Font styles
Text is set in Inter. fusion-css defines a fixed set of font styles as classes; each sets family, size, weight, line height and letter spacing at once. The sizes below are those of the current theme.
display-fontHero numbers and landing pages
heading-1-fontPage titles
heading-2-fontSections of a page
heading-3-fontTile titles
heading-4-fontSubsections
heading-5-fontSmall headings, menu sections
heading-6-fontSmallest headings
subheading-fontText below headings
subheading-2-fontLabels in dense layouts
body-fontRunning text
button-fontLabels of buttons
caption-fontCaptions of figures and tables
helper-text-fontHints below form fields
overline-fontSmall line above a title
Modifiers
Modifiers adjust a font style without replacing it.
| Modifier | Effect | Example |
|---|---|---|
small-font | Smaller size and line height | Small body text |
large-font | Larger size and line height | Large body text |
strong-font | Bold weight | Strong body text |
Using font styles
Put the classes on the element, or apply a style in SCSS with apply-font-style.
<h2 className="heading-3-font">Revenue</h2><p className="body-font small-font">Updated 5 minutes ago</p>
@use "@brynlabs/fusion-css/index" as fusioncss;.title {@include fusioncss.apply-font-style("heading-4-font");}
Never override font styles
Components must not override what a font style sets: font-size, font-weight, line-height, font-family and letter-spacing. Pick another style or a modifier instead. This keeps the rhythm of the text consistent and lets themes change the typography in one place.
The one exception: text fields use at least 16px on touch screens, otherwise iOS zooms into the page on focus.