Text sizes - use percentages?

#1

Hi all.

I am playing with html and css. I don't (yet) have a working site,
I'm just trying to build a working, basic template I can use for a
couple of ideas I have.

I recall reading a discussion in a newsgroup in the past that came to
the conclusion that the best way to use font sizes with css was to use
percentages. Is that still the case? If so, how does one implement
it?

To use percentages one needs a starting point to work from. How is
this defined?

I have googled for this and found so many conflicting sites, all
showing differing reasoning for reccomending different ideas. But not
one showing a simple idiots guide, so far.

Thanks.

--
Regards from Mike, Jan and Master Alex Barnard.
South Coast, UK.

[To reply by email remove ".trousers" spamtrap from email address]
--
The Source For Premium Newsgroup Access
Great Speed, Great Retention
1 GB/Day for only $8.95

#2

On Mon, 13 Mar 2006 17:21:08 +0100, Mike Barnard
<m.barnard.trousers (AT) thunderin (DOT) co.uk> wrote:

Quote:

I recall reading a discussion in a newsgroup in the past that came to
the conclusion that the best way to use font sizes with css was to use
percentages. Is that still the case? If so, how does one implement
it?

To use percentages one needs a starting point to work from. How is
this defined?

If you don't define any length or percentage for font size, it will show
in your browser viewport at what you defined as 100%. And it will show in
my viewport, my browser, as what I defined as 100%. That's the beauty. Our
preferred 100% may be different, but this way we both get what we
want/need.
It also gives you your point of reference. The size the viewer has decided
to use for 100% is what is the 100% (or 1em for that matter).

Use this 100% as your starting point, defining it as the font-size for
your body element (if not, IE may get it wrong IIRC). Then use 100% for
the main text, use smaller if you wish for stuff like menu's and copyright
notices, but keep in mind that anything under 85% might be illegable (some
will argue below 90% is a no go area).

Now, if you use em or percentages as a length for the block level elements
that you use to layout your page too, and not set a specific width for the
page as a whole, the whole thing will keep some integrity in design no
matter how it is viewed (within a certain bandwidth).

Everybody wins. Your visitor can actually read what you publish and your
design does not easily fail. Good, eh?

Quote:

I have googled for this and found so many conflicting sites, all
showing differing reasoning for reccomending different ideas. But not
one showing a simple idiots guide, so far.

Ah, should have googled this group then (or other: ciwa and alt.html.*)
Lots of idiots around here needing eachothers guidance :-)

--
______PretLetters:

Quote:

#3

Mike Barnard wrote:

Quote:

I recall reading a discussion in a newsgroup in the past that came to
the conclusion that the best way to use font sizes with css was to use
percentages. Is that still the case? If so, how does one implement
it?

Since IE has not changed in 6 years, yes, that is still the case.

For example: body { font-size: 100%; }

Quote:

To use percentages one needs a starting point to work from. How is
this defined?

The browser sets the default text size, usually it is 16 pixels. IE

offers no explicit way to set it, only larger/smaller text size options.
Other browsers allow the user to pick any size they want.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

#4

Quote:

To use percentages one needs a starting point to work from. How is
this defined?

Dan Cederholm's method in the book "Bullet Proof Web Design" is to set
the body to font-size: small, and go from there. The coding below is
that plus a hack to make IE5 the same size as other browsers. Small is
very comparable to 12px. One thing to remember: Nested percentages
compound (ie: if you set an element to 80%, and the parent to 90%, then
the element will actually be 72%).

body {
font-size: x-small; /* for IE5/Win */
voice-family: "\"}\"";
voice-family: inherit;
font-size: small; /* for compliant browsers */
}
html>body { /* be nice to Opera */
font-size: small;
}

#5

josh wrote:

Quote:

To use percentages one needs a starting point to work from. How is
this defined?

Dan Cederholm's method in the book "Bullet Proof Web Design" is to set
the body to font-size: small, and go from there.

In other words, he thinks the default size in which text should appear
in my browser is smaller than what I've set as my default size. He
should think again.

