reading assignment:
Typographic Web Design: : chapter 6
What makes a page readable?
Readability depends on the following factors: font size, line height, line length, alignment, color, vertical spacing, and letter spacing.
You can find guidelines for setting these factors everywhere and they differ from source to source. Remember to view the type and make adjustments according to what you think works.
font size : 12-16 px
If type is too small, it looses legibility. Too larger, and it undermines horizontal flow. The readers eye is unable to read more than one word at a time. Fonts with a small x-height should be 13-16px. (css: font-size: 12px;)
line height : 150% of text size
To tight, and the eye moves down too fast. Too loose and the eye does not connect to the next line. (css: line-height: 18px;)
line length : 75-85 characters per line
Too long, and the eye looses the start of the next line. Too short, and the text is broken up, interrupting the flow of reading. For this exercise, we will control line length and add a comfortable margin with the following placed in the css. Adjust the max-width to control the length of the line.
body {
max-width: 400px;
margin: 50px 0 0 50px;
}
alignment :
Left aligned and justified are the easiest to read. (css: text-align: left;)
color:
Like print, black on white is easier than white on black. For web, gray on white softens the contrast caused by the white emmitted from the screen. (css: color: #333;)
paragraph spacing : 66-76% of line spacing
Group elements: by adding/subtracting space above and below. Paragraph spacing should be 66-75% of line spacing. (css: margin-below: 12px;)
letter spacing : Adjust as needed. Each font is different. (css: letter-spacing: .8px;)
exercise :
- Using Dreamweaver, build a simple page with your poem/lyrics. Use “Georgia, serif” as your font.
- Format the paragraphs using all of the guidelines described earlier. Save the .css file as georgia.css.
- Save it in the unit1 folder as legibility_georgia.html.
- FTP it to your site.
- View it in a browser. How does it look? Make revisions until the text is very legible.
- Repeat using “Arial, Helvetica, sans-serif” as your font. Save as legibility_arial.html with the css file as arial.css.
- Repeat using “Comic Sans MS, cursive, sans-serif” as your font. Save as legibility_comic.html, with the css file as comic.css.
example: