 |
 |
|
|
 |
Website Fonts: Specifying the Font SizeThere are two ways of specifying the font size:
Using the HTML Font TagThe old and now depreciated way of setting the font size was using the HTML Font Tag. This is no longer recommends but still used on many web pages. Example <font face="Verdana, Arial, Helvetica, sans-serif" size="2"> This is the declaration I use on all my pages that don't use style sheets. The values for size are 1 to 7. The font size is relative to the browser setting with the standard default setting being 12 points. Standard values are size=2 or 3 with Size=2 corresponding to 10pt and size=3 corresponding to 12pt. You don't need multiple font declarations on a page just one at the beginning and a closing tag at the very end. Unless of course you need to change fonts or font styles. For example:
Is the same as this:
Using CSSCascading Style sheets are the recommended way of controlling the web page presentation . If you are unfamiliar with CSS then you should take a look at starting CSS for more details before proceeding. CSS is very flexible when it comes to setting the font size but can also be very confusing. As mentioned previously fonts can be fixed/absolute or relative. Rather than go into the details of the various methods (see references for more details) I will instead concentrate on what I personally use. Firstly Fixed fonts are specified in points (pts) or Pixels (px) and are not considered good choices and so I don't use them anymore. Relative fonts are in percentages, em units and Keywords. Keywords are sometimes labelled as fixed fonts, but they aren't, as they are relative to the default page font size. They equate to the levels used in the old font size declaration. The values are: xx-small, x-small, small, medium, large, x-large, xx-large The only problem with these is that Internet Explorer 6 in Quirks Mode ( when you don't have a Doctype declaration ) and earlier Internet Explorer versions treat 'small' rather than 'medium' as the browser default size. If you are just starting your site or only have a few pages then make sure you have Doctype declaration and use keywords to control the font size a single statement in the body tag is normally all that is required. Here is the body tag of an example style sheet.
The above style sheet declaration will produce text like you are reading on this page. If you haven't used or don't want to use a Doctype declaration then use percentages. Again a single declaration like this is what you need.
The above style sheet declaration will produce text like you are reading on this page. The 80% means -set the font to 80% of the default browser font size. For some reason the default browser font size is actually too large for most people hence it is reduced. The declarations in the body tag are usually sufficient, but if you are using tables for web page layout, which is what I currently do. If you do this you will need an entry in the main table style sheet to control the font size within the table. This is the one I use (my main table id is autonumber3.)
You should notice that 100% is relative to the body tag and not the browser, so the effective size is 80% of the browser default size, or small depending on whether you have used Keywords or percentages to set the body font size. Lastly you should specify the Headline tags. Internet explorer display them ok if you don't but Firefox doesn't. In either case you should specify them anyway. Here is my declaration for the H1 tag.
All other H tags are similar here are the percentage values I use: and this is how the headlines appear:
So where is em used ? If you look at the declaration for the H1 tag above you can see that I use it to set the line spacing. I also use it for padding and margins (left, right, top and bottom). Mixing FontsIt is generally considered a bad idea to mix fonts on a web page. However it is sometimes done to add emphasis. I use a different font and font colour for the H1 and H2 tags as you can see on this page. Font ProblemsThe majority of web sites, including this one, use the Verdana font. The problem with choosing fonts for web pages is that the font needs to be installed on the user's computer, in order for the web browser to display it properly. In case the web site visitor does not have the font, that you have chosen for a page, installed on their computer, it is best to specify several fonts all in the same typeface to keep your design as near as possible to the way you designed it. If your chosen font or alternatives are not available on the user's computer the web browser will show its default font. This is usually 'Times New Roman' for Windows machines and 'Times' on Macintosh machines.
Useful resources and related articles: |
|||||||||
|
