Typographic web design

How to think like a typographer in HTML and CSS.

initial solution

Revisions

Student Example

Lesson 16: A Traditional Page

Patty Dysart, Fall 2010

Patty used a serif typeface and a double-border on her traditional typographic page.

All historic approaches

Traditional | Modern | Post-Modern

Recommendations

First of all, I enjoy the double-border. It adds a very traditional touch to the page. But the orange background color around the main container detracts from the border. I recommend making the background color white. You made a thoughtful decision to use the double-border. Let it stand out!

The links are currently split. Some are at the top of the page, others are at the bottom. It's best to keep the links near the top, so people don't have to scroll all the way to the bottom to go to another page. Move them all to the top. Also, I can see you used a sans serif to differentiate between the links and the text... but right now the sans serif feels out of place. Consider using color to set the links apart from the text. Or, rely on placement and the thin rule line you are already using. That might be enough!

You've centered the text. Centered headings, subheadings, and quotes can help make a page feel traditional, but keep the text itself set left aligned or justified. Centered text creates a ragged left edge which is harder to read. You could shorten the line length a bit too if you'd like. It will help with your rag, since many of the "paragraphs" are only one or two sentences long.

Finally, you've used bold small caps for your subheadings. This is a personal preference, but I always recommend just using caps, regular weight. The bold Georgia is a bit "bubbly" and the caps already stand out. There's no reason to use bold unless you need to for emphasis.

Overall, this is a great start! I enjoy how you've set the quote so it comes forward a bit in relation to the text. It adds an extra textural element to the page. I also enjoy that you decided to use a color other than black. It's a bit brighter blue than I would have used, but it's not wrong. Again, sometimes design decisions come down to personal preference.

All Student Examples