CSS Font Size Tutorial - DevHunters.com l Webmaster Forum - Web Advertising - Web Design

Visualrise · 04-16-2008, 12:09 AM

Believe it or not, how you describe your CSS font size handling to the browser has a large effect on the end user. Today the most popular way of sizing fonts in CSS is through pixels, this is because designers have pixel perfect control over the look and feel of their content.

Sound the alarms! This is not a very effective technique! In the worlds most popular browser, users cannot resize the text! (This is fixed in IE7 by their "zoom") Still, we want to make the web usable right? So here is an approach thats effective.We are going to use two techniques, keywords and relative length units.

Keyword: larger smaller smallest
Relative units: em %(percentage)

Let's implement! The first bit of code you're going to want to add to your CSS is the following. I will explain with inline comments:

Code:

body {
   font-size: x-small; /* This is for IE5/Win */
   voice-family: ""}""; /* Only IE5 recognizes this and thinks the CSS ends */
   voice-family: inherit;
   font-size: small; /* For compliant browsers */
}

html>body {
   font-size: small; /* For Opera */
}

So now in your CSS when you want to describe how large or small a font should be you use a percentage for example:

Code:

h1 {
   font-size: 170%;
}

p .smalltext {
   font-size: 65%;
}

Note: 100% is the default "small" size.

Now we have improved the usability of our website greatly, the fonts can all be resized perfectly across all browsers.

Credit goes to the book "Bullet Proof Web Design" which taught me this.

webeweb · 04-16-2008, 03:36 AM

That is a cool tutorial. Thanks for sharing!

SpOrTsDuDe.Reese · 04-16-2008, 06:12 AM

I recently have always used px, but since about 3 months ago I switched, I have gotten emails saying how much readable my site is now. Very nice tutorial!

Have A Look At Some Of Our Webmaster Related Sponsors!
Script Directory	Advertise Here	Market Leverage	Free Templates	3D Guide-characters	Advertise Here

04-16-2008, 12:09 AM	#1 (permalink)
Visualrise New Hunter Join Date: Apr 2008 Posts: 3 iTrader: 0 / 0% Hunter Bux: 0	CSS Font Size Tutorial Believe it or not, how you describe your CSS font size handling to the browser has a large effect on the end user. Today the most popular way of sizing fonts in CSS is through pixels, this is because designers have pixel perfect control over the look and feel of their content. Sound the alarms! This is not a very effective technique! In the worlds most popular browser, users cannot resize the text! (This is fixed in IE7 by their "zoom") Still, we want to make the web usable right? So here is an approach thats effective.We are going to use two techniques, keywords and relative length units. Keyword: larger smaller smallest Relative units: em %(percentage) Let's implement! The first bit of code you're going to want to add to your CSS is the following. I will explain with inline comments: Code: body { font-size: x-small; /* This is for IE5/Win / voice-family: ""}""; / Only IE5 recognizes this and thinks the CSS ends / voice-family: inherit; font-size: small; / For compliant browsers / } html>body { font-size: small; / For Opera */ } So now in your CSS when you want to describe how large or small a font should be you use a percentage for example: Code: h1 { font-size: 170%; } p .smalltext { font-size: 65%; } Note: 100% is the default "small" size. Now we have improved the usability of our website greatly, the fonts can all be resized perfectly across all browsers. Credit goes to the book "Bullet Proof Web Design" which taught me this. __________________ Waterloo based web development: http://www.visualrise.com (Sybase, Google, Oracle, Adobe, McAfee, all have offices in Waterloo!)

04-16-2008, 03:36 AM	#2 (permalink)
webeweb Field Master Asteroids Champion! Grand Roulette Champion! Tournaments Won: 1 Join Date: Mar 2007 Location: USA Posts: 241 iTrader: 2 / 100% Hunter Bux: 433.00	That is a cool tutorial. Thanks for sharing! __________________ Social Bookmark Advertising

04-16-2008, 06:12 AM	#3 (permalink)
SpOrTsDuDe.Reese Senior Moderator Space Invaders Champion! Breakout Champion! Moon Lander Champion! Copter Champion! Archery 2000 Champion! Curveball Champion! Zombie Survival Champion! Pacxon Champion! SD-Pong Champion! Tennis Challenge Champion! Rabbit Hunting Champion! Let It Ride Champion! Hot Shots Champion! Van Wilder Beer Pong Champion! Tournaments Won: 2 Join Date: Jan 2008 Location: Whiteford, MD Posts: 1,126 iTrader: 1 / 100% Hunter Bux: 1,786.00	I recently have always used px, but since about 3 months ago I switched, I have gotten emails saying how much readable my site is now. Very nice tutorial! __________________ +-(X)HTML, CSS, JavaScript, SEO, PHP, Flash-+ Code: <style type="text/css"> u { text-decoration: none; } </style> GameYin. Redesigning for DevPlooth.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode