Typographic web design
How to think like a typographer in HTML and CSS.
How to View Source Code
Viewing the source code is different in each browser. For example, in Chrome, go to View > Developer > View Source. In FireFox, go to View > Page Source. In Safari, go to View > View Source. Each path will show you the html source file.
To view the css source file, look in the head element of the html source file.
The link to the css file is active in both FireFox and Chrome, allowing you to go directly to the css source file with a single click. If you are using Safari, you’ll have to figure out the url for the css source file. To do this, analyze the path provided for the css file the web page uses.
If you are using a different browser, try googling “view html source files” or “view css source files” to learn how to view source files in your browser. Viewing source files is a powerful way to learn how others have used html and css to build their sites.
Author Examples for Lessons
Throughout the book I walk you through example solutions for the html/css lessons.
Below are links to the working web pages for each example solution. You are welcome to open up the files in your browser, view the source code, and copy and paste syntax as needed.
Chapter 1
Compare and Contrast fonts. No examples shown.
Chapter 2
Chapter 3
Chapter 4
A Short Bibliography, Part 2
(Adding a Font)
Chapter 5
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
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)
Chapter 16
A Traditional Typographic Page
Chapter 17
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 >>