Typography Basics

The image displays the word ‘Typography’ in a serif font with labeled parts of letter anatomy. Green lines and labels point to specific elements including: cap height, baseline, stem, descender, bowl, counter, link, bracket, terminal, ascender, x-height, ear, uppercase and lowercase characters, and point size. The visual explains the structure and proportions of type, showing how each typographic term relates to the form of individual letters.

A practical introduction to typography — from anatomy and spacing to legibility and alignment — for designers who want to create type that reads beautifully and feels intentional.

Visuals by @oscarsun — Figma Community

Typography isn’t just about picking a pretty font. It’s the craft of shaping written language into a visual experience — how words look, breathe, and interact on a page or screen. Good typography quietly guides the reader, while poor typography shouts for attention in all the wrong ways. Every detail — from letter spacing to line height — affects how users read, feel, and engage. Let’s unpack the essentials.

Every letter has a structure, and understanding it helps you design with precision. Terms like ascender, descender, baseline, and x-height describe the invisible skeleton that keeps type coherent. The x-height, for instance, determines how big a typeface feels even at the same point size.

Serif and sans-serif typefaces differ in tone partly because of these structures: serifs guide the eye along lines of text, while sans-serifs often feel cleaner and more modern. Knowing anatomy allows you to mix typefaces consciously rather than by vibe alone.

Typographic Anatomy

A large black uppercase ‘X’ is shown with orange dashed lines illustrating its body width and x-height. The baseline and measurement labels mark the height and width of the character, explaining fundamental proportions of type.

Lowercase letters ‘p’ and ‘d’ are displayed with orange dashed lines showing ascender and descender zones. The diagram labels the ascender, descender, baseline, and corresponding lines, illustrating vertical type structure.

Three uppercase letters ’N’, ‘B’, and ‘E’ highlight typographic parts. The ’N’ marks its serif, the ‘B’ highlights its bowl, and the ‘E’ identifies the arm and stem, with orange accents emphasizing each feature.

Image 4 — Parts and shapes of type: Ear, Spine, and ShoulderLowercase ‘g’, ‘S’, and ‘m’ illustrate three distinct components of type. The ear of the ‘g’, the curved spine of the ‘S’, and the shoulder of the ‘m’ are all highlighted in orange.

Letters ‘A’, ‘f’, and ‘e’ are displayed to show horizontal structural features. The ‘A’ highlights a crossbar, the ‘f’ shows a cross stroke, and the ‘e’ identifies both its bar and counterspace.

The letters ‘S’, ‘j’, ‘i’, and ‘f’ show smaller typographic details. The ‘S’ marks its spur, ‘j’ and ‘i’ highlight the jot (dot above), and the ‘f’ demonstrates its terminal and beak.

Parts and shapes of type: Link, Loop, and Apex Letters ‘g’, ‘A’, and ‘M’ highlight structural forms. The ‘g’ shows the link and loop connection, while ‘A’ and ‘M’ emphasize their apex points at the top of each letter.

Two sets of lowercase ‘a’ and ‘g’ letters compare single-story and double-story designs. The left side shows geometric single-story forms, while the right side shows traditional double-story shapes used in many serif typefaces.

Kerning, tracking, leading

These three terms define the rhythm and flow of text. Kerning adjusts the space between individual letters, tracking controls spacing across whole words or paragraphs, and leading (pronounced “ledding”) sets the space between lines.

Think of them as the breathing room of type. Too tight, and words feel suffocating; too loose, and they drift apart like strangers at a party. Consistent, intentional spacing is one of the clearest markers of professional typography — and one of the easiest to overlook.

Image 1 — Kerning: Distance between lettersThe heading ‘Kerning’ appears above the phrase ‘Distance between letters.’ Two examples of the lowercase word ‘hi’ are displayed: one with normal spacing and one with increased space between the letters. A double-headed arrow labeled ‘In Figma, they call it “Letter spacing”’ illustrates the spacing difference.

