Text sizes - use percentages?

[Mike Barnard]

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

[Barbara de Zoete]

On Mon, 13 Mar 2006 17:21:08 +0100, Mike Barnard
<m.****************@thunderin.co.uk> wrote:

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?
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:
| weblog | http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
|zweefvliegen | http://www.pretletters.net/html/vliegen.html |

[Jim Moe]

Mike Barnard wrote:

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%; }
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)

[josh]

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;
}

[Harlan Messinger]

josh wrote:

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.

[Barbara de Zoete]

On Mon, 13 Mar 2006 18:42:39 +0100, josh <jo**********@yahoo.com> wrote:

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:
| weblog | http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
|zweefvliegen | http://www.pretletters.net/html/vliegen.html |

[Alan J. Flavell]

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

On Mon, 13 Mar 2006 18:42:39 +0100, josh <jo**********@yahoo.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 :-{ )
Looking at
<URL:http://www.alistapart.com/articles/mountaintop/> for example,
Aaaargh, microfonts...
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...
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.
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)

[josh]

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.

[Steven]

On Mon, 13 Mar 2006 17:35:36 +0100, "Barbara de Zoete"
<tr******@pretletters.net> wrote:

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

[Harlan Messinger]

josh wrote:

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.

[Carolyn Marenger]

Mike Barnard wrote:

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.

I have my browser set to 10 point as the default font size. When a page
specifies that a font should be 110%, it is calculated as 110% or 10 point
= 11 point.

On my pages I use 1em as the default font size and calculate everything from
there. I also use ems for column width - not necessarily the best way to
go about it, but it seems to work as long as the user doesn't specify a
tiny or huge font size for their default. If they do, then the page layout
can start looking pretty funny.

Carolyn
--
Carolyn Marenger

[Carolyn Marenger]

josh wrote:

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 advocate using the viewers default font settings. The most I will do is
specify a base font size of 1em, and then adjust all the other fonts as a
percentage of that base. The main content matches the viewer's default
settings. The headings I get to play with - bit I limit it top a small
amount of playing. :)

I assume they have enough knowledge to be able to adjust it if they need to,
and if so, I am not going to alter it on them. I hate sites that come up
and I can't read because the author figured it would look good at 8 point
or the opposite where I have to scale down so I can get a few words on a
line. The latter doesn't seem to happen as often.

Carolyn

--
Carolyn Marenger

[Carolyn Marenger]

Steven wrote:

On Mon, 13 Mar 2006 17:35:36 +0100, "Barbara de Zoete"
<tr******@pretletters.net> wrote:

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.

I was going to say that I heard about a problem with font sizes at 100%, but
I couldn't remember what it was and so I was just about to go hunt it out.
Thanks for saving me the effort.

Carolyn

--
Carolyn Marenger

[kchayka]

Steven wrote:

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.

Seems to me that is an old bug that was fixed long ago. There is no
reason to use that kludge any more.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Spartanicus]

Steven <Ph****@Syd.au> wrote:

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.

Very old bug (V6 IIRC), long time solved, very very few V6 versions
still in use.

--
Spartanicus

[Felix Miata]

On 06/03/13 15:21 josh apparently typed:

I was just throwing out a way to do it. How about another?
Several possibilities here:
http://css-discuss.incutio.com/?page=UsingFontSize
Do you guys advocate not setting font sizes at all? That was the
impression I got from some of the responses.

Here's what we sort of have now:
http://css.nu/articles/font-analogy.html :-p

Not at all is overstatement, but not by much. Restraint is key. Start by
setting your own defaults to whatever suits you best on sites that
respect your defaults before you start writing your CSS.

Limit your sizing to things other than main body copy, so that the user
gets the respect he deserves and the size he chose to suit his needs as
default in his browser. Be sure also not to go much below default for
anything that actually needs to be intelligible, or you expect readers
to want to read. Text smaller than CSS small should be limited to things
like copyright notices and legal "fine print". Good read here:
http://www.xs4all.nl/~sbpoley/webmatters/fontsize.html

