CSS font sizes - what's best to use?

[Els]

Actually, IE7 does both. You can still change the text size using the
"view" menu

(or the Page menu on the right)

(if you can figure out how to re-enable the menu system
first!),

Just press the alt button

but you can also use the zoom tool in the bottom-right of the
window (or press ctrl +/- to achieve the same effect).

If only I could switch that functionality, and have text size respond
to ctrl +/- ...

 

[Dylan Parry]

Just press the alt button

Ah fun, didn't know that one! Pity I only use IE with IETab from within
Firefox

--
Dylan Parry
http://electricfreedom.org | http://webpageworkshop.co.uk

Programming, n: A pastime similar to banging one's head
against a wall, but with fewer opportunities for reward.

 

[Ed Seedhouse]

If the choice of font is too small, then yes. But hopefully common
sense prevails.

Common sense tells me that a site whose print is too small for me to
read isn't interested in my business and I should leave. And that's
what I generally do. Quickly.

 

[Steve Pugh]

Virtually all my pages use them, so it suits me. YMMV.

The only one I use it on is sfsfw.org where it creates the blue border.
An effect that (when I wrote that stylesheet five years ago) was tricky
to achieve by setting a border on body - it may still be tricky today,
I don't know.

None of the child containers will actually use that size. It's just to
make relative font-size calculations easier.

I would have thought that needing to multiply by 0.625 made things more
complex, not less. But I've yet to see a computer without a calculator
app of some sort, so it doesn't really make any difference.

You lost me there. That sounds like a useful thing to know, if only I
understood. Can you expand on that please?

Compare the rendering of these two examples:

<div style="line-height: 1.1em">
<p style="font-size: 150%;">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc bibendum libero vitae libero. Etiam dignissim
ante at eros sagittis molestie. Nunc mollis consequat purus. Mauris
suscipit arcu in justo. Cras at nisl. Ut lectus. In tortor ipsum,
pharetra congue, venenatis vel, commodo vitae, elit. Etiam nisl pede,
mattis id, fringilla ac, porttitor et, odio. Morbi laoreet lacus
sagittis mauris. Mauris molestie nulla et nulla. Donec lorem. Aliquam
dignissim lorem eget ligula.</p>
</div>

<div style="line-height: 1.1">
<p style="font-size: 150%;">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc bibendum libero vitae libero. Etiam dignissim
ante at eros sagittis molestie. Nunc mollis consequat purus. Mauris
suscipit arcu in justo. Cras at nisl. Ut lectus. In tortor ipsum,
pharetra congue, venenatis vel, commodo vitae, elit. Etiam nisl pede,
mattis id, fringilla ac, porttitor et, odio. Morbi laoreet lacus
sagittis mauris. Mauris molestie nulla et nulla. Donec lorem. Aliquam
dignissim lorem eget ligula.</p>
</div>

In the first example the line height is 1.1em of the font size of the
div, regardless of what the font size of the paragraph is. In the
second example the line height is 1.1 times the actual font size used
on that line.

Steve

 

[Bergamot]

None of the child containers will actually use that size. It's just to
make relative font-size calculations easier.

So you're saying that using something like
body {font-size: medium}
..wrap {font-size: 62.15%}
p {font-size: 1.2em}

is easier than
body {font-size:100%}

or not setting any font-size at all? Must be that new math thing.

 

[K A Nuttall]

In the first example the line height is 1.1em of the font size of the
div, regardless of what the font size of the paragraph is. In the
second example the line height is 1.1 times the actual font size used
on that line.

Whoah, that's proving a bit much for my little brain. I didn't even
know you could do '1.1' without units. Isn't that equivalent to 110%?

Thanks for the explanation. I'll have to do more homework on that
subject.

 

[Bergamot]

Andy Dingley wrote:

[re: text zoom]

FF is perhaps short-sighted and I
hope that improved web practice will soon make this feature an
anachronism, in favour of returning to how IE does things.

