By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,740 Members | 844 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,740 IT Pros & Developers. It's quick & easy.

Best way to specify font size

P: n/a
JD
Hi guys

What's the best way to specify font size using CSS? I try to avoid
absolute units like pt and px because then users can't resize the fonts
in IE, but % and em are a complete pain to use IMO. I read somewhere (a
W3C tip I think) that the best way is to specify a "base" size and then
have all your fonts relative that, but I'm not sure how that works.

TIA
Dec 11 '05 #1
Share this Question
Share on Google+
16 Replies


P: n/a
Els
JD wrote:
Hi guys

What's the best way to specify font size using CSS? I try to avoid
absolute units like pt and px because then users can't resize the fonts
in IE, but % and em are a complete pain to use IMO. I read somewhere (a
W3C tip I think) that the best way is to specify a "base" size and then
have all your fonts relative that, but I'm not sure how that works.


What's the pain in using %?
Just set 100% for <body> (the "base" size), and then use other
percentages like 85% for small print and 120% for headings, etc.
Those are indeed relative to the percentage set for the <body>.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Dec 11 '05 #2

P: n/a
JD wrote:
What's the best way to specify font size using CSS? I try to avoid
absolute units like pt and px because then users can't resize the
fonts in IE, but % and em are a complete pain to use IMO. I read
somewhere (a W3C tip I think) that the best way is to specify a
"base" size and then have all your fonts relative that, but I'm not
sure how that works.


body { font-size: 100%; }
h1 {font-size: 160%; } /* set hx as appropriate */
h2 {font-size: 140%; }
h3 {font-size: 125%; }
..legalese {font-size: 85%; }

Not much of a pain. <g> If your site fails with these kinds of
settings, something else is wrong.

Oh, in future for CSS questions, use
comp.infosystems.www.authoring.stylesheets

--
-bts
-Warning: I brake for lawn deer
Dec 11 '05 #3

P: n/a
On Sun, 11 Dec 2005 18:45:28 +0000, JD <us**@example.net> wrote:
What's the best way to specify font size using CSS?


I use %, personally. The problem is that users' needs vary so much,
trying to control the size of the text is a pointless endeavor. In the
end, the user is most accustomed to the default font size (100%), and
if they need to change it, they can, through the browser.

If I may, I think one of the pitfalls in web design is trying to get
everything perfect. Graceful degradation is the best we can shoot for.

Ian
--
http://www.bookstacks.org/
Dec 11 '05 #4

P: n/a
__/ [Els] on Sunday 11 December 2005 18:54 \__
JD wrote:
Hi guys

What's the best way to specify font size using CSS? I try to avoid
absolute units like pt and px because then users can't resize the fonts
in IE, but % and em are a complete pain to use IMO. I read somewhere (a
W3C tip I think) that the best way is to specify a "base" size and then
have all your fonts relative that, but I'm not sure how that works.


What's the pain in using %?
Just set 100% for <body> (the "base" size), and then use other
percentages like 85% for small print and 120% for headings, etc.
Those are indeed relative to the percentage set for the <body>.


Overall, this probably depends on the page in question. There are cases where
the font size should be relative to the screen/window size. In such
circumstances, 'em' should be used. It takes an example to give a proper
answer, in my humble opinion.

Roy

--
Roy S. Schestowitz | "Software sucks. Open Source sucks less."
http://Schestowitz.com | SuSE Linux | PGP-Key: 0x74572E8E
7:00am up 1 day 14:08, 18 users, load average: 0.50, 0.63, 0.57
Dec 12 '05 #5

P: n/a
Els
Roy Schestowitz wrote:
__/ [Els] on Sunday 11 December 2005 18:54 \__
JD wrote:
Hi guys

What's the best way to specify font size using CSS? I try to avoid
absolute units like pt and px because then users can't resize the fonts
in IE, but % and em are a complete pain to use IMO. I read somewhere (a
W3C tip I think) that the best way is to specify a "base" size and then
have all your fonts relative that, but I'm not sure how that works.


