Typography
Font size
You can scale the font size with the CSS custom property --unitone--font-size. Variations on font size are available based on the harmonic sequence. The minimum value is -2 and the maximum value is 7.
If you scale the font size with this CSS custom property, the line-height will be automatically set to an appropriate value (By default, it scales from 1.1 to 1.6(= 1 + var(--unitone--half-leading) * 2), depending on font size.).
<p style="--unitone--font-size: 2">
...
</p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.
<p style="--unitone--font-size: 7" data-unitone-layout="-fluid-typography">
...
</p>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>