Art Works Studio
IMHO - Web Design Editorial
Home
Identity Design
Web Design
Print Design
Illustration
Search our Site
Contact Us
IMHO (In My Humble Opinion) is an editorial column dealing with issues related to web design and development.
 
At the bottom of each column there is a response form where you can register your opinion and comments about the column.
 
I welcome any and all thoughts on these issues.
 
 
Text Size in Web Pages
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 rub—the 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.
 
Respond to this editorial:
 
         I agree completely
         I agree with most of it
         I disagree with most of it
         I disagree completely
         I don't have an opinion, I just
             want to see what other people thought.
 
Comment:

Comments will be posted publicly so keep it civil!
 
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.
 
 
Other Tutorials and Demonstrations
 
We have put together a few demo pages in response to questions raised on the Adobe Forums.
 
Remote Rollovers
With a few minor changes to ImageStyler generated code, the "distant rollover" effect can be achieved.
 
Fluid Page Layout
Here's a couple of techniques to simulate expandable graphic elements on a web page.
 
Adding Sounds
The necessary JavaScript code to add sounds to HTML pages.
 
Here is a Perl script that will convert a page with colored backgrounds to white with black text for easy printing.
Zipped (2K)
Text (4K)
 
RGB-Hex “Web Safe” Color Chart
HTML version (20K)
GIF version (45K)
 
We also have a lot of great web design reference sites in our Link List
 
 
The author is a member of these fine organizations:
 
The HTML Writers Guild    International Webmasters Association   
 
Home | Identity | Web | Print | Illust. | Search | Contact | Links | News | Awards
©1999 - 2002 Art Works Studio webmaster@artworksstudio.com