Syntax
font-size
Setting the font size of elements.
Overview
| Class | Declarations |
|---|---|
font:3xs | font-size: 0.5rem;
|
font:2xs | font-size: 0.625rem;
|
font:xs | font-size: 0.75rem;
|
font:sm | font-size: 0.875rem;
|
font:md | font-size: 1rem;
|
font:lg | font-size: 1.125rem;
|
font:xl | font-size: 1.25rem;
|
font:2xl | font-size: 1.5rem;
|
font:3xl | font-size: 2rem;
|
font:4xl | font-size: 2.25rem;
|
font:5xl | font-size: 2.5rem;
|
font:6xl | font-size: 3rem;
|
font:7xl | font-size: 3.75rem;
|
font:8xl | font-size: 4.5rem;
|
font:9xl | font-size: 6rem;
|
font:10xl | font-size: 8rem;
|
font-size:<size> | font-size: <size>/16rem;
|
Examples
Basic usage
Use font size tokens like font:xs, font:sm, and font:md to set the font size of an element.
font:xs
Sphinx of black quartz, judge my vow.
font:sm
Sphinx of black quartz, judge my vow.
font:md
Sphinx of black quartz, judge my vow.
font:lg
Sphinx of black quartz, judge my vow.
font:xl
Sphinx of black quartz, judge my vow.
font:2xl
Sphinx of black quartz, judge my vow.
<div class="font:xs">Sphinx of black quartz, judge my vow.</div><div class="font:sm">Sphinx of black quartz, judge my vow.</div><div class="font:md">Sphinx of black quartz, judge my vow.</div><div class="font:lg">Sphinx of black quartz, judge my vow.</div><div class="font:xl">Sphinx of black quartz, judge my vow.</div><div class="font:2xl">Sphinx of black quartz, judge my vow.</div>With line height
Set the line height, use the leading:<size> syntax along with the font size.
<div class="font:md leading:1.2">Sphinx of black quartz, judge my vow.</div>You can also use the text:<size> syntax to set the line height and font size together.
Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="font:16:hover font:16@sm font:16@dark font:16@print">…</div>