I don't follow this at all. How is FF short-sighted? It lets the user
set their default text size to whatever they want, and is much more
precise about it than IE's measly 5 steps, none of which may be quite
right for a particular user.

The fact that FF also lets the user set a minimum font size and override
the text size on individual pages are definite boons to the user, don't
you think?

Lets stick
to criticising IE for what's clearly _wrong_ about it though, not
complain about a correct action in an incorrect world.

Can you further explain what you think is incorrect about FF? I don't
see your point. FF does what IE does (and better, I think), plus a lot more.

 

[K A Nuttall]

So you're saying that using something like
body {font-size: medium}
.wrap {font-size: 62.15%}
p {font-size: 1.2em}

is easier than
body {font-size:100%}

or not setting any font-size at all? Must be that new math thing.

Say the browser medium typeface is left at the common setting of
16px...

body { font-size: medium; }
#wrap { font-size: 62.5%; }
h1 { font-size: 1.9em; }
p { font-size: 1.2em; }

....would set an h1 size of 19px and a p size of 12px.

For people with a larger base font size, say 18px, h1 would be about
21px and p about 14px.

The point of reducing the wrap to 62.5% is that it's then a piece of
cake to duplicate design typeface sizes as neat multiples of 10 without
using a calculator. It's not ideal, but at least the markup is clean,
and the decimals are easy to follow.

You could equally abandon the font-size on #wrap, and recalculate h1 as
1.1875em and p as 0.75em (or using % and/or rounding if desired), but I
personally prefer the other way.

 

[Andy Dingley]

Andy Dingley wrote:

[re: text zoom]

FF is perhaps short-sighted and I
hope that improved web practice will soon make this feature an
anachronism, in favour of returning to how IE does things.

I don't follow this at all. How is FF short-sighted? It lets the user
set their default text size to whatever they want,

CSS is designed around relative (like ems or %) and absolute units
(like pixels or points) for text sizing. Relative units should be under
user control, absolute units shouldn't be. Of course this also means
that a careless web designer will compromise accessibility if they use
an absolute unit.

In an ideal world the browsers would work like IE (relative is
controllable, absolute stays fixed) and web sites would be written
solely around relative units. A few tasks (prrinted layouts,
pixel-perfect screen positioning) would be done with absolute units
because their rigidity was more important that accessibility - we'd
accept that in a very small set or rare but real cases.

As the reality is that web design frequently uses pixels, then FF has
deliberately broken a CSS guideline on how browsers should size text by
allowing absolute text sizes to vary under user control in just the
same way as the relative sizes. This is annoying for those rare web
designers who do use each unit carefully and appropriately, but it's
understandable why they've done it.

 

[Dylan Parry]

Whoah, that's proving a bit much for my little brain. I didn't even
know you could do '1.1' without units. Isn't that equivalent to 110%?

Line-height is one of the few (the only?) properties that you can
specify without using units.

--
Dylan Parry
http://electricfreedom.org | http://webpageworkshop.co.uk

Programming, n: A pastime similar to banging one's head
against a wall, but with fewer opportunities for reward.

 

[K A Nuttall]

Line-height is one of the few (the only?) properties that you can
specify without using units.

Now that you mention it, I do remember seeing it a long time ago, in
font shorthand.

Back to the manual.

 

[Bergamot]

Say the browser medium typeface is left at the common setting of
16px...

You can stop right there. You aren't seeing (or are refusing to see)
that it just doesn't matter whether the browser's factory settings are
used or not.

For people with a larger base font size, say 18px, h1 would be about
21px and p about 14px.

Well heck. If I set my browser default to 18px, then dang it all, that's
what I want. 14px may be barely tolerable for comfortable reading, if
that. You don't get this, do you?

The point of reducing the wrap to 62.5% is that it's then a piece of
cake to duplicate design typeface sizes as neat multiples of 10 without
using a calculator.

I don't see what multiples of 10 have to do with anything.
body {font-size: 100%}
h1 {font-size: 150%}

No calculator required.

You could equally abandon the font-size on #wrap, and recalculate h1 as
1.1875em and p as 0.75em

