Typographic Web Design

How to think like a typographer in HTML and CSS.

An interactive e-book by LAURA FRANZ, University of Massachusetts Dartmouth

preview the book

Sample Chapters
The Table of Contents
About the Author

BONUS MATERIALS

Already own a copy of TWD? Log in to download lesson files, view student examples, and troubleshoot your syntax.

Web typography and Reading

Typographic Web Design: How to Think Like a Typographer in HTML and CSS is based on the premise that people read in three different ways: casual reading, scanning with purpose, and sustained reading. As web typographers, our most important job is to help our readers find, understand, and connect with the words, ideas, and information they seek.

Thus, legibility and readability are the foundation of the typographic theories and practice covered in Typographic Web Design: choosing fonts, creating rhythm and tension, organizing information, creating a system of hierarchy, working with tabular information, creating a grid, applying a typographic system across multiple pages, building a font library, and learning from historical approaches to typography.

Each chapter provides time-tested typography “rules” to follow (modified for the web), explains why they work, when to break them, and offers readers the opportunity to test the rules with hands-on exercises in HTML/CSS. If a reader does not know HTML/CSS, Typographic Web Design provides a walk-through for each lesson, showing readers how to plan and write syntax in TextWrangler or NotePad++ (free text editors for the mac and PC respectively).

Sample Chapter One
“Is the Font Easy to Read? Anatomy and Legibility”

Download “Is the Font Easy to Read? Anatomy and Legibility.” PDF best viewed in Adobe Acrobat due to interactive rollovers.

Sample Chapter Two
“how to choose a font: Aesthetics and Emotions”

Download “How to Choose a Font: Aesthetics and Emotions.” PDF best viewed in Adobe Acrobat due to interactive rollovers.

Table of Contents

Introduction : Typography & Reading

No One Reads Anymore? Redefining Reading

Design From the Text, Not From the Top Left Corner

How to Think Like a Typographer in HTML and CSS: What to expect from this book

Getting Started : How to Choose a Font

Is the Font Easy to Read? Anatomy and Legibility

Lesson One

Compare and Contrast Fonts

HTML/CSS

How HTML, CSS, web servers, browsers, and personal computers work together as a system

Does the Font Convey the Right Message?
Aesthetics and Emotions

Lesson Two

Word Connotations

HTML/CSS

Writing your first HTML and CSS files; naming conventions; organizing files and folders; introduction to common IDs and elements: div, h1, h2, h3, h4

Can the Font Do the Job?
Contrast, Styles, and Characters

Lesson Three

A Short Bibliography, Part 1

HTML/CSS

p, br, span, margins, padding, text-indent, and classes

How Do I Choose Two Fonts to Work Together?

Lesson Four

A Short Bibliography, Part 2

HTML/CSS

Linking fonts with @font-face

An Interlude : Rhythm and Tension

Rhythm and Tension in the Typographic Layout

Lesson Five

A is For Alignment

HTML/CSS

Working with more than one div, floats, the universal selector, and background images

Making Type Work : Scanning with Purpose

How We Read, Part 1: Size, Line Height, Line Length, Alignment, Color (Black and White)

Lesson Six

A Film Series, Part 1 
Establish Font, Font Size, Line Height and Line Length

HTML/CSS

Using CSS to test text blocks, clearfloats

Chunking information for readers to scan: 
Vertical Spacing and Proximity

Lesson Seven

A Film Series, Part 2 
Compose a Vertical Space System

HTML/CSS

p.class (adding a class to an element), collapsing margins

Chunking Information with Headings:
Hierarchy and Similarity

Lesson Eight

A Film Series, Part 3 
Create a System of Headings

HTML/CSS

Letter-spacing, font-style, text-transform

Details: A Second Font, Rule Lines, Numbers,
Punctuation, and Widows

Lesson Nine

A Film Series, Part 4
Attend to the Details

HTML/CSS

Borders, punctuation table

An Interlude : Tabular Information

A Typographic Approach to Tabular Information

Lesson Ten

Ferry Schedule for Martha’s Vineyard

HTML/CSS

Incorporating tables: table, tr, td

Making Type Work : Casual & Sustained Reading

How We Read, Part 2: Case, Style, Weight, Color,
Responding to Multiple Voices

Lesson Eleven

A Recipe, Part 1
Identify Elements and Voices

HTML/CSS

Incorporating color and images

The Grid

Lesson Twelve

A Recipe, Part 2
Build a Grid

HTML/CSS

Using more than one div, revisited

Navigation

Lesson Thirteen

A Recipe, Part 3
Incorporate the Navigation

HTML/CSS

Link syntax, pseudo-class selectors

Applying Systems Across Pages

Lesson Fourteen

A Recipe, Part 4
Apply Systems to Multiple Pages

HTML/CSS

Multiple CSS files

An Interlude : Building a Font Library

Building a Font Library: What You Need

Lesson Fifteen

Critically Analyze Fonts
(form, quality, history, use for text vs display)

HTML/CSS

@font-face revisited, building font-stacks

Designing With Type : Historical Styles

The Traditional Page

Lesson Sixteeen

Design and Produce a Website in a Traditional Format

HTML/CSS

Background Images Revisited

The Modernist Page

Lesson Seventeen

Design and Produce a Website in a Modernist Format

HTML/CSS

Changing the CSS Changes Everything

The Post-Modernist Page

Lesson Eighteen

Design and Produce a Website in a Post-Modernist Format

HTML/CSS

Exploring “Bad” Syntax

Moving Forward : Resources

Recommended Readings and Resources

Bibliography

About the Author

Laura Franz is Associate Professor of Design and Chair of the Design Department at the University of Massachusetts Dartmouth.

She teaches a wide range of type classes, including Type as Information, Type in Context: Print and Web, and Undergraduate Research Projects in Typeface Design. She is also Co-coordinator of The Graduate Certificate In Web and Interaction Design at UMass Dartmouth, in which she teaches a Web Typography class.

Professionally, she designs for both print and the web. Ongoing creative research projects include: historictype.com, goodwebfonts.com, The New Bedford Typeface project, and the e-book “Typographic Web Design: How to Think Like a Typographer in HTML and CSS.”

She is particularly interested in how we teach future typographers the art and responsibilities of our craft.

Follow Type351 on Twitter

available for purchase

The high-resolution, interactive PDF (53.51 Mb) is available for download immediately after purchase.

20.00 USD, via PayPal

Book Details

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

By Laura Franz
178 Pages

ISBN-10: 0-6153899-6-1
ISBN-13: 978-0-6153899-6-7

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. Interactive (roll-over) examples contrast successful and less successful typographic solutions.

Is written for visual thinkers (who are often visual and kinesthetic learners). The e-book includes HTML/CSS exercises — supported by a site with solutions, critiques, and revisions for each lesson — so web designers can practice thinking like typographers, while traditional typographers can practice writing HTML and CSS.

TWD is for

Web designers who want to learn 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.