User defaults are a good thing, and not to be lightly ignored, which
unfortunately, is inconsistent with what most web authors do. Major
sites are rampant with either reducing to some arbitrary % of whatever
the defaults are, or ignoring them entirely by sizing text in px, or
even worse pt. http://mrmazda.no-ip.com/shame.html

It turns out that average users all want about the same thing, 12pt, or
something very close thereto.
http://psychology.wichita.edu/optimalweb/text.htm . The problem is
neither you nor any other webmaster can know which ones aren't average
and adjust accordingly, while pt for screen media is a problem in
itself: http://hsivonen.iki.fi/units/ .

So, by doing nothing at all, and doing no sizing either on body copy or
even anywhere at all, anyone and everyone but the laziest of the lazy
stand to get what they want, assuming the webmasters do the right thing
by not being lazy and rude and instead setting their own defaults to
suit their own taste instead of incorporating their preference for
mousetype in their stylesheets.
http://mrmazda.no-ip.com/auth/defaultsize.html

For my own personal opinion on which deviations from defaults are OK,
see: http://mrmazda.no-ip.com/auth/userdefaultbased.html
--
"Blessed are they whose ways are blameless, who walk according
to the law of the Lord." Psalm 119:11 NIV

Team OS/2 ** Reg. Linux User #211409

Felix Miata *** http://mrmazda.no-ip.com/auth/auth

[Steven]

On Tue, 14 Mar 2006 01:30:47 GMT, Spartanicus <in*****@invalid.invalid>
wrote:

Steven <Ph****@Syd.au> wrote:

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.

Very old bug (V6 IIRC), long time solved, very very few V6 versions
still in use.

Yes, I still have (and use) Opera 6. I don't think the font-size 100.1%
causes any problems and it seems nice to support old browsers.

--
Steven

[dingbat]

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

Thankyou. That's another book I don't need to bother opening.

[kchayka]

Steven wrote:

I still have (and use) Opera 6.
I'm curious why. Newer versions are much better, as far as rendering
goes, anyway.
I don't think the font-size 100.1%
causes any problems and it seems nice to support old browsers.

Supporting old browsers (i.e. keeping the content accessible) is one
thing, catering to a specific, old version of a minor browser that is
only used by maybe a handful of people is something else.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[josh]

Felix Miata wrote:

So, by doing nothing at all, and doing no sizing either on body copy or
even anywhere at all, anyone and everyone but the laziest of the lazy
stand to get what they want, assuming the webmasters do the right thing
by not being lazy and rude and instead setting their own defaults to
suit their own taste instead of incorporating their preference for
mousetype in their stylesheets.
http://mrmazda.no-ip.com/auth/defaultsize.html

For my own personal opinion on which deviations from defaults are OK,
see: http://mrmazda.no-ip.com/auth/userdefaultbased.html

Thanks Felix, those links and info were very helpful.

[Alan J. Flavell]

On Mon, 13 Mar 2006, Felix Miata wrote:

Several possibilities here:
http://css-discuss.incutio.com/?page=UsingFontSize

That's rather nice, in its way - it says about em units:

|Advantages: [...] Easily overridden by user stylesheets
|
|Disadvantages: Easily overridden by user stylesheet

I'll take the first option ;-)

cheers

[Steven]

On Tue, 14 Mar 2006 07:51:17 -0600, kchayka <us****@c-net.us> wrote:

Steven wrote:

I still have (and use) Opera 6.

I'm curious why. Newer versions are much better, as far as rendering
goes, anyway.

Opera 6 was my primary browser until late last year. I'm now using 8.5
which is much better in many ways. But Opera 6 has some nice features
that were dropped in 7 and it is better for me on some sites. However,
my use of 6 is declining.

I don't think the font-size 100.1%
causes any problems and it seems nice to support old browsers.

Supporting old browsers (i.e. keeping the content accessible) is one
thing, catering to a specific, old version of a minor browser that is
only used by maybe a handful of people is something else.

Obviously I am a biased neanderthal. But after reading some comments
here a while ago I changed some pages from fixed-size fonts to relative.
This is a nice policy but I was annoyed that it caused problems with
Opera 6. Then I read about the 100.1% fix, changed my CSS, and all was
fine. Still, as you say, it is a hack for an insignificant minority.

--
Steven

[Felix Miata]

On 06/03/14 15:59 Alan J. Flavell apparently typed:

On Mon, 13 Mar 2006, Felix Miata wrote:

Several possibilities here:
http://css-discuss.incutio.com/?page=UsingFontSize

That's rather nice, in its way - it says about em units: |Advantages: [...] Easily overridden by user stylesheets |Disadvantages: Easily overridden by user stylesheet I'll take the first option ;-)

ISTR writing that a coupla years ago, my way of subtly stating CSS is a
double edged sword. Glad you like it. :-)
--
"Blessed are they whose ways are blameless, who walk according
to the law of the Lord." Psalm 119:11 NIV

Team OS/2 ** Reg. Linux User #211409

Felix Miata *** http://mrmazda.no-ip.com/auth/auth

[Carolyn Marenger]

Steven wrote:

On Tue, 14 Mar 2006 07:51:17 -0600, kchayka <us****@c-net.us> wrote:

Steven wrote:

I still have (and use) Opera 6.

I'm curious why. Newer versions are much better, as far as rendering
goes, anyway.

Opera 6 was my primary browser until late last year. I'm now using 8.5
which is much better in many ways. But Opera 6 has some nice features
that were dropped in 7 and it is better for me on some sites. However,
my use of 6 is declining.

I don't think the font-size 100.1%
causes any problems and it seems nice to support old browsers.

Supporting old browsers (i.e. keeping the content accessible) is one
thing, catering to a specific, old version of a minor browser that is
only used by maybe a handful of people is something else.

Obviously I am a biased neanderthal. But after reading some comments
here a while ago I changed some pages from fixed-size fonts to relative.
This is a nice policy but I was annoyed that it caused problems with
Opera 6. Then I read about the 100.1% fix, changed my CSS, and all was
fine. Still, as you say, it is a hack for an insignificant minority.

What it all comes down to is... is the time to implement the hack for that
insignificant minority worth the benefit to them? In this case, adding two
characters to a style sheet, from 100% to 100.1%, increases file size by
two bytes. Even at 300baud, two bytes is a minimal impact. Once you know
to add it to your CSS, it only takes a few minutes, and the fix is site
wide. I would say go ahead with that one. Now if I had to redo an entire
stylesheet, just for that same group, I might not bother.

Carolyn
--
Carolyn Marenger

[Mike Barnard]

On Mon, 13 Mar 2006 16:21:08 +0000, Mike Barnard
<m.****************@thunderin.co.uk> wrote:

Hi all.

I am playing with html and css. I don't (yet) have a working site,

<snip>

Just a quick thanks to you all. I love a thread like this where broad
discussion ensues, even if I'm only an observer!

I shall now (well,later this afternoon) experiment. <drumroll....>

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

[kchayka]

Carolyn Marenger wrote:

In this case, adding two
characters to a style sheet, from 100% to 100.1%, increases file size by
two bytes. Even at 300baud, two bytes is a minimal impact.

I don't think that's the issue, though uncontrolled hacks could possibly
end up adding some amount weight to a file download.

The greater issue, to me, is keeping track of what the blazes all these
hacks are and which browsers are targeted. Some are obvious because they
are so prevalent, like the *html hack for IE.

But, if somebody else inherits maintenance on the stylesheet, are they
going to know what "100.1%" all about? Will whoever put the hack in
there in the first place remember what it's all about in a year's time?
And if you add a bunch of comments regarding a hack, it *will* add more
weight to the download.

There are diminishing returns in play here. For an old version of a
minor browser, whose users are probably already in the habit of enabling
user-mode to get around display issues, it just isn't worth any added
effort. It just clutters up the stylesheet with antique junk.

my 2p.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Steven]

On Wed, 15 Mar 2006 16:51:10 -0600, kchayka <us****@c-net.us> wrote:

The greater issue, to me, is keeping track of what the blazes all these
hacks are and which browsers are targeted. Some are obvious because they
are so prevalent, like the *html hack for IE.

Good point. I will document my instances.

--
Steven