January 7th, 2010
5:45 pm
Posted under CSS
Permalink
Tags CSS, fonts, HTML
The following articles are helpful re correct choice of font, and how to size and use the various units correctly.
Issues such as providing sensible fallbacks in the font list to cater for different browsers are covered, together with the use of the various absolute and relative sizing units, and how fonts are inherited
http://www.w3schools.com/css/css_websafe_fonts.asp
http://www.w3schools.com/css/css_font.asp
Gernally accepted advice is as follows :-
- Define a default family in CSS for the body tag, consisting of a suitable fallback stack. Use a sans serif for screen use as it is more readable
- Define a default size using percent in the body tag, then use ems after that for relative sizing. This gets around some browser quirks with IE, and allows resizing by the user for all browser types.
- The default will be inherited throughout the document. However I have found issues when tweaking local CSS files during testing – sometimes old values ‘stick’ perhaps due to caching effects.
- There is an issue apparently with some older browsers that tables do not inherit a default body font. Therefore, the default should be specified for body, table as in the example below.
- Note that not all fonts in the stack (such as the basic fallback sans-serif) are necessarily scalable, so size changes may not appear to work if an inferior fallback font is picked up.
The following is an example stack in css :-
body, table {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: #000000;
}