Subject: [css-d] ems or percent?

From: joel.young at ns.sympatico.ca (Joel Young)
Date: Sat, 26 Apr 2003 14:50:21 -0300

If this has been asked recently, I apologize for the repeat. Feel free to 
direct me to the thread if you like.

I've been doing some testing with ems and %'s. I like the versatility of 
both, but which is better in today's browser compatibility climate? I'm 
concerned mostly about consistent results while avoiding the tiny text 
syndrome that can occur on a Mac. (I don't have a Mac, so all my design is 
PC oriented.)

My main goal is to design with less-than-default-size text, but still give 
users the ability to change it if they want to.

TIA,

Joel

---

From: tbounds at gci.net (Tony Bounds)
Date: Sat, 26 Apr 2003 11:50:53 -0800

Joel,
I've decided to use a combination of ems and %. First I set the font 
size as a percentage for the entire page as follows...

body {  font-size: 76%; }

Then, for different sections (divs) I set the font size to ems. Examples...

#middle { font-size: 1em; }
#left { font:-size: .9em }

I also set the font size by ems for other elements. Example...

h1 { font-size: 2em; }

This allows the fonts to resize in ems in relation to the first % 
declaration. Whether it works for you, or not I don't  know. You may 
want to try it and experiment changing % and em sizes and see if you can 
tweek it to your needs.
--
Tony

---

From: ian at hixie.ch (Ian Hickson)
Date: Sat, 26 Apr 2003 13:06:28 -0700 (PDT)

> size as a percentage for the entire page as follows...

Why?

I, as a user, have set my font size to be what I prefer. Setting the
page's font size to 76% of my preferred font size seems strange.

