A poster of the components of a typeface
Part of the CSS Reading List

A well-known dictum states that web design is 95% typography. Despite the prevalence of rich media, videos and games, people come to the web primarily to read. Making that reading experience comfortable, interesting and enjoyable is a major factor in keeping people on web sites longer and enhances their ability to retain and remember information.

Goals: Control the display of web page text to enhance communication.

Prerequisite: Color

Total time: 8 hours

Core Material

  1. CSS Typography Basics
  2. Italicization & Bolding
  3. Crafting Optimal Type Sizes
  4. Setting Line Height
  5. Controlling Hyphenation
  6. Controlling Widows & Orphans
  7. Basic Fonts
  8. Designing A Good Font Stack
  9. Embedding Fonts
  10. Free Font Hosting Services
  11. Make Your Own Webfont
  12. Legalities of Font Embedding
  13. WOFF 2
  14. Font Subsetting
  15. Ligatures & Kerning Pairs

Classic Typography Effects

You can also recreate classical typographical effects in CSS:

  1. Hanging Indents
  2. Initial & drop caps
  3. First-line run-in
  4. last-line-align & aligning hero text
  5. Pullquotes
  6. Footnotes

Visual effects for text can be found in the Text Effects reading list.

Further, you may want to read up on the rich typographical features of OpenType fonts:

  1. Discretionary Ligatures & True Small Caps
  2. Automatic Fractions
  3. Swashes
  4. Slashed Zeros
  5. Ordinals

Recommended Reading

Read Chapter 12, Text, HTML and CSS by Jon Duckett. Read pages 492 – 530, together with pages 542 – 563, in Learning Web Design, Jennifer Neiderst Robbins.

Read Lesson 4: Typography in Shay Howe’s Beginner’s Guide to HTML & CSS

Read CSS Text Styling Fundamentals and CSS Text Quick Start from Web Platform Docs.

Read Typography in The Magic of CSS, together with Elliot Jay Stocks’ Advanced Web Typography

Highly recommended: Carolina de Bartolo’s Explorations In Typography, which I have reviewed.

Supplementary Material

Like color, typography is a subject that can easily absorb years of concentrated study. At the very least, I would recommend reading the following as a primer:

If you read only source online, memorize Typography In Ten Minutes, part of Matthew Butterick’s Practical Photography. (If you can, read the rest of the book too: it’s free).

I would follow that with “A Pocket Guide to Master Every Day’s Typographic Adventures”

The FontFont type foundry provides an excellent set of free educational materials on typography as a collection of PDFs

Next, read The Elements of Typographic Style Applied to the Web, by Robert Bringhurst.

Try some of the lessons at Typekit Practice.

Finally, while it mostly takes an advertising print perspective, Type & Layout by Colin Wheildon provides a very good overview of typography and design issues.

When You’re Done

Creation of compelling content while gaining control of typography and color wins you half the battle of web design. The rest of the war is layout, navigation, and what is broadly termed “User Experience”. At this stage, you are encouraged to experiment with combinations of typography, color and content in your web pages.

Illustration by arnoKath, licensed under Creative Commons.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.