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
CSS Typography Basics
Italicization & Bolding
Crafting Optimal Type Sizes
Setting Line Height
Controlling Hyphenation
Controlling Widows & Orphans
Basic Fonts
Designing A Good Font Stack
Embedding Fonts
Free Font Hosting Services
Make Your Own Webfont
Legalities of Font Embedding
WOFF 2
Font Subsetting
Ligatures & Kerning Pairs
Classic Typography Effects
You can also recreate classical typographical effects in CSS:
Hanging Indents
Initial & drop caps
First-line run-in
last-line-align & aligning hero text
Pullquotes
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:
Recommended Reading
Read Chapter 12, Text, by Jon Duckett. Read pages 492 – 530, together with pages 542 – 563, in HTML and CSSLearning 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.