O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Typographic Web Design: How to Think Like a Typographer in HTML and CSS

Book Description

Learn how to use typography on the web

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.

Table of Contents

  1. Cover Page
  2. Title Page
  3. Copyright
  4. About the Author
  5. Acknowledgments
  6. Dedication
  7. Acknowledgments
  8. Contents
  9. Introduction
    1. People Still Read
    2. Redefining Reading
    3. Design from the Text, Not the Top-Left Corner
    4. What to Expect from This Book
    5. How This Book Is Organized
    6. About the Syntax in the Book
    7. About the Lesson Files
  10. PART 1: How to Choose a Font
    1. CHAPTER 1: Anatomy and Legibility: Is the Font Easy to Read?
      1. What Makes a Font Legible?
      2. Comparing Georgia and Helvetica
      3. Comparing More Fonts
      4. Lesson 1: Compare and Contrast Fonts Online
      5. Comparing Fonts on Typetester
      6. Writing about What You See
      7. Understanding How HTML, CSS, Web Servers, Browsers, and Personal Computers Work Together
      8. Moving Forward
    2. CHAPTER 2: Aesthetics and Emotions: Does the Font Convey the Right Message?
      1. Choosing a Font with Appropriate Aesthetic or Emotional Associations
      2. Choosing Serif Fonts for a Traditional Feeling and Sans Serif Fonts for a Modern Feeling
      3. Working with Formatting
      4. Lesson 2: Word Connotations
      5. Communicating Different Meanings of a Word
      6. Writing about What You See
      7. Writing Your First HTML and CSS Files
      8. Moving Forward
    3. CHAPTER 3: Contrast, Styles, and Characters: Can the Font Do the Job?
      1. What Should I Look for in a Bold Style?
      2. What Should I Look for in an Italic Style?
      3. What Else Should I Consider in a Font?
      4. What If I Can't Get Everything I Want from a Font?
      5. Lesson 3: A Short Bibliography, Part 1
      6. Create a Bibliography Using One Font Family
      7. Writing about What You See
      8. Using HTML and CSS to Design the Bibliography
      9. Moving Forward
    4. CHAPTER 4: Choosing Two Fonts to Work Together
      1. Display Type: Using a Second Font
      2. Text Type: Using a Second Font
      3. Lesson 4: A Short Bibliography, Part 2
      4. Use a Script Font for the Title
      5. Use a Font of Your Choice for the Title
      6. Write about What You See
      7. Use @font-face and Font Stacks
      8. Moving Forward
    5. INTERLUDE 1: Rhythm and Tension
    6. CHAPTER 5: Rhythm and Tension in the Typographic Layout
      1. Repetition and Counterpoints
      2. Spatial Tension
      3. Lesson 5: A is for Alignment
      4. Overview of the Lesson
      5. Creating a Dynamic Composition, Part 1
      6. Creating a Dynamic Composition, Part 2
      7. Moving Forward
  11. PART 2: Making Type Work: Scanning with Purpose
    1. CHAPTER 6: How We Read, Part 1
      1. Size
      2. Line Height
      3. Line Length
      4. Alignment
      5. Color (Black/White)
      6. Lesson 6: A Film Series, Part 1
      7. Overview of the Lesson
      8. Starting the Film Series Page
      9. Building the Film Series Page
      10. Moving Forward
    2. CHAPTER 7: Chunking Information: Vertical Spacing and Proximity
      1. Basic Separation: The Paragraph
      2. Creating a System of Vertical Spacing
      3. Lesson 7: A Film Series, Part 2
      4. Overview of the Lesson
      5. Developing the Vertical Spacing System
      6. Moving Forward
    3. CHAPTER 8: Chunking Information with Headings: Hierarchy and Similarity
      1. Hierarchy
      2. Hierarchy and Similarity
      3. Lesson 8: A Film Series, Part 3
      4. Overview of the Lesson
      5. Creating a System of Headings
      6. Moving Forward
    4. CHAPTER 9: Attending to Typographic Details
      1. Adding a Second Font
      2. Using Rule Lines
      3. Numbers and Acronyms
      4. Attending to Punctuation
      5. Avoiding Widows and Orphans
      6. Lesson 9: A Film Series, Part 4
      7. Overview of the Lesson
      8. Taking Care of the Typographic Details
      9. Moving Forward
    5. INTERLUDE 2: Tabular Information
    6. CHAPTER 10: A Typographic Approach to Tabular Information
      1. Legibility
      2. Proximity
      3. Similarity
      4. How People Read
      5. Lesson 10: A Ferry Schedule for Martha's Vineyard
      6. Overview of the Lesson
      7. Incorporating Tables with <table><tr><td>
      8. Moving Forward
  12. PART 3: Making Type Work: Casual and Sustained Reading
    1. CHAPTER 11: How We Read, Part 2
      1. Case
      2. Style
      3. Weight
      4. Color
      5. Creating Multiple Voices
      6. Lesson 11: A Recipe, Part 1
      7. Overview of the Lesson
      8. Incorporating Color, Images, and Lists
      9. Moving Forward
    2. CHAPTER 12: Expressing Structure and Rhythm: The Grid
      1. The Modular Grid and Text
      2. Web Grids and Reading
      3. How to Establish a Grid
      4. Sketching Is More Important than Ever
      5. Lesson 12: A Recipe, Part 2
      6. Overview of the Lesson
      7. Creating Complex Columns by Nesting Divs
      8. Moving Forward
    3. CHAPTER 13: Helping Readers Move through the Site: Navigation
      1. Navigation Is Text and Needs to Be Readable
      2. If You Click on Me, I'll Take You Places
      3. You Are Here
      4. Oh, the Places You Can Go
      5. You've Been There Already
      6. Your Wish Is My Command
      7. Lesson 13: A Recipe, Part 3
      8. Overview of the Lesson
      9. Link Syntax and Pseudo-Class Selectors
      10. Moving Forward
    4. CHAPTER 14: Applying Systems across Pages
      1. Five Reasons to Apply Systems
      2. Plan for Diverse Pages from the Start
      3. Allow for Flexibility
      4. Lesson 14: A Recipe, Part 4
      5. Overview of the Lesson
      6. Apply the CSS to Multiple Pages
      7. Moving Forward
    5. INTERLUDE 3: Interlude: Building a Font Library
    6. CHAPTER 15: Building a Font Library
      1. Classification
      2. Five Families of Type
      3. Identifying Good Web Fonts
      4. Building Your Font Library
      5. Lesson 15: Critically Analyze Fonts
      6. Using a Web Font from Font Squirrel
      7. Using a Web Font from Google Web Fonts
      8. Using Web Fonts from Typekit
      9. Moving Forward
  13. PART 4: Designing with Type: Historical Styles
    1. CHAPTER 16: The Traditional Page
      1. Characteristics of Traditional Pages
      2. The Role of the Typographer
      3. Lesson 16: Design and Produce a Website from a Traditional Approach
      4. Overview of the Lesson
      5. The Design Process
      6. Elements of the Traditional Page
      7. Background Images Revisited
      8. Designing the Typographic Page
      9. Linking to Files in Other Lesson Folders
      10. Moving Forward
    2. CHAPTER 17: The Modernist Page
      1. Characteristics of Modernist Pages
      2. The Role of the Typographer
      3. Lesson 17: Design and Produce a Website from a Modernist Approach
      4. Overview of the Lesson
      5. The Design Process
      6. Elements of the Modernist Page
      7. Create a New Design by Changing the CSS
      8. Moving Forward
    3. CHAPTER 18: The Post-Modernist Page
      1. Characteristics of Post-Modernist Pages
      2. The Role of the Typographer
      3. Lesson 18: Design and Produce a Website from a Post-Modernist Approach
      4. Overview of the Lesson
      5. The Design Process
      6. Elements of the Post-Modernist Page
      7. Exploring “Bad” Syntax
      8. Moving Forward
  14. APPENDIX A: Moving Forward: Recommended Readings and Resources
    1. Choosing and Using Fonts
    2. Working with Text on the Page
    3. Developing a Grid
    4. The History of Typography
    5. Critical Writings
    6. Keeping Current with Web Typography
    7. Syntax: CSS and Color
    8. For the Love of Type
    9. Bibliography
  15. Index