Typographic web design

How to think like a typographer in HTML and CSS.

Lesson Files

Below are all the text and image files you need to complete the lessons in the book. Web font files are not provided.

Chapter 1

No files required
(create own content)

Chapter 2

No files required
(create own content)

Chapter 3

3_bibliography.doc

Chapter 4

No files required
(continue with files from Chapter 3)

Chapter 5

5_alignment.doc

Chapter 6

6_film_series.doc

Chapter 7

No files required
(continue with files from Chapter 6)

Chapter 8

No files required
(continue with files from Chapter 7)

Chapter 9

No files required
(continue with files from Chapter 8)

Chapter 10

10_ferry_schedule.doc

Chapter 11

lesson_11.zip
(multiple text and image files)

Chapter 12

No files required
(continue with files from Chapter 11)

Chapter 13

lesson_13.zip
(multiple text and image files)

Chapter 14

lesson_14.zip
(multiple text and image files)

Chapter 15

No files required
(continue with files from Chapter 14)

Chapter 16

16_redefining_reading.doc

Chapter 17

No files required
(continue with files from Chapter 16)

Chapter 18

No files required
(continue with files from Chapter 17)

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 >>