Typography

The territory

28 core terms mapped for this field, ranked by how often builders reach for them. Each one is a future entry. Want to bust one? One entry, one file, one pull request.

• typeface vs fontthe design versus the file that implements it"is it a font or a typeface" · "what's the difference between font and typeface"
• kerningadjusting space between two specific letters"these two letters are too close" · "fix the gap between the T and the o"
• tracking (letter-spacing)uniform spacing across a whole run of text"spread the letters out" · "airy wide caps"
• leading (line-height)vertical space between lines of text"lines are too cramped" · "give the paragraph more breathing room"
• x-heightheight of lowercase letters, drives apparent size"why does this font look bigger at same size" · "tall lowercase"
• cap heightheight of capital letters from baseline"how tall are the capitals" · "the caps look too big"
• ascender / descenderstrokes rising above x-height or dropping below baseline"the tall bits and the tails" · "letters poking up and hanging down"
• baselineinvisible line letters sit on"line the text sits on" · "align the bottoms"
• measure (line length)characters per line in a text column"lines are too long to read" · "how wide should paragraphs be"
• type scaleratioed set of sizes for headings and body"system of font sizes" · "how big should my h2 be"
• weight / font-weightstroke thickness from thin to black"how bold it is" · "need something between regular and bold"
• serif vs sans-serifwith or without stroke-ending flourishes"the ones with feet" · "plain clean letters"
• stroke contrastdifference between thick and thin parts of letters"thick and thin strokes" · "font with fat and skinny parts"
• display typeface vs text typefacefonts designed for big vs long-form reading"font only for headlines" · "font that reads well small"
• font pairingchoosing two typefaces that work together"which two fonts go together" · "heading font plus body font"
• geometric sanssans built from circles and straight lines"Futura vibe" · "perfect circle o"
• humanist sanssans with calligraphic warmth and open shapes"friendly readable sans" · "sans that feels handwritten-ish"
• monospaceevery character occupies identical width"code font" · "typewriter font"
• variable fontone file with adjustable weight, width, other axes"font that slides between weights" · "one file all weights"
• font stackordered list of fonts the browser tries"backup font" · "what shows before mine loads"
• fluid typography (clamp)size scales smoothly with viewport width"text that grows with the screen" · "responsive font size"
• vertical rhythmconsistent baseline spacing down the page"spacing feels random" · "everything on a grid"
• widows and orphansstranded single lines at column ends"one word alone on a line" · "lonely last line"
• raguneven right edge of unjustified text"the jagged edge" · "make line ends less ugly"
• small capscapitals drawn at lowercase height"little capitals" · "caps that don't shout"
• ligaturetwo letters merged into one glyph"the fi joined together" · "letters fused"
• OpenType featuresswitchable font extras like alternates and figures"turn on the fancy letters" · "the alternate g"
• tabular vs proportional figuresfixed-width numerals so columns align"numbers jump when they change" · "align the prices"

Deeper in the field

• counter the enclosed white space inside letters like o and e
• slab serif heavy blocky rectangular serifs
• transitional serif / Didone serif historical serif genres, moderate vs extreme contrast
• italic vs oblique truly redrawn cursive vs mechanically slanted
• faux bold / faux italic browser-synthesized styles that distort the typeface
• optical margin alignment nudging punctuation past the margin to look aligned
• hanging punctuation quotes and hyphens pushed into the margin
• text justification / rivers flush both edges, and the white channels it can create
• hyphenation / widow and orphan control breaking words and preventing stranded lines
• smart quotes vs dumb quotes curly typographic quotes vs straight marks
• en dash / em dash range dash vs sentence-break dash
• non-breaking space space that refuses to break a line
• text box trimming removing extra box space above and below text, also called leading trim
• font hinting and rendering instructions and antialiasing affecting screen crispness
• superfamily matched serif, sans, and mono sharing skeletons
• type foundry company that designs, produces, and sells typefaces
• text-wrap: balance / text-wrap: pretty CSS that evens out headline and paragraph line breaks
• optical sizing design tweaks per size so display and body differ
• grotesque sans / neo-grotesque sans neutral Swiss-style sans genres, early versus refined mid-century
• oldstyle vs lining figures numerals that sit on/below baseline vs cap-height
• font family related typefaces sharing a coordinated underlying design
• glyph visual shape used to represent a character
• font size nominal size assigned to rendered type
• text alignment aligning text left, right, centered, or justified
• paragraph spacing vertical space separating consecutive paragraphs
• paragraph indent horizontal offset marking the start of a paragraph
• font metrics measurements governing glyph placement and line boxes
• variable-font axis adjustable dimension such as weight, width, or slant
• named instance preset location along a variable font's axes
• stylistic set coordinated group of alternate glyph designs
• overshoot curves extending beyond alignment lines to appear equal
• runt very short final line, often one stranded word