Static vs. Dynamic font sizes

It doesn't matter if you do all the error checking in the world, or if you have the most beautiful graphics, if your site or application design isn't usable, it's not going to do well. Get input and advice on usability and user interface issues here.

Moderator: General Moderators

Post Reply
User avatar
evilmonkey
Forum Regular
Posts: 823
Joined: Sun Oct 06, 2002 1:24 pm
Location: Toronto, Canada

Static vs. Dynamic font sizes

Post by evilmonkey »

Hi everyone,

Can someone please tell me what 'static' and 'dynamic' refers to in the context of font size? Can anyone give a specific example? I tried googling it, but I'm getting garbage for results.

Thanks. :)
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

I would imagine static would mean something like:

Code: Select all

body
{
    font-size: 12px;
}
h1
{
    font-size: 14px;
}
whereas dynamic would mean

Code: Select all

body
{
    font-size: 1em;
}
h1
{
    font-size: 125%;
}
The first one cannot be resized by the browser's increase/decrease font-size features (I believe) whereas the second one can
User avatar
evilmonkey
Forum Regular
Posts: 823
Joined: Sun Oct 06, 2002 1:24 pm
Location: Toronto, Canada

Post by evilmonkey »

That makes sense, thank you. :) If anyone has anything to add, that would be great. :)
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

I prefer to use the "em" units myself too.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

There's a lot more to it. Px are sometimes viewed as 'static', but in fact they are a relative measure. Most modern browsers do allow pixels to be resized. Only browser who doesn't, ... well guess once.

So you have to decide for yourself whether or not it's a problem that IE cannot resize your text-size when you've set it as px. An option is to use something like:

Code: Select all

body { font-size:75%; }
html>body {
	font-size:12px;
}
Then you'll have your starting point of 12px for all modern browsers, and 75% (around 12px) for IE.

Then you can specify all other sizes relative with % or em. So

Code: Select all

h1 { font-size:2em; /* = 24px */ }
h2 { font-size:1.5em; /* = 18px */ }
etc
That way all font sizes are always in the right proportion.
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Post by jayshields »

Well, I learnt something from this. On a side note, what does "em" mean/stand for?
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

It's the width of a font's M character I believe... correct me if I'm wrong somebody.
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

The Ninja Space Goat wrote:It's the width of a font's M character I believe... correct me if I'm wrong somebody.
You are correct sir! However, I do remember EM being an acronym for something, don't ask me what though.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

You're sort of correct, but not really:
http://en.wikipedia.org/wiki/Em_(typography)

Typography is a demented art, and many typographers have lived similarly demented lives.

If you need your text pixel-perfect (for layout reasons.. like static headers) use px. Body text should be measured in em or % (of the base px/em).

The w3c spiel is here: http://www.w3.org/WAI/GL/css2em.htm

and you might find a use for: http://riddle.pl/emcalc/
Post Reply