Typography
Fonts, text colour and alignment, decoration, wrapping, lists, generated content and writing modes.
A heading with tight tracking
Body text with comfortable line height and a muted colour.
Underlined link<div nib="d=flex; flxd=column; g=6px; mxw=420px">
<span nib="fts=12px; ftw=700; txt=uppercase; lts=.08em; cl=#4F52D9">Eyebrow</span>
<h3 nib="fts=28px; ftw=800; lts=-0.02em; lh=1.15; m=0">A heading with tight tracking</h3>
<p nib="fts=15px; lh=1.7; cl=#64748b; m=0">Body text with comfortable line height and a muted colour.</p>
<a href="#" nib="cl=#4F52D9; txd=underline; txu=4px; txth=2px; ftw=600">Underlined link</a>
</div>Truncation#
One line that is far too long to fit
Two lines at most, then an ellipsis — even when the text keeps going and going.
<div nib="w=220px; d=flex; flxd=column; g=8px">
<p nib="m=0; whs=nowrap; ovf=hidden; txo=ellipsis">One line that is far too long to fit</p>
<p nib="m=0; -webkit-line-clamp=2; d=-webkit-box; -webkit-box-orient=vertical; ovf=hidden">Two lines at most, then an ellipsis — even when the text keeps going and going.</p>
</div>- Custom marker colour
- Square bullets
<ul nib="m=0; pl=20px; lst=square; marker:cl=#4F52D9; d=flex; flxd=column; g=4px">
<li>Custom marker colour</li>
<li>Square bullets</li>
</ul>All typography shorthands#
Shorthand | CSS property |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|