Skills Visual design better-typography css-cheat-sheet.md css-cheat-sheet.md A supporting file of the better-typography skill.
One-line lookup for every typography CSS declaration covered by this skill, with the Tailwind 4 equivalent. Where no utility exists, the arbitrary-value form is shown. Pick the column that matches the project: the declaration in plain CSS, CSS Modules, styled-components or StyleX codebases, the utility in Tailwind codebases.
Declaration What it does Tailwind font-family: sans-serifThe sans family font-sansfont-family: serifThe serif family font-seriffont-family: monospaceThe monospace family font-monofont-sizeSize from the type scale text-*font-weightAny value from 1 to 1000 font-*font-style: italicSwitch to italic style italic-webkit-font-smoothing + -moz-osx-font-smoothingSmooth macOS font rendering; apply once at the root antialiasedfont-synthesis: noneDisable all synthesized forms after verifying fallbacks and emphasis [font-synthesis:none]font-feature-settingsToggle OpenType features [font-feature-settings:"ss01"]font-variation-settingsTune variable font axes [font-variation-settings:"GRAD"_80]font-optical-sizingAdjust details per size [font-optical-sizing:auto]font-variant-capsReal small capitals [font-variant-caps:small-caps]font-variant-positionReal super and subscripts [font-variant-position:super]font-variant-numeric: tabular-numsEqual-width digits tabular-numsfont-variant-numeric: slashed-zeroTell 0 from O slashed-zero
Declaration What it does Tailwind letter-spacingSpace between letters tracking-*line-heightSpace between lines leading-*font-kerningKerning on or off [font-kerning:none]text-box: trim-bothTrim space above and below [text-box:trim-both_cap_alphabetic]max-width on text columnsCap at ~60–75 characters per line max-w-xl / max-w-2xl / max-w-[65ch]text-alignWhere lines start and end text-start / text-center
Declaration What it does Tailwind text-wrap: balanceEven out heading lines text-balancetext-wrap: prettyAvoid orphaned words text-prettytext-overflow: ellipsisEllipsis for clipped text truncateline-clampCut off after N lines line-clamp-*overflow-wrap: break-wordBreak long strings break-wordswhite-space: nowrapStop wrapping whitespace-nowraptext-transformChange the casing uppercase / capitalize
Declaration What it does Tailwind text-decoration-line: underlineDraw an underline underlinetext-decoration-colorUnderline color decoration-*text-decoration-thicknessUnderline thickness decoration-1 / decoration-2text-underline-offsetPush the line down underline-offset-*text-underline-position: from-fontUnderline position from the font [text-underline-position:from-font]text-decoration-styleDotted, dashed or wavy decoration-dotted / decoration-wavytext-decoration-thickness: from-fontUnderline set by the font decoration-from-fonttext-decoration-skip-inkGaps around descenders [text-decoration-skip-ink:auto]caret-colorTint the text cursor caret-*user-select: noneSuppress selection on a verified drag/gesture conflict only select-nonetext-shadowShadow behind the letters text-shadow-*-webkit-text-strokeOutline the letters [-webkit-text-stroke:1px_black]background-clip: textClip a background to the letters bg-clip-textinitial-letterSize a drop cap [initial-letter:3]