Typographic Web Design: How to Think Like a Typographer in HTML and CSS
Typography has long been an invaluable tool for communicating ideas and information. Words and characters once impressed in clay, written on papyrus, and printed with ink are now manifest in pixels of light. Today's web typographers can help their readers find, understand, and connect with the words, ideas, and information they seek.
Thus, legibility and readability are the foundations for the typographic theories and practice covered in Typographic Web Design. You'll learn how to choose fonts, organize information, create a system of hierarchy, work with tabular information, create a grid, apply a typographic system across multiple pages, and build a font library.
Each chapter provides time-tested typography rules to follow (modified for the web), explains why they work, when to break them, and offers the opportunity to test the rules with hands-on exercises in HTML and CSS. If you don't know HTML and CSS, Typographic Web Design provides a walk-through for each lesson, showing you how to plan and write syntax. Readers are sure to come away with an understanding of typographic principles, as well as the HTML and CSS skills needed to implement them on the web.
Typographic Web Design
•Applies decades of typographic theory and practice (e.g., how to choose a font) directly to web design (e.g., how to use the @font-face property in CSS).
•Clearly explains all typographic rules presented, providing examples that contrast successful and less successful typographic solutions.
•Is written for visual thinkers. The book is supported by a web site with solutions, critiques, and revisions for each lesson.
Laura Franz is an Associate Professor of Design at University of Massachusetts Dartmouth, where she has taught web typography for 12 years. She has presented lectures and workshops on Typographic Web Design, and has written a course on the topic for Lynda.com.
Part 1: How to Choose a Font
CHAPTER 1 Anatomy and Legibility: Is the Font Easy to Read? 11
Lesson 1: Compare and Contrast Fonts Online 16
CHAPTER 2 Aesthetics and Emotions: Does the Font Convey the Right Message? 21
Lesson 2: Word Connotations 25
CHAPTER 3 Contrast, Styles, and Characters: Can the Font Do the Job? 37
Lesson 3: A Short Bibliography, Part 1 42
CHAPTER 4 Choosing Two Fonts to Work Together 51
Lesson 4: A Short Bibliography, Part 2 56
Interlude 1: Rhythm and Tension
CHAPTER 5 Rhythm and Tension in the Typographic Layout 65
Lesson 5: A is for Alignment 72
Part 2: Making Type Work: Scanning with Purpose
CHAPTER 6 How We Read, Part 1 89
Lesson 6: A Film Series, Part 1 96
CHAPTER 7 Chunking Information: Vertical Spacing and Proximity 105
Lesson 7: A Film Series, Part 2 110
CHAPTER 8 Chunking Information with Headings: Hierarchy and Similarity 115
Lesson 8: A Film Series, Part 3 120
CHAPTER 9 Attending to Typographic Details 125
Lesson 9: A Film Series, Part 4 131
Interlude 2: Tabular Information
CHAPTER 10 A Typographic Approach to Tabular Information 143
Lesson 10: A Ferry Schedule for Martha's Vineyard 147
Part 3: Making Type Work: Casual and Sustained Reading
CHAPTER 11 How We Read, Part 2 163
Lesson 11: A Recipe, Part 1 169
CHAPTER 12 Expressing Structure and Rhythm: The Grid 183
Lesson 12: A Recipe, Part 2 190
CHAPTER 13 Helping Readers Move through the Site: Navigation 207
Lesson 13: A Recipe, Part 3 212
CHAPTER 14 Applying Systems across Pages 225
Lesson 14: A Recipe, Part 4 229
Interlude 3: Building a Font Library
CHAPTER 15 Building a Font Library 241
Lesson 15: Critically Analyze Fonts 254
Part 4: Designing with Type: Historical Styles
CHAPTER 16 The Traditional Page 271
Lesson 16: Design and Produce a Website from a Traditional Approach 276
CHAPTER 17 The Modernist Page 283
Lesson 17: Design and Produce a Website from a Modernist Approach 287
CHAPTER 18 The Post-Modernist Page 291
Lesson 18: Design and Produce a Website from a Post-Modernist Approach 295
APPENDIX A Moving Forward: Recommended Readings and Resources 299