Typography

Token	Utility class	Approx. rem	Approx. px
`--unitone--font-size-2xs`	`.-font-size:2xs`	`0.727rem`	`11.6px`
`--unitone--font-size-xs`	`.-font-size:xs`	`0.8rem`	`12.8px`
`--unitone--font-size-s`	`.-font-size:s`	`0.889rem`	`14.2px`
`--unitone--font-size-m`	`.-font-size:m`	`1rem`	`16px`
`--unitone--font-size-l`	`.-font-size:l`	`1.143rem`	`18.3px`
`--unitone--font-size-xl`	`.-font-size:xl`	`1.333rem`	`21.3px`
`--unitone--font-size-2xl`	`.-font-size:2xl`	`1.6rem`	`25.6px`
`--unitone--font-size-3xl`	`.-font-size:3xl`	`2rem`	`32px`
`--unitone--font-size-4xl`	`.-font-size:4xl`	`2.667rem`	`42.7px`
`--unitone--font-size-5xl`	`.-font-size:5xl`	`4rem`	`64px`
`--unitone--font-size-6xl`	`.-font-size:6xl`	`8rem`	`128px`

These are static size approximations. When -fluid-typography is used, the actual rendered size changes within a range based on the active responsive context, which is the viewport by default.

When using large font sizes such as 2xl and above, combining them with -fluid-typography is recommended. This helps prevent oversized text from breaking the layout on mobile screens.

For plain HTML, use the utility class from utilities.mdx, such as class="-font-size:xl".

When utilities are not loaded but the font-size behavior is loaded, use the data-unitone-layout version. The leading . seen in CSS selector notation is not included in the class attribute value.


<p class="-font-size:xl">
	...
</p>


<p data-unitone-layout="-font-size:xl">
	...
</p>

In custom CSS, set the font-size property directly.


.foo {
	font-size: var(--unitone--font-size-xl);
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line height

The half leading can be set. The default value is 0.3.


<p style="--unitone--half-leading: 0.3">
	...
</p>

Fluid typography

Combine a font-size utility with -fluid-typography to switch from the static token to the matching fluid token.

Approximate fluid font-size ranges with the default --unitone--root-font-size: 16px are:

Fluid token	Utility class	Min rem	Min px	Max rem	Max px
`--unitone--font-size-2xs-fluid`	`.-font-size:2xs`	`0.727rem`	`11.6px`	`0.727rem`	`11.6px`
`--unitone--font-size-xs-fluid`	`.-font-size:xs`	`0.8rem`	`12.8px`	`0.8rem`	`12.8px`
`--unitone--font-size-s-fluid`	`.-font-size:s`	`0.889rem`	`14.2px`	`0.889rem`	`14.2px`
`--unitone--font-size-m-fluid`	`.-font-size:m`	`1rem`	`16px`	`1rem`	`16px`
`--unitone--font-size-l-fluid`	`.-font-size:l`	`1.089rem`	`17.4px`	`1.143rem`	`18.3px`
`--unitone--font-size-xl-fluid`	`.-font-size:xl`	`1.2rem`	`19.2px`	`1.333rem`	`21.3px`
`--unitone--font-size-2xl-fluid`	`.-font-size:2xl`	`1.343rem`	`21.5px`	`1.6rem`	`25.6px`
`--unitone--font-size-3xl-fluid`	`.-font-size:3xl`	`1.533rem`	`24.5px`	`2rem`	`32px`
`--unitone--font-size-4xl-fluid`	`.-font-size:4xl`	`1.8rem`	`28.8px`	`2.667rem`	`42.7px`
`--unitone--font-size-5xl-fluid`	`.-font-size:5xl`	`2.2rem`	`35.2px`	`4rem`	`64px`
`--unitone--font-size-6xl-fluid`	`.-font-size:6xl`	`2.867rem`	`45.9px`	`8rem`	`128px`

These values are the approximate minimum and maximum lengths generated by clamp() across the default viewport range.

When using large font sizes such as 2xl and above, combining them with -fluid-typography is recommended. This helps prevent oversized text from breaking the layout on mobile screens.

In plain HTML, the utility version is a class:


<p class="-font-size:6xl -fluid-typography">
	...
</p>

The same combination can be written with data-unitone-layout.


<p data-unitone-layout="-font-size:6xl -fluid-typography">
	...
</p>

In custom CSS, use the fluid token directly.


.foo {
	font-size: var(--unitone--font-size-6xl-fluid);
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Use -responsive-context:container together with -container-type:inline-size on the same ancestor to switch its descendants to container-width-based fluid typography.

Both markers must be on the same element for the context to become active. An unpaired context marker is ignored: fluid typography keeps using the existing context, which is the viewport by default. Only the container context is supported. See Responsive context utilities for examples and the behavior when markers are missing or separated.


<div data-unitone-layout="decorator -container-type:inline-size -responsive-context:container">
	<p data-unitone-layout="-font-size:6xl -fluid-typography">
		...
	</p>
</div>


<div class="-container-type:inline-size -responsive-context:container">
	<p class="-font-size:6xl -fluid-typography">
		...
	</p>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Auto line breaks

Use overflow-wrap: anywhere + word-break: keep-all for automatic line breaks. Use wbr to indicate a line break at an arbitrary position.


<p data-unitone-layout="-auto-phrase">
	...
</p>

Typography

Font size

Line height

Fluid typography

Auto line breaks