Typographic web design
How to think like a typographer in HTML and CSS.
Now available!
Purchase online at Barnes and Noble, amazon.com, or Symposium Books.
If you’re in the Providence area, the book is also carried by Symposium Books at their Downcity location.
updated print version
The updated version from Wiley & Sons includes recent changes in the @font-face property, shows how to incorporate google webfonts, and has a simpler approach to working with multiple divs in a complex page structure.
Book Details
Typographic Web Design: How To Think Like a Typographer in HTML and CSS
By Laura Franz
Paperback: 336 pages
Publisher: Wiley
Language: English
ISBN-10: 1119976871
ISBN-13: 978-1119976875
Typographic Web Design...
Applies decades of typographic theory and practice (how to choose a font) directly to web design (how to use the @font-face rule 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.
TWD is for
Web designers who want to learn more about how to use typography well;
Traditional typographers who want to learn how to write HTML and CSS and continue their craft in a new medium;
Teachers/students of web design and typography classes.
The e-book
Already own a copy of TWD? The e-book is no longer available for purchase, but if you need to download another copy of the e-book, please log in to do so.
Lesson files, syntax updates, student examples, and FAQs are now fully available on this website. No log in required.
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.
Table of Contents
Introduction
- People Still Read
- Redefining Reading
- Design from the Text, Not the Top Left Corner
- What to Expect from this Book
- How this Book is Organized
- About the Syntax in this Book
- About the Lesson Files
Anatomy and Legibility: Is the Font Easy to Read?
- What Makes a Font Legible?
- Comparing Georgia and Helvetica
- Comparing More Fonts
- Lesson 1: Compare and Contrast Fonts
- Comparing Fonts on Typetester
- Writing about What You See
- Setting Font Sizes on Typetester
- Understanding How HTML, CSS, Web Servers, Browsers, and Personal Computers Work Together
- HTML
- CSS
- Browsers
- Personal Computers and Fonts
- Moving Forward
Aesthetics and Emotions: Does the Font
Convey
the Right Message?
- Choosing a Font with Appropriate Aesthetic or Emotional Associations
- Choosing Serif Fonts for a Traditional Feeling and Sans Serif Fonts for a Modern Feeling
- Working with Formatting
- Lesson 2: Word Connotations
- Communicating Different Meanings of a Word
- Writing about What You See
- Writing Your First HTML and CSS Files
- Naming Conventions
- Organizing Files
- Writing the HTML File
- The DOCTYPE and DTD
- Tags
- Head, Title, and Body Elements
- Writing the CSS File
- Describing an Element
- Creating a div
- Moving Forward
Contrast, Styles, and Characters:
Can the Font
Do the Job?
- What Should I Look for in a Bold Style?
- What Should I Look for in an Italic Style?
- What Else Should I Consider in a Font?
- What If I Can’t Get Everything I Want from a Font?
- Lesson 3: A Short Bibliography, Part 1
- Create a Bibliography Using One Font Family
- Writing about What You See
- Using HTML and CSS to Design the Bibliography
- Start the HTML File
- Start Writing the CSS File
- Improve the Typography
- Italicize the Titles by Creating a Class
- Moving Forward
Choosing Two Fonts to Work Together
- Display Type: Using a Second Font
- Identifying What You Need from a Second Font
- Considering Concord and Contrast
- Text Type: Using a Second Font
- Identifying What You Need from a Second Text Font
- Considering Balance and Continuity
- About the Fonts Used in This Chapter
- Lesson 4: A Short Bibliography, Part 2
- Use a Script Font for the Title
- Use a Font of Your Choice for the Title
- Write about What You See
- Use @font-face and Font Stacks
- Understanding @font-face
- Legal Issue: Linking Is Not Embedding
- Technical Issue: Different Browsers Use Different File Types
- Choosing Your Font
- Building a Font Stack
- Moving Forward
Rhythm and Tension in the Typographic Layout
- Repetition and Counterpoints
- The Focal Point
- Strong Vertical Lines
- Spatial Tension
- Lesson 5: A is for Alignment
- Overview of the Lesson
- Creating a Dynamic Composition, Part 1
- Start the HTML File
- Start the CSS File
- Make and Describe the Divs (Containers)
- Add the Content and Define the Elements
- Improve the Typography
- Creating a Dynamic Composition, Part 2
- Layer an A in the Background with an Image
- Make and Apply a Class to Create Counterpoints in the Text
- Moving Forward
How We Read, Part 1
- Size
- Line Height
- Line Length
- Alignment
- Color (Black/White)
- Lesson 6: A Film Series, Part 1
- Overview of the Lesson
- Starting the Film Series Page
- Start the HTML File
- Start the CSS file
- Building the Film Series Page
- Moving Forward
Chunking Information: Vertical Spacing and Proximity
- Basic Separation: The Paragraph
- Creating a System of Vertical Spacing
- Lesson 7: A Film Series, Part 2
- Overview of the Lesson
- Developing the Vertical Spacing System
- Determine and Apply Your Vertical Spacing Scale
- Understanding Collapsing Margins
- Finesse the Vertical Spacing
- Moving Forward
Chunking Information with Headings:
Hierarchy and Similarity
- Hierarchy
- Hierarchy and Similarity
- Lesson 8: A Film Series, Part 3
- Overview of the Lesson
- Creating a System of Headings
- Determine and Apply Your System of Hierarchy
- Go Back and Make Changes If Needed
- Moving Forward
Attending to Typographic Details
- Adding a Second Font
- Using Rule Lines
- Numbers and Acronyms
- Attending to Punctuation
- Quotation Marks
- En Dashes and Em Dashes
- Avoiding Widows and Orphans
- Lesson 9: A Film Series, Part 4
- Overview of the Lesson
- Taking Care of the Typographic Details
- Download Your Font from FontSquirrel.com
- Describe @font-face in Your CSS Document
- Identify What Needs to Change
- Double-check Your Work
- Moving Forward
A Typographic Approach to Tabular Information
- Legibility
- Proximity
- Similarity
- How People Read
- Rule Lines
- Numbers
- Lesson 10: A Ferry Schedule for Martha's Vineyard
- Overview of the Lesson
- Incorporating Tables with table, tr, td
- Start the HTML File
- Start the CSS file
- Build the Ferry Schedule Page
- Build the Table
- Identify the Problems
- Identify New Problems
- Rework the Composition around the Table
- Moving Forward
How We Read, Part 2
- Case
- Style
- Weight
- Color
- Creating Multiple Voices
- Common Elements in a Text
- Multiple Voices Help Define Elements
- Voice Is Also about the Feeling of the Site
- Lesson 11: A Recipe, Part 1
- Overview of the Lesson
- Incorporating Color, Images, and Lists
- Start the HTML File
- Start the CSS File
- Start Putting in the Content
- Break Up the Text So You Can See the Elements
- Chunk the Information
- Create and Define the Ingredient List
- Make the Ingredients Div Narrower
- Create and Define the Main Navigation List
- Set Each Text Element in Its Own Voice
- Moving Forward
Expressing Structure and Rhythm: The Grid
- The Modular Grid and Text
- Web Grids and Reading
- How to Establish a Grid
- Start with What Your Text Needs
- Physically Move Things Around
- Use Image Software to Move Things Around
- Be Willing to Make Modifications
- Hand Color Your Best Solutions
- Sketching Is More Important than Ever
- Lesson 12: A Recipe, Part 2
- Overview of the Lesson
- Discover the Grid and Document the Process
- Build the Grid
- Creating Complex Columns by Nesting Divs
- Pick the Layout You Want to Build
- Figure Out the Columns and Rows
- Get Organized: Notations in CSS
- Notations in HTML
- Build the Underlying Page Structure
- How I Built My Underlying Page Structure
- Place Content in the Structural Divs
- Refine Placement of Content
- How I Refined My Content
- Fixing the “Double-Margin” Bug
- Finishing Up
- Moving Forward
Helping Readers Move through the Site: Navigation
- Navigation Is Text and Needs to Be Readable
- If You Click on Me, I’ll Take You Places
- You Are Here
- Oh, the Places You Can Go
- You’ve Been There Already
- Your Wish Is My Command
- Lesson 13: A Recipe, Part 3
- Overview of the Lesson
- Link Syntax and Pseudo-Class Selectors
- Getting Started: Download Some Pages to Link To
- Adding the Link Syntax: Main Navigation
- Add Interactivity to the Main Navigation Links
- Create and Describe a “You Are Here” Class
- Adding the Link Syntax: Section Links
- Add Interactivity to the Section Links
- Create and Describe a “You Are Here” Class
- Adding the Link Syntax: Ads
- Moving Forward
Applying Systems Across Pages
- Five Reasons to Apply Systems
- Systems Are Easier on Your Readers
- You’ve Already Done the Hard Work Why Start Over?
- Diverse Pages Still Feel Like Parts of a Whole
- Multiple People Can Work on the Site and Retain Consistency
- Data-Driven Sites Create Pages on the Fly
- Plan for Diverse Pages from the Start
- Allow for Flexibility
- Lesson 14: A Recipe, Part 4
- Overview of the Lesson
- Apply the CSS to Multiple Pages
- Create a New Web Page
- Identify and Fix Problems
- How I Fixed the Problems in My System
- Build the Rest of the Recipe Pages
- Moving Forward
Building a Font Library
- Classification
- Five Families of Type
- Expanding the Five Families Classification System
- Old Style
- Transitional
- Modern/Didone
- Slab Serif
- Sans Serif
- Display Fonts
- Identifying Good Web Fonts
- Good Text Fonts for the Web
- Good Display Fonts for the Web
- Building Your Font Library
- Free or Open-License Fonts
- Purchasing Web Licenses
- Subscription-Based Services
- Lesson 15: Critically Analyze Fonts
- Overview of the Lesson
- What to Look for in the New Font
- Using a Web Font from Font Squirrel
- Identify What Needs to Change
- How I Fixed the Problems in My System
- Using a Web Font from Google Web Fonts
- Identify What Needs to Change
- How I Fixed the Problems in My System
- Using Web Fonts from Typekit
- Identify What Needs to Change
- How I Fixed the Problems in My System
- Moving Forward
The Traditional Page
- Characteristics of Traditional Pages
- Traditional Pages Use a Text Frame
- Traditional Pages Use Serif Fonts
- Traditional Pages Strive for an Even Tone
- Traditional Pages Convey an Elegant Feeling
- The Role of the Typographer
- Lesson 16: The Traditional Page
- Overview of the Lesson
- The Design Process
- Elements of the Traditional Page
- Background Images Revisited
- Start the HTML File
- Start the CSS file
- Add a Background Image
- Insert and Prepare the Text
- Designing the Typographic Page
- Linking to Files in Other Lesson Folders
- Moving Forward
The Modernist Page
- Characteristics of Modernist Pages
- Modernist Pages Use Space in an Architectural Manner
- Modernist Pages Use Sans Serif Fonts
- Modernist Pages Use Contrast to Create Emphasis
- Modernist Pages Convey an Asymmetric, Lively Feeling
- The Role of the Typographer
- Lesson 17: The Modernist Page
- Overview of the Lesson
- The Design Process
- Elements of the Modernist Page
- Create a New Design by Changing the CSS
- Design the Typographic Page
- Changing the CSS Changes Everything
- Moving Forward
The Post-Modernist Page
- Characteristics of Post-Modernist Pages
- Post-Modernist Pages Use Text Anywhere on the Page
- Post-Modernist Pages Use Any Font that Works
- Post-Modernist Pages Use Contrast to Create Emphasis
- Post-Modernist Pages Use Form to Convey Meaning
- Post-Modernist Pages Convey a Textural Feeling
- The Role of the Typographer
- Lesson 18: The Post-Modernist Page
- Overview of the Lesson
- The Design Process
- Elements of the Post-Modernist Page
- Exploring “Bad” Syntax
- Design the Typographic Page
- Moving Forward
Recommended Readings and Resources
- Choosing and Using Fonts
- Working with Text on the Page
- Developing a Grid
- The History of Typography
- Critical Writings
- Keeping Current with Web Typography
- Syntax: CSS and Color
- For the Love of Type
- Bibliography
Index
Recommended Resources
Writing Syntax
Look up CSS syntax
HTML Dog >>
Special characters and punctuation codes
Character Entity Reference >>
View and test css syntax
FireFox Web Developer >>
Navigation list syntax
Listamatic >>
Download a free text editor
TextWrangler (mac) >>
Notepad++ (pc) >>
Web Fonts
Pick a good web font for text
Good Web Fonts >>
Download a free web font
Font Squirrel >>
Link to free web fonts
Google Web Fonts >>
Link to commercial fonts
typekit.com >>
fontdeck.com >>
Purchase web font licenses
fontspring.com >>
Color
Find a color code
Hues Hub >>
Analyze the colors in an image
What’s It’s Color >>
Build a color scheme
Color
Scheme Designer >>
Typography
Keep up-to-date on web typography
Nice Web Type >>
A List Apart >>
Learn more about typography
typophile.com >>
ilovetypography.com >>
