|
by Bruce Quackenbush
 |
There has been quite a lot of talk lately on some of the web design
forums and mailing lists I read, about text size on web pages.
The problem is that text is rendered at different sizes depending
upon the browser used, the platform it's viewed on, the font size
as set by the user in their browser, and quite a few other factors.
One of the most predictable and universal differences in text size
occurs between the Windows and Mac platforms. Macs render text based on
a completely different algorithm than used by the Windows OS. In general,
the same text will appear about half as large on a Mac as it will on a
Windows system.
The web designer has several options available in how to code the text
size on a web page, each of which will offer some advantages over the
others but none of which can be pointed to as "the right way". By using
style sheets to set the text size, you gain the use of several different
measurement units. You can set type in pixels, inches, points, millimeters,
ems, etc.
There are two main camps in the text size debate. One group advocates
the use of an absolute unit of measurement such as pixels. They
claim (and rightly so) that using pixels bypasses the text rendering
algorithm of the operating system, giving the web designer more
control over the text size. The other camp proposes the use of
relative units such as points, thereby allowing the OS to "figure"
the text size based on the screen size. This group claims (also
rightly) that using relative units will give a more consistent
"perceived" text size across a wider range of screen/browser/platform
combinations.
If you use pixels as your units, your text will maintain its scale
relative to the graphics on the page (sort of), it will also be
very nearly the same size on a Mac as on a Windows machine, given
a similar monitor resolution. Therein lies the rubthe text will
change size radically on monitors with different pixel resolutions!
So, while you gain some consistency between different platforms, you
lose consistency between different monitors.
According to the stats I've seen, 90% of all web users are using the
Windows operating system. The stats on screen size are much more evenly
distributed across a wide range from 640x480 to upwards of 2400x1600.
All of which leads me to believe that the better approach is to use
points as the text size units. Yes, the text will be almost universally
smaller on Mac systems, but everybody else will see very similar
text sizes. This method has the further advantage of responding
to the user's browser preferences. This means that people with vision
impairment or other reasons to desire larger type will still be able
to read your pages.
Using pixels "hard-wires" the text size to the monitor resolution.
Of course, the downside of the "relative units" method is that the
text will re-flow differently on everybody's screen, causing some
potential problems with the layout of the web page. With some
careful planning and a good understanding of the "liquid page design"
concept, I believe these potential problems can be avoided and
a truly consistent user experience can be achieved.
|
 |
| |
|
 |
|
|
|
|
|
 |
|
| |
|
Some
of the side issues related to the text size
issue are why text is so much smaller when viewed on a Mac
and how exactly do the different systems render text.
In an effort to find some answers to these important questions,
I have put together a little test. Here
is a page that displays an upper-case "M" at 72 points. If
enough of you kind readers would go to this page and measure the
"M" with a ruler and enter your monitor size data, we should be
able to come up with some answers. |
|
| |
|
 |
|
| |
|
Further
Reference:
Art Works Studio browser stats - a
compilation of browser and platform
statistics for 8 sites on our server.
BrowserWatch
- Stats for current browsers in use
StatMarket - Current
web-wide stats for browsers and platforms. |
|
|
|