 |
|
 |
Website FontsYou are all familiar with newspaper and book print, and have probably encountered books in large print, and legal forms in the proverbial small print. You will have a preference as to what looks good and what doesn't, but more importantly you will have come across print that is difficult to read because of its style or size or even the background colour of the paper. What we are going to consider now is choosing the style, size and colour of our website text. The main objective being to make it easy to read by our website visitors. There are three main things to consider when deciding on your website fonts:- Font Typeface, Font Family and Font Size. TypefaceFonts fall into one of two typeface categories either serif or sans-serif. The serif typefaces (the font has curly bits at the top and bottom ends on the letters) are easier to read on paper, and are used in newspapers and books, but the sans-serif (which does not have the curly bits) typefaces are easier to read on a computer screen. - I always use Sans-Serif. Font FamilyThere are many typefaces that you can use but you need to remember that the computer displaying your web page must have the fonts installed in order to display the page correctly. Therefore it is normal to specify several fonts in a preference order. This way if your first choice is not installed it will use the second choice. If none of your choices are installed then the default browser font is used (see below). In view of this it is usual to restrict the main content to the following, so called, - web safe fonts: - I always use Verdana as the first choice -see specifying fonts later Font Sizes and Fixed Versus Relative FontsFont sizes can be either fixed (absolute) or relative. Using fixed fonts means that your page displays exactly as you designed it. However the problem with fixed fonts is that the visitor has no control over the font size. Therefore if the visitor finds the font too small and can't read it then he can't change it. With relative fonts the font size is based on the default browser font size setting. The visitor can change the size to suit his preference. However if he makes the font too large it may cause text to wrap where you didn't expect it, and the page appearance can change considerably. Now this could merely be a cosmetic change but it could also seriously affect the page readability especially the page navigation. Most designers use left navigation contained within a table column. I use a column width of approximately 160px on most of my sites. When I design the navigation I like the links to be on a single line, and they are when using the font that I normally use (10pt Verdana sans serif). However; if I allow the visitor to increase the font size then 10pt becomes 12pt or even 14 pt and it is easy for the navigation to appear over 2 lines and not one. Here are two screen shots of this page the left hand shot shows the page viewed with Internet explorer text size set at default, and the right hand one with the Internet explorer text size increased two levels. Notice how the navigation in affected.
Although there is a big debate among web masters on one or the other methods it seems generally excepted that, if it is important that certain page elements must appear as you designed them (website Navigation) then you can use fixed fonts, if it doesn't matter then use relative fonts. If you use relative sizes for all elements (recommended) then test that the page appears ok at different sizes on both Major browsers (Internet Explorer and Mozilla FireFox). I consider that if a relative size increase/decrease of one does not break the navigation then it is ok. As you can see from my screenshots increasing the font size two levels does break the navigation but it is unlikely that many visitors will do this. The font style also has an impact on the apparent font size. Here are the web safe fonts but smaller size: Arial- This text is in 10 pt Arial font. From the above example you can see that the Verdana font appears larger than the others even though it is set to the same font size. It should also be noted that times roman has become difficult to read at this size. Default Browser Font SettingsIf the web page designer doesn't specify a font then the browser uses its default font and font size. For Internet explorer click Tools>Internet options and on the General tab click the Fonts tab. The font window opens and you can change the font face. To change the size click view>text size and increase or decrease it. Internet explorer will remember your settings. The default browser settings are only used for the web page if the designer doesn't specify the fonts in the web page either using the Font Tag or CSS (see later). The font size setting will impact the web page if the web page designer uses relative sizes for Fonts. If Fixed Fonts are used they will not affect the page appearance Specifying the Font SizeThere are two ways of specifying the font size:
|
||
|
|