-- 
Ian Hickson                                      )\._.,--....,'``.    fL
"meow"                                          /,   _.. \   _\  ;`._ ,.
http://index.hixie.ch/                         `._.-(,_..'--(,_..'`-.;.'

---

From: mrmazda at ij.net (Felix Miata)
Date: Sat, 26 Apr 2003 16:18:34 -0400

> page's font size to 76% of my preferred font size seems strange.

Shhhhh! You, of all people, should know better. For people like you and
me, this is how we want inconsiderate web designers to make their text
tiny. When they use 'body {font-size: 76%;}', it allows our user
stylesheet rule 'body {font-size: 100% !important;}' to put it back how
it belongs. ;-) When they use 100% in body and shrink everything
elsewhere, our simple blanket override rule can't work. Am I missing
something?
-- 
"The object and practice of liberty lies in the limitation of
governmental power."                General Douglas MacArthur

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

Felix Miata  ***  http://members.ij.net/mrmazda/auth/auth.html

---

From: tbounds at gci.net (Tony Bounds)
Date: Sat, 26 Apr 2003 12:26:05 -0800

Ian,
Untimately almost anyone can set their font size as a user, even if the 
page is built to display at pixels. The designer sets the size they 
think is best. After that, its out of their hands and the viewer can do 
as they wish. I picked up the method I suggest from Owen Briggs...

http://www.thenoodleincident.com/tutorials/typography/index.html

It made sense to me, so I went with it. He gives some good reasons as to 
why he uses % and ems.

As usual, the wiki for this list points to some excellent resources...

http://css-discuss.incutio.com/?page=FontSize
--
Tony

---

From: ian at hixie.ch (Ian Hickson)
Date: Sat, 26 Apr 2003 13:27:02 -0700 (PDT)

On Sat, 26 Apr 2003, Felix Miata wrote:
> Shhhhh! You, of all people, should know better.

Hehe.

> For people like you and me, this is how we want inconsiderate web
> designers to make their text tiny. When they use 'body {font-size:
> 76%;}', it allows our user stylesheet rule 'body {font-size: 100%
> !important;}' to put it back how it belongs. ;-) When they use 100% in
> body and shrink everything elsewhere, our simple blanket override rule
> can't work. Am I missing something?

I used to think this too, and indeed the logic makes sense. Then I tried
to use it.

It doesn't work.

The problem is that many people write pages that are sized in pixels, and
when you override their setting on body, you end up making entire pages
unreadable.

I guess it's better for authors to make their pages unreadable in one
place (the body rule above) rather than all over though, as you point out.
I just wish I understood why people are so obsessed with making their text
tiny.

---

From: ian at hixie.ch (Ian Hickson)
Date: Sat, 26 Apr 2003 13:32:19 -0700 (PDT)

> It made sense to me, so I went with it. He gives some good reasons as to

Oh I wasn't disagreeing with using %s and ems -- indeed I have written my
own comments on the matter:

    http://ln.hixie.ch/?start=1045789943&count=1

I'm just whining about people who decide they know the best font size to
use better than me. :-)

*crawls back into his ivory tower*

---

From: joel.young at ns.sympatico.ca (Joel Young)
Date: Sat, 26 Apr 2003 17:51:21 -0300

Well, the replies to my message are certainly interesting. ;-)

I'm not entirely new to CSS, but I am new to sizing fonts with something 
other than pixels (yes I decided to give control back to the user). The use 
of ems vs % almost seems to be a personal preference, so I guess that 
doesn't really matter.

So if I use body {font-size: 100%}, then the rest of the page will be sized 
in relation to that (i.e. 80% of 100, 75% of 100), right? Or will there be 
some inheritance along the way under certain cirumstances?

And does this apply to ems as well? Or do ems act differently?

That's a lot of questions for just one answer, eh?  -- If there is only one 
answer :-)

At 05:18 PM 4/26/03, Felix Miata wrote:
>______________________________________________________________________
>css-discuss [[email-masked]]
>http://www.css-discuss.org/mailman/listinfo/css-d
>Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

---

From: mrmazda at ij.net (Felix Miata)
Date: Sat, 26 Apr 2003 16:57:22 -0400

> It doesn't work.

Better than nothing.
 
> when you override their setting on body, you end up making entire pages

Well, body 100% doesn't impact elements sized in px. :-( But, only for
the time it takes to use zoom, pending a fix someday maybe (users can
all hope, can't we?) for bug 4821, or even implementation of Jakob's
suggestion "Improving Future Browsers" at
http://www.useit.com/alertbox/20020819.html.

> place (the body rule above) rather than all over though, as you point out.

Shhhhh!

> I just wish I understood why people are so obsessed with making their text

At URL below I've collected some reasons. Maybe you can add some I've
missed?
-- 
"The object and practice of liberty lies in the limitation of
governmental power."                General Douglas MacArthur

Felix Miata  ***  http://members.ij.net/mrmazda/auth/defaultsize.html

---

From: ian at hixie.ch (Ian Hickson)
Date: Sat, 26 Apr 2003 14:11:58 -0700 (PDT)

> And does this apply to ems as well? Or do ems act differently?

On the font-size property, 'em' and '%' mean exactly the same. (Well, 1em
is equivalent to 100%, so they mean the same thing given a factor of 100.)
Both of them refer to a value relative to the parent element's font-size.

On other properties, '%' refer to other measures, for example percentage
margins refer to the width of the containing block. On the other hand,
'em' units always refer to the element's font-size.

For example, given:

   h1 { font-size: 2em; }
   p { text-indent: 1em; }
   blockquote { font-size: 0.5em; }

...then:

  <body>              User's font size (1em)
   <h1> ... </h1>     Twice user's font size (2em of 1em)
   <p> ... </p>       User's font size (1em of 1em)
   <blockquote>
    <h1> ... </h1>    User's font size (2em of 0.5em of 1em)
    <p> ... </p>      Half user's font size (1em of 0.5em of 1em)
   </blockquote>
  </body>

HTH,

---

From: kr43m0r at earthlink.net (Lonnie)
Date: Sat, 26 Apr 2003 16:16:26 -0500

> page's font size to 76% of my preferred font size seems strange.

Why? Because browsers typically set default font sizes larger than the OS. This
is often in conflict with the design.

What is expected? The size of menu items is a good gauge. X-browser, 76% is a
VERY good estimate. If you can read your menus, then you should be fairly
comfortable with reading text at that size.

If you, as a user, have set your general font size in YOUR browser to something
comfortable, it is certainly reasonable for a designer to mimic the size of your
menu text by adjusting the default browser font size with a % value.

Good for you if you've changed the default browser text size to fit your viewing
pleasure. By setting the default size to a percentage of the default, that
designer has opened the door for you to tweak it to suit your preference. Had he
specified pixels, you on IE would have little choice.

>From my point of view, if you find MOST of the sites you visit too difficult to
view, then you'd be advised to seek an alternative UA if your user preference
yields no improvement.

Can you read a typical book?

I'm going to stick with 70-80% of the default size in my designs. I did 100% at
one point and got an equal amount of suggestions from users to reduce or enlarge
the default size as I do now. Go figure?

Lonnie

---

From: kr43m0r at earthlink.net (Lonnie)
Date: Sat, 26 Apr 2003 16:26:02 -0500

Felix,

According to your calculations, I'm glad it is impossible for me to ever even
meet you half-way!

Lonnie

---

From: chris at placenamehere.com (Chris Casciano)
Date: Sat, 26 Apr 2003 17:31:46 -0400

> *crawls back into his ivory tower*

And while you're up there see if you can get the W3C to drop font settings
from CSS3 - or perhaps just drop fixed-size units all together - cause
that's the only way we'll never see this topic again. (and while you're at
it can we get some relative color units? Like "dark, darker, light, lighter"
or maybe that would screw with users who change their color settings to the
inverse of what authors expect... So maybe some way to reference an
"opposite" color would be needed... Hehe... Sorry)

As an author I find a base px size with relative units off of that (as a few
others have referred to in this thread) is sometimes the only sane way to do
things - especially when so many other items on a page are based on pixel
measurements. It just doesn't make sense not to give a default in pix to
maintain the balance of a layout for the vast majority of users who don't
touch their prefs. I also am generally pretty liberal with my choice of font
sizes - using what is some circles would consider "big".

Yes using all relative units (or just not touching anything) would be
preferred, but because there's such a wide gap between the many who don't
know about their prefs, the few who do and take care to adjust accordingly,
and the clients that are paying the bills its sometimes not practical.

As a surfer I sometimes wish my browser(s) of choice were smarter in these
areas and could do things like remember text zoom settings, or alternate
style sheet choices across a site and across multiple sessions, similar to
how remembers image blocking or cookies choices. I also am quick to set a
minimum font size of 9 or 10px when I install a browser which causes some of
its own problems (e.g. may hide some implied document structure, or cause
overflow issues) but alleviates many of the worst offenders.

-- 
[ Chris Casciano ]  [ [email-masked] ]
[ see things  @  http://www.placenamehere.com ]
[ read words   @   http://www.chunkysoup.net/ ]

---

From: ian at hixie.ch (Ian Hickson)
Date: Sat, 26 Apr 2003 15:15:04 -0700 (PDT)

On Sat, 26 Apr 2003, Felix Miata wrote:
> > >
> > > When they use 100% in body and shrink everything elsewhere, our
> > > simple blanket override rule can't work. Am I missing something?
> >
> > to use it. It doesn't work.
>
> Better than nothing.

Not really. All it does is change one set of unreadable pages for another.
As you point out, what is really needed is full page zoom.

> comfortable with reading text at that size.

Interesting.

So basically I should set my font size to 130% of what I would want to see?

Unfortunately this makes sites that do honour my settings way too big.

> I'm going to stick with 70-80% of the default size in my designs. I
> did 100% at one point and got an equal amount of suggestions from
> users to reduce or enlarge the default size as I do now. Go figure?

If you got the same number of complaints when doing the right thing as
when doing the wrong thing, I would suggest doing the right thing. :-)

On Sat, 26 Apr 2003, Chris Casciano wrote:
> that's the only way we'll never see this topic again.

Dropping absolute units has been considered several times, but as a
whole the working group feels that they do have valid use cases.

> (and while you're at it can we get some relative color units? Like
> "dark, darker, light, lighter" or maybe that would screw with users
> who change their color settings to the inverse of what authors
> expect... So maybe some way to reference an "opposite" color would
> be needed... Hehe... Sorry)

This is also being considered, although I hear there are issues with
how to define it. I recommend checking the www-style archives.

---

From: tbounds at gci.net (Tony Bounds)
Date: Sat, 26 Apr 2003 14:40:48 -0800

Ian,
What do you think of the designer being so bold as to not honor other 
user settings? For instance...

Font Type: Setting preferred font types. As with setting font size, 
doing such requires the user to go out of their way to apply what they 
may prefer.

Content Width: For instance, sizing the content to a fixed width and in 
effect removing the users control of such via a window resize.

Link Colors and Styles: Diverging from the standard and imposing a 
designers preference. 
--
Tony

---

From: mrmazda at ij.net (Felix Miata)
Date: Sat, 26 Apr 2003 18:42:09 -0400

> > Tony Bounds wrote:

 
 
> What is expected? The size of menu items is a good gauge.

Actually it is a terrible gauge propagated by Owen Biggs, who has also
shared such other gems as "the browser defaults are huge"
<http://www.thenoodleincident.com/tutorials/typography/index.html> and
"most browsers default to a text size that I have to back up to the
kitchen to read"
<http://www.thenoodleincident.com/tutorials/box_lesson/font/index.html>.
It is apparent that Owen's eyes are not your average UA user's eyes,
being akin to those of an eagle, able to see the tiniest things at huge
distances. It is wholly unfair to assume most UA users have similar
ability.

> X-browser, 76% is a

It's an awful and not even comparable estimate. Bogus, bogus, bogus. Can
read and comfortable read are entirely different things. If the menu
text is 76% of a comfortably set default page text, it is merely
legible, not comfortable. Simply legible is good enough for familiar
things like system controls. They get used frequently, but only briefly
each time. With each use, they become more familiar, eventually reaching
the point where experienced users wish they were smaller still, in order
to provide more space to the viewport, or to allow the use of smaller
windows, so that more of other windows could be seen simultaneously. The
familiarity all but dispenses with any need to read at all, with mouse
events targeted to remembered screen locations rather than words read. A
short squint at small controls here & there is far more tolerable than
full time squint required to read page text as small as controls text.

> menu text by adjusting the default browser font size with a % value.

No it isn't, and you don't know what size my menu text is anyway. In
windoze for example, controls text size varies according to DPI, which
also you don't know. The eagle-eyed may very well find that the default,
designed for low resolution displays, works perfectly fine even after
doubling the screen resolution from the low common values of 640 or 800
wide. Others, like me, and many others no longer under 40, welcome the
ability to increase controls size, whether or not increasing resolution,
taking away the need to squint to use system controls.

FWIW, the IE6/Mozilla defaults of 16px/12pt are close enough for me to
call just right, when I'm using 1024 wide resolution, and a 19" monitor.
When I drop the resolution back to 800 wide, 13px becomes slightly
taller than 16px is on 1024 wide, while 12px becomes slightly shorter
<http://members.ij.net/mrmazda/auth/pixelsize2.html>, & I change my
default from 16 to 13.

Now, compare to Ian Hixie's settings
<http://ln.hixie.ch/?start=1045789943&count=1>. Twice 12.5px is 25px
(prefs options include 24 & 26, but not 25). Twice 800 wide is 1600
wide. The only significant difference in conversion is his display is
smaller, but then he's probably not even half my age (50+), still
blessed with decent if not good eyesight. From what I've seen of his
musings on the subject of font sizes, I hesitate to assume his near
vision is excellent.
 
> Can you read a typical book?

There is no such thing as a typical book. My bible is a large print
edition. Many paperbacks use smaller text than newspapers. Newspapers
are a strain, so I get most of my news off TV, or the internet, where I
have a UA that allows me to override the common arrogant page designer
assumption that UA designers are ignorant morons who make the PC default
12pt/16px without good reason.
 
> I'm going to stick with 70-80% of the default size in my designs

I'd like to visit some of these. As long as I've been reading your
advocations of designer knows best I can't recall one instance of a URL
pointing to any of your work.

> I did 100% at

You place more value upon the clueless than the clued. 

Do you design sites using IE6 using the system defaults, with no
adjustment to the defaults, such as adjusting the browser default to
your liking before starting a design? One of these days section 508 is
liable to catch up with you.

It's certainly a good thing for users of sites made by people like you
that UA zoom and !important in user stylesheets are available.
-- 
"The object and practice of liberty lies in the limitation of
governmental power."                General Douglas MacArthur

---

From: chris at placenamehere.com (Chris Casciano)
Date: Sat, 26 Apr 2003 18:59:51 -0400

> You place more value upon the clueless than the clued.

Yes.

And until browsers come with install wizards that walk through configuration
I don't see that changing much.

... If you know how to set up your browser of choice for desktop for optimal
viewing I will try my damnedest to not screw you over (e.g. 0.5-0.7ems
others referenced) But I have a lot more confidence that you know how to
deal with what I as an author throw your way, then I have for Joe Internet
User.

*takes this moment to consider the absence of a list mom*

I know you'll never be satisfied with that answer Felix so I'm not going to
bother continuing down this road. I urge others on both sides to do the
same.

---

From: ian at hixie.ch (Ian Hickson)
Date: Sat, 26 Apr 2003 16:00:59 -0700 (PDT)

> doing such requires the user to go out of their way to apply what they

Overriding font-family is easy at the user stylesheet level, so I'm fine
with authors choosing their own typeface.

> effect removing the users control of such via a window resize.

I say good luck to them. My user agent gives me the ability to override
window resizing, etc. :-)

> Link Colors and Styles: Diverging from the standard and imposing a

Like with font-family, colours are easy to override, so I'm fine with that
too. In general, and this applies to font-family too, different colours
don't make a page more or less readable for me, like font sizes do.

---

From: cdwise at wiserways.com (Cheryl D. Wise)
Date: Sat, 26 Apr 2003 18:04:28 -0500

You may think on your monitor that 76% of the default setting is a "good
estimate" but I can't read 76% of the default on my laptop period, with
or without reading glasses.

While I applaud using % instead of fixed px (or even worse pt) sizes I
get very tired of having to adjust fonts up to read them. Funny enough I
can only think of one site that I even considered adjusting a font down
to a smaller size and it was a site on accessibility that seemed to use
an extra large size font.

Personally I'd rather a design be 'broken' than a site's contents be
unusable.

Cheryl D. Wise
WiserWays, LLC
www.wiserways.com
Office: 713.353.0139
Mobile: 713.412.0406
[email-masked]

-----Original Message-----
From: Lonnie

> page's font size to 76% of my preferred font size seems strange.

Why? Because browsers typically set default font sizes larger than the
OS. This is often in conflict with the design.

---

From: mrmazda at ij.net (Felix Miata)
Date: Sat, 26 Apr 2003 19:12:47 -0400

> Link Colors and Styles: Diverging from the standard and imposing a

Eventually, the power for users to override using css will become
commonly exercised. e.g., this I do now:

:link:hover[target="_blank"],:visited:hover[target="_blank"] {
  color: white !important; background: red !important;
}
:link:hover[target="_new"],:visited:hover[target="_new"] {
  color: white !important; background: red !important;
}

http://www.mozilla.org/unix/customizing.html
-- 
"The object and practice of liberty lies in the limitation of
governmental power."                General Douglas MacArthur

---

From: simon at jessey.net (Simon Jessey)
Date: Sat, 26 Apr 2003 19:33:20 -0400

----- Original Message ----- 
From: "Felix Miata" <[email-masked]>
Subject: Re: [css-d] ems or percent?

> If the menu
> things like system controls.

I have to agree with that. I have a 21 inch monitor attached to a Windows XP
platform set to 1280 x 1024. I use this setting because I want plenty of
screen real estate, but the menus (in their default setting) are a little
too small for my liking.

I make web documents using relative units, with the only exceptions being
the odd bit of padding, border width or letter spacing. In the case of
fonts, I almost always set a size of 100% in the BODY and then have 0.8em as
my smallest child size. Users have the option of making it quite a bit
smaller or larger if they desire. I like to make a font as large as possible
without it being ugly or impractical.

This new trend for microfonts is peculiar. I can only assume that the
typical designer has a gigantic monitor, or perhaps projects their computer
image on a wall. One site that particularly annoys me is Kaliber10000 (
http://www.k10k.net/ ). Let me quote from one of my own weblog entries:-

'The design is absolutely incredible, but the small font size being used
means that glyphs are dwarfed by medium-sized subatomic particles.'

And resizing the text isn't always the answer, assuming it is even possible.
Making the text bigger on the Kaliber10000 site reveals the structure of the
typeface, causing it to appear blocky and '80s computer-like'.

No. I am a firm believer in using CSS relative units and leaving the
decision up to the user. It is our job as web designers to conceive layouts
that don't break when text is resized. The fixed width site is a dinosaur -
power to the user!

Simon Jessey

w: http://jessey.net/blog/
e: [email-masked]

---

From: gleemax at attbi.com (John Lewis)
Date: Sat, 26 Apr 2003 19:02:27 -0500

Lonnie wrote on Saturday, April 26, 2003 at 4:16:26 PM:

>> I, as a user, have set my font size to be what I prefer. Setting
>> the page's font size to 76% of my preferred font size seems
>> strange.

> Why? Because browsers typically set default font sizes larger than
> the OS. This is often in conflict with the design.

That may be a good reason to send a nasty letter to browser makers. On
the other hand, most browsers let the user choose their own default,
so it's not at all clear what you'd ask them to do. I'd argue that any
size has a great chance of conflicting with most designs.

I can already choose a good default size. My problem isn't with the
browser, it's with authors who assume I'm ignorant and lazy. They try
to "help" me because, after all, they're designers, so surely they
know what I want better than I do.

> What is expected? The size of menu items is a good gauge. X-browser,
> 76% is a VERY good estimate. If you can read your menus, then you
> should be fairly comfortable with reading text at that size.

76% of my preferred font-size = smaller than my preferred menu size,
and much smaller than my preferred font-size. What you're saying is
true if and only if the user hasn't changed their menu text size, the
user hasn't changed their browser text size, OS text scaling is off,
and they're using a common platform like Windows and IE on a monitor
of "normal" size. That's an assumption you can't make with confidence.
Oh, and of course then they need to have near perfect vision as well.

Nor are the two related; I set the menu size in my OS and I set the
default text size in my browser. Even if you can change the menu size
directly in your browser, I doubt it also rescales your default text
size. Further, the two serve different purposes. I want my menus
taking up as little space as possible while still being highly legible
(where legible means "read easily"). I want web pages to be highly
readable (where readable means "read easily at length"). The two serve
radically different purposes. As such, my menus are set to a pretty
small sans-serif and my user style sheet uses a larger serif.

I don't mind if you override my font-family, even if you choose
something lame like Times New Roman. I may be annoyed, I may disagree
with you, but at least the text is almost as readable as before. But
when you cut the size by a quarter, text suddenly becomes much harder
to read no matter what my preferred typeface is, and odds are your
style sheet will be disabled after about two seconds (Ctrl+G by
default in Opera). If your page is designed well, maybe I'll try
zooming first instead. Maybe I'll simply leave and go read something
else. One thing is certain: There's no way I'll sit there and try
reading tiny text.

> If you, as a user, have set your general font size in YOUR browser
> to something comfortable, it is certainly reasonable for a designer
> to mimic the size of your menu text by adjusting the default browser
> font size with a % value.

That doesn't make any sense. The only way it would make sense is if
you know the size of one or both, and you only have access to the size
of one (and even then you don't know the specified or actual size). As
a web page designer, it's impossible to mimic the size of a menu
without making assumptions about user settings. The two just aren't
related unless by happy accident.

As mentioned above, nor does it mean the text will be readable, even
if you could mimic the menu text.

> Good for you if you've changed the default browser text size to fit
> your viewing pleasure. By setting the default size to a percentage
> of the default, that designer has opened the door for you to tweak
> it to suit your preference. Had he specified pixels, you on IE would
> have little choice.

I use Opera, and I'm not the only one. Even more people use Mozilla
and Safari. Where do people get the idea that everyone uses IE?

> Can you read a typical book?

Yes. That doesn't seem related to CSS.

-- 
John Lewis

---

From: malaja at malaja.f9.co.uk (malaja)
Date: Sun, 27 Apr 2003 01:20:46 +0100

I feel somewhat humble at asking a small question in the midst of CSS gurus,
with wide polarity of view (no pun intended), indulging in an excellent and
important debate. With my business consulting hat on, a simple question...
especially given the cogent example of http://www.k10k.net/, someone's
excellently designed window to the world but so difficult on the eyes.

On the basis that it's impossible to please all users at all times, what, in
your opinion(s) and in ems or %, is the best body/menu/heading/text font
settings "standard" to suit most browsers, on most platforms, for most
users, most of the time?

Mike
Edinburgh, Scotland

---

From: joel.young at ns.sympatico.ca (Joel Young)
Date: Sat, 26 Apr 2003 21:38:50 -0300

At 09:20 PM 4/26/03, Mike wrote:
><snip>

Yes! This is what my original question was about, and I'm glad you brought 
it back around, Mike. Hopefully someone will have an answer for us. In the 
meantime, let's see if I understand a few things.  Someone please tell me 
if I'm even close to knowing what I'm talking about.... :-)

===============
Scenario 1:
Assume that I start my page off like this: body {font-size: 80%}

This means that all text on the page will be rendered only 80%
of the browser's default. Yes? No?
===============
Scenario 2:
body {font-size: 80%}
.classname {font-size: 1em}

All text on the page will still be 80% of the browser's default,
because basically 1em = 100%, and I'm only setting it to 20%
less (which is 80%).  Right? Wrong?
===============
Scenario 3:
body {font-size: 80%}
.classname {font-size: 0.9em}

Okay, NOW the text will actually be just under 80% of the
browser default, because it is 9/10ths of 80% of default.
===============
Scenario 4:
body {font-size: 80%}
.classname {font-size: 100%}

Again, the text remains at only 80% of default, because I've
set it to be 100% of the body font size (not that I would do that,
it's just for example)
===============
One more... Scenario 5:
body {font-size: 100%}
.classname {font-size: 1em} or {font-size: 80%}

Here, the text will either be the full browser default, or 80% of it.
Right?
===============

If all the above are correct, then it's just as easy to set the body at
100% all the time, and simply use smaller percentages for different
sizes.
That, or do body {font-size: 100%}, and use various em sizes, and
everything should work out - keeping the sizes within a reasonable
range, of course.

Did I reach home base, or am I somewhere in left field?

Joel

---

From: mrmazda at ij.net (Felix Miata)
Date: Sat, 26 Apr 2003 20:57:04 -0400

> means that glyphs are dwarfed by medium-sized subatomic particles.'

Zoom to only 150% in Mozilla trunk, and right in the middle text spills
out of its containing image
http://www.k10k.net/images/frontpage/features_wspecials.gif. The site
also depends on image substitutes for text. e.g.
http://www.k10k.net/images/backs/front_issuematrix.gif 
And, if you think it's tough now, try it at 1600 wide or higher
resolution. Hard to figure if the purpose of that site is anything more
than to show off someone's css-d skills.
-- 
"The object and practice of liberty lies in the limitation of
governmental power."                General Douglas MacArthur

---

From: Josh at Ambrutis.com (Josh Ambrutis)
Date: Sat, 26 Apr 2003 21:06:58 -0400

> Chris Casciano :
 
> Yes.

Emphatically agree with Chris. While I hesitate to even chime in on
this, since it seems more than played out and there seems to be
unwillingness to budge on both sides of the issue, I would just like to
add, while this is obviously a *philosophical* difference, if left to my
own devices I would design for the clueless EVERY time, since they make
up the vast majority of users that spend the cash.

Example: http://www-106.ibm.com/developerworks/library/us-tricks/  

.. While it's an older article, so much of it is still true to this day.
Spend some time watching **REAL** users... Not only do many of them not
know what the Stop and Refresh button do, but I have NEVER seen ONE of
our non-technical test users change their font size.  Ever. I've even
asked some to do so specifically and was greeted with the astounded
reply of "you mean I can do that??".

I can't remember if this specific tale of woe is referenced in the above
article, or one that it links to, but I have actually, personally seen
one user complain that he couldn't hit a link in question because he
"ran out of desk".  This was a bio-chemist whose brain must weigh at
least 5 times what mine does, and  who had been using computers for
quite a few years, who didn't realize he could actually pick the mouse
up off the desk and reposition it without effecting the cursor position.
Do you think HE knows how to change his font size?  He doesn't, however
he estimates that a full 60%-70% of his non-essential purchases are made
on-line!!!  THIS is the guy I gotta design for??!!?!  Yes.  And when
presented with larger than life, default windows IE text size, he
detests the excessive scrolling he has to go through, and uses the back
button instead.  I heard him before hitting his back once mutter, "do
these people think I'm blind?".

My dear old mother, who still to this day double-clicks links AND form
buttons on web sites despite all her kids and grandkids telling her not
to, can't set the font size on her browser, even though she's actually
been shown how to a few times, and even had the font-size button added
to her IE toolbar for her. She can use three things.. A web site's
presented navigation, her back button, and her "x" button in the upper
right hand corner.  BUT, she Googles with the best of 'em, and is a
HEAVY internet shopper, even finding full-adult size "footie" pajamas
for my wife and I (which ain't an easy task, but much appreciated in
Northern Maine!).  From what I can discern, what she likes to see on web
sites is 12 pixel Arial, and will probably never learn how to apply her
personal preference at the browser level.. But will shop ecommerce sites
'till the day she dies.  For her, the back button is just easier than
bothering with all the "stupid buttons" on the browser (her words, not
mine).

So, yeah, I'm totally with Chris.  I don't place more 'value' on the
clueless than the "clued"... But the "clued" can figure it out on their
own if they want to. The clueless, who spend the same money that the
"clued" people do, and make up a greater number of users, would prefer
the back button over actually learning how to use their tools.  Bottom
line is: my job ain't to convince them to use their tools, never mind
teach them HOW, my job is to sell them crap, or convince them of
something.  

It just depends on what you do for a living and who your target is.
Programmers and Designers are in no way reflective of the average
internet user, though many of them think they are.

The usual disclaimers apply... Just my $0.02, IMHO, YMMV, etc.. :)

--Josh

---

From: stephen.thomas at adelaide.edu.au (Steve Thomas)
Date: Sun, 27 Apr 2003 14:30:01 +0930

Tony Bounds wrote:
> ...
> ...

I've already been thru a flame war on this on another list, but 
css-d attracts a more sensible crowd, so ...

I'm not sure if this is what you meant, but, one of my pet hates 
is sites which spread their text across the whole width of the 
window. This particularly applies to "minimal" sites where no 
use is made of CSS at all, but I've seen it in lots of other 
sites too.

Now, lots of studies have been done on this, and the evidence is 
not entirely equivocal, but a concensus seems to be that lines 
of text should not exceed a certain length for optimum 
readability. Therefore, it is arguably best to limit the width 
of blocks of text to, say, 33em. (I've played with this, and 
30em seemed too narrow, 35em too wide -- to my eyes.) Certainly, 
this corresponds more or less to what you'll find in any 
bookstore. If print publishing represents 500 years of trial and 
error, then we can feel at least a little confident that the 
present-day format for books represents a pretty good standard 
for readability. (Also black text on a white background, 
although that may also be influenced by printing costs.)

So there is an argument for using something like

	div.text { max-width:33em; ... }

to limit the width of a text block, regardless of the size of 
the user's screen.

But many seem to find any kind of limitations placed on user 
preference abhorrent, so I'm prepared to hear negative feedback 
on this suggestion.

A compromise I've adopted at my ebooks site, 
http://etext.library.adelaide.edu.au/
is to open each ebook in a new window which is sized 
appropriately*, and leave the user free to resize the new window 
if they wish. But I'm still tempted to use max-width.

[* Javascript only lets you specify window size in pixels, so 
this is only going to be approximate at best.]

Regards,
Steve

-- 
Stephen Thomas,
Senior Systems Analyst,
Adelaide University Library
ADELAIDE UNIVERSITY SA 5005
AUSTRALIA
Tel: +61 8 8303 5190  Fax: +61 8 8303 4369
Email: [email-masked]
URL: http://staff.library.adelaide.edu.au/~sthomas/

---

From: gleemax at attbi.com (John Lewis)
Date: Sun, 27 Apr 2003 05:22:54 -0500

Steve wrote on Sunday, April 27, 2003 at 12:00:01 AM:

> preference abhorrent, so I'm prepared to hear negative feedback on
> this suggestion.

On the contrary, I think they'd be inclined to agree with you. I know
I do! I'll now start rambling on about CSS; feel free to stop reading
here if you're busy.

Using min-width in conjunction with max-width is usually superior to
sizing something with a basic em width. The difference is basically
that between a range (e.g., 16em to 32em) and a single number (24em).
I think we can all agree that a range is almost always better.

We don't have anything like min-width and max-width for font-size. If
we did, keeping with the same spirit of min-width and max-width, it
would probably be way too complicated (for author use) anyway. You can
either take monitor, resolution, preferred text size, window height,
and window width into account, or you can let it be useless. Including
only some of the above basically cuts its usefulness so much that you
might as well use font-size, and including it all (or most of it)
makes it so complicated that it would never be implemented, or
probably even specified. Users have their own set of problems. Let's
say it's specified for users instead, with no auto sizing for authors.
You have two main options for min-font-size:

    1. Specify a minimum legible font-size
    2. Specify a minimum readable font-size

The problem is, on a well designed page (1em body text and smaller
navigation text) specifying a minimum readable font-size is quite
imperfect. Sure, text will be your minimum readable font-size--but
that means that stuff you would prefer small (i.e., legible instead of
readable, like menus and legal text) will be too big. On a badly
designed page (smaller body text and much smaller navigation text),
the opposite happens. If you specify the min-font-size to be the
minimum legible size, to erase the possibility of illegible text but
not erase the possibility that text will be unreadable, the navigation
text, which was previously illegible, is now legible. The body text
was already legible, so it didn't change in size! It's still just as
unreadable, because "readable" and "legible" are two entirely
different concepts. Which means your two options above really are:

    1. Screw up small text at well designed sites, but fix badly
       designed sites as well as you can
    2. Don't fix badly designed sites, but leave well designed sites
       alone.

The same applies to max-font-size to a lesser degree, but since
max-font-size isn't quite as important as min-font-size (max-font-size
is like min-width, and min-font-size is like max-width, for those of
you confused but familiar with those properties--although I think
min-width is relatively more useful than max-font-size, so it's not a
fair comparison).

Setting a sane column width doesn't have as great an effect on
readability as decreasing a font-size from an optimum size, which is
by definition unsafe. It's hard to think of a user style sheet that
would cause problems if a page sensibly overrode max-width and
min-width values, unless the need was vital (in which case the user
would have already overriden, rendering the problem moot--keep in mind
I'm only talking about advanced users, since we can assume no one else
would use min-width or max-width or even have a user style sheet at
all).

In the case of neophyte users, setting a sane column width doesn't
have as adverse an effect on readability as decreasing a font-size
from an unknown size, because no matter the em value the column width
will make sense (even if it's unreadable, or produces a horizontal
scrollbar, it will still make sense if you're the page author--which
is all you can know, since you don't control the user or his
computer), because you have knowledge of the entire author style
sheet, there is no user style sheet by definition, and even if you
sniff for a browser and assume a default font size it may have been
changed by accident or by a different user or by OS settings. On the
other hand, decreasing an unknown font-size can lead to illegible and
unreadable fonts (e.g., if you're decreasing a font-size already on
the threshold of legibility or readability).

In reality, setting a max-width is like setting a line-height. It's
related to the font-size, and it affects readability greatly, but
they're both based on the font-size in CSS. You can change the
line-height, margin, padding, width, and so on that are based on ems
with wild abandon. Even changing colors affects readability (so try to
avoid fuschia on magenta, if it's no big deal). You can use them all
responsibly or irresponsibly. The fundamental difference in font-size
(compared to ems in other properties, in this example) is that by
changing it you affect a great deal. When you change the font-size,
margins and padding in ems are also decreased, the actual line-height
is usually decreased, and the width or height of a box sized in ems
decreases. That's a much bigger deal than changing most CSS
properties.

Not all ems are created equal. A value of .5em applied to a width is
always .5em, no matter the actual font-size. Since you know .5em = 1/2
the current font-size, that's valuable even if you don't know the
actual font-size. Setting em on width doesn't change the value; it's
consistent. On the other hand, a value of .5em applied to font-size
changes the meaning of an em. From now on, .5em of that font-size =
1/4 of the 1em and 1/2 of the current .5em, unless you're changing
font-size again, in which case you modify the value for that element
and its descendants as well. You've now lost basically all of the
usefulness of em. You can still calculate values of em, and fractions
and so on (like I did above), but it won't help you design a page
well, since you don't know the actual value. Much of the reason 1em is
so valuable is that it's 1em, not ".9em to 1.3em". That's why assuming
1em is more valuable than assuming everyone's browser default is 16px
except that group, whose default is 14px, etc. The absolute values are
inherently less useful. In a perfect world, you'd know all the values
and style according. You'd also know the users favorite colors and pet
peeves.

You need to know the actual value of 1em to change the value
significantly with confidence, if you want to know you're improving
the user experience. I define significantly as above 6.25%, but it's
sort of arbitrary. Sort of. You could practically change it by 18.5%
or so without causing major harm in most cases, but you're sure to
have an impact that's felt, and there is the very real possibility of
unreadable text. So, 93.75%? Hardly a big deal. I might not even
notice, and even if I do I'm not likely to be hurt terribly. On the
other hand, I'll notice and probably curse 81.5% (depending on the
typeface, leading, column width, and my mood). If you were against
changing font-size for body text generally, because you realized there
are bad things about doing so, you could still change it to 93.75% (or
so) and very few people would have cause to complain. Changing
non-body text to about 81.5% is about as safe. You could get
complaints from veteran users, and it could cause something to be
illegible, but very few people will have cause to complain.

Of course, all that's sort of useless, because my 1em is not Alison's
1em, or Sarah's 1em, or Aaron's 1em. It may be, but it isn't, and more
importantly it can change, from day to day and even more frequently.
For example, my preferred font-size changed no less than four times
yesterday. I wasn't doing much of anything strange--I think it changes
at least twice a day.

Even if a user has a max-width set on body, overriding that value is
less harmful than changing a font-size on body. Indeed, if max-width
on body could cause a problem with your page, you'd do well to
override it preemptively. I think it would be more harmful to not
consider the effect of max-width than to consider the effect and act
accordingly. It would be hard to argue otherwise.

> http://etext.library.adelaide.edu.au/ is to open each ebook in a new
> window which is sized appropriately*, and leave the user free to
> resize the new window if they wish. But I'm still tempted to use
> max-width.

I say go for it! We need more intelligent uses of CSS on the web,
especially of relatively rare properties. Anything to stop JS windows,
I say. Of course, Win IE didn't support max-width last I checked, and
it's funny how most of the web uses Win IE. Oh well.

I thought about some guidelines for text sizing in CSS. At first I was
going to list my own guidelines (in fact, I wrote up the email
yesterday, but I didn't send it), but I think it would be more useful
to list "guidelines for designers." I already know what I'm doing and
what I like. If someone is likely to agree with me, I think they could
just as easily come up with similar guidelines. I might as well list
some things people may actually find helpful.

 1. Size everything relative to body (or the root element)

    Sizing everything relative to body gives you just as much control,
    and it lets a user easily override the "main" setting on body and
    have your page text resize accordingly, both larger and even
    smaller. Use math if you want exact values. For instance, instead
    of 14px body text and 28px headings, use 14px body text and 2em
    headings.

 2. Use safe line-height values

    There's hardly ever a need to specify dangerous line-height
    values. If you want to maintain an exact value from a certain
    size, use a little math. For example, 14px/19px would become
    14px/1.357 (and so on, if you'd like). It's most important to
    avoid 1em/19px or similar, because 1em could be much larger than
    19px, in which case the text would be illegible.

 3. Take text resizing into account

    There's a reason pixel-width layouts suck. If there's no room to
    breath, increased text size values lead to tiny columns of text.
    In an ideal world, you'd use min-width and max-width to size
    columns. The reality is there's no good solution today other than
    avoiding bad situations. That doesn't mean you should neglect
    min-width and max-width, it just means you shouldn't rely on them
    working. Keep it in your "complex" style sheet if that's how you
    do things.

 4. Try to avoid massive font-size changes relative to 1em

    In many ways, some random px value (as above, preferably on the
    body element) is better than a small % of my preferred font-size.
    A small % is surely going to cause headaches, but a random px
    value has a decent chance of working, and a much better chance of
    causing less harm if it doesn't work. On the other hand, about 80%
    of the body size on a menu stands a great chance of being helpful
    and a tiny chance of being harmful. So do that! It's pretty safe,
    and the payoff is big.

 5. Try to consider user style sheets

    I never realized how powerful user style sheets were until I
    started using them. Similarly, it helps a great deal if you've
    experimented with CSS before you tackle potential problems. For
    example, if have a rule like this in a user style sheet

        p{color:white;background:black}

    (ever mind how unlikely that is for the moment) and you have an
    author style sheet with this

        p{background:white}

    we have a problem. Try to set common values in pairs and whatnot.
    If something would look truly hideous with a border, and you could
    imagine someone putting a border on that element in a user style
    sheet, play it safe and override the border. Colors and
    backgrounds are meant to be together; on't forget about
    transparent backgrounds, since you'll probably need or want them
    at some point. Another thing, since so few CSS sites seem to do it
    (for whatever reason), please set a line-height if you assume the
    default value, even if you just use "normal." I don't think it's
    going to harm anyone, and it will benefit those of us trying to
    read a narrow column with a huge line-height (or, theoretically, a
    wide column with a tiny line-height, but that isn't exactly
    likely).

-- 
John Lewis

---

From: derek at derekrogerson.com (Derek R)
Date: Sun, 27 Apr 2003 15:06:46 -0400

Somebody said:
>| I did 100% at one point and got an equal
>| amount of suggestions from users to reduce 
>| or enlarge the default size as I do now. Go figure?

It is my experience that designers tend to make their font-size as small
as possible simply because the content which the font-size contains is
largely, if not entirely, communicative.

This is to say, most blogs/websites/news-stories etc have no
information/knowledge to offer so ostentatious exhibition is instead
brought in to disguise --or make up for-- the absence of
content/substance, which is plainly absent when one reads the words
(i.e. it is communicative).

It is very much like Western/European culture in general, or say
Hollywood promotions, where what is promoted (the movie/tv-show, for
instance) is, upon real experience/inspection [i.e. sitting through the
entirety of the production] not-at-all-worth-the-time-spent, but
everybody-else-is-doing-it, so the tendency (fear) is not to appear
oppositional.

Small-font designers treat their text like greek-text, which is to say,
if they were to expand it and make it much larger-in-size it would
become *painfully* obvious just what is being said (nothing worthwhile).

To provide the /appearance/ of intelligence, relevance, and/or pleasure,
the designer uses small font-sizes to mask the content itself, thereby
saving-face through obscuring what the designer knows to be valueless.

This is the same as people who wear message t-shirts or highly-visible
branded clothing, who, by diverting attention to the message on the
material one is wearing, obscures the wearer (the person) thereby
saving-face and avoiding the pain of being responsible for who-they-are
(don't look in my eyes).  

This is not to say most everything online or in Western/European culture
has nothing genuine to say or lacks value, indeed, this is exactly what
I'm saying, but, rather, that *revelation* of this absence of
sense/content is, its own medicine, so to speak, so that the sight of it
makes one account for it.

In summary, a larger font-size (say 100% ~ the whole tamale) is more
prominent than the usual smaller font-sizes one encounters, which is to
say larger is bigger, which no doubt will cause attention to come
forward (to the content).

The real question is what are you saying (substance) and why are you
trying to hide it? (I understand ostentatious exhibition is largely the
substance of Western/European design).

This email is a characterization of a generalization (seething).

__________________________________________
"Chant down Babylon"

---

From: peter.williams at hendersons.com.au (Peter Williams)
Date: Mon, 28 Apr 2003 07:36:58 +1000

> From: Steve Thomas
> window. 

I've worked on line lengths of 43 chars in the past as being
comfortable for reading. Just last week I used the max-width
directive to prevent text running off to the right in an
unconstrained manner. It only works in some browsers though.
I've really started to try to use w3c standards and ignore
browser quirks and issues where possible for my intranet work.
Unless a page is rendered unusable in either Moz or IE5 and higher
I'll go with a clean, standard HTML 4 Strict or XHTML markup
and some CSS these days. Our public web site is a different
kettle of fish though, I'll make sure that works well in as many
browsers as possible, although I won't use non-validating markup.

<flame class="low crackle">
New windows of a size chosen by the page author are abhorent :-)
</flame>

--
Peter Williams

---

From: stephen.thomas at adelaide.edu.au (Steve Thomas)
Date: Mon, 28 Apr 2003 11:55:42 +0930

Steve Thomas wrote:

> to limit the width of a text block, regardless of the size of the 
> user's screen. 

Experimentally, I've created a new ebook with a slight variation to my 
standard style sheet, to see how this looks and works in practice. You 
can see the result at http://etext.library.adelaide.edu.au/h/h27ro/

The style sheet now reads (in part):

BODY {
        margin-left: 3em; margin-right: 2em;
        color: #000000; background: #ffffff;
}
html>body { max-width:33em; margin:1em auto; }

The last line is the new bit, and this appears to work perfectly in 
Mozilla 1.3/Win. (Also prints beautifully.) It also displays OK on 
IE6/Win, although the max-width doesn't work. Maybe "html>body" isn't 
implemented on IE6? (Can't find that browser compatibility chart right 
now -- too many bookmarks!)

This approach also means that it will display OK on NN4, which ignores 
the last line (I guess).

I'd appreciate some feedback from those with Macs and/or different browsers.

Regards,
Steve

-- 

Stephen Thomas, 
Senior Systems Analyst, 
University of Adelaide Library
UNIVERSITY OF ADELAIDE SA 5005
AUSTRALIA
Tel: +61 8 8303 5190  Fax: +61 8 8303 4369
Email: [email-masked] 
URL: http://www.library.adelaide.edu.au/~sthomas/

---

From: Josh at Ambrutis.com (Josh Ambrutis)
Date: Sun, 27 Apr 2003 23:04:07 -0400

>  Steve Thomas :
> <snip> Maybe "html>body" isn't 
> implemented on IE6? 

Nope, IE ignores the html>body selector entirely... For sure on Win, and
if I remember correctly (which is always a gamble at this hour) also on
Mac.  Reference the common Box Model Hack
http://www.tantek.com/CSS/Examples/boxmodelhack.html.

--Josh

---

From: phiw at l-c-n.com (Philippe Wittenbergh)
Date: Mon, 28 Apr 2003 12:29:33 +0900

> http://www.tantek.com/CSS/Examples/boxmodelhack.html.

IE Mac does support html>body no problems. IE win does not understand 
the > child selector.

Philippe
== | == | == | == | == | == | == | == | == | == | == | ==

Philippe Wittenbergh

code | design | web projects : <http://www.l-c-n.com/>
online image gallery : <http://www.l-c-n.com/phiw/>
IE5 Mac bugs and oddities : <http://www.l-c-n.com/IE5tests/>