Design dictionary

Typography

Letterforms and words

Letter spacing, font metrics, ligatures, and word breaks.

Kerning

Adjusting the spacing of a chosen character pair. It corrects uneven gaps without changing every gap, as tracking does.

AIDevCourse

Only AI and vC move; the other gaps stay the same.

X-height

The height of a lowercase letter like x, relative to the cap height. A high x-height makes a font feel larger at the same point size, which is why two fonts at 16px can look very different in size.

Baseline

Same font size. The guides follow the measured x or H glyph in your browser.

Hyphenation

Breaking words between lines with hyphens. It helps narrow or justified text; automatic break points depend on the language and browser.

Thoughtful typography makes extraordinary interactions feel understandable.

Optical kerning

Spacing guided by letter shapes and visual balance, instead of relying only on a font’s kerning metrics.

Cap height

The height of capitals above the baseline. Compare it with x-height when pairing typefaces or choosing fallback fonts.

Ligature

A glyph combining characters such as fi or fl to prevent collisions. Decorative ligatures are better suited to display text.

Widow

A single word left alone on the last line of a paragraph. text-wrap: balance can fix it automatically.

Reading and interfaces

Leading

The vertical distance between lines. Tight spacing crowds letters; excessive spacing breaks a paragraph’s visual flow.

Good typography gives each idea room to breathe. The space between lines and the length of each line shape the rhythm of reading. Change one setting and notice how the same words feel different.

Line height1.5

Tracking

Uniform letter spacing across a word or passage. Uppercase labels often need more space to remain readable.

Spacing0em

Text overflow

Text exceeding its container. An ellipsis (…) can signal clipped text; wrapping instead preserves content when additional lines are possible.

Alexandra Kim

Product designer · Design systems and user experience

Turning complex ideas into clear, useful products with thoughtful interactions for everyday life.

Text width230px

Tabular numerals

A font feature that gives digits equal widths, keeping prices, statistics and changing numeric columns aligned.

Type scale

A defined set of font sizes, often linked by a ratio, that keeps headings and body text in a consistent hierarchy.

Font weight

The thickness of letter strokes, used for emphasis and interface hierarchy. Change the title weight and compare it with regular body text.

Font smoothing

How text edges are rendered. On macOS, antialiased rendering may appear thinner; the result depends on the browser and display.

Clamp

Fluid sizing bounded by minimum, preferred and maximum values. It lets text scale with space without separate rules at every breakpoint.

Orphan

A paragraph’s first line isolated at a page or column’s bottom. Keep it with following lines to preserve reading continuity.

Font stack

An ordered list of preferred and fallback fonts. Similar proportions reduce reflow when the browser swaps fonts.

Line length

The width of a text column. Around 65 characters is a starting point for Latin text; adjust for language and typeface.

Variable font

One font file with adjustable axes such as weight and width. It can replace several static font files and support smooth variations.

Superscript

Raised characters for exponents or footnotes. Adjust size and vertical position carefully so the surrounding line spacing stays stable.

Subscript

Lowered characters for chemical formulas or notation. Size and vertical position should preserve the surrounding line’s rhythm.