Electric Type

Multimedia

About Us

News

Help

Text Size Control with CSS

Page 4 — Consistency Through Pixels

The good news is that if you use pixels (px) to specify font size, your text size will be almost identical on Macs as on PCs. Here's proof:

Netscape Communicator 4 for Windows 95:

Netscape Communicator 4 for Macintosh:

Internet Explorer 4 for Windows 95:

Internet Explorer 4 for Macintosh:

Note how the first line (SIZE=5) varies in size between platforms. If we used any stylesheets unit other than pixels, the second line would also vary from one browser to another. But by using pixels, we guarantee that the text will be the same pixel size across platforms. This doesn't necessarily mean the same "physical" size because monitors can be set to different resolutions, but it is the same size relative to the graphics on your page.

Simple and joyous.

But there is a downside. Or, rather, two:

  1. Printing might be impossible.

    If you set text size in pixels, the browser might translate each pixel as a printer dot. Thus, text set to 18 pixels will be extremely small when printed by a 300 or 600 dpi printer. This can be a big problem since many people prefer to print Web pages.

  2. Users cannot adjust the font size.

    If you set text size in pixels, that size cannot be changed by adjusting the font size settings in the Web browser. If users select "Increase Font Size" or change their Preferences, nothing will change. This can also be a problem because there are people who cannot read small or medium-sized type on a screen, and must be able to increase the text size to read your Web pages. Taking away that user control is a dangerous move.

These are fairly serious drawbacks, but if you're willing to take the risk, go for it.

There is another solution, however: using ems and JavaScript.

next page»


Dynamic HTML  

Frames  

HTML Basics  

Stylesheets  

Tables  

XML  

Javascript  

Database Connections  

Intro To Perl  

HTML 4.0  

User Blogs

Screen Shots

Latest Updates

Contact Us

Valid HTML 4.01!
Valid CSS!

Breadcrumb

© ElectricType
Maintained by My-Hosts.com
Site map | Copyright | Disclaimer
Privacy policy | Acceptable Use Policy
Legal information.