Web Developer Reading List: Typography

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. Crafting Optimal Type Sizes
3. Setting Line Height
4. Controlling Hyphenation
5. Basic Fonts
6. Designing A Good Font Stack
7. Embedding Fonts
8. Free Font Hosting Services
9. Make Your Own Webfont
10. Legalities of Font Embedding
11. Ligatures & Kerning Pairs

Optional

Learn how to create classic typographical effects in CSS, such as hanging indents, initial and drop caps,  first-line run-in, pull quotes, and footnotes, together with shadowed, stroked and extruded text.

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

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.

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).

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.

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.

Next, we’ll start looking at the diverse possibilities of web page layout, starting with the fundamentals of the CSS box model and measurement systems.

Illustration by arnoKath, licensed under Creative Commons.