
| Standard Values | CSS medium, 1em, or 100% | 10pt (roughly 83% of CSS medium) | 125 | 500 | 125 | 500 | 100% or relative | |
| W3C - World Wide Web Consortium | 100% | ~83% | 255 | 765 | 190 | 510 | 100% | actions match words (leads by example) |
| Site | Base Content Font Size | Minimum Font Size |
Base Color Brightness | Base Color Difference | Minimum Color Brightness | Minimum Color Difference | Width | Notes |
|---|---|---|---|---|---|---|---|---|
| Assistive Technology News | 11px | 10px | fixed | invalid and presentational tag soup markup; no charset specified | ||||
| Bee Cave Texas Library | 13px | 10.4px | relative | |||||
| Big Easy Web Design, Sheffield | CSS small & x-small | CSS x-small | fixed | "Website Design for Accessibility" | ||||
| Dolphin | 70% | 55% | unknown | unknown | unknown | unknown | fixed | leaves background colors unset on major elements |
| Geekministry | ~83% | 75% | 155 | 453 | 36 | 110 | fixed | |
| Juicy Studio | 90.2% | 72.2% | 255 | 765 | 102 | 306 | relative | |
| The Paciello Group | 75% | 75% | 255 | 765 | 77 | 255 | 100% | |
| Performance Technologies Group | 68% | 12px | 123 | 376 | unknown | unknown | relative | leaves background colors unset on some elements |
| Section 508 - The Road to Accessibility | 12px | 11px | 238 | 714 | 100% | has text sizer capped at 20px; substantial content disappears when text sizer is used | ||
| Skills for Access | 69% | 62.8% | 204 | 612 | 102 | 306 | fixed | |
| The Usability Group | 12px | (unknown, in image) | 184 | 552 | 114 | 345 | fixed | |
| Vision Australia | 90% | ~76% | 187 | 561 | 187 | 561 | 100% | has text size select system in which medium is smaller than the user default |
| WAI - Web Accessibility Initiative | 90% | 81% | 199 | 597 | 191 | 552 | 100% | |
| Web Accessibility Tools Consortium | 90% | 81% | 100% | |||||
| Webusability.com | ~83% | 9px | 255 | 765 | 222 | 544 | fixed | leaves background colors unset on some elements; invalid tag soup markup |
| Webcredible | 75% | 68% | 255 | 765 | 228 | 654 | 100% | |
| Westciv | 75% | 56.2% | 193 | 579 | 193 | 579 | fixed | |
| bf | mf | bcb | bcd | mcb | mcd | n |
Virtually all the authors of the sites above have set fixed text sizes, and therein lies the obstacle to reaching all who are willing to see. Different people have different visual acuity, different hardware, different software settings, different physical settings, and so forth. None of these things have been taken into account by these authors. They need not make this omission, but do it because they can, or out of habit, or because they see others do it, etc.
They have the option to set their own preferences to suit themselves before designing, just as users have the option to do the same before surfing. By doing this first, and then sizing text using relative measures, such as %, em, ex, or keywords, they get to see the size they prefer, or need, and so does everyone else. Everybody wins. This is an unfulfilled potential major strength of the web compared to print media.
Do you suppose most web authors are among those with poor vision? Not likely, is it? No, as a group, they have better than average vision, with an eye for detail a cut above the population at large. So, their concept of how big is big enough is skewed smaller than average.
Do you suppose most web authors are using little old computer displays to do their work 40 hours per week. Not likely, is it? No, as a group, they have fine equipment, typically using displays much larger than average, 21" or larger in many cases. So, their concept of how big is big enough is further skewed smaller than average.
For this evaluation, the pages were visited using screen resolutions of 1152 X 864, 1280 X 960, 1400 X 1050, and/or 1600 X 1200. Since the advent of very high resolutions and monitors of 17" inches and larger, the old standards of 640 X 480 VGA and 800 X 600 SVGA have lost so much ground that fewer than half of users use them. 1024 X 768 is the most common "happy" or "ideal" resolution for popular low cost flat panel displays. 1024 X 768 is today’s median resolution, making those used here represent "high" resolution.
The higher the resolution, the smaller the physical space between logical screen pixels (px). So, a font size of 12px on a medium sized display at typical 1024 X 768 resolution will be considerably larger physically (e.g. on 15" diagonal 12px is 2.4 mm tall) than than it will at 1600 X 1200 resolution, even on a significantly larger display (e.g. on 19" diagonal 12px is 2.0 mm tall). By comparison, front page newspaper text is about 2.3 mm tall. See how many more or fewer px are required to achieve equivalent physical size at alternate resolutions, and also how big physically various px values equate to.
Accessibility experts all agree, relative sizing based upon the user’s preferred size is the right way to size and position text in web design.
Here are the CSS keyword sizes based upon the current default in your browser:
If medium above is not your preferred size, then you haven’t set your own default as you should.
At 120 DPI, 16px produces a default font size compatible with other apps and the OS, 10pt, which is the size recommended by usability expert Jakob Nielsen as a web page minimum. 120 DPI is the "large fonts" setting in Windows, which defaults to 96 DPI. At 96 DPI, 16px is 12pt. 16px is the default default in Gecko browsers, while Internet Explorer defaults to 12pt regardless of the DPI (system font size) setting. All modern browsers provide some means to adjust default settings to suit their users’ preferences.