What's the pain in using %?
Just set 100% for <body> (the "base" size), and then use other
percentages like 85% for small print and 120% for headings, etc.
Those are indeed relative to the percentage set for the <body>.


Overall, this probably depends on the page in question. There are cases where
the font size should be relative to the screen/window size. In such
circumstances, 'em' should be used. It takes an example to give a proper
answer, in my humble opinion.


It also takes an example to explain how 'em' is relative to
screen/window size and % isn't.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: La Bouche - Be My Lover
Dec 12 '05 #6

P: n/a
__/ [Els] on Monday 12 December 2005 07:27 \__
Roy Schestowitz wrote:
__/ [Els] on Sunday 11 December 2005 18:54 \__
JD wrote:

Hi guys

What's the best way to specify font size using CSS? I try to avoid
absolute units like pt and px because then users can't resize the fonts
in IE, but % and em are a complete pain to use IMO. I read somewhere (a
W3C tip I think) that the best way is to specify a "base" size and then
have all your fonts relative that, but I'm not sure how that works.

What's the pain in using %?
Just set 100% for <body> (the "base" size), and then use other
percentages like 85% for small print and 120% for headings, etc.
Those are indeed relative to the percentage set for the <body>.


Overall, this probably depends on the page in question. There are cases
where the font size should be relative to the screen/window size. In such
circumstances, 'em' should be used. It takes an example to give a proper
answer, in my humble opinion.


It also takes an example to explain how 'em' is relative to
screen/window size and % isn't.


I believe that this argument will be meaningless to development which is
Internet Explorer-centric:

http://archivist.incutio.com/viewlist/css-discuss/1439

As far as I can gather, em gives a great deal of power. I have just tried
some pages of mine under Opera (which I know you advocate) to reveal some
unpleasant interpretations of the source. Overall, Opera at its present
seems excellent so I am glad I took your word.

Roy
Dec 12 '05 #7

P: n/a
Els
Roy Schestowitz wrote:
__/ [Els] on Monday 12 December 2005 07:27 \__
Roy Schestowitz wrote:
__/ [Els] on Sunday 11 December 2005 18:54 \__
JD wrote:

> What's the best way to specify font size using CSS? I try to avoid
> absolute units like pt and px because then users can't resize the fonts
> in IE, but % and em are a complete pain to use IMO. I read somewhere (a
> W3C tip I think) that the best way is to specify a "base" size and then
> have all your fonts relative that, but I'm not sure how that works.

What's the pain in using %?
Just set 100% for <body> (the "base" size), and then use other
percentages like 85% for small print and 120% for headings, etc.
Those are indeed relative to the percentage set for the <body>.

Overall, this probably depends on the page in question. There are cases
where the font size should be relative to the screen/window size. In such
circumstances, 'em' should be used. It takes an example to give a proper
answer, in my humble opinion.
It also takes an example to explain how 'em' is relative to
screen/window size and % isn't.


I believe that this argument will be meaningless to development which is
Internet Explorer-centric:

http://archivist.incutio.com/viewlist/css-discuss/1439


That's about sizes for elements other than font.
Yes, if I want a box to scale with the text inside, I use em, as it's
relative to the font-size, while percentage is relative to the
viewport or parent element. (I never saw a difference between IE and
the other browsers in that btw - maybe something in Quirksmode?)

I still don't see how em is relative to screensize really.
A font-size of 1em is equal to a font-size of 100% afaik.
IE has a scaling problem if the font-size for <body> isn't set in
percentages, but other than that, I see no difference.
As far as I can gather, em gives a great deal of power. I have just tried
some pages of mine under Opera (which I know you advocate) to reveal some
unpleasant interpretations of the source. Overall, Opera at its present
seems excellent so I am glad I took your word.


