Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 

Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format



Volume 8 (2005)
   September
   June
   April
   March
   January

Volume 7 (2004)
   November
   September
   July
   June
   May
   April
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 6 (2003)
   December
   November (Part 2)
   November
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 5 (2002)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 4 (2001)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 

HTML Tip:
Fixing Your Font Sizes

by Tom Dahm,
Chief Operations Officer,
NetMechanic, Inc.

  
December 1999
Vol. 2, No. 11
 • HTML Tip
 • Search Tip
 • Design Tip
  

Want to achieve exact font sizes across all browsers? Here's a trick that will work on all fourth-generation browsers: use a Cascading Style Sheet to set your fonts in pixels.

Last month we showed you how to stress test your Web pages by increasing your browser's default font size. Many users increase their default font size to make text easier to read.

In some cases, though, large fonts can break your page layout. A large typeface can force your navigation links to wrap across two or more lines, which is something you'd like to avoid.

Is there any way to avoid this? Yes, fortunately, you can fix your font sizes so that they override the browser's font preferences. You can do this by using a Cascading Style Sheet.

Style Sheets allow you to set the size of your typeface by using the font-size property, as shown below.

<style>
   P { font-size : 14pt }
</style>

This sets the font size of all paragraphs to be 14 points. Absolute font sizes can be defined in terms of points (pt), pixels (px), picas (pc), or a number of other options.

For purposes of this tip, we're only interested in one of these options: setting the font in pixels. This option overrides the browser's font preferences and forces the font to stay the same size.

For example, suppose we defined a style class as follows to fix our text to 14 pixels:

<style>
  .fixedfont { font-size : 14px }
</style>

Now we can tie this style to a section of text by placing the text inside a DIV tag, as shown below:

<div align="center" class="fixedfont">
<b>This text is fixed at 14 pixels</b>
</div>

The line below, as well as the rest of the page, shows our fixed font text:

This text is fixed at 14 pixels

But, the next line below shows font text that has not been fixed:

This text is not fixed at 14 pixels

This text probably looks just like the surrounding paragraphs on your browser. But now try increasing your browser's default font. If you don't know how to do this, click here to learn how.

If you're using Microsoft Internet Explorer, try increasing your browser's default font size to "Largest." The page should appear as rendered below.

This page as seen using MSIE 5.0 and 'Largest' fonts
This Page Seen Using MSIE 'Text Size - Largest'

Notice that the text that has not been set with a fixed font is now rendered in large type.

You can use this technique within your navigation bars and other places where large fonts cause problems.

Note, however, that this technique is controversial. Usability experts feel strongly that you shouldn't override your visitor's preferences. If a user has increased the browser's font size, they've probably done so for a good reason, such as eyestrain or disability. Overriding these preferences forces your tastes on your visitors.

As a result, it's a bad idea to use this approach to set font size throughout your page. Rather, you should use pixel sizes sparingly and only in areas where large fonts cause problems for your layout. We suggest limiting use of pixel sizes to your navigation bars.

To see a good example of how to use this technique, look at ZDNet's Developer Channel. ZDNet sets their page fonts in pixels within their left and right navigation bars only. Notice that as your increase your browser's font, the size of text in the content area increase, but the navigation areas stay fixed.



Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2010,
Keynote NetMechanic
All rights reserved.