6.1.1. Reading: Typography Tips
Typography Defined
Typography is the balance and interplay of letterforms on the page, a verbal and visual equation that helps the reader understand the form and absorb the substance of the page content (Lynch and Horton, 2001).Good typography depends on the visual contrast between one font and another and between text blocks, headlines, and the surrounding white space (Lynch and Horton, 2001). Your typographic treatment determines how easy your final product is to use, whether it be in print or online. Not only should your typographic treatment be easy to read, it should clearly indicate what should be read first, second, and third, and compliment the overall visual design of your site.
The original designers of the Web were more interested in sharing physics documents with each other than worrying about the visual design of there output. HTML tags were limited to paragraphs, line breaks, and heading tags, and a few others. In the late 1990's, graphic designers using HTML traditionally ignored those HTML tags they felt rendered unattractive typography, like the <H1> and <H2> heading tags, which are too large and heavy for most layouts, and <H4>, <H5>, and <H6> heading tags, which are too small for most uses. Unfortunately, these heading tags have always been very important to the non-visual functionalities of the Web as well, such as automated search engines and specialized accessibility software for people with disabilities. Now you can get the best of both worlds by taking advantage of structural and functional properties these tags have while retaining much more visual control of their output on your Web pages by using them in conjunction with stylesheets (Lynch and Horton, 2001).
| References | |
| Castro, E. 2003, HTML For the World Wide Web 5th Edition with XHTML and CSS , Peachpit Press, Berkeley, CA. Graham, L. 1999, The Principles of Interactive Design , Delmar Publishers, Albany. Landa, R. 1996, Graphic Design Solutions , Delmar Publishers, Albany. Lynch, PJ and Horton, S 2001, Web Style Guide , Yale University Press, New Haven, CT. Shea, D and Holzschlag , ME 2005, The Zen of CSS Design , Peachpit Press, Berkeley, CA . The Chicago Manual of Style 1993, The University of Chicago Press, Chicago , IL. |
6.1.2. Reading: Typography Considerations
Typography Considerations
- Fonts that are too light or too heavy may be difficult to read, especially in smaller sizes.
Examples: - Typefaces with too much thick/thin contrast may be difficult to read if they are set too small – the thin strokes may seem to disappear.
Examples: - Condensed or expanded letters (in letterspacing) are more difficult to read because the forms of the letters change.
Example: - Larger sizes require tighter spaces than smaller sizes. If the type is a display size, you will have to space it differently than a text size.
Example: - In both display and text sizes, type set in all capitals is generally more difficult to read. A combination of capitals and lowercase letters provides maximum readability.
Example: - In general, type that is flush left, ragged right is easiest to read. That does not mean you should not use any other type alignment. Base your decision on several factors: the type size, the leading, the meaning, the audience, and the amount of type. Reading a short message in flush right, ragged left is not too difficult.
Examples: - Where you break the lines of type depends on two basic factors: aesthetics (appearance) and editorial meaning. Line breaks should be aesthetically pleasing. Break lines in natural places to enhance meaning. Indentations and leading between paragraphs also enhance legibility. Paragraphs that are too long are difficult to read. The use of initial capitals also can enhance readability.
Examples: - Italics are best used for emphasis, rather than for large blocks of text, which may be difficult to read.
Example:
(Landa, 1996)
Typography Suggestions
- Carefully consider your audience and what limitations they may have when reading text on your Web site. Make sure your text is easy to read.
- Design type in a visual hierarchy (that makes the order of material they choose to read through your page self evident). People who tend to read the biggest elements first; they tend to read headlines or titles first, subtitles or pull (large) quotes second, then captions, and finally the text type. When you look at other Web pages, observe the order in which you are attracted to the information and how you read through the various text displayed.
- Type arrangement or alignment should enhance readability, not hinder it.
- Letterspacing, word spacing, and line spacing all factor into readability, communication and expression.
- Consider letterforms as pure forms; think about them as positive/negative space relationships.
- Color should enhance the message and expression and not hinder readability.
- Word spacing and line spacing establish a rhythm, a pace at which the viewer reads the message.
- The typography should be appropriate for the message and audience
- Typography should enhance the a message, not detract from it.
- When mixing typefaces, think about appropriateness to the message, contrast, weights, visual hierarchy, and scale.
- Become very familiar with, and learn to use, at least five classic typefaces, for example, Bodini, Caslon, Futura, Univers, and Times Roman
- Avoid novelty or decorative typefaces.
(Landa, 1996)
Common Web Fonts from Microsoft
6.1.5. Reading: Common Web Fonts By Platform
Common Web Fonts By Platform
6.2. Practice
6.2.1 Reading & Exercises: Getting Intimate with Elements: The Box Model
Getting Intimate with Elements: The Box Model
| Tutorial Exercise | |
| DONE | Read and do the exercises and quizzes in Chapter 10 of Freeman & Freeman's Head First HTML with CSS & XHTML (pp. 385-428). Learn from your mistakes by checking to see if your solutions are correct. |
6.2.2 Reading & Exercises: Advanced Web Construction: Divs and Spans
Advanced Web Construction: Divs and Spans
 | Tutorial Exercise |
Read and do the exercises and quizzes in Chapter 11 of Freeman & Freeman's Head First HTML with CSS & XHTML (pp. 429-486). Learn from your mistakes by checking to see if your solutions are correct. |
6.2.3. Photoshop Tutorials
6.2.3.1. Tutorial: Photoshop Copy Paste Cut Overview
6.2.3.2. Tutorial: Photoshop Canvas Overview
6.2.3.3. Tutorial: Photoshop Pencil Paintbrush Airbrush Overview
6.2.3.4. Tutorial: Photoshop Smudge Tool Overview
6.2.3.5. Tutorial: Photoshop Brushes Overview
6.2.3.6. Tutorial: Photoshop Colors Overview
6.2.3.7. Tutorial: Photoshop Eyedropper Overview
6.2.3.8. Tutorial: Photoshop Rulers Guides Grids Overview
No comments:
Post a Comment