The pages below demonstrate various standard features of browsers on computer systems. Some will be the same from browser to browser and from system to system; some will change with such changes. For instance the typefaces available under Windows are generally not the same as those on the Mac.
These pages were developed under Windows using MSIE. Where relevant the items are shown in monotonically increasing size; any deviation demonstrates a difference from that benchmark. Where I have noticed differences between MSIE, Gecko (Netscape, Mozilla, FireFox), and Opera, I have inserted additional information that may seem strange or unnecessary in your browser/platform/charset.
Note that graphics industry people think in terms of points, but points are alien to computer monitors, which measure size in pixels. Thus any point specification will be rounded to the nearest pixel. There are pixels between points because 4 pixels correspond to 3 points. The default size is 16 pixels or 12 points.
This has consequences when printing Web pages. For instance, the six sizes from 10 px. to 8 points are nearly the same on screen in all browsers but differ in printing. Gecko makes the greatest distinction by not only acknowledging the difference between pixels and points masked on screen, but also adjusting some of the <font> sizes. MSIE distinguishes pixels and points, but Opera doesn't. However Opera's type is smaller than the other browsers when printed. Thus you probably want to include a print-oriented CSS file as discussed on the support page.
Headings — Standard heading sizes correlated with <font> size and points.
Type size — From 9 to 48 pixels and from 7 to 36 points. This is not the preferred way of sizing type, but is provided for reference purposes only. Use one of the scalable techniques below.
Scalable sizes — Size expressed in pixels and points are not user-scalable in some browsers (MSIE), limiting use for people with poor vision. It is preferable to use scalable type sizes. This gives one method that may seem easy but has its limitations.
Alternate scalable — My preferred method, giving intuitive pixel-by-pixel size control while keeping it resizable. This may be harder to learn, but has no known problematic side effects. Most of these Standards pages use this method for text size control.
The selection of typefaces for any given environment can be a problem. For an intranet where all the computers are the same brand,
you can select from their typefaces and be confident everyone will be able to see what you want them to. But for the Internet you
should limit choices to those carried by both the major platforms as listed first
below. If you don't and since not everyone uses Windows and Macintosh computers, it's also necessary
to include a generic typeface in every font-family specification, as in
body { font-family: Verdana, sans-serif; }.
Universal Typefaces — The five standard faces available via CSS and most typefaces available on both Macintosh and Windows platforms.
Macintosh Typefaces — The five standard faces and common Macintosh typefaces.
Windows Typefaces — The five standard faces and a selection of Windows typefaces.
Symbols — The HTML numbers for some special symbols.
Character Entities — The complete set as defined in the (X)HTML DTD.
A CSS Quick Reference — The where, the how, and the rule format for writing CSS.
All referenced pages validate as XHTML 1.0 strict except for Headings, which is XHTML 1.0 transitional because of the comparison with <font> sizes.