Table of Contents

What Is Typography?

Typography is the art and technique of arranging type — selecting typefaces, setting sizes, adjusting spacing, and organizing text on a page or screen so that it’s both readable and visually effective. Every word you’re reading right now is a typographic decision someone made.

Not Just “Picking a Font”

People tend to reduce typography to font selection, which is like reducing cooking to choosing ingredients. The ingredients matter, sure. But what you do with them matters more.

Typography encompasses everything about how text appears: the typeface, the size, the weight (light, regular, bold), the spacing between letters (tracking), the spacing between specific letter pairs (kerning), the spacing between lines (leading), the line length, the alignment, the color, the contrast with the background, and how all of these interact with each other and with surrounding visual elements.

Change any one of these variables and the text reads differently. Not just aesthetically — functionally. The same words set in different typographic treatments can feel authoritative, playful, urgent, relaxed, cheap, or luxurious.

The Major Typeface Families

Serif

Serif typefaces have small lines or strokes attached to the ends of their main strokes. Think Times New Roman, Garamond, or Georgia. The serifs create a horizontal flow that guides the eye along a line of text, which is why serif faces have traditionally dominated book and newspaper publishing.

There’s a persistent myth that serifs make text more readable. The evidence is mixed — what matters more is familiarity and context. Serif typefaces feel traditional, established, and scholarly because we associate them with books and serious publications.

Sans-Serif

“Sans” means “without” — these typefaces lack serifs. Helvetica, Arial, Futura, and Roboto are examples. Sans-serif typefaces feel modern, clean, and direct. They dominate digital interfaces because their simpler forms render more clearly on screens, especially at small sizes.

The Bauhaus and Swiss design movements of the 20th century championed sans-serif type as more honest and functional. Whether that’s objectively true is debatable, but the association stuck.

Script and Display

Script typefaces mimic handwriting or calligraphy. They range from elegant (Edwardian Script) to casual (Comic Sans — which, despite its reputation, was actually well-designed for its intended purpose: speech bubbles in a children’s software program).

Display typefaces are designed for headlines, logos, and large-format use. They’re often too distinctive or elaborate for body text but grab attention at large sizes. Think of the typeface used for a movie poster — that’s display type.

Hierarchy: Making Text Scannable

Typographic hierarchy is how you signal to readers what to read first, what’s a heading, what’s body text, and what’s a caption. You create hierarchy through:

Size — Larger text draws the eye before smaller text. Headings are bigger than body text for a reason.

Weight — Bold text stands out from regular weight. This is why headings are often bold.

Color and contrast — Dark text on a light background reads first. Gray text on a gray background recedes.

Position — Text at the top of a page or column gets read before text at the bottom.

Typeface — Switching typefaces between heading and body text creates visual distinction. A common combination: sans-serif headings with serif body text, or vice versa.

Good hierarchy means a reader can glance at a page and immediately understand its structure without reading a single word. They know what’s a title, what’s a subheading, what’s a pull quote. Newspapers have perfected this over centuries.

The Spacing Rules That Most People Ignore

Spacing might be typography’s most underappreciated element. The space between and around letters affects readability as much as the letters themselves.

Tracking (letter-spacing) affects the overall density of text. Tight tracking works for headlines but makes body text feel cramped. Loose tracking can make short text feel elegant but destroys readability in paragraphs.

Kerning is the adjustment of space between specific character pairs. The letters “AV” need to tuck closer together than “HI” because of the angle of the A’s diagonal stroke. Poor kerning creates awkward gaps that your eye catches even if you can’t articulate why. Good kerning is invisible.

Leading (rhymes with “heading,” from the lead strips typesetters placed between lines of metal type) is the vertical space between lines. Too tight and lines feel suffocating — ascenders and descenders from adjacent lines nearly collide. Too loose and the text breaks apart. Most body text works well with leading set to 120-150% of the type size.

Margins and white space — The empty space around and between text blocks isn’t wasted space. It gives the eye room to rest and helps separate different sections of content. Cramming text edge-to-edge is one of the most common amateur typography mistakes.

Typography on Screens vs. Print

Screen typography follows different rules than print typography because the medium is fundamentally different.

Printed text is fixed — the size, typeface, and layout are permanent once printed. Screen text is variable — users can change text size, browsers render fonts differently, and screens range from 4-inch phones to 32-inch monitors.

This variability has pushed web typography toward flexibility. Responsive design adjusts type size and layout based on screen dimensions. Variable fonts allow smooth weight and width adjustments. System fonts load instantly but limit design options; web fonts look better but add loading time.

Screen resolution also matters. Before high-density (Retina) displays became common, fine serif details and thin strokes broke down at small sizes on screen. This is why early web design favored sans-serif fonts — they survived low-resolution rendering better. Today’s screens are sharp enough that the distinction matters less.

Why You Should Care

Typography is one of those skills that, once you start noticing, you can’t stop. You’ll see kerning errors on movie posters. You’ll spot inappropriate typeface choices on restaurant menus. You’ll understand why some websites feel “right” and others feel off, even when you can’t point to a specific reason.

More practically, anyone who creates documents, presentations, websites, or social media content is making typographic decisions — usually by accepting defaults. Understanding even the basics of typography means your work communicates more effectively. And in a world where attention spans are measured in seconds, how your text looks determines whether anyone reads what it says.

Frequently Asked Questions

What are the main categories of typefaces?

The four main categories are serif (with small finishing strokes, like Times New Roman), sans-serif (without serifs, like Helvetica), script (mimicking handwriting, like Brush Script), and display/decorative (designed for headlines and large sizes, like Impact). Within these categories, there are many subcategories — old-style serifs, geometric sans-serifs, slab serifs, and more.

Why does typography matter?

Typography directly affects readability, comprehension speed, and emotional response. Research shows that people form opinions about content credibility partly based on the typeface used. Poor typography increases reading effort and reduces engagement, while good typography makes content accessible and professional. In branding, typography is often the single most recognizable design element.

How many fonts should you use in a design?

The standard guideline is two to three — one for headings and one for body text, with an optional third for accents or captions. Using too many fonts creates visual chaos and looks unprofessional. The key is choosing fonts that contrast enough to create hierarchy but share enough visual characteristics to feel cohesive.

Further Reading

• Google Fonts — Free Typography Resources
• Type Directors Club
• Encyclopaedia Britannica — Typography