Typographic web design
How to think like a typographer in HTML and CSS.
initial solution
Revisions
Student Example
Lesson 17: A Modern Page
Samantha Belzner, Spring 2011
Samantha used vertical lines to emphasize the text alignment. A strong horizontal title helps create an "architectural" form.
All historic approaches
Traditional | Modern | Post-Modern
Recommendations
First of all, I enjoy how you made the underlying vertical grid lines visible. It helps us see and appreciate the shapes of the white spaces!
But the space at the top of the page is too loose. By tightening the space, you could further empahsize the vertical lines. Let them hang down off the browser. This will also further define the white spaces in the layout.
Speaking of space, the margin at the bottom of the page is too tight. The page stops too abruptly. Give us a little breathing room.
Regarding the vertical lines: the line on your links extends further than the lines on the text. I recommend shortening it so it matches. This increases the tension... the links will practically hang at the bottom of the line.
Finally, I understand why you bolded certain phrases in the text... you want to create emphasis! But, when you emphasize everything, nothing is emphasized. Pull back. Pick the most important things to emphasize to help readers scan the text for important information. Right now the text is a sea of bold words.
Overall, this is a great start! I enjoy how you've taken a risk and split the text with the title. The vertical lines draw our eye down. We can understand the relationship between the top and bottom content, so it works.