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.
Total time: 8 hours
- 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
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:
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.
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.