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