The heading ‘Tracking’ is followed by the description ‘an overall adjustment of space applied equally to a word, a line, or a passage of text.’ Two blocks of lorem ipsum text show the difference between normal tracking and wide tracking. A double-headed arrow labeled ‘In Figma, they still call it “Letter spacing”’ connects the two examples.

The heading ‘Leading’ appears with the subtitle ‘the space between lines measured from baseline to baseline’ and a note in orange text that reads ‘normal leading is 2 points greater than the font size.’ Two blocks of lorem ipsum text are displayed, with the one on the right showing increased line spacing. An arrow labeled ‘In Figma, they call it “Line Height”’ connects the two examples.

The heading ‘Widow’ appears with the description ‘a word hanging out at the end of a paragraph.’ Two side-by-side text blocks show examples: the left one has a single word (‘ultrices’) isolated at the end, marked with an orange oval and a label ‘widow,’ while the right one shows the corrected version. A red cross and green checkmark highlight incorrect and correct formatting.

The heading ‘Orphan’ appears with the description ‘a word or part of a word at the top of a column.’ Two text columns are displayed. The left column contains a paragraph ending mid-column, and the right column begins with an isolated short word (‘id.’) marked with an orange circle and a label ‘orphan,’ demonstrating improper text flow.

Type alignment

Left, right, center, or justified — each alignment changes how the reader experiences text. Left-aligned text feels natural for most Western readers; it mirrors how our eyes expect to move. Centered text adds elegance in small doses, like headings or invitations, but strains readability in long paragraphs.

Justified text can look neat but often introduces awkward gaps between words. There’s no one right choice — only what fits the tone and purpose of the content.

The heading ‘Flush left, rag right’ introduces a layout example where text is aligned to the left margin and uneven on the right. The left block of lorem ipsum text is labeled ‘flush left’ with an orange arrow pointing downward and a note saying ‘rag right.’ On the right, a warning icon appears beside text explaining that this style is preferred in Western countries because people read from left to right.

The heading ‘Flush right, rag left’ introduces a layout where text is aligned to the right and uneven on the left. The lorem ipsum text is labeled ‘rag right’ with an orange outline marking the uneven edge and an arrow labeled ‘flush left’ at the bottom. On the right, a warning icon and note indicate that flush-right text is not ideal for long passages because the eye struggles to find the next line.

The heading ‘Justified’ is followed by an example paragraph where all text lines are aligned evenly on both sides. An orange arrow and curly brackets highlight uniform alignment and mention that ‘all lines are the same length and the margins are even.’ To the right, text reads ‘Sometimes, justified texts create rivers of space. That is not good,’ warning against uneven gaps that can occur.

The heading ‘Centered’ introduces text aligned along the center axis. A block of lorem ipsum text is centered on the left, while on the right, a yellow warning triangle with text explains that centered text is not suitable for long reading because the eye loses its place easily.

The heading ‘Random / Asymmetrical / Mixed’ shows multiple short lines of lorem ipsum text arranged irregularly, without consistent alignment. On the right, a yellow warning icon and note state, ‘Visually exciting but not good for lengthy reading,’ emphasizing that inconsistent alignment may attract attention but reduce readability.

Indents, outdents, and hanging punctuations

Indenting the first line of a paragraph subtly signals a new thought, while outdents (negative indents) can highlight lists or quotes. Hanging punctuation, where quotation marks or bullets sit outside the text block, preserves clean visual alignment.

These are the small design manners that readers might never notice — but would feel their absence. They lend rhythm and grace to long-form content.

The heading ‘Indent’ appears above a paragraph of lorem ipsum text on the left, where the first line begins slightly inward to demonstrate indentation. An orange arrow highlights the starting position. On the right, a screenshot labeled ‘HOW TO’ shows a Figma settings panel with ‘Paragraph Indent: 25’ under ‘Type Details,’ illustrating where indentation can be adjusted.

