Typography

As explained in Design for Developers

The design and arrangement of written characters to support readability and visual expression.

Typography is the design and arrangement of written characters. On the web, it does more than display words: its visual treatment gives a brand or product a personality, sets tone, and can change how a message feels before a reader considers its literal meaning. section 8.0 section 8.2

Treat type as part of a visual system, not a finishing touch. Along with composition, layout, and color, it creates visual hierarchy; applied over a solid page structure, it helps a design feel deliberate rather than like an unchanged template. section 1.2 section 6.0 section 1.1.4

Choose and use web type by checking these practical concerns:

• Match the typeface’s personality and voice to the story, brand, and product. section 8.2
• Confirm that the typeface works well on a screen and is readable for the intended audience. section 8.0
• Pair typefaces carefully, then establish a type ramp and vertical rhythm to keep the design consistent and flowing. section 8.0
• Protect readability with sufficient color contrast, especially for text over images and in form elements; avoid thin text on backgrounds that are too light or busy. section 2.1.4

Meaning changes with the typeface

The same words, “I’ll love you forever,” can feel affectionate in a script treatment but sinister in a decorative horror-themed treatment. Likewise, a whimsical typeface in a serious official communication can signal flippancy rather than professionalism. Choose type for the message’s intended tone, not merely for its category. section 8.0

Figure 8.1 The meaning of “I’ll love you forever” becomes much more sinister when we change the typeface from a script to a decorative horror-themed one.

Compare the two treatments of identical words to see how lettering alone changes perceived meaning and emotional tone. section 8.0

Typography belongs in an iterative web-design process. It can be applied and adjusted during design and development after page structure is established, then refined when testing shows that the experience does not efficiently meet user needs. section 1.2.1 section 1.3

How Design for Developers covers it

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.

How it connects

Connects typography with visual hierarchy, layout, color, contrast, accessibility, and user experience.

liveBookmanning.com

Read Design for Developers on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  WordPress Power Toolkit: Harness AI to build next-level websitesTypography is the arrangement and visual treatment of written characters, including typeface selection, sizing, spacing, and line layout.
• 

  liveBookmanning.com
  Everyday Data VisualizationTypography is the design and arrangement of written text to control its appearance, tone, readability, and visual emphasis.
• 

  liveBookmanning.com
  Math for Web DesignTypography is the design and arrangement of text, including its size, spacing, alignment, and visual appearance.

Compare how 4 books explain typography →

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.

This explainer was generated by Manning's knowledge graph from the text of Design for Developers. The section links point to the parts of the book it draws on.