Type styles |
||
| Your website should use a type style that reflects the nature of your business. | ||
| However at
the moment there are restrictions on the styles you should use. No
matter how you format a web document it is rendered by the browser on a
remote PC that will not have all the same fonts as your computer.
Web documents that are formatted in fancy fonts can easily be
unreadable. The standard offers a range of 'generic' type
styles that will be rendered reasonably accurately on most platforms: serif, sans-serif,
mono-space, cursive, and fantasy. Here are some examples. Note that although the styles are different the sizes are all set the same. The width and the readability vary quite a lot! |
||
| |
||
| Generic | Typical | Atypical |
| Serif | Here is some text in Times Roman | Here is some text in Gloucester MT Extra Condensed |
| Sans-serif | Here is some text in Arial | Here is Gill Sans Ultra Bold |
| Mono-space | Here is some text in Courier | Here is text in OCR A extended |
| Cursive | Here is some text in Monotype Corsiva | Here is some Old English Text MT |
| Fantasy | Here is some text in Westminster | Here is some text in Curlz MT |
| This is what the section above
looks like on my PC
|
||
|
Type size is also an issue - a compromise between readability and page content. |
||
| There are many ways of specifying
text size. Different browsers respond in different ways to these, not all recognizing
all the alternatives. Don't forget the browser can be set to
use larger or smaller sizes at the user's choice! Starting from the basic (unmodified) font sizes your browser uses, there are HTML font sizes <font size="1"> up to <font size = "7"> CSS adds xx-small, x-small, small, medium, large, x-large, xx-large, as well as points, picas, pixels, exs, ems, inches and cm/mm. |
||
| Description | Advantage | Problem |
| Point size | Predictable when printed out | rendered differently between platforms - e.g. larger on PC than Mac. |
| Pixel size | predictable on-screen size supports layout with graphics | prints tiny on laser printers |
| Percentage | lets user keep control of print sizes - helpful for visually impaired | very unpredictable layouts |
| CSS | lets user keep control of print sizes - helpful for visually impaired | limited range & very unpredictable layouts |
| em | precise and flexible | browsers don't support it properly |
|
|
||