UI Typography Skill
Attribution
These rules are distilled from
Matthew Butterick's
Practical Typography
(
https://practicaltypography.com
).
Butterick is a typographer, writer, and type designer whose work bridges professional typography and everyday
digital writing. Thank you, Matthew, for making this knowledge accessible and encyclopedic. If you find this
skill valuable, consider supporting his work directly.
Mode of Operation
These are
permanent rules
— not trends, not opinions. They come from centuries of typographic practice,
validated by how the human eye reads. They do not go out of style.
ENFORCEMENT (default):
When generating ANY UI with visible text, apply every rule automatically. Use
correct HTML entities, proper CSS. Do not ask permission. Do not explain. Just produce correct typography.
AUDIT:
When reviewing existing code or design, identify violations and provide before/after fixes.
Reference files
(read when generating CSS or looking up entities):
references/css-templates.md
— Full CSS baseline template, responsive patterns, OpenType features
references/html-entities.md
— Complete entity table with all characters and codes
Characters
Quotes and Apostrophes — Always Curly
Straight quotes are typewriter artifacts. Use
“
”
for double,
‘
’
for single.
Apostrophes always point down — identical to closing single quote
’
. Smart-quote engines wrongly
insert opening quotes before decade abbreviations ('70s) and word-initial contractions ('n'). Fix with
explicit
’
.
The
tag auto-applies curly quotes when
New paragraph
tags
New page (print)
page-break-before: always
Suggest hyphenation point
Never hold spacebar. Never double carriage returns for spacing. Never tabs for indentation in output.
HTML collapses all whitespace to single space (except
).
Text Formatting
Bold and Italic
Rule 1
: Bold OR italic. Mutually exclusive. Never combine.
Rule 2
: Use as little as possible. If everything is emphasized, nothing is.
Serif: italic for gentle, bold for strong. Sans serif: bold only — italic sans barely stands out.
Never bold entire paragraphs. Never use quotation marks for emphasis.
Underlining — Never
Never underline in a document or UI. Typewriter workaround. Use bold or italic. For web links,
use subtle styling:
text-decoration-thickness: 1px; text-underline-offset: 2px
.
All Caps — Less Than One Line, Always Letterspaced
Caps are harder to read (homogeneous rectangles vs varied lowercase contour). Suitable for short
headings, labels, captions.
ALWAYS
add 5–12% letterspacing.
ALWAYS
ensure kerning is on.
NEVER
capitalize whole paragraphs.
letter-spacing: 0.06em
in CSS.
Small Caps — Real Only
Never fake (scaled-down regular caps). Use
font-variant-caps: small-caps
with fonts that have
real small caps (OpenType
smcp
). System fonts lack them. Add letterspacing + kerning.
Point Size
Print: 10–12pt. Web: 15–25px. The 12pt default is a typewriter relic. Half-point differences
matter. Use smallest increment for emphasis. Use
clamp()
for fluid web sizing.
Letterspacing
5–12% extra on ALL CAPS and small caps. Nothing on lowercase. Never spread so far apart that
letters could fit in the gaps. CSS:
letter-spacing: 0.05em
to
0.12em
.
Kerning — Always On
No exceptions.
font-feature-settings: "kern" 1; text-rendering: optimizeLegibility;
Ligatures
Mandatory only when fi/fl visually collide. Check bold and italic too. Otherwise optional.
CSS:
font-feature-settings: "liga" 1
.
Alternate Figures
Tabular (
"tnum"
) for data tables. Oldstyle (
"onum"
) for body text. Default figures are fine
for most uses.
font-variant-numeric: tabular-nums lining-nums
for numeric tables.
Font Selection
No goofy fonts (novelty, script, handwriting, circus) in professional work
No monospaced for body text — code only (and Courier is the worst monospaced)
Print body: strongly prefer serif
Web body: serif or sans both fine on modern screens
Metrics spacing in InDesign, never optical (optical mangles kerning)
Mixing Fonts
Max 2 fonts. Each gets a consistent role. Can mix serif+serif or sans+sans. Rarely mix within
a paragraph. Lower contrast often more effective than high contrast.
Page Layout
Body Text First
Set body text BEFORE anything else. Four decisions determine everything: font, point size,
line spacing, line length. All other elements calibrate against these.
Line Length — 45–90 Characters
The #1 readability factor designers get wrong. The #1 flaw in responsive web layouts.
Measure in characters, not inches. Alphabet test: fit 2–3 lowercase alphabets per line.
CSS:
max-width: 65ch
on text containers.
Line Spacing — 120–145% of Point Size
line-height: 1.2
to
1.45
. Single-spaced (~117%) is too tight. Double (~233%) is too loose.
Word processor "Single" and "Double" both miss the optimal range.
Page Margins
One inch is not enough for proportional fonts. Print: 1.5–2.0″ at 12pt. Web:
max-width
on
text containers plus
padding
. Don't fear white space — generous margins look professional.
Text Alignment
Left-align for web (default). Justified requires
hyphens: auto
— browser engines are crude.
Centered: sparingly, only for short titles (< 1 line). Never center whole text blocks.
Paragraph Separation — Indent OR Space, Never Both
First-line indent
: 1–4× point size.
text-indent: 1.5em
. Optional on first paragraph.
Space between
: 50–100% of font size.
margin-bottom: 0.75em
. Never double
tags.
Headings — Max 3 Levels
Don't all-caps headings (unless very short + letterspaced)
Don't underline headings
Don't center headings (rare exceptions)
Emphasize with
space above and below
— subtle and effective
Use
bold, not italic
— stands out better
Smallest point-size increment needed (body 11pt → heading 13pt, not 18pt)
hyphens: none
on headings
Space above > space below (heading relates to text that follows)
Keep heading with next paragraph (
page-break-after: avoid
)
Tiered numbers (1.1, 2.1) over roman numerals (I.A.1.a.i)
Block Quotations
Reduce size + line spacing slightly. Indent 2–5em. No quotation marks (indent signals the quote).
Keep line length readable. Use sparingly — long block quotes signal lazy writing.
Lists
Semantic markup (
-
,
-
), never manual bullets. Prefer hollow bullets. Asterisks are too
small for bullets. Don't over-indent.
Tables — Remove Borders, Add Padding
Data creates an implied grid. Borders add clutter. Keep only thin rule under header row.
padding: 0.5em 1em
. Tabular figures for numeric columns. Right-align numbers.
Rules and Borders
Try space above and below first. Border thickness: 0.5–1pt. No patterned borders. Thick lines
are chartjunk.
Flow Control
Widows (last line alone at top of page) and orphans (first line alone at bottom). CSS print:
orphans: 2; widows: 2
. Headings:
page-break-after: avoid
. Soft hyphens
for
words that confuse hyphenation engines.
Columns and Grids
Print columns: 2–3 on letter paper, never 4. Web columns: awkward (indefinite bottom edge).
Grids guide, not guarantee — simpler grids enforce more consistency. Aligning ugly to a grid
still produces ugly.
Responsive Web Typography
The rules don't change with screen size.
Same line length, line spacing, hierarchy.
Scale
font-size
and container
width
together
Always
max-width
on text containers — never edge-to-edge text
Don't use
ch
unit for exact measurement (only measures zero width)
clamp()
for fluid scaling:
font-size: clamp(16px, 2.5vw, 20px)
Mobile minimum:
padding: 0 1rem
on text containers
The common failure: images/nav scale carefully, body text ignored
Screen Considerations
Modern screens render type nearly as well as print. "Sans serif for screens" was true for 72dpi
and is now obsolete. Serif fonts work fine on modern screens. Dark mode: reduce weight slightly.
Test on macOS and Windows (antialiasing differs).
Maxims of Page Layout
Body text first
— its 4 properties determine everything
Foreground vs background
— don't let chrome upstage body text
Smallest visible increments
— half-points matter
When in doubt, try both
— make samples, don't theorize
Consistency
— same things look the same
Relate new to existing
— each element constrains the next
Keep it simple
— 3 colors and 5 fonts? Think again
Imitate what you like
— emulate good typography from the wild