CSS font sizes - what's best to use?

[David Smithz]

Hi there,

I am changing a webform (PHP / MySQL driven) from using plain tables to CSS
so rather then have one large form that scrolls down the page (it has many
fields) I can achieve a much better look for the users.

I love what CSS can do and love the control it can give. However I'm a bit
unsure about setting sizes. I read that setting fonts at fixed sizes is a
bad idea as people should be able to control the size (if they set large on
the browser, they should be able to get large fonts)

However, if I using CSS layers and instead of using pixel perfect fonts I
used the "Large", Small etc. instead, I find that when the user chooses a
large font, yes they get bigger, but at the same time they overlap the other
CSS layers which are at fixed positions.
I use Dreamweaver to layout my forms as it is great to be able to drag and
drop.

What is the best way to do things because I'm inclined to get the way of
specific font sizes perhaps with a small and large view?
Is there a way of keeping everyone happy without compromising on the look?

Any guidelines greatly appreciated.

Kind regards

Dave

 

[K A Nuttall]

Any guidelines greatly appreciated.

Get a book called Bulletproof Web Design. I read it this summer -
fantastic.

I recommend setting BODY to font-size:medium*, then your page wrapper
DIV to font-size: 62.5%. That sets a base font size of 10px. Then set
sections within the page using percent or ems, like 120% (=12px), or
1.5em (=15px).

That way, you can predict roughly how big the fonts will be to the
nearest pixel, and user-agents can zoom in or out to their hearts'
content.

Try not to design with fixed height containers, unless you allow for
expanding text. Setting blocks using line-heights in percent or ems
allows for fonts to expand without overlapping.

It's a big subject, and I won't attempt to cover it in any detail, but
it's certainly possible, as long as you allow for expansion in your
layout.

(* old IE messes up medium, so you need tan hack to fix it)

 

[Beauregard T. Shagnasty]

Get a book called Bulletproof Web Design. I read it this summer -
fantastic.

I recommend setting BODY to font-size:medium*, then your page wrapper
DIV to font-size: 62.5%. That sets a base font size of 10px. Then set
sections within the page using percent or ems, like 120% (=12px), or
1.5em (=15px).

No, no, no ... Set your body font to 100% (instead of the keyword), and
then only set headings and footers to other sizes. That is all you need.

http://k75s.home.att.net/fontsize.html

For divs/columns set them with em units and all will grow appropriately
when a visitor increases font size. Most people won't need to though, if
you start at 100% - which, by chance - is *everyone's* default preferred
size.

That way, you can predict roughly how big the fonts will be to the
nearest pixel, and user-agents can zoom in or out to their hearts'
content.

You can't know how big my fonts will be.

Try not to design with fixed height containers, unless you allow for
expanding text. Setting blocks using line-heights in percent or ems
allows for fonts to expand without overlapping.

Only IE doesn't permit visitors to expand their font size, when pixel or
point units are used. All modern browsers will gleefully make the text
larger, and blow it outside fixed-sized boxes.

It's a big subject, and I won't attempt to cover it in any detail, but
it's certainly possible, as long as you allow for expansion in your
layout.

(* old IE messes up medium, so you need tan hack to fix it)

Use 100%, and the hack is not necessary.

 

[David Smithz]

Thanks for your input which seems sensible. I will hopefully get to check
the book out soon.

The other related question I have is on forms.

Is it still good to use Tables, contained within layers when creting forms
that the users need to fillout.

Reading around one tends to get the impressing that tables should always be
avoided, but if that is the case, then what is the best way for one to
layout a form which a user has to fill out.
Should each element be an individual layer which can be positioned anywhere?

Is this what other people are now doing out there?

Thanks

 

[Joe (GKF)]

Thanks for your input which seems sensible. I will hopefully get to check
the book out soon.

I hope that doesn't mean you intend to use anything other than 100% for
a default font-size.

The other related question I have is on forms.

Is it still good to use Tables, contained within layers when creting forms
that the users need to fillout.

yes. This is an appropriate use of tables.

Reading around one tends to get the impressing that tables should always be
avoided, but if that is the case, then what is the best way for one to
layout a form which a user has to fill out.

Avoid tables *except for tabular data* -that is, use tables whenever it
is appropriate to do so.

Should each element be an individual layer which can be positioned anywhere?
no
Is this what other people are now doing out there?

Thanks

no worries

 

[K A Nuttall]

Is it still good to use Tables, contained within layers when
creting forms that the users need to fillout.

It can be argued that forms are tables, so I think only the staunchest
pedant will argue against it.

 

[K A Nuttall]

No, no, no ... Set your body font to 100% (instead of the
keyword), and then only set headings and footers to other sizes.
That is all you need.

http://k75s.home.att.net/fontsize.html

What is the point of setting BODY to 100%?

I saw a .net article using html { font-size: 100%; } the other day.
What's that all about? Is it a hack?

It's all well and good people harking on about liquid layouts and
medium typeface defaults, but not all sites want to look like techie
blogs. I work with graphic designers who regularly produce layouts with
some 11 and 12px fonts. It's what many people want.

