Typographic Web Design
How to think like a typographer in HTML and CSS.
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.
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.