The heading ‘Outdent’ introduces an example with multiple lorem ipsum paragraphs. Each line begins with an orange arrow pointing left, showing that the first line extends outside the normal text margin. On the right, a yellow warning triangle is accompanied by text that reads, ‘Unsure if a setting in Figma can do this. It is not commonly used in layouts,’ noting that outdents are rare.

The heading ‘Hanging punctuation’ is shown above justified lorem ipsum text with punctuation marks slightly extending beyond the right margin. Orange arrows and lines highlight the overhanging characters, with text that reads, ‘Extend beyond the edge of the justified text.’ Below, a yellow warning icon explains that this maintains the optical alignment of the column, and smaller text lists examples like quotes, apostrophes, hyphens, commas, and periods.

The heading ‘Hanging punctuation’ appears again, with a paragraph of justified text where punctuation is kept within the alignment boundary. Orange arrows indicate no extension beyond the edge, with a note saying, ‘No need to extend beyond the edge of the justified text.’ A warning icon below clarifies that larger punctuation marks such as question marks, colons, and parentheses should remain aligned.

The left section labeled ‘Prime marks’ displays the contraction ‘I’m’ using incorrect straight marks, with a circled area highlighting the prime mark above the ‘I.’ Below it, an example reads ‘His height is 5’-9".’ The right section labeled ‘Apostrophe’ shows the correct curved apostrophe in ‘I’m,’ highlighted by a circle, with an example sentence below: ‘He said, “I am a designer.”’

The heading ‘Letters & strokes’ presents two large letter ‘Q’ examples. On the left, a thick-stroked orange ‘Q’ is outlined in black, with a warning icon stating, ‘Letter forms are distorted with very thick stroke. Refrain from doing this.’ On the right, a thinner orange ‘Q’ shows proper stroke weight with a note saying, ‘A thinner stroke is ok.’

The heading ‘Stacking type? No!’ introduces an example with vertically arranged words. On the left, uppercase ‘HELLO’ is stacked vertically, and on the right, lowercase ‘hello’ is also stacked. A warning icon and note beside them state, ‘Irregular width of these letters creates a rough edge on both sides of the type,’ illustrating why stacked type reduces readability.

Legibility and readability

They sound similar but mean different things. Legibility is about how clearly letters can be distinguished — a function of font design, size, and contrast. Readability is about how easy it feels to read longer passages — affected by line length, spacing, and even the surrounding design.

A beautifully legible font can still be unreadable in practice if the text is too dense or too wide. The goal isn’t just to be seen but to be comfortably followed.

The heading ‘Legibility and readability definition’ appears at the top. Below it, two sentences define the terms: ‘Legibility measures whether the viewer can read the text’ and ‘Readability measures how much the reader wants to read the text,’ with the words can and wants underlined for emphasis.

The heading ‘Legibility and readability’ introduces two columns comparing fonts. On the left, text labeled ‘Sans Serif’ is written in a clean sans serif typeface. On the right, text labeled ‘Serif’ uses a serif typeface. A yellow warning icon at the bottom notes: ‘Research has shown that serif is slightly easier to read because of the horizontal serifs which lead the eye forward.’

The heading ‘Legibility and readability’ appears again. Two columns compare ‘Sans Serif’ and ‘Serif’ text using similar words: ‘infinite, millenium, minimum, lilies.’ A yellow warning icon and note below explain: ‘Serifs provide details which help the eye differentiate between similar letters.’

The heading ‘How many characters in a line’ appears above a sample paragraph. A numbered scale runs above the text, showing marks at 1, 52, and 70, with the label ‘optimal characters per line’ in orange. A yellow warning icon at the bottom reads, ’28 picas wide * 2.5 = 70 characters,’ indicating an ideal line length for readability.

The heading ‘Text size’ with the subheading ‘generally range between 8–10, sometimes 12 point’ appears at the top. Below are four side-by-side paragraphs of lorem ipsum text labeled ‘8 point,’ ‘9 point,’ ’10 point,’ and ’12 point,’ showing how font size affects readability.

