Typography
Typography is how text is arranged in an interface. It includes typefaces, sizes, line height, letter spacing, and alignment. Those choices change whether body text is easy to read, whether a button stands out, and whether a table is tiring to scan.
Most interface information eventually has to be read as text. Warning copy needs to be clear, form labels need to be easy to find, code blocks need to line up, and headings need to separate from body text at a glance. Typography covers all of that.
1. Font Classifications & Basics
Typography
Typography is the way text is arranged. Typeface, size, line height, spacing, and paragraph alignment all belong here. When it works, readers see the important parts first, then find the body text and supporting details without much effort.
Typography Heading 32px ═══════════════════ Typography is the art of arranging text, Body 1.5em for readability. ────────────────── Settings Regular 80% Sans-serif
Font
A font is a specific set of glyphs. It defines how letters, numbers, and symbols look, including weight and italic styles. In development, font often means a file such as .ttf or .otf. Change the font and the interface can feel different, take up different space, and become easier or harder to recognize quickly.
Serif
A serif typeface has small feet or sharp endings on its strokes. It often feels more bookish or formal, so it appears in long reading pages, editorial headings, and classic-looking layouts. In small buttons or dense tables, check it carefully; the extra detail can blur.
Sans-Serif
A sans-serif typeface has clean stroke endings without serifs. It usually looks simpler on screens, which is why websites, apps, buttons, navigation, and forms use it so often. At small sizes, sans-serif type is usually easier to keep steady.
SERIF ════════════════════════ 𝕿 𝖄 𝕻 𝕰 𝑻 𝒀 𝑷 𝑬 𝐓 𝐘 𝐏 𝐄 decorated endings stronger stroke contrast ──────────────────────── SANS-SERIF ════════════════════════ 𝖳 𝖸 𝖯 𝖤 𝗧 𝗬 𝗣 𝗘 𝘛 𝘠 𝘗 𝘌 cleaner endings more even strokes
Proportional Font (Variable-Width Font)
A proportional font gives each character the width it needs. W is wide, i is narrow, and paragraphs read more like everyday articles and web pages. Body text, helper copy, menus, and most interface labels usually use proportional type.
Monospace (Fixed-Width Font)
A monospace font gives every character the same width. W and i each take one slot, so code, terminals, logs, and IDs line up more easily. Use it when people need to compare numbers or symbols line by line.
PROPORTIONAL FONT ════════════════════════════ ╭─╮╭──╮╭───╮╭──╮ │l││o ││ v ││e │ ╰─╯╰──╯╰───╯╰──╯ 3px 5px 7px 5px width follows glyph shape keeps text compact ──────────────────────────── MONOSPACE FONT ════════════════════════════ ╭───╮╭───╮╭───╮╭───╮ │ l ││ o ││ v ││ e │ ╰───╯╰───╯╰───╯╰───╯ 6px 6px 6px 6px each character has one width for code/table alignment
2. Layout & Spacing
The space around text changes how reading feels. Tight letters are hard to scan, tight lines feel cramped, and messy paragraph edges make it harder to find the next starting point. Good spacing helps headings, body text, and helper copy separate from each other.
Tracking
Tracking is overall letter spacing. It opens up or tightens all the characters in a word or text run together. In CSS, it is usually set with letter-spacing. Headings, labels, and button text react strongly to it: a little space can breathe, too much falls apart; tighter text can feel crisp, too tight becomes hard to scan.
Kerning
Kerning adjusts the distance between one pair of letters. A and V, for example, can leave a visible gap unless they are pulled closer together. Kerning is about local fit between glyphs, different from tracking across a whole text run.
Leading
Leading is the distance from one line of text to the next. In CSS, it is usually set with line-height. Body text often succeeds or fails here. Lists, forms, and multi-line card content also feel cramped when line height is too tight.
─────── Ascent line Line 1 h e l l o ─┬───── Baseline │ │LEADING (baseline-to-baseline span) │ ─│───── Ascent line Line 2 │ w o r l d ─┴───── Baseline
Alignment
Alignment is how text lines up. Common choices are left, right, centered, and justified alignment. Left alignment works for most body text because every line starts in the same place. Numbers in tables often use right alignment, which makes comparison faster. Centered text works better for short headings than for long paragraphs.
┋ LEFT ┋┋ RIGHT ┋ ┋ text starts here ┋┋ text hugs right ┋ ┋ right edge ragged ┋┋ left edge ragged ┋ ┋ CENTER ┋┋ J U S T I F Y┋ ┋ both sides ragged ┋┋ t e x t s p r e a d ┋ ┋ centered weight ┋┋ even left and right ┋
3. Type Anatomy
Type anatomy looks at the lines and parts inside letters. It explains a common surprise: two fonts can both be 16px and still look different in size. These details also matter when buttons, inputs, icons, and text need to sit on the same line.
Baseline
The baseline is the line most Latin letters sit on. When text and icons share a row, their baselines need to feel aligned. If the baseline is off, button text can look like it is floating or sinking.
X-height
X-height is the height of the main body of lowercase letters. You can use the lowercase x as the reference. It does not include the part of b that rises upward or the part of g that drops below the baseline. When two fonts use the same size but one looks larger, x-height is often why.
Ascender
An ascender is the part of a lowercase letter that rises above the x-height, such as the upper half of b, d, or h. Tall ascenders need more room between lines, or the text starts to feel crowded.
Descender
A descender is the part of a lowercase letter that drops below the baseline, such as the lower half of g, j, or p. When line height is too tight, descenders are often where adjacent lines start to clash.
Cap Height
Cap height is the height from the baseline to the top of a capital letter, such as H or I. When English headings, button labels, and icons sit together, cap height changes whether they look level.
_ _____________________________ASCENDER LINE | |_ ___ _______________________Cap Height | | |_ _|______ _ __ _ _ _ _ ___Mean Line / x-height | | | | \ \/ /| '_ \ | | | | | | | | > < | |_) || |_| | |_| |___|/_/\_\| .__/__\__, | __BASELINE _______________|_|_____|___/____Descender Line l I x p y
4. CSS & Digital Units
In websites and apps, text size, line height, and spacing all need units. px is direct, em and rem follow font size, and ch helps estimate width by character count. The wrong unit can make a component change size in surprising ways across pages or screens.
PX (Pixel)
PX is the most common CSS length unit. When you write 16px, the browser maps that CSS pixel to physical pixels based on the device’s DPR. Type size, borders, icons, and component spacing often use px because it is easy to reason about and has clear edges.
1. Standard screen (DPR = 1) ▃▃ 1 CSS Pixel ▀▀ 1 physical pixel 2. Retina/high-density screen (DPR = 2) ▃▃ ▃▃ ▀▀ ▀▀ 1 CSS Pixel ▃▃ ▃▃ ▀▀ ▀▀ 4 physical pixels
PT (Point)
PT means point, a print unit equal to 1/72 inch. Systems such as iOS also use points as logical sizes, then map them to screen pixels. You will see pt more often in mobile system design and print typography than in everyday web CSS.
╭1 physical inch (1 Inch / 2.54 cm) ─────────────────────╮ │ │ │72 PT (points) ── each division represents 1 pt │ ├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤ On a typical 96 DPI display (denser grid) ├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
EM (Relative Unit)
EM follows the current font size. If the current text is 16px, 1em is 16px; if the text becomes 20px, 1em becomes 20px. It is handy when padding, icons, or decorative strokes should grow and shrink with the text.
REM (Root EM)
REM is also relative, but it only looks at the root html font size. If the root size is 16px, 1rem is 16px, no matter how deeply a component is nested. Design systems often use rem for type and spacing because it stays more consistent across pages.
Root font-size = 16px EM (compounds through parents) html 16px ╰─ parent: 1.5em = 24px ╰─ child: 1.5em = 36px REM (always references root) html 16px ╰─ parent: 1.5rem = 24px ╰─ child: 1.5rem = 24px
CH (Character Unit)
CH estimates width from characters. Its reference is the width of the 0 glyph in the current font. In a monospace font, 1ch is basically one character wide. It works well for input widths, code line length, and table columns that should match a rough character count.
1. Monospace font ╭─────┬─────┬─────┬─────╮ │ 0 │ i │ w │ l │ │ 1ch │ 1ch │ 1ch │ 1ch │ ╰─────┴─────┴─────┴─────╯ │<──────── 4ch ────────>│ 2. Proportional font ╭─────┬─┬──────┬──╮ │ 0 │i│ w │l │ │ 1ch │ │ >1ch │ │ ╰─────┴─┴──────┴──╯ uses the width of "0" as the reference
5. Rendering & Advanced Engineering
The text people see is produced by the browser, the operating system, and the font file together. A font can flash while loading, a fallback font can change line breaks, and poor pixel alignment can make text look blurry. On the web, typography quickly becomes a front-end concern.
Anti-aliasing
Anti-aliasing makes text edges look smoother. Screens are pixel grids, so diagonal and curved strokes can turn into visible steps. Anti-aliasing adds semi-transparent edge pixels so small text does not look as harsh.
Aliased rendering ███ ███ ███ ███ Edges change sharply, creating visible steps Anti-aliased rendering ░░░▒▒▒▓▓▓███▓▓▓▒▒▒░░░ ░░░▒▒▒▓▓▓███▓▓▓▒▒▒░░░ ░░░▒▒▒▓▓▓███▓▓▓▒▒▒░░░ ░░░▒▒▒▓▓▓███▓▓▓▒▒▒░░░ Uses ░ (25%)▒ (50%)▓ (75%)█ (100%) to feather pixels so the edge reads as smooth
Font Hinting
Font hinting tries to snap important strokes to pixel boundaries, especially vertical and horizontal lines. Small text depends on this more than large text. On low-resolution displays, tables, sidebars, and log views, hinting quality is easier to notice.
Unhinted (not snapped to pixel edges) ├── pixel A ──┼────pixel B ──┤ physical pixels: ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ 50% lit 50% lit screen ░░▒▒▒▒░░ ░░▒▒▒▒░░ blurry edge ░░▒▒▒▒░░ Hinted (snapped to pixel edges) ├── pixel A ──┼────pixel B ──┤ physical pixels: ████████████████ 100% lit stays off screen ░░██░░░░ ░░██░░░░ crisp edge ░░██░░░░
FOIT (Flash of Invisible Text)
FOIT happens when a webfont is still downloading and the browser hides the text. The space remains, but the words are invisible until the font arrives. For a short moment, users see a blank area instead of readable content.
FOUT (Flash of Unstyled Text)
FOUT happens when the browser shows text in a fallback system font while the webfont downloads. Once the webfont arrives, the text switches to the new face. The content appears earlier, but the page can flash or shift because the two fonts have different widths and line heights.
Font Fallback (Font Stack)
Font fallback is the backup order for missing fonts. The browser tries the first font in font-family; if the device does not have it, or a glyph is missing, it keeps moving down the list. A good font stack keeps the page from suddenly changing shape or showing missing-character boxes.
Ligature
A ligature combines nearby letters or symbols into one glyph. In traditional typography, fi can avoid awkward stroke collisions. In programming fonts, => may turn into an arrow. Be careful in code and math: a smoother symbol can also hide the original characters.
Input Output Programming ! = ≠ ligatures = > ⇒ = = = ≡ < - - ⟵ ────────────── Text fi fi f hook collides with i dot ligatures fl fl f crossbar collides with l top