Electric Type

Multimedia

About Us

News

Help

Text Size Control with CSS
by Steve Mulder 2 Sep 1998

Steve Mulder is manager of information architecture in the user experience group of Terra Lycos, where he wears as many hats as possible. He pretends to know a lot about design strategy, interaction design, usability, writing for the Web, and Web development.

Page 1

Every single day on this planet, at least one new Web designer or HTML coder groans out loud.

It's a groan we've all heard. You've just finished your first Web site using your Mac, and you giddily go skipping down the lane to tell your friends.

But your giddiness turns to horror when your site loads on their PC. It doesn't look right at all. Your carefully constructed design is in shambles. The images don't look like they're supposed to, the colors are different, and the text is the wrong size. Your shoulders slump, and you groan.

That groan is your initiation into the messy and ridiculous world of Web design. And your first lesson is this: Web pages look different on different platforms.

Today we're going to tackle one aspect of this cruel lesson: text size. As you might already know, text on a PC generally appears larger than it does on a Mac. That perfect nav bar that you created on a PC (below, left) looks like crap on a Mac (right). As the screenshot shows, the text (bold Arial font with FONT SIZE=1) is essentially illegible:

PC:

Really, there are two key problems with text size on Web pages:

  • Limited size choices. With HTML, we have FONT SIZE=1,2,3,4,5,6, or 7, and that's it. Seven sizes for text, and no more. In the nav bar shown above, I'd like to make the text just a little bit bigger, but SIZE=2 is too big and there's nothing in between. That sucks.

  • Platform inconsistencies. If you design on a PC, text is too small for Mac users. If you design on a Mac, text is unnecessarily large for PC users. Careful typographic layout is ruined. That sucks.
Today, we're going to explore all of our options for dealing with these two annoying problems. There are definitely solutions out there, so let's take a look at stylesheets and see if they can help cut down on the groaning.

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.