Typography

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

These are static size approximations. When -fluid-typography is used, the actual rendered size changes within a range depending on the viewport.

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, there are two valid entry points:

set --unitone--font-size directly in style
use the utility class from utilities.mdx, such as class="-font-size:xl"

When you use the utility version, apply it with class, not data-unitone-layout. The leading . seen in CSS selector notation is not included in the class attribute value.


<p style="--unitone--font-size: 2">
	...
</p>


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

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

The default font size for unitone CSS is fluid typography, but by adding data-unitone-layout="-fluid-typography", the line-height can also be scaled to an optimal value as the font size is scaled The line-height can also be adjusted to the optimum value as the font size expands and contracts.

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

`--unitone--font-size`	Utility class	Min rem	Min px	Max rem	Max px
`-3`	`.-font-size:2xs`	`0.727rem`	`11.6px`	`0.727rem`	`11.6px`
`-2`	`.-font-size:xs`	`0.8rem`	`12.8px`	`0.8rem`	`12.8px`
`-1`	`.-font-size:s`	`0.889rem`	`14.2px`	`0.889rem`	`14.2px`
`0`	`.-font-size:m`	`1rem`	`16px`	`1rem`	`16px`
`1`	`.-font-size:l`	`1.089rem`	`17.4px`	`1.143rem`	`18.3px`
`2`	`.-font-size:xl`	`1.2rem`	`19.2px`	`1.333rem`	`21.3px`
`3`	`.-font-size:2xl`	`1.343rem`	`21.5px`	`1.6rem`	`25.6px`
`4`	`.-font-size:3xl`	`1.533rem`	`24.5px`	`2rem`	`32px`
`5`	`.-font-size:4xl`	`1.8rem`	`28.8px`	`2.667rem`	`42.7px`
`6`	`.-font-size:5xl`	`2.2rem`	`35.2px`	`4rem`	`64px`
`7`	`.-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>

When you use this feature with partial JavaScript loading, also load the compatibility entry for Firefox.


import '@inc2734/unitone-css/compatibility/fluid-typography';
// or import '@inc2734/unitone-css/compatibility';
// or import '@inc2734/unitone-css/app';


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

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