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