The heading ‘Legibility’ with the subtitle ‘high contrast makes for easy reading’ introduces three colored examples. The left text box has green background with light text; the middle has orange background with light text — both marked with yellow warning icons reading ‘colorizing the text, or darkening the background will make it hard to read the text.’ The right box shows black text on white background with a green check icon and note: ‘When unsure, white background and black text is the way t

The heading ‘Drop caps’ with the subtitle ‘draw the readers eyes’ appears above an example paragraph starting with a large decorative ‘L’ drop cap. An orange arrow points right to a yellow warning icon and note: ‘Drop caps and opening paragraphs are opportunities to capture the reader’s attention and motivate them to read on.’

The heading ‘Typographic abominations’ with the subtitle ‘please don’t do these’ introduces three text examples of ‘I am Baskerville.’ The first, outlined in green, shows proper proportions labeled ‘Normal, without distortion.’ The second, slightly compressed, has an orange arrow and a red X with text ‘Don’t squash the letters.’ The third, stretched horizontally, has a red X and the note ‘Don’t stretch the letters.’

The heading ‘Contrast’ shows two blocks of text. On the left, a light background with black text and a green check icon that says ‘You can see the text because it is on a white background.’ On the right, dark grey background with black text, accompanied by a yellow warning icon reading ‘You probably have difficulties seeing the texts now compared to the left one.’

The heading ‘Contrast’ appears at the top. Two invitation design examples are shown below. On the left, a well-balanced layout features ‘INVITATION’ in uppercase with ‘50TH ANNIVERSARY’ below it, where ‘50’ is large and bold to create visual hierarchy. A green check icon and note read, ‘What is important? What is less important? Think about contrast and hierarchy.’ On the right, a cluttered version displays ‘INVITATION 50 TH ANNIVERSARY’ with inconsistent spacing and lack of emphasis, accompanie

Specialized uses

Typography takes on unique forms in different contexts: interfaces, signage, packaging, books, motion graphics. In UI design, type must perform at small sizes and varying screens. In print, it must hold character at high resolutions and long durations.

Display type can afford drama; body text should feel invisible. Understanding how context shapes your typographic decisions is what separates art from noise.

The heading ‘Lining numbers’ with subtitle ‘some fonts have numbers that are all the same height’ appears above two rows of numerals from 1 to 0. Both rows are enclosed in dashed boxes with equal height indicators, showing that all digits align at the top and bottom, demonstrating uniform height in lining figures.

The heading ‘Oldstyle numbers’ with subtitle ‘some fonts have numbers that have different heights and baselines’ appears above a single row of numerals 1 to 0. The digits vary in height and baseline — some extend above or below the line — demonstrating the classic appearance of oldstyle numerals used in traditional typefaces.

The heading ‘Analphabetic symbol/Dingbats’ with subtitle ‘typographic marks that are not part of the basic character set’ appears above a vertical list of typographic symbols on the left. Symbols include a pencil, infinity sign, crosses, checkmarks, and other ornamental icons, illustrating non-alphabetic characters used in type design.

Typography isn’t decoration — it’s communication shaped with care. Once you see how subtle its impact is, you start noticing type everywhere: on screens, in streets, on receipts. Every font choice tells a story. The more fluently you speak the language of type, the more precisely you can design experiences that speak back.

Typography has a strange power: it’s both invisible and unforgettable. The best type never demands your attention, yet it defines how every word feels. A letter’s curve can suggest warmth or precision, while spacing can create calm or urgency. This is why typography sits at the heart of design — connecting language with emotion.

So when we adjust a line height or choose between Helvetica and Garamond, we’re not just picking styles; we’re shaping how people interpret meaning. Typography is the quiet storyteller behind every interface, poster, and page. Mastering it means learning to speak softly but leave a lasting impression.