Design Considerations: Typography
Typography Considerations
As you are well aware, when designing a web page, it is important to evaluate the accessibility of all of the elements of the page; to include the typeface. When used correctly, typeface can be used to create visually-appealing, readable web pages; however, incorrectly used typeface, or rather typeface used in a manner that goes against accessibility norms, can have negative effects on the visitors to a web page. Some common mistakes when designing with typeface include: the incorrect use of fancy fonts and the rigid use of font sizes.
Fancy Fonts
As was mentioned earlier, fonts can be used to create a mood in your web page design. However, if the font to be used in your design is not a standard, web browser compliant font, users will not be able to see your text. There are a couple of ways to ensure the use of fancy fonts in your web page design create the mood you desire while ensuring visitors to the site can see your text.
- Text-based Images - If you want to incorporate a fancy font into your web page logo or header section, you can use an image-editing application to create an image that incorporates the desired fancy font. A web browser does not differentiate between the fonts used in an image; therefore, your fancy font will display exactly as you intend. An added benefit to creating text-based images is that you can add effects to the text in your image to create an eye-catching logo or header.
- Create a Font Plan - If you want to incorporate a fancy font into the text elements of your web page (logo, headers, navigation, textual information, etc.) you need to:
- Decide on the desired font for each text element of the page.
- For each font to be used, determine if the font is listed in a web safe font-family. Visit the CSS Web Safe Fonts site for a list of web safe font families.
- If the font is listed in a web safe font-family, note the font-family as you will need it once you begin developing your web page.
- If the font is NOT listed in any of the web safe font-families, note the font-family that most closely matches the desired font or note the font-family that could acts as an acceptable font replacement if the desired font is not visible.
- Note that the last font listed in each font-family will be one of the main typefaces: serif, sans-serif, or monospace.
- Use Cascading Style Sheets to style the text appropriately by creating a style rule that applies both the desired font and its associated font-family to the text.
How text is displayed if the above steps are followed...If your style rule is written correctly the browser will first try to display your desired, fancy font. If the fancy font is not browser compatible, it will try to display one of the similar fonts in the font-family listed. Finally, if neither the fancy font nor the fonts from the font-family can be displayed, the web browser will display the text in the web browser compatible typeface (serif, sans-serif, or monospace) font listed.
Font Size
A common mistake made by new web page designers is to dictate the size of the font displayed in a web page. The reason this is a mistake is that when a designer dictates the size of font on their page, they are taking away a user's ability to adjust the font size to their preference. For instance, visitors with visual impairments may need to increase the size of the font on a page in order to read the text presented. From a design perspective, allowing for the adjustment of font size can be a little scary. How will a font size increase (or decrease) affect the design of your web page? There are a couple of methods you can employ, when designing your web page, to ensure the design of the page is not lost when the font size is adjusted.
- Rigid/Flexible Design - This design method uses both rigid font sizes and flexible font sizes. For instance, use a rigid font size on elements of your web page that need a standardized size (e.g. navigation text) and use a flexible font size on elements of your web page that do not need a standardized size. For instance, text listed in the main topic section of your web page should allow for flexible font sizing as the information presented in the main topic section of your web page is likely what brought the visitor to your page in the first place.
- Relative Size Design - This design method uses relative units of measure. That means the text displayed is a size that is relative to the user's browser settings. Not only will using relative font size help visitors with visual impairments, it will also ensure that your web page design looks good on all platforms.
Next 
|
