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.
Add font-family classes to elements.
Add font-size classes to elements. The value adjusts to the adjacent or closest parent font-family class.
Add font-weight classes to elements. The value adjusts to the adjacent or closest parent font-family class.
Every family reads the display weights unless you give it its own: --font-<family>-weight-<weight>, for heading, body, label and code. Setting one changes only that family, so bolder body text leaves headlines and labels alone.
Learn about setting color properties in the color documentation.
Modify the font-size of the HTML element for different breakpoints.
Modify the font-size scaling factor individually for different font-family classes.
Modify the line-height scaling factor individually for different font-family classes.