Another of Subcide's excellent tutorials, this one on Relative Font Sizes: http://www.subcide.com/tutorials/relativesizes/
Relative font sizes are something that I've avoided for far too long due to bad experiences in the past, and being a picky designer who likes things pixel perfect. The new subcide design has seen me change to using em's for all my text sizing, so that I can be sure that I'm setting a good example for everyone reading these articles. Relative font sizes are pretty easy, so this tutorial will be short and sweet. 62.5% The best way I have found to get relative font sizes to behave correctly is by using a percentage font-size on the body, and em's for everything else. So first things first, set the font-size on your body to be 62.5% right at the top of your CSS. body { font-size: 62.5%; } This magic number makes the units that you specify in em's, correspond better to the same measurements in pixels. I think that was a confusing sentence. Here's an example: * 1.0em now equals 10px in size * 1.2em now equals 12px in size * 1.8em now equals (you get the idea...) Simple right? Not quite. There's one other important thing to remember. It's All Relative The main thing that you are going to have to remember is that when you specify a font size using a "relative" unit like em, that means that you will increase or decrease the size of that font "relative" to its parent container. Say you have a #content div, and you want the text inside it to be the equivalent of 12px font size. You would do exactly as you imagine you'd do: #content { font-size: 1.2em; } Now, if you had an <h2> tag inside that #content div that you wanted to be the equivalent of 18px, setting it to be 1.8em would make it much bigger than you would expect. Instead of being (roughly) 1.8x larger than your original 62.5% size, it is now 1.8x larger than your #content font size, which is already 1.2x larger than your body size. So for example, anything inside the #content div that you specify as font-size: 1.0em; would stay exactly the same size. Anything you specify as 2.0em would be (roughly) twice the size of your #content font. If you can be bothered to work out what your font sizes need to be using maths, be my guest, but I suck at maths so I just do it by eye. Benefits Now users in most browsers, including IE, will be able to resize the text on your website, and it will all stay in context, with headings being relatively larger than body text, copyright text being smaller etc... Accessibility hounds will annoy you less, and the opposite sex will find you more attractive. ******************* And if you haven't looked at their CSS tutorial, you're really doing yourself a disservice. My 2ยข, John G ______________________________________________ Author Help files and create printed documentation with Doc-To-Help. New release adds Team Authoring Support, enhanced Web-based help technology and PDF output. Learn more at www.doctohelp.com/tcp. Interactive 3D Documentation Parts catalogs, animated instructions, and more. www.i3deverywhere.com _______________________________________________ Technical Communication Professionals Post a message to the list: email [EMAIL PROTECTED] Subscribe, unsubscribe, archives, account options, list info: http://techcommpros.com/mailman/listinfo/tcp_techcommpros.com Subscribe (email): send a blank message to [EMAIL PROTECTED] Unsubscribe (email): send a blank message to [EMAIL PROTECTED] Need help? Contact [EMAIL PROTECTED] Get the TCP whole experience! http://www.techcommpros.com