Once UI manages typography properties with the Text and
Heading components. They apply utility classes and CSS variables under the hood. See the Config page for our recommended font setup.
Font family
Add font-family classes to elements.
Class
Variable
Default
.font-display
var(--font-heading)
var(--font-primary)
.font-heading
var(--font-heading)
var(--font-primary)
.font-body
var(--font-body)
var(--font-primary)
.font-label
var(--font-label)
var(--font-primary)
.font-code
var(--font-code)
var(--font-code)
Font size
Add font-size classes to elements. The value adjusts to the adjacent or closest parent font-family class.
Class
Variable
.font-size-inherit
—
.font-xl
dynamic
.font-l
dynamic
.font-m
dynamic
.font-s
dynamic
.font-xs
dynamic
Font weight
Add font-weight classes to elements. The value adjusts to the adjacent or closest parent font-family class.
