Typography

Busted

• Ascender / descenderThe parts of letters that stick up above the lowercase body (b, d, h) or hang below the line they sit on (g, p, y).
• BaselineThe invisible line letters sit on. Align things to it and mixed sizes look deliberate instead of accidentally floating.
• Cap heightHow tall the capital letters stand above the baseline: the measurement you align to when text has to line up with icons or a logo.
• CounterThe white shape inside a letter, like the hole in an 'o' or the enclosed space in an 'e'. Small counters make text clog up.
• Display typeface vs text typefaceSome fonts are drawn to be seen big, others to be read small. Using one for the other job is why your type looks off.
• En dash / em dashUse the shorter en dash for ranges and relationships; use the longer em dash for a break or interruption inside a sentence.
• Faux bold / faux italicFake bold thickens a regular font; fake italic tilts it. Both happen when the real style is missing, and both distort the intended drawing.
• Fluid typography (clamp)Font sizes that scale smoothly with the viewport instead of jumping at breakpoints, usually with CSS clamp().
• Font familyThe coordinated set of regular, bold, italic, condensed, and other fonts that all share one underlying design.
• Font hinting and renderingThe font instructions and platform rasterizing choices that decide whether small letters look crisp, soft, jagged, or muddy on screen.
• Font metricsThe hidden measurements that tell software where letters sit, how far the cursor moves, and how much room each line needs.
• Font pairingChoosing two typefaces that work together: close enough in mood to feel intentional, different enough that nobody mistakes one for the other.
• Font sizeThe nominal scale of the type, not the literal height of its letters. Two fonts at 16px can still look noticeably different in size.
• Font stackThe ordered list of typefaces in font-family: the browser uses the first one it can render and falls through to the rest.
• Geometric sansA sans-serif built from circles and straight lines, so the o is a near perfect circle. The Futura and Poppins look: modern, cool, engineered.
• GlyphA glyph is the shape you see; a character is the encoded idea behind it. One character can be drawn as several different glyphs.
• Grotesque sans / neo-grotesque sansGrotesques are the older, rougher industrial sans serifs; neo-grotesques are their cleaner, more systematic mid-century Swiss descendants.
• Hanging punctuationPunctuation hangs just outside the text column so the letters, not the quote marks or hyphens, make the visible margin.
• Humanist sansA sans-serif that keeps the warmth of handwriting: slight thick and thin strokes, open shapes, easy to read in bulk. Think Gill Sans or Lato.
• Hyphenation / widow and orphan controlHyphenation breaks words cleanly to fit lines; widow and orphan control stops a paragraph's first or last line being stranded on a page.
• Italic vs obliqueAn italic redraws letters with cursive forms; an oblique mostly tilts the upright design. Check the 'a' and 'g' to spot the difference.
• KerningNudging the space between two specific letters so pairs like 'AV' or 'To' stop looking gappy or crashed together.
• Leading (line-height)The vertical space between lines of text. Pronounced 'ledding', after the lead strips printers slid between rows of metal type.
• LigatureTwo or more characters drawn as one merged glyph, often to stop shapes like f and i from crashing, sometimes just for style.
• Measure (line length)How many characters fit on one line of text. Around 45 to 75 reads comfortably; a paragraph spanning your whole monitor does not.
• MonospaceA font where every character is exactly the same width, so text lines up in columns. The code editor and typewriter look.
• Named instanceA saved preset in a variable font, such as Regular or Semibold, that points to one exact combination of axis values.
• Non-breaking spaceAn invisible glue space that keeps two neighboring things on the same line, such as an amount and its unit.
• Oldstyle vs. lining figuresOldstyle figures rise and dip like lowercase letters; lining figures sit on one baseline at a uniform, capital-like height.
• OpenType featuresThe switchable extras baked into a font file: alternate letters, small caps, fractions, special numerals, fancy ligatures.
• Optical margin alignmentLetting quotes, commas, and some curved letters cross the margin slightly so the visible edge looks straighter than strict alignment does.
• Optical sizingRedrawing a typeface for its actual size, with sturdier small text and finer display type instead of one outline scaled up and down.
• OvershootRound and pointed letters poke slightly past the baseline or height guides so they look equal to flat-sided letters.
• Paragraph indentThe first line starts a little farther in, marking a new paragraph without adding a blank vertical gap.
• Paragraph spacingThe vertical gap between consecutive paragraphs, used to show a new thought without inserting empty lines into the content.
• RagThe uneven edge unjustified text makes. A good rag wobbles gently; a bad one makes wedges, stairs and holes your eye follows.
• RuntAn awkwardly short last line, often one word stranded beneath the rest of a paragraph or headline.
• Serif vs sans-serifSerifs are the little feet on the ends of strokes; sans-serif fonts have none. Feet read bookish, no feet reads clean and modern.
• Slab serifA serif typeface with thick, blocky feet. Think Rockwell: sturdy and loud, not the fine hairlines of a fashion-magazine serif.
• Small capsCapital letters redrawn at lowercase height, so acronyms and labels read as emphasis without shouting.
• Smart quotes vs. dumb quotesCurly opening and closing marks belong in finished prose; straight typewriter marks belong in code and plain-text data.
• Stroke contrastHow much a letter's thick strokes differ from its thin ones. High contrast reads elegant and fragile, low contrast reads sturdy and plain.
• Stylistic setA switch in an OpenType font that replaces a coordinated group of letters or symbols with alternate drawings.
• SuperfamilyA matched set of serif, sans, mono, or other families built from the same underlying letter shapes, ready to work as one type system.
• Tabular vs proportional figuresFixed-width numerals that keep columns and counters from jiggling, versus naturally spaced ones that read better in a sentence.
• Text alignmentThe edge text lines up against: left, right, center, or both edges when justified. Paragraphs usually follow the reading direction.
• Text box trimming (leading trim)Cropping away the invisible line-height space above and below text so layout gaps start at the visible letters.
• Text justification / riversJustification lines up both paragraph edges; rivers are the distracting white paths that oversized word gaps can form through it.
• text-wrap: balance / text-wrap: prettyCSS line breaking that balances short headings and gives paragraphs a cleaner rag without freezing the layout with manual breaks.
• Tracking (letter-spacing)Uniform spacing across a whole run of text: tight for big headlines, open for small all-caps. Kerning is pairs, tracking is everything.
• Transitional serif / Didone serifBaskerville is transitional: refined but readable. Didot and Bodoni are Didone: heavy stems, hairline strokes, and sharper drama.
• Type foundryThe studio that draws, engineers, licenses, and sells typefaces, descended from the companies that cast letters in metal.
• Type scaleA fixed ladder of font sizes built from one base size and one ratio, so your headings relate to each other instead of being random numbers.
• Typeface vs. fontThe typeface is the design (Helvetica); the font is the resource that delivers it, whether that is one static style or a variable file spanning many.
• Variable fontOne font file that slides continuously between weights, widths and other settings instead of one file per style.
• Variable-font axisA slider built into a variable font, controlling one dimension such as weight, width, slant, optical size, or a custom setting.
• Vertical rhythmKeeping every vertical gap a multiple of one base unit, usually the body line-height, so text marches evenly down the page.
• Weight / font-weightHow thick the strokes of a typeface are, from hairline Thin to solid Black. CSS calls it 100 to 900, with 400 regular and 700 bold.
• Widows and orphansStranded lines of text: an orphan is left alone at the bottom of a column, a widow alone at the top of the next one.
• X-heightThe height of a lowercase 'x'. It drives how big lowercase text looks at a given font size, which is why 16px varies so much by typeface.

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