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

font-size question...

P: n/a
I have heard so much preaching here about how font sizes should be set
as percentages so users can change font-sizes on their browsers... ok,
so now at work am working on a site where we need to do precisely that
b/c it's for an audience that some users maybe be visually-impaired..
but I can't get it to work right, problem is that font sizes are not
consistent across diff elements.. code:

body {text-align:center; /* to center main-content div */
font-family: verdana, arial, helvetica, sans-serif; font-size:100%;
line-height: 100%; margin-top:20px; margin-left:0px; margin-right:0px;
margin-bottom:0px}

td,p,li,div,a { font-family: verdana, arial, helvetica, sans-serif;
font-size:100%; line-height: 100%;}

font inside these diff. elements are different sizes..

essentially we have a body{} selector (is this right name for it?) with
'text-align:center' so we can center main-content div, which is a width
of approx 600px, as in

#content {width: 612px; font-size: 70%; line-height: 190%;
margin: 0 auto 0 auto; text-align:left; }

they have 70% for font-size here; so: if further down we have more
elements, such as tables, more divs, spans, <a>'s, etc.. with NO FONT
SIZE SPECIFICATION, what size will fonts be? problem is they're diff
sizes for diff elements; inside this main-content div I have tables,
<a>'s etc.. font-sizes for these diff. elements are different... why is
this..

