CSS Font-Sizing

(This page is best viewed if your BROWSER's font-size is set to "medium". (Settings for brower font sizes are generally located within the browser's "View" menu). The CSS for this page is specially written to render text at the font-sizes in the examples, beginning with 16px.)

CSS offers a number of methods for expressing the attributes of font-size. Only two, percentages and ems, are relative. For increased accessibility and readability, it is recommended that relative sizing is used, rather than absolute methods such as pixels or points. The designer must remember that what the end-user actually sees on his monitor is influenced not only by font-sizes that are declared either in the HTML or in the CSS, but also by the user's browser setting and dot-pitch of his display. The user may also have the ability to create HIS OWN default style sheet for viewing web pages right within his browser. The user's settings ALWAYS override the designer's.

The default font size in most web browsers is "medium", 16px (not points!). Remembering that font-size is inherited, if you set your page's font-size in the <body> tag to 76% (roughly 12px), and use percentages in your CSS, say to declare a size 150% larger than your base font size for the <h1>, the percentages will be based upon the font-size you declared in the <body> tag (i.e. 16px x .76 x 1.5 = 18.24px). Using percentages rather than pixels or points makes for more consistent font-size rendering cross-browser. The following chart is based upon the assumption that the browser's default font is set to medium, roughly 16px. This also gives the user the option to resize your fonts through the browser's interface while keeping your "scale".

As you will be able to see (or not!) in the example paragraphs below the size chart, it is up to the responsible designer to size type so that it remains clear and readable. One cannot count on the end-user's ability to resize the type on the web pages you design. Offering large-type styled pages is an alternative if you feel you MUST use tiny type. No matter how interesting your content might be, users will leave your site if they can't read the type!

Percentage converted to pixels.
% px % px
200 32 101 16.16
175 28 100 16
150 24 95 15.2
140 22.4 90 14.4
130 20.8 85 13.6
125 20 80 12.8
120 19.2 76 12.16
115 18.4 75 12
110 17.6 70 11.2
105 16.8 65 10.4
104 16.64 60 9.6
103 16.48 55 8.8
102 16.32 50 8

Using ems as your unit of measure is the next-best method for font-sizing. If you've decided to declare no font-size for the body selector and assume a 16px medium default font, calculating font-sizes is easy. Ems are expressed as decimals. Multiply 16 by the em-size you want in order to find out the pixel-size that will be rendered.

Ems to Pixels Based Upon Default 16px
em px em px
.1 1.6 1.1 17.6
.2 3.2 1.2 19.2
.3 4.8 1.3 20.8
.4 6.4 1.4 22.4
.5 8 1.5 24
.6 9.6 1.6 25.6
.7 11.2 1.7 27.2
.8 12.8 1.8 28.8
.9 14.4 1.9 30.4
1.0 16 2.0 32

The following filler text has been progressively sized, beginning with 200% and ending with 50%.

In a collaborative, forward-thinking venture brought together through the merging of like minds. Exploiting the productive lifecycle combined with optimal use of human resources, the strategic vision - if indeed there be one - is required to identify. An important ingredient of business process reengineering the new golden rule gives enormous power to those individuals and units, through the adoption of a proactive stance, the astute manager can adopt a position at the vanguard. The three cs - customers, competition and change - have created a new world for business building flexibility through spreading knowledge and self-organization, to experience a profound paradigm shift.

Exploitation of core competencies as an essential enabler, combined with optimal use of human resources, from binary cause and effect to complex patterns.