That's just as bad. Anything less than 100% for paragraph text is
degraded usability. Only designers think otherwise. And only designers
care whether h1 comes out as 20px or 21px. It's just not that important.
If it really is, then HTML is the wrong media for the job. Try PDF or
(worse) Flash.

 

[Bergamot]

As the reality is that web design frequently uses pixels, then FF has
deliberately broken a CSS guideline on how browsers should size text by
allowing absolute text sizes to vary under user control in just the
same way as the relative sizes. This is annoying for those rare web
designers who do use each unit carefully and appropriately,

Rare is an understatement, I think.

but it's understandable why they've done it.

I guess it just depends on which side of the web page you're on whether
you think this is broken behavior or not. As a user, I say it's not
broken at all. As a designer, I never depend on CSS anyway so don't even
try to be so precise with font sizes.

Regardless, your "ideal" web isn't likely to happen, at least I don't
expect it will in my lifetime, so it's moot, eh?

 

[K A Nuttall]

Compare the rendering of these two examples:

Now I'm at home, I just did this.

Cripes. That's a big difference. I never found a definitive explanation
of the way line-height works in respect to font-size and inheritance,
but this certainly puts the cat amongst the pigeons.

I've just been googling for the html { font-size: 100% } suggestion
(mentioned elsewhere in this thread), and not had much success.

If anyone can suggest sites or pages which deals with these issues, I'd
be most grateful.

 

[K A Nuttall]

If anyone can suggest sites or pages which deals with these
issues, I'd be most grateful.

Found this one: http://usabletype.com/css/text/line-height/

Still looking for: html { font-size: 100% }

 

[Toby Inkster]

Line-height is one of the few (the only?) properties that you can
specify without using units.

And whatsmore, specifying it without the units has a different behaviour
than specifying it with units.

e.g.

<div style="font-size:20px;line-height:1em">
line-height is 20px.
<div style="font-size:50%">
line height is still 20px
</div>
</div>

versus

<div style="font-size:20px;line-height:1">
line-height is 20px.
<div style="font-size:50%">
line height is now 10px.
</div>
</div>

 

[Toby Inkster]

It depends really. I can see the cases both for /and/ against. Recently
I have started to use fieldset/legend/label elements along with CSS to
style forms, and I think they are slightly more user-friendly, if a bit
more complicated (at first) than simply bunging the form in a table.

I tend to use something along these lines:

<tr>
<th scope="row"><label for="foo">Foo:</label></th>
<td><input id="foo" name="foo"></td>
</tr>

Often with <fieldset> elements wrapped around the entire table.

 

[dorayme]

One of the things that has pissed me off recently, more than anything
else, is having to hit ctrl and + as soon as a page finishes loading.
What's even worse is that the average user doesn't even _know_ that they
can do that to increase the font size on a page they can't read.

As far as I know, this can't easily be done in IE (you have to
mouse to the miserable tight-arsed alternatives in the menu) and
pisses me off greatly even when firing up my Winbox to take a
peek at what IE is doing to my websites... Now i understand, this
key combo in 7 triggers a fancy doodle zooming, not the normal
text size change (It is typical of MS to do something untypical)

 

[dorayme]

That said, 100% is the default size of course, and you don't really need
to assign it at all, but doing so does reinforce and show your intent,
so I think it's a Good Thingâ„¢.

The rest of your points were discussed by those Brits who awoke five
hours before me. <g>

For those who wake five hours after you, what do you know about
that business of setting HTML to font-size 100% to fix some em
bug in IE? Wasn't sure if DP meant HTML or was neutral as between
Body and HTML on this issue... Perhaps I should ask him? Hoy
there, Dylan Parry...

 

[dorayme]

but you can also use the zoom tool in the bottom-right of the
window (or press ctrl +/- to achieve the same effect).

If only I could switch that functionality, and have text size respond
to ctrl +/- ...[/QUOTE]

My first encounter with IE7 was looking over the shoulder of a
cursing Windows user saying exactly this!