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, and the external entities files, which are old (ancient). All pages use UTF-8.
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 initially developed under Windows 95 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 (RIP), Mozilla, FireFox), Chrome, Safari, and Opera, I have inserted additional information that may seem strange or unnecessary with 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 and included with these pages.
Caveat: What you see is not what others get—so design and implement flexibly and defensively, and then test extensively. Sizes under 13px show considerable variability across browsers.
Headings – Standard heading sizes correlated with <font> size and points.
Type size – From 7 to 48 pixels and from 6 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 only one known problematic side effect. 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.
Not every symbol you want to use is on the keyboard. Some tools provide ways to add some of these symbols, but you may need to resort to inserting ampersand-demarked entities directly into the code. The choice of a charset also makes a difference in whether you need to use entities or can insert foreign characters in their native form. For instance, if you use UTF-8, you can import Russian in the Cyrillic, but using ISO-8859-1, you would need to use entities for the Russian—a definite nuisance.
Symbols – The HTML numbers for some special symbols.
Character Entities – The complete set as defined in the HTML DTD.
Additional entities – An old document which includes ampersand numeric entities not included above and some charset information. I intend to distill this into something more current and directly relevant.
A Good Reason to use UTF-8 – ISO-8859-X charsets and the issues of choosing among them.
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, and the external entities files, which are old (ancient). All pages use UTF-8.