Typography Basics: How Type Shapes Design

1What Is Typography?

Typography is the art and technique of arranging text so it is legible, readable, and visually appealing. It covers choices about typeface, size, spacing, line length, and how blocks of text relate to one another on a page or screen.

Good typography is often invisible: readers absorb the content without noticing the type choices that made it easy to read. Poor typography draws attention to itself by making text uncomfortable or confusing to follow.

2Serif vs Sans-Serif

Serif typefaces have small decorative strokes at the ends of letters, a style rooted in classical print typesetting. They are commonly used in books, formal documents, and long-form print content.

Sans-serif typefaces remove those strokes, resulting in cleaner, simpler letterforms that tend to render well at small sizes on screens, which is why most user interfaces default to sans-serif fonts.

3Type Hierarchy

Hierarchy is how typography guides a reader through content in order of importance, using differences in size, weight, and color rather than relying on the reader to figure out what matters most.

A heading set much larger and bolder than body text signals it is a section break; a subtle color or weight difference can distinguish a caption from primary content.

• Size: larger text draws the eye first and signals higher importance.
• Weight: bold text stands out against regular weight without needing to change size.
• Color and contrast: muted colors can de-emphasize secondary text like captions or metadata.
• Spacing: extra space above a heading separates it visually from the previous section.

4Spacing and Readability

Line height, the vertical space between lines of text, has a large effect on readability, especially in paragraphs longer than a sentence or two. Lines set too tightly feel cramped, while excessive spacing can make text feel disconnected.

Letter spacing and line length matter as well: lines that are too long make it hard for the eye to track back to the start of the next line, which is why well-designed body text is usually constrained to a moderate column width.

5Choosing Typefaces

Limiting a design to two or three typefaces, often one for headings and one for body text, keeps a layout consistent and avoids the visual noise that comes from mixing too many styles.

Pairing a distinctive display font for headings with a neutral, highly legible font for body text is a common and reliable combination.

6Typography in Digital Products

In apps and websites, typography also has to account for variable screen sizes, system font rendering differences, and dynamic content lengths that print design never had to handle.

Design systems typically define a fixed type scale, a small set of predefined sizes and weights, so every screen in a product uses typography consistently rather than each designer choosing sizes ad hoc.

7Accessibility in Typography

Accessible typography ensures text remains readable for users with low vision, color blindness, or those using assistive technology. This means maintaining sufficient contrast between text and background, avoiding font sizes that are too small, and letting text resize without breaking the layout.

These are not optional refinements; they determine whether a meaningful portion of users can actually read the content at all.

8Learning Typography Further

Typography is a skill that improves with deliberate practice: studying well-designed interfaces, testing different type scales, and paying attention to how spacing changes the feel of a layout.

It pairs naturally with broader design and front-end topics available in the glossary and topic guides for anyone building products.