Natura11y provides a wealth easily customizable typography styles. Out-of-the-box font sizes are set to a type scale. This makes it easy to customize all font sizes With one variable, instead of having to specify sizes for each element individually.
Natura11y provides six levels of section headings,
<h6>. Styles for each level are consistent for a tag header (e.g.
<h1>) and a utility class header (e.g.
Font Size Utilities
Change the font-size of text, buttons, navigation, entire forms, or any DOM element with Natura11y's font size utilities.
Below is an example of Natura11y's default
Text Align Utilities
Apply text-align property to a selector.
Text Transform Utilities
Apply text-transform property to a selector.
Text Decoration Utilities
Apply text-decoration property to a selector.
Natura11y's Type Scale
Types scales help you create consistent, maintainable, and scalable font sizes across viewports and projects. Natura11y's font sizes use a predefined type scale, which you can customize with just two properties.
The first property,
--base-font-size sets the document's smallest font size. The second property,
--type-scale is the multiplier (or scale) value. Each font size is set to the previous font size multiplied by the type scale value.
For a closer look at Naturally's type scale, examine Related CSS Variables at the end of this page to see font size relationships.
For a practical visual example, use the following dropdown options to see the type scale work in practice.
Easily create responsive topography by wrapping a different scale value in a
@container query (Figure 8).