conversely, if, inside main-content div I do
h1 { font-family:Georgia, "Times New Roman", Times, serif;
font-size:190%; font-weight:normal; color:#003366;}

font-size will be 190% of font specified in body{} or #content{}
(<h1>..</h1being inside #content div..) ??

thank you very much..


Aug 1 '06 #1
Share this Question
Share on Google+
16 Replies


P: n/a
maya wrote:
I have heard so much preaching here about how font sizes should be set
as percentages so users can change font-sizes on their browsers... ok,
so now at work am working on a site where we need to do precisely that
b/c it's for an audience that some users maybe be visually-impaired..
but I can't get it to work right, problem is that font sizes are not
consistent across diff elements.. code:
Font sizes are inherited from the parent. "body {font-size:100%}", for
instance, means the font-size is 100% of the parent's font size, which is
html and defaults to the font size defined in the browser. The font size
then applies to all elements contained by "body".
If you later set the font-size to 70%, say in a div, that is inherited
by all elements within that context. Using 100% within the context changes
nothing. Setting font-size:70% is 70% of 70% of the original size; setting
font-size:120% is 120% of 70% of the original size.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Aug 1 '06 #2

P: n/a
Els
maya wrote:
I have heard so much preaching here about how font sizes should be set
as percentages so users can change font-sizes on their browsers... ok,
so now at work am working on a site where we need to do precisely that
b/c it's for an audience that some users maybe be visually-impaired..
but I can't get it to work right, problem is that font sizes are not
consistent across diff elements.. code:

body {text-align:center; /* to center main-content div */
font-family: verdana, arial, helvetica, sans-serif; font-size:100%;
line-height: 100%; margin-top:20px; margin-left:0px; margin-right:0px;
margin-bottom:0px}
Do you really want the line-height to be as high as the font? It makes
for difficult reading between the lines iyswim ;-)
td,p,li,div,a { font-family: verdana, arial, helvetica, sans-serif;
font-size:100%; line-height: 100%;}
There is no need to set those sizes if you've set it for <body>
already.
font inside these diff. elements are different sizes..

essentially we have a body{} selector (is this right name for it?) with
'text-align:center' so we can center main-content div, which is a width
of approx 600px, as in

#content {width: 612px; font-size: 70%; line-height: 190%;
margin: 0 auto 0 auto; text-align:left; }
The text-align:center on the body is only needed to center #content in
IE5, or IE6 in quirksmode. I take it that's what you intended, so
indeed, both text-align:center on <bodyand margin: 0 auto; (does the
same as margin:0 auto 0 auto; ) on the #content div, is a good plan.
they have 70% for font-size here; so: if further down we have more
elements, such as tables, more divs, spans, <a>'s, etc.. with NO FONT
SIZE SPECIFICATION, what size will fonts be? problem is they're diff
sizes for diff elements; inside this main-content div I have tables,
<a>'s etc.. font-sizes for these diff. elements are different... why is
this..
If you have an element with font-size:70%, and then a child of that
element with font-size:100%, it will have 100% of 70%, is 70% of the
original body font-size.
conversely, if, inside main-content div I do
h1 { font-family:Georgia, "Times New Roman", Times, serif;
font-size:190%; font-weight:normal; color:#003366;}

font-size will be 190% of font specified in body{} or #content{}
(<h1>..</h1being inside #content div..) ??
If #content has 70%, than H1 will be 190%(h1) of 70%(parent #content)
of 100%(parent body).
thank you very much..
You're welcome :-)

One thing to know: some browsers (forgot which!) need the <tdto have
a font-size of 100% explicitly, in order for it to take on its
parent's font-size.
Say your #content div has 70%, then in some browsers, if you don't set
a font-size for the <td>s, they will still assume the original 100%,
instead of 100% of the 70%. So that's why it's always a good idea to
give TD a 100% font-size, if you don't want it to be larger than the
text outside the table.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Rush - Subdivisions
Aug 1 '06 #3

P: n/a
maya <ma********@yahoo.comscripsit:
I have heard so much preaching here about how font sizes should be set
as percentages
Actually, the main message is "don't set the font size". As a secondary
message, _if and when_ you set the font size, use percentages, and use them
cleverly - setting the size only for elements that "need" it.
font-family: verdana, arial, helvetica, sans-serif; font-size:100%;
line-height: 100%;
It's been repeatedly explained in this group why Verdana should not be used
on web pages, except perhaps for special occasions (like headings). It's
logically redundant to set the font size of body to 100%, but some people do
that to avoid some suspected browser bugs. Setting line-height to 100% means
setting it to the font size of the element, so it's not a good idea at all;
besides, it's the computed size that will be inherited. It's best to set
line-height using a pure number, like 1.25 or 1.3 (these values are suitable
for typical sans-serif fonts); see the description of line-height in a CSS
tutorial or specification.
#content {width: 612px; font-size: 70%; line-height: 190%;
margin: 0 auto 0 auto; text-align:left; }
What's the point of setting the width in pixels, and to a fairly large value
at that, if you are aiming at flexible design? Combining rigid layout with
flexible font size is illogical and may cause surprises (especially when you
test the page with very large font sizes).

Setting font-size to 70% makes it too small. You have fallen into the
"Verdana trap". Verdana may look readable even in 70% size, but not all
users will have or will use Verdana. In general, if the text is readable in
70% of the user-selected font size, the user has probably selected too big a
font. I would set the limit of font reduction to 80%. (Leave smaller sizes
for use in &purgatory; where lawyers will be forced to actually read all the
text they have ever written, in a "legal notice" font size.)

Besides, the selector name suggests that you intend to use 70% for the
_content proper_ of a page, for copy text. Just don't. Copy text should be
defaulted to font-size:100%. Some people (including me in my most liberal
days) say that font-size:90% (or maybe even 80%) is OK when font-family is
set to Arial, sans-serif, but that's questionable.

Anyway, if you do that, just don't set any font sizes for inner elements.
They will normally default to 100%. (Well, font size in form fields
typically defaults to something like 90%, but that's a special case. Anyway,
be careful when setting font sizes for nested elements, avoiding undesired
cumulative effects of percentages.)

Setting line-height to 190% looks rather strange. You don't need to set it
at all when you have set it as a pure number for an enclosing element.
conversely, if, inside main-content div I do
h1 { font-family:Georgia, "Times New Roman", Times, serif;
font-size:190%; font-weight:normal; color:#003366;}
Using a serif font for a main heading might not be a good idea.
font-size will be 190% of font specified in body{} or #content{}
(<h1>..</h1being inside #content div..) ??
The font size will be 190% of the parent element's font size. The parent
element would here be the one referred to as #content.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Aug 2 '06 #4

P: n/a
On 2006-08-02, Jukka K. Korpela wrote:
maya <ma********@yahoo.comscripsit:
>I have heard so much preaching here about how font sizes should be set
as percentages

Actually, the main message is "don't set the font size". As a secondary
message, _if and when_ you set the font size, use percentages, and use them
cleverly - setting the size only for elements that "need" it.
>font-family: verdana, arial, helvetica, sans-serif; font-size:100%;
line-height: 100%;

It's been repeatedly explained in this group why Verdana should not be used
on web pages, except perhaps for special occasions (like headings).
It has not. There is no reason not to use it.

The arguments have been valid against using fixed sizes, not
against using Verdana.

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Aug 2 '06 #5

P: n/a
Chris F.A. Johnson wrote:
The arguments have been valid against using fixed sizes, not against
using Verdana.
The problem is that too many designers who choose Verdana also set the
size to something like 80% or 10px. Why? Because 100% Verdana looks too
big on their monitors, and they don't know how to adjust their own
browsers.

Then the visitor who does not have Verdana sees his own fallback font
too small to read.

--
-bts
-Warning: I brake for lawn deer
Aug 2 '06 #6

P: n/a
On Wed, 2 Aug 2006, Chris F.A. Johnson wrote:
On 2006-08-02, Jukka K. Korpela wrote:
It's been repeatedly explained in this group why Verdana should
not be used on web pages, except perhaps for special occasions
(like headings).

It has not.
The record shows that you are misinformed. It most certainly *has*
been repeatedly explained, and I assume you wouldn't be so foolish as
to deliberately lie to us.
There is no reason not to use it.
Since you appear to be clue-blind (how could you ever have missed
all those postings?) then you are in no position to make such a
statement. A more accurate statement of the situation would be that
you are not yet aware of the reasons not to use it.
The arguments have been valid against using fixed sizes, not
against using Verdana.
When you've caught up with what's common knowledge around here, you'll
be able to explain to us why the matters of concern are "no reason".

Aug 2 '06 #7

P: n/a
On 2006-08-02, Beauregard T. Shagnasty wrote:
Chris F.A. Johnson wrote:
>The arguments have been valid against using fixed sizes, not against
using Verdana.

The problem is that too many designers who choose Verdana also set the
size to something like 80% or 10px. Why? Because 100% Verdana looks too
big on their monitors, and they don't know how to adjust their own
browsers.

Then the visitor who does not have Verdana sees his own fallback font
too small to read.
Exactly; the problem is not Verdana. The problem is brain-dead
designers and non-default sizes. As was pointed out in a previous
post, there is less difference between Verdana and Helvetica than
between Helvetica and Times.

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Aug 2 '06 #8

P: n/a
On 2006-08-02, Alan J. Flavell wrote:
On Wed, 2 Aug 2006, Chris F.A. Johnson wrote:
>On 2006-08-02, Jukka K. Korpela wrote:
It's been repeatedly explained in this group why Verdana should
not be used on web pages, except perhaps for special occasions
(like headings).

It has not.

The record shows that you are misinformed. It most certainly *has*
been repeatedly explained, and I assume you wouldn't be so foolish as
to deliberately lie to us.
>There is no reason not to use it.

Since you appear to be clue-blind (how could you ever have missed
all those postings?) then you are in no position to make such a
statement. A more accurate statement of the situation would be that
you are not yet aware of the reasons not to use it.
I've read them all; none of them makes the case you claim.
> The arguments have been valid against using fixed sizes, not
against using Verdana.

When you've caught up with what's common knowledge around here, you'll
be able to explain to us why the matters of concern are "no reason".
It's not common knowlege; it's urban legend.

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Aug 2 '06 #9

P: n/a
Chris F.A. Johnson wrote:
On 2006-08-02, Beauregard T. Shagnasty wrote:
>Chris F.A. Johnson wrote:
>>The arguments have been valid against using fixed sizes, not against
using Verdana.

The problem is that too many designers who choose Verdana also set
the size to something like 80% or 10px. Why? Because 100% Verdana
looks too big on their monitors, and they don't know how to adjust
their own browsers.

Then the visitor who does not have Verdana sees his own fallback
font too small to read.

Exactly; the problem is not Verdana. The problem is brain-dead
designers and non-default sizes.
Those brain-dead deeziners will be less apt to screw up if they don't
use Verdana.
As was pointed out in a previous post, there is less difference
between Verdana and Helvetica than between Helvetica and Times.
Why are you comparing two sans-serif fonts with a sans and a serif font?

Ok, you like Verdana.

--
-bts
-Warning: I brake for lawn deer
Aug 2 '06 #10

P: n/a
On 2006-08-02, Beauregard T. Shagnasty wrote:
Chris F.A. Johnson wrote:
>On 2006-08-02, Beauregard T. Shagnasty wrote:
>>Chris F.A. Johnson wrote:

The arguments have been valid against using fixed sizes, not against
using Verdana.

The problem is that too many designers who choose Verdana also set
the size to something like 80% or 10px. Why? Because 100% Verdana
looks too big on their monitors, and they don't know how to adjust
their own browsers.

Then the visitor who does not have Verdana sees his own fallback
font too small to read.

Exactly; the problem is not Verdana. The problem is brain-dead
designers and non-default sizes.

Those brain-dead deeziners will be less apt to screw up if they don't
use Verdana.
>As was pointed out in a previous post, there is less difference
between Verdana and Helvetica than between Helvetica and Times.

Why are you comparing two sans-serif fonts with a sans and a serif font?
Because the issue is X-height, not serif versus sans-serif.
Ok, you like Verdana.
Not especially; I prefer Helvetica.

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Aug 2 '06 #11

P: n/a
On Wed, 2 Aug 2006, Chris F.A. Johnson wrote:
I've read them all; none of them makes the case you claim.
First you claimed that it hadn't been explained, but now you claim to
have read all of the explanations. Don't you see the cognitive
dissonance in that?
It's not common knowlege; it's urban legend.
Feel free to point me at the URLs which convincingly refute this
so-called "urban legend". I honestly (and I really do mean
"honestly") have never found them. I've found some which make
unsupported assertions, but that's not what I'd call proof.

Aug 2 '06 #12

P: n/a
On 2006-08-02, Alan J. Flavell wrote:
On Wed, 2 Aug 2006, Chris F.A. Johnson wrote:
> I've read them all; none of them makes the case you claim.

First you claimed that it hadn't been explained, but now you claim to
have read all of the explanations. Don't you see the cognitive
dissonance in that?
Let me modify it slightly: I have read all the so-called
explanations. They do not make the case you claim.
> It's not common knowlege; it's urban legend.

Feel free to point me at the URLs which convincingly refute this
so-called "urban legend".
There's nothing to refute. Can you point to one where the issue is
the font and not the brain-dead use of font sizes?
I honestly (and I really do mean "honestly") have never found them.
I've found some which make unsupported assertions, but that's not
what I'd call proof.
--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Aug 2 '06 #13

P: n/a
Deciding to do something for the good of humanity, "Chris F.A. Johnson"
<cf********@gmail.comdeclared in
comp.infosystems.www.authoring.stylesheets:
There's nothing to refute. Can you point to one where the issue is
the font and not the brain-dead use of font sizes?
You mean like the oft-cited sbpoley page?
http://www.xs4all.nl/~sbpoley/webmatters/verdana.html

Certainly setting the font size too small is one of the issues, but not
the only one. Though the results of leaving the font size at the default
are less severe than those of reducing it.

--
Mark Parnell
My Usenet is improved; yours could be too:
http://blinkynet.net/comp/uip5.html
Aug 2 '06 #14

P: n/a
On 2006-08-02, Mark Parnell wrote:
Deciding to do something for the good of humanity, "Chris F.A. Johnson"
<cf********@gmail.comdeclared in
comp.infosystems.www.authoring.stylesheets:
> There's nothing to refute. Can you point to one where the issue is
the font and not the brain-dead use of font sizes?

You mean like the oft-cited sbpoley page?
http://www.xs4all.nl/~sbpoley/webmatters/verdana.html

Certainly setting the font size too small is one of the issues, but not
the only one. Though the results of leaving the font size at the default
are less severe than those of reducing it.
The result is a slightly larger x-height, and somewhat wider type
than Helvetica or Arial. It has no other effect, and it is not
unattractive.

One might just as well say don't use Times as it is much smaller.
(Or Garamond, which is smaller still.) In fact, those would be much
more sensible directives.

The difference between Verdana and Helvetica/Arial is less than
between many other pairs of fonts.

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Aug 2 '06 #15

P: n/a
Rik
Beauregard T. Shagnasty wrote:
Chris F.A. Johnson wrote:
>>On 2006-08-02, Beauregard T. Shagnasty wrote:
Chris F.A. Johnson wrote:
The arguments have been valid against using fixed sizes, not
against using Verdana.

The problem is that too many designers who choose Verdana also set
the size to something like 80% or 10px. Why? Because 100% Verdana
looks too big on their monitors, and they don't know how to adjust
their own browsers.

Then the visitor who does not have Verdana sees his own fallback
font too small to read.

Exactly; the problem is not Verdana. The problem is brain-dead
designers and non-default sizes.

Those brain-dead deeziners will be less apt to screw up if they don't
use Verdana.
So?

If I design it myself, I'm sure I'm not messing with the font-sizes. That
other people don't know how to use fonts is no reason to condemn the font
all together.

Grtz,
--
Rik Wasmus
Aug 3 '06 #16

P: n/a
On Thu, 3 Aug 2006, Rik wrote:
If I design it myself, I'm sure I'm not messing with the font-sizes.
No, you can't be sure. Just to mention one issue, rounding effects
can mean that a particular CSS size (say, 1.0em) will look quite
different on different browser font size settings and resolutions.

The "concordat" between author and reader is supposed to be that
1.0em is their preferred size, and if they don't like that, they will
change their browser settings accordingly. I'm sure not going to set
my preferred font size to, effectively, 1.4em so as to compensate for
idiot authors who specify body font sizes as 0.7em. In Seamonkey, I
simply set a minimum font size, and damn the authors whose sites break
in response.
That other people don't know how to use fonts is no reason to
condemn the font all together.
In a sense, that's what we've been saying all along. Fonts have
different perceived sizes at the same nominal specified size, e.g
Times New Roman (like many other serif fonts) is perceived at somewhat
smaller than "average", whereas Verdana is sufficiently large as to
cause these arguments. As sbpoley's page effectively demonstrates,
and the actions of all those folks who confidently assert "I know how
to use fonts" - and set their base text size to 0.7em - and shut their
ears to any complaints - are proving every day.

But it's not about "knowing how to use fonts", it's about the fact
that present-day CSS has /no way/ of addressing this particular
problen. *If* there was a practical way of dealing with the issue,
Verdana could be used without qualms on (x)HTML pages.

I reckon that a solution would be an improved version of CSS/2.0
font-size-adjust, in which the perceived size of each font for a given
nominal size could be taken into account. This isn't really the
simplified em-to-ex ratio that was used in CSS/2.0, but something
which takes *perceived* size into account.

Until that's sorted out, I'm in the sbpoley camp: you can use Verdana
for any situation where you are genuinely in control of the display
situation - but in (x)HTML this is demonstrably not so, and authors
should not include Verdana in their mix, and certainly not as a
reference font for determining font size to be used for the other
fonts in their mix.

--

Aug 3 '06 #17

This discussion thread is closed

Replies have been disabled for this discussion.