Nearby lessons
41 of 61π€ Tailwind CSS - Font (Family, Size, Style, Weight & More)
π Overview
Tailwind provides comprehensive font utilities covering font family, size, style, weight, smoothing, and numeric variant features.
π€ Font Family
Available utilities:
font-sansβ System sans-serif stack (default)font-serifβ System serif stackfont-monoβ System monospace stack- Arbitrary:
font-['Inter']
π Font Size
Available utilities (text-{size}):
text-xsβ 0.75rem / 1rem line-heighttext-smβ 0.875remtext-baseβ 1rem (default)text-lgβ 1.125remtext-xlβ 1.25remtext-2xlthroughtext-9xl- Arbitrary:
text-[22px]
π¨ Font Style & Smoothing
Font Style:
italicβ Italic textnot-italicβ Normal (non-italic) text
Font Smoothing:
antialiasedβ Smooth font rendering (recommended)subpixel-antialiasedβ Subpixel rendering
βοΈ Font Weight
Available utilities (font-{weight}):
font-thinβ 100font-extralightβ 200font-lightβ 300font-normalβ 400font-mediumβ 500font-semiboldβ 600font-boldβ 700font-extraboldβ 800font-blackβ 900
π’ Font Variant Numeric
Control numeric glyph variants:
normal-numsβ Default numeric glyphsordinalβ Special glyphs for ordinals (1st, 2nd)slashed-zeroβ Slashed zero (0ΜΈ)lining-numsβ Lining numeralsoldstyle-numsβ Old-style numeralsproportional-numsβ Proportional spacingtabular-numsβ Tabular (fixed-width) spacingdiagonal-fractions/stacked-fractions
π§ Test Your Knowledge
5 QuestionsProgress: 0 / 5
Keep Going!Tailwind CSS - Letter Spacing