I advocate Opera?
Hmm.. might have done by accident some time... ;-)
I use Opera and Firefox, and I still prefer Firefox, although I'm
starting to use Opera more and more for surfing. Not because I think
it's a better browser, but because I like to keep more than one
browser open, so it's easier to differentiate between work-tabs and
surf-tabs.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: The Cult - She Sells Sanctuary (Long Version)
Dec 12 '05 #8

P: n/a
Ian Rastall <id*******@gmail.com> writes:
On Sun, 11 Dec 2005 18:45:28 +0000, JD <us**@example.net> wrote:
What's the best way to specify font size using CSS?


I use %, personally. The problem is that users' needs vary so much,
trying to control the size of the text is a pointless endeavor. In the
end, the user is most accustomed to the default font size (100%), and
if they need to change it, they can, through the browser.


....actually, anecdotal evidence suggests that the user is generally
unaccustomed to the default font size, finding it larger than the
majority of pages they view.

However, that's not a reason to avoid using the default size -
most users seem to prefer it to the 'common' smaller sizes, and those
that don't can resize it.

--
Chris
Dec 12 '05 #9

P: n/a
Els wrote:

What's the pain in using %?
Just set 100% for <body> (the "base" size), and then use other
percentages like 85% for small print and 120% for headings, etc.
Those are indeed relative to the percentage set for the <body>.

It is a percentage of whatever the size is for the containing element,
yes? If I set the font-size to 85% for a <div>, then 85% again for a <p>
in that div, the final size is 72% of the original font-size spec.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Dec 12 '05 #10

P: n/a
Els
Jim Moe wrote:
Els wrote:

What's the pain in using %?
Just set 100% for <body> (the "base" size), and then use other
percentages like 85% for small print and 120% for headings, etc.
Those are indeed relative to the percentage set for the <body>.

It is a percentage of whatever the size is for the containing element,
yes? If I set the font-size to 85% for a <div>, then 85% again for a <p>
in that div, the final size is 72% of the original font-size spec.


Yup, same goes for 'em' afaik.
I don't find that a problem though. I don't set 85% for a <div> *and*
a <p>. If I want all content of a certain <div> to have a font-size of
85%, I set it as
div.class p{font-size:85%;}

In a properly marked up document, there is no text outside <p>
elements, unless it's in a heading or a table.

Can you give a real life example of a situation where nested
font-sizing might be a problem for you?

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Magnum - Rockin' Chair
Dec 12 '05 #11

P: n/a
Els wrote:

Can you give a real life example of a situation where nested
font-sizing might be a problem for you?

It was just an observation, not a problem. Your original statement
implied that % only referenced the <body> size, not the container's.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Dec 12 '05 #12

P: n/a
Els
Jim Moe wrote:
Els wrote:

Can you give a real life example of a situation where nested
font-sizing might be a problem for you?

It was just an observation, not a problem. Your original statement
implied that % only referenced the <body> size, not the container's.


Okay, understood now - missed that one :-)

In practice both are almost always true for myself though. I hardly
ever set a font-size to both a child and parent element other than
<body>.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Live - Stage
Dec 13 '05 #13

P: n/a
Els wrote:

It was just an observation, not a problem. Your original statement
implied that % only referenced the <body> size, not the container's.


Okay, understood now - missed that one :-)

In practice both are almost always true for myself though. I hardly
ever set a font-size to both a child and parent element other than
<body>.

