New

Stable version of Uniform CSS now officially released! Release note

Text Size

Learn about the text size special utility


About Text Size

Unlike the font-<size> utility, the text-<size> applies both font-size and line-height properties to any text element. This is the recommended way of styling text since it provides two commonly used text styling properties in one.


Basic Usage

You can apply text sizing by applying the text-<size> utility. This utility can also be applied conditionally based on breakpoint.

<h1 class="text-xl md.text-4xl">
...
</h1>
.text-xl {
font-size: var(--font-xl);
line-height: var(--font-4xl-leading);
}

Disabling Text Size

To disable this utility, pass text-size to the excludes setting in your configuration.

@use "uniform" as * with (
$config: (
excludes: (
text-size
)
)
);