Font Size Keyword Intervals

The simplest things are most important and hardest.

This document proposes a unified scheme for displaying font size ranges on screen in a predictable, attractive, user-friendly fashion, regardless of physical or logical screen resolutions or fonts in use (mostly). Based on Cascading Style Sheets' seven "keyword" sizes, it's intended for World Wide Web browser developers of all religions, and is likely to be of interest only to digital typography and/or CSS enthusiasts in other fields.

Rationale

Font size changes are a fundamental typographic design technique. A reader can discern the structure of documents at a glance when their internal structure is reflected (among other things) by relative font size changes. Larger type is for headings or emphasis, smaller type is for deemphasis, and medium type is, well, medium. Each size must be distinct from its adjacencies, and no matter what the value of "medium" type, the smallest type must remain at least minimally legible. In high-resolution print typography, designers enjoy considerable freedom and control over the articulation of this range. Indeed, several hundred years of art and industrial progress have made print a superlatively subtle, handsome, and effective medium.

Low-resolution screen typography, however, is a different matter. Arbitrary or ill-managed font size interval differences across applications or platforms (e.g., on the World Wide Web) often interfere unacceptably with the legibility, logical clarity or aesthetics of documents. While the problems are subtle in nature, they are profound in effect: people often can't read on screen, or can read only with discomfort. The unfortunate result is that most on-screen textual display is either extremely crude, or pushed by desperate or naive designers into pixel-specific forms such as graphics, or (worse) formatted for print with the use of inflexible absolute units (such as points or inches).[1] the precise value of "medium" is itself users prefer different nominal font sizes based on the font design, their vision, their equipment, their taste, and perhaps the time of day. Users should therefore remain in control of the exact size of most of the text they read on screen. There are many problems associated with displaying arbitrary fonts in controlled size ranges distinctly and attractively at low screen resolutions. Even when legibility is not impaired, arbitrary or ill-managed font size interval differences across applications or platforms (e.g., on the World Wide Web) often interfere unacceptably with the logical clarity or aesthetics of documents. bandwidth-heavy, artwork. with inappropriate, print-oriented unit systems such as points, inches naively pre-rasterized (turned into graphics), or formatted by naive authors . A unified solution to the evolution of the World Wide Web as a visually rich medium that remains dynamic, lean, and accessible to users with special requirements, devices, or handicaps.

The If you are a browser developer, think the subject matter is important, and disagree or don't understand, please either contact me or bring it up in an open forum such as the W3C's www-style mailing list or the Mozilla newsgroups.

The table below presents a proposed interval system for CSS font size keywords across varying pixel values of "medium" (1em). Note: This is a large table styled extensively with CSS. It is known not to display with adequate accuracy in any released version of Netscape Navigator/Communicator. Please either use a recent version of MS Internet Explorer, Opera, a "Mozilla" build, or see this big GIF version (1297x1078; 133K) instead. Scroll right if necessary; there's essential detail in the lower-right.

Scale #1 xx-large - 150% - 3/2 x-large - 125% - 5/4 large - 112% - 9/8 medium - 100% - 1/1 small - 89% - 8/9 x-small - 75% - 3/4 xx-small - 60% - 3/5
Generic (suitable for all
pixel-per-em values equal
to or greater than 16; e.g.,
12pt @ 100ppi or 18pt @ 72ppi)

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

20px per em; e.g.,
12pt @ 120ppi ("large fonts")

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

16px per em (Windows, XP 5.0 browser default); e.g., 12pt @ 96ppi or 16pt @ 72ppi

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

Scale #2 - like scale #1, except in this range: x-small - 80% - 4/5 xx-small - 67% - 2/3
15px per em; e.g., 12pt @ 90ppi or 11pt @ 96ppi (1/90 is original CSS1 "reference pixel")

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

14px per em; e.g.,
12pt @ 84ppi

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

Scale #3 - like scale #1, except in this range: small - 92% - 11/12 x-small - 83% - 5/6 xx-small - 75% - 3/4
13px per em; e.g.,
12pt @ 78ppi
(cf. X-windows "75ppi" fonts)

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

12px per em (Mac OS default); e.g., 12pt @ 72ppi or 8pt @ 96ppi

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

You will be Åssimilated. Resistance is gonna delay our implosion.

1. W3C Web Accessibility Guidelines: "Use relative rather than absolute units in markup language attribute values and style sheet property values. [...] For example, in CSS, use 'em' or percentage lengths rather than 'pt' or 'cm', which are absolute units." http://www.w3.org/TR/REC-CSS1#length-units : "Absolute length units are only useful when the physical properties of the output medium are known."