I also. But I am constantly updating our website as I learn more about
HTML and CSS. Occasionally these little issues arise ("Why the hell is
that font so small!") as updates are applied.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Dec 13 '05 #14

P: n/a
Els wrote:
Roy Schestowitz wrote:
__/ [Els] on Sunday 11 December 2005 18:54 \__
JD wrote:
Hi guys
What's the best way to specify font size using CSS? I try to avoid
absolute units like pt and px because then users can't resize the fonts
in IE, but % and em are a complete pain to use IMO. I read somewhere (a
W3C tip I think) that the best way is to specify a "base" size and then
have all your fonts relative that, but I'm not sure how that works.
Where possible, I prefer to use the font-size keywords, xx-small,
x-small, small, medium, large, x-large and xx-large, though I rarely use
anything smaller than 'small', particularly for body copy. Where more
precise sizes are needed, I use ems, but take care with them because of
the following problem...
What's the pain in using %?
Just set 100% for <body> (the "base" size), and then use other
percentages like 85% for small print and 120% for headings, etc.
Those are indeed relative to the percentage set for the <body>.

The problem with that approach is that the font sizes are relative to
that of the parent element. For example, if you specify:

li { font-size: 80%; }

Nested lists will get smaller and smaller.

<body>
<ul>
<li>This will be 80% of body
<ul>
<li>This will be 80% of the li, which equals 64% of body

The same issue applies to em and ex as well.
Overall, this probably depends on the page in question. There are cases where
the font size should be relative to the screen/window size. In such
circumstances, 'em' should be used. It takes an example to give a proper
answer, in my humble opinion.


It also takes an example to explain how 'em' is relative to
screen/window size and % isn't.


For font-size, neither the em unit or percentages are relative to to the
screen, window or viewport size at all, they're always relative to the
font size of the parent element.

--
Lachlan Hunt
http://lachy.id.au/
http://GetFirefox.com/ Rediscover the Web
http://GetThunderbird.com/ Reclaim your Inbox
Dec 13 '05 #15

P: n/a
Els
Lachlan Hunt wrote:
Els wrote:
Roy Schestowitz wrote:
__/ [Els] on Sunday 11 December 2005 18:54 \__
JD wrote:
> Hi guys
> What's the best way to specify font size using CSS? I try to avoid
> absolute units like pt and px because then users can't resize the fonts
> in IE, but % and em are a complete pain to use IMO. I read somewhere (a
> W3C tip I think) that the best way is to specify a "base" size and then
> have all your fonts relative that, but I'm not sure how that works.
Where possible, I prefer to use the font-size keywords, xx-small,
x-small, small, medium, large, x-large and xx-large, though I rarely use
anything smaller than 'small', particularly for body copy. Where more
precise sizes are needed, I use ems, but take care with them because of
the following problem...
That is only one problem with ems. Another one is that a bug in IE
causes the font-size respond exponentially to the visitor's browser's
font-size settings when the <body> font-size is not set in %.
What's the pain in using %?
Just set 100% for <body> (the "base" size), and then use other
percentages like 85% for small print and 120% for headings, etc.
Those are indeed relative to the percentage set for the <body>.
The problem with that approach is that the font sizes are relative to
that of the parent element. For example, if you specify:

li { font-size: 80%; }

Nested lists will get smaller and smaller.

<body>
<ul>
<li>This will be 80% of body
<ul>
<li>This will be 80% of the li, which equals 64% of body


When I have a <ul> that needs to be 80% font-size (not likely! :-P), I
set the font-size to the first <li> only.
li{font-size:80%;}
li li{font-size:100%;}

That is, if I would have a good reason not to set it on the container:
div.navigation{font-size:80%;}
The same issue applies to em and ex as well.
Overall, this probably depends on the page in question. There are cases where
the font size should be relative to the screen/window size. In such
circumstances, 'em' should be used. It takes an example to give a proper
answer, in my humble opinion.


It also takes an example to explain how 'em' is relative to
screen/window size and % isn't.


For font-size, neither the em unit or percentages are relative to to the
screen, window or viewport size at all, they're always relative to the
font size of the parent element.


That's what I meant ;-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Spargo - Hip Hap Hop
Dec 13 '05 #16

P: n/a
On Sun, 11 Dec 2005 18:45:28 +0000, JD <us**@example.net> wrote:
in IE, but % and em are a complete pain to use IMO.


So don't use them then. The default settings for fonts will cover most
of what you need already.
Dec 13 '05 #17

This discussion thread is closed

Replies have been disabled for this discussion.