#6

On Mon, 13 Mar 2006 18:42:39 +0100, josh <joshbrainerd (AT) yahoo (DOT) com> wrote:

Quote:

To use percentages one needs a starting point to work from. How is
this defined?

Dan Cederholm's method in the book "Bullet Proof Web Design" is to set
the body to font-size: small, and go from there.

If that is true, rip those pages out of your book and forget about Dan
Cederholm as far as this topic is concerned. Looking at
<URL:http://www.alistapart.com/articles/mountaintop/> for example, gives
me a page that I cannot read comfortably without adjusting font size to
140% and setting the page width to fit in the width of my viewport (725px
wide at the moment). It is a horrific design as far as accessibility and
usability are concerned. All IMO of course.

--
______PretLetters:

Quote:

#7

On Mon, 13 Mar 2006, Barbara de Zoete wrote:

Quote:

On Mon, 13 Mar 2006 18:42:39 +0100, josh <joshbrainerd (AT) yahoo (DOT) com
wrote:

Dan Cederholm's method in the book "Bullet Proof Web Design" is to
set the body to font-size: small, and go from there.

If that is true, rip those pages out of your book and forget about
Dan Cederholm as far as this topic is concerned.

Absolutely! (or was that the wrong choice of word :-{ )

Quote:

Looking at
URL:http://www.alistapart.com/articles/mountaintop/> for example,

Aaaargh, microfonts...

Quote:

gives me a page that I cannot read comfortably without adjusting
font size to 140% and setting the page width to fit in the width of
my viewport (725px wide at the moment).

Mozilla has a min. font size setting, which works great if one really
wants to read what these idiots publish. I have to remember to turn
it off (thanks to Pederick's web developer toolbar) when I'm asked to
review a page.

But this particular page not only uses microfonts (as measured against
*my* choice of scale), but also refuses to fit in my chosen browser
window. So, *out of the window* it can go...

Quote:

It is a horrific design as far as accessibility and usability are
concerned.

Indeed. Surely the phrase "bullet proof" was a give-away? Just like
all those "bullet-proof mail hosting" offers, their only concern is to
impose their own will - no matter what the needs or desires of the
recipients might be.

Quote:

All IMO of course.

No, not "all". Some of these facts are objective.

tot ziens

--

Nothing good has ever come of putting physicists and computer people in
the same room. - Joseph DeMartino (seen on a.h.b-o-u)

#8

I was just throwing out a way to do it. How about another?

Do you guys advocate not setting font sizes at all? That was the
impression I got from some of the responses.

I should also note that Cederholm doesn't advocate making the font-size
really small, just to use a keyword as a starting base, and to adjust
IE because it is different from most browsers. Also the website that
someone posted and critisized isn't even a site of Cederholm's, but
rather an article he authored.

#9

josh wrote:

Quote:

I was just throwing out a way to do it. How about another?

Do you guys advocate not setting font sizes at all? That was the
impression I got from some of the responses.

I should also note that Cederholm doesn't advocate making the font-size
really small, just to use a keyword as a starting base, and to adjust
IE because it is different from most browsers.

That right there is a bad perspective. An IE user has IE set the way he
likes it. A Firefox user has Firefox set the way he likes it. A CSS
font-size of 100% for the body is 100% of that on either browser. The
Firefox user doesn't care how the page would look in IE, or vice versa.

#10

On Mon, 13 Mar 2006 17:35:36 +0100, "Barbara de Zoete"
<trashbin (AT) pretletters (DOT) net> wrote:

Quote:

Use this 100% as your starting point, defining it as the font-size for
your body element (if not, IE may get it wrong IIRC). Then use 100% for
the main text, use smaller if you wish for stuff like menu's and copyright
notices, but keep in mind that anything under 85% might be illegable (some
will argue below 90% is a no go area).

I had a problem with Opera when the body font-size was 100%. Elements
with font-size 100% were shown in a smaller font. Setting body
font-size to 100.1% fixed the problem.

--
Steven