IIRC the IE5 bug is that it displays text one size larger than the
other browsers by default. The Tan hack is useful for correcting this
for supporting IE5.

Using a default size of 'medium' works on the assumption that most
people are using the default of a medium=16px typeface. Setting the
page container to 62.15% reduces that to 10px. Then individual sections
can be sized-up again easily to match a designer's font specifications.

This is just one way to do it. But it's a way that's easy to work with
pre-determined font-sizes, in a graphic design.

None of this sets the font size absolutely on the user's browser.
People can scale fonts up and down (even on IE), because at no time are
absolute measurements used to define typefaces.

The next thing to do is to design your pages assuming that users CAN
and WILL resize their default font size. This means allowing for fluid
box heights and wrapping text, and testing for it.

That's my rationale at the moment, and I'm happy with it. If you think
it's wrong then please feel free to give another.

 

[Dylan Parry]

I saw a .net article using html { font-size: 100%; } the other day.
What's that all about? Is it a hack?

Yes and no. 100% is the same as the keyword "medium", but unlike that
keyword it works properly across different browsers. It also /fixes/ an
"em" bug that shows in Internet Explorer (<=6 not sure about 7) that
means font sizes scale badly.

It's all well and good people harking on about liquid layouts and
medium typeface defaults, but not all sites want to look like techie
blogs. I work with graphic designers who regularly produce layouts
with some 11 and 12px fonts. It's what many people want.

No. It's what *designers* with 20-20 vision want. "Many" users aren't
blessed with such perfect vision - I'm certainly not, and I'm only 24.

Using a default size of 'medium' works on the assumption that most
people are using the default of a medium=16px typeface. Setting the
page container to 62.15% reduces that to 10px.

You can't assume this.

Then individual sections can be sized-up again easily to match a
designer's font specifications.

Again, the *designer's* specification. What do designers know about
usability? From what you're saying, SFA.

This is just one way to do it. But it's a way that's easy to work
with pre-determined font-sizes, in a graphic design.

Webdesign is *not* graphic design. Graphic design is making pretty
pictures for posters and other such *printed* media. The Web is not a
printed medium, and the sooner designers understand this, the better.

The next thing to do is to design your pages assuming that users CAN
and WILL resize their default font size. This means allowing for
fluid box heights and wrapping text, and testing for it.

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.

Do you think that said user will hang around and try to read the page,
or are they going to shout "grr" and leave your page?

--
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.

 

[Steve Pugh]

Get a book called Bulletproof Web Design.

And throw it away if what you wrote is any indication of what it
contains.

I recommend setting BODY to font-size:medium*,

Which is the default.

then your page wrapper DIV to font-size: 62.5%.

What if you don't have a page wrapper div because you don't need one?

So we've set the basic font size to less than two thirds of the user's
chosen default. Not a good start.

That sets a base font size of 10px.

Maybe, some of the time on some browsers. On my main browser 62.5%
would be 8.75px if my minimum font size setting didn't bump it up to a
slightly saner 12px.

Then set sections within the page using percent or ems,
like 120% (=12px), or 1.5em (=15px).

Or just do this wothout any of the preceeding rubbish and without
assuming that a % or em value will consistently give the same pixel
size.

That way, you can predict roughly how big the fonts will be to the
nearest pixel,

No you can't. Really you can't.

and user-agents can zoom in or out to their hearts' content.

They could anyway. It takes effort on the developer's part to stop text
zooming.

Try not to design with fixed height containers, unless you allow for
expanding text.

This is good advice, though you could omit everything after the comma.

Setting blocks using line-heights in percent or ems
allows for fonts to expand without overlapping.

No. Don't set line-height in a unit at all, use bare numbers. If you
set it in ems then it will be inherited at that size and won't respect
any font-size changes in child elements.

(* old IE messes up medium, so you need tan hack to fix it)

IE5 (and 6+ in quirks mode) treats the browser default as being
equivalent to small. So medium is one step bigger than default. With a
hack or conditional comment to set small instead of medium you get back
to where you started, i.e, the browser default. Doing nothing at all
has the same effect.

Steve

 

[Dylan Parry]

It can be argued that forms are tables, so I think only the staunchest
pedant will argue against it.

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.

--
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.

 

[Andy Dingley]

Get a book called Bulletproof Web Design.

I've deliberately not read that one (after hearing adverse comments),
but if it encourages this sort of bad technique, I'm glad I haven't.

I recommend setting BODY to font-size:medium*, then your page wrapper
DIV to font-size: 62.5%. That sets a base font size of 10px.

Please don't do this - it's a terrible idea.

Base font of 100%, then let the users take it from there.

 

[Andy Dingley]

It can be argued that forms are tables,

This is usenet - people will argue that the royal family don't really
eat babies, but that doesn't change anything.

Forms aren't any more tables than fish are lunch.
The layout of some controls on some forms may be desirable to use a
grid layout. Grid layouts in HTML might be argued to be tables, but
this is a long way from equating "forms in general" with them.

 

[Bergamot]

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.

I find it interesting that most people are very pleasantly surprised
when I teach them how to adjust their default text size. Most had been
suffering needlessly with too-small type on the average web page (that's
all those micro-font designer sites, BTW). They are disappointed,
however, when they find that IE's clumsy attempt at text zoom doesn't
work in a lot of cases.

Says something about designers knowing what people want. Or not.

 

[Bergamot]

I work with graphic designers who regularly produce layouts with
some 11 and 12px fonts. It's what many people want.

You mean it's what the graphic designers want. Remind them of the
differences between web and print media, please.

Using a default size of 'medium' works on the assumption that most
people are using the default of a medium=16px typeface. Setting the
page container to 62.15% reduces that to 10px.

Hmmm... My browser lets me set a minimum font size, which is currently
set at 17px.

Then individual sections
can be sized-up again easily to match a designer's font specifications.

So what will happen with a user's font size that is 70% larger than you
expect?

This is just one way to do it. But it's a way that's easy to work with
pre-determined font-sizes, in a graphic design.

There are no pre-determined font-sizes, unless you put the text in graphics.

The next thing to do is to design your pages assuming that users CAN
and WILL resize their default font size. This means allowing for fluid
box heights and wrapping text, and testing for it.

This seems to conflict with your earlier statement about sizing
individual sections to match a font specification. What did you really
mean by that?

That's my rationale at the moment, and I'm happy with it.

But it's not about you, or the graphic designer. It's about the people
that are going to visit the site. What research have you done that
convinces you your rationale is just? Taking the word of another graphic
designer is delusional at best, since they tend to promote what *they*
want, not real users.

 

[K A Nuttall]

Yes and no. 100% is the same as the keyword "medium", but unlike
that keyword it works properly across different browsers. It also
/fixes/ an "em" bug that shows in Internet Explorer (<=6 not sure
about 7) that means font sizes scale badly.

Thanks. That's a new one on me. I'll have to look into that further.

No. It's what *designers* with 20-20 vision want. "Many" users
aren't blessed with such perfect vision - I'm certainly not, and
I'm only 24.

Well, of course there's no point designing a site with writing too
small for the majority to read comfortably. Common sense dictates that
certain page elements have to be big enough on a default set-up.

You can't assume this.

I can't assume it? Don't most people use Internet explorer with a
default font of Times 16px? I didn't say everyone has it, just most
people. It's just a starting point. The trick is to then accomodate
everyone else as best you can.

Again, the *designer's* specification. What do designers know
about usability? From what you're saying, SFA.

Designers know about design. It's up to the developer to say what does
and does not work, and adjust the design accordingly, IMO.

Do you think that said user will hang around and try to read the
page, or are they going to shout "grr" and leave your page?

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

 

[K A Nuttall]

Which is the default.

So it is, silly me.

What if you don't have a page wrapper div because you don't need
one?

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

So we've set the basic font size to less than two thirds of the
user's chosen default. Not a good start.

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

No. Don't set line-height in a unit at all, use bare numbers. If
you set it in ems then it will be inherited at that size and won't
respect any font-size changes in child elements.

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

 

[K A Nuttall]

So what will happen with a user's font size that is 70% larger
than you expect?

I check that everything works 2-3 sizes larger than the default, so I'd
expect all text to be 70% larger, and not look like crap.

There are no pre-determined font-sizes, unless you put the text in
graphics.

What I mean is, that if you're following a design, it is easy to
translate the relative sizes of the typefaces in the design to font-
sizes in the web page.

 

[Beauregard T. Shagnasty]

What is the point of setting BODY to 100%?

Because then you don't have to set individual sizing for every other
type of element you may use in the page. The following becomes
unnecessary:

p { font-size: 100%; }
li { font-size: 100%; }
div { font-size: 100%; }
blockquote { font-size: 100%; }
etc etc...

If you are comfortable with the default headings sizes, all you really
need to assign is:

body { font-size: 100%; }
.legalese { font-size: 85%; }

assuming you have a copyright notice that can be smaller. 85% is about
the lower limit, though.

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>

 

[Andy Dingley]

however, when they find that IE's clumsy attempt at text zoom doesn't
work in a lot of cases.

IE doesn't do "text zoom", it (correctly) changes the base size for
text. This is better in an ideal world, but as your users have found
out it relies on clueful designers.

FF gets things strictly wrong, in favour of delivering a feature that's
more useful to more people more of the time.

It's hard to criticise either of these approaches. They're both
deliberate, they're both defensible. 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. Lets stick
to criticising IE for what's clearly _wrong_ about it though, not
complain about a correct action in an incorrect world.

 

[Dylan Parry]

IE doesn't do "text zoom", it (correctly) changes the base size for
text.

Actually, IE7 does both. You can still change the text size using the
"view" menu (if you can figure out how to re-enable the menu system
first!), but you can also use the zoom tool in the bottom-right of the
window (or press ctrl +/- to achieve the same effect).

FF gets things strictly wrong, in favour of delivering a feature that's
more useful to more people more of the time.

Could you explain this a bit more? It's not that I disagree, but rather
that I don't understand what you mean

--
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.