Typography
Typography is the design and arrangement of written text, including typeface, size, spacing, alignment, and layout, to support readability and visual communication.
Design for Developers
The design and arrangement of written characters to support readability and visual expression.
- How it is used
- Uses typography to establish visual hierarchy, brand tone, and readable web experiences.
- How deep it goes
- Explains typeface selection, pairing, type ramps, vertical rhythm, and readability, without implementation-level code detail.
- Examples
- Uses contrasting treatments of “I’ll love you forever” and inappropriate Comic Sans in an official letter.
- What you can do after
- Apply it via typeface selection, pairing, hierarchy, and contrast decisions for web interfaces.
WordPress Power Toolkit: Harness AI to build next-level websites
Typography is the arrangement and visual treatment of written characters, including typeface selection, sizing, spacing, and line layout.
- How it is used
- Improves website text presentation so visitors can read content and recognize its hierarchy quickly.
- How deep it goes
- Gives a practical checklist for typeface, size, spacing, contrast, consistency, devices, accessibility, and load speed rather than typographic theory.
- Examples
- Uses a pet-adoption site review and a minimalist recipe home page with dispersed headline text to illustrate critique.
- What you can do after
- Apply it via WordPress customizer controls, font plugins, device checks, and AI-assisted reviews to refine a site’s text design.
Read how WordPress Power Toolkit: Harness AI to build next-level websites explains typography →
Everyday Data Visualization
Typography is the design and arrangement of written text to control its appearance, tone, readability, and visual emphasis.
- How it is used
- Guides readable, navigable data visualizations by setting tone and signaling hierarchy.
- How deep it goes
- Explains practical readability, contrast, consistent styles, and WCAG spacing guidance without exhaustively cataloging typographic vocabulary.
- Examples
- Uses payroll and hotel dashboards to demonstrate repeated labels, size and weight changes, and enlarged tooltip text.
- What you can do after
- Apply it to make visualization text readable, consistently prioritized, and more inclusive.
Math for Web Design
Typography is the design and arrangement of text, including its size, spacing, alignment, and visual appearance.
- How it is used
- Uses mathematical relationships to make web text harmonious, readable, accessible, and responsive.
- How deep it goes
- Explains type ratios, scaling formulas, CSS calc(), and a worked article correction, while stopping short of broader typography history.
- Examples
- Uses golden-ratio type scales, an unreadable article, CSS custom properties, scaling formulas, and readability exercises.
- What you can do after
- Apply typography formulas through CSS to scale font size, line height, and line length for more readable articles.
Related concepts
- fontuses · A font is a set of glyphs with a particular typeface design and rendering characteristics such as size, weight, style, or width.
- code readabilityuses · Code readability is the ease with which human readers can perceive and understand source code, including its structure and intent.
- line-height propertyhas part · The CSS line-height property specifies the height of each line box and thereby controls the vertical spacing of text lines.
- letter-spacinghas part · Letter spacing, or tracking, is the typographic adjustment of horizontal space between adjacent characters or glyphs across text.
- legibilityuses · Legibility is the ease with which individual written characters and words can be visually distinguished and recognized.
- CSSuses · CSS, or Cascading Style Sheets, is a stylesheet language for specifying the presentation and layout of structured documents and user interfaces.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.