Typographic web design
How to think like a typographer in HTML and CSS.
Student Examples
Click on an image below to visit a page with the student’s original design, my suggestions for improvement, and the updated design.
Chapter 1
Compare and Contrast fonts. No examples shown.
Chapter 2
Word Connotations
Chapter 3
A Short Bibliography, Part 1
Chapter 4
A Short Bibliography, Part 2
(Adding a Font)
Chapter 5
A is For Alignment
Chapter 6
A Film Series, Part 1
(Setting Font Size, Line Height, Line Length)
Chapter 7
A Film Series, Part 2
(Vertical Spacing)
Chapter 8
A Film Series, Part 3
(Creating Hierarchy)
Chapter 9
A Film Series, Part 4
(Details: A Second Font, Punctuation, Rule-lines)
Chapter 10
A Ferry Schedule
Chapter 11
A Recipe, Part 1
(Creating Multiple “Voices”)
Chapter 12
A Recipe, Part 2
(Finding and Building the Grid)
Chapter 13
A Recipe, Part 3
(Creating a System of Navigation)
Chapter 14
A Recipe, Part 4
(Applying the Design Across Multiple Pages)
Chapter 15
Analyzing Web Fonts
(Choosing and Applying Fonts for Recipe Pages)
No examples shown at this time.
Chapter 16
A Traditional Typographic Page
Chapter 17
A Modernist Typographic Page
Chapter 18
A Post-Modernist Typographic Page
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 >>