Default font size

I was looking at the source for a web page and I noticed that they set the font in the body tag as
body {
    color: #333333;
    font-family: "Verdana",sans-serif;
    font-size: 69%;
    text-align: center;
}

Firebug shows the computed font size as 11.033px.  If I disable the font-size:69% line in the body tag, the font size jumps up to 16px.  

When you say font-size:69% in the body tag, 69% of what?  What comes before the body to set the font-size, apparently to 16px in this case?  Surely no one is depending on the browser to set a font size.

Thanks for any thoughts.
stevaAsked:
Who is Participating?
 
DesignbyonyxCommented:
Actually, the percentage font size is a common technique used for fluid website layouts.  It also respects the users default font size on their browser and scales the site respectfully.

So for example, most browser's default font size is 16px.  69% of 16px is roughly 11px.  But lets say someone sets their default font size to 18px because they have poor vision.  Then by default, the text is going to be larger (roughly 12.5px) for this user.  

If the developer had set a hard pixel size (lets say, 11px as opposed to 69%), then the person who is seeing-impaired would be angry as he cannot read 11px type size.  By setting a PERCENTAGE based font site, the developeris respecting the end users default font size.  It's harder to build sites that have adaptive font-sizing, but at the end of the day you have to respect the preferences of the end user.

For all of my sites, I set the body font size to .821em, which is essentially 82% of the default browser settings... which translates to about 13px for most browser.  I have found this font-setting to be universally acceptable to most of my clients.  If the end user has a larger font setting, then my sites will adapt and display larger text.
0
 
plusone3055Commented:
what you saw is a poor example of CSS.. Developers  do not set font in percentages. You just saw a bad example of code and it happened to work.

0
 
LZ1Commented:
I agree with plusone, it's a bad example of CSS.  The 69% is of the default browser font-size.  Generally a reset sheet will help all that.

http://meyerweb.com/eric/tools/css/reset/ 
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
stevaAuthor Commented:
Yes,  my initial  thoughts also.  But the site  itself  is stunning!  It was done by a $3B book publisher in France, who probably had a whole floor of inside web developers and graphic designers working on it.  So I'm a little slow to write it off as poor workmanship. That's why I was hoping I would learn something useful from this question - some buried nugget of wisdom.  

The site is here.  

I'm impressed because It has tons of information but it never overwhelms you.  It's like a beautiful tree full of ripe fruit.

0
 
DesignbyonyxCommented:
If you want to see what I mean, you can check out this site:

http://www.ericrossinteriors.com/

For this site, I made the ENTIRE site scalable.  In a nutshell, I used EMs for almost ALL of my measurements.  So you can go and disable the font size for the BODY tag, and you will see the ENTIRE site scale up proportionally.  This client has a lot of older clients, so I built the site so that it would scale for those users who change their default browser font size.

Cheers.
0
 
stevaAuthor Commented:
Designbyonyx:

Yes!  That's the nugget of wisdom I was hoping for.   I gave you the points.

BTW, I liked your ericross site a lot.  There are two things there I'm especially curious about. I noticed that you set up the customer with their own YouTube channel, which they have some style control over. Could you point me to more information on doing  this?  The second is the slide show.  I didn't see any sign of a Javascript platform in your source or any obvious source of a lightbox engine, so I'm wondering what drives it.

Thanks again for the question answer.


0
 
DesignbyonyxCommented:
I did not set up the YouTube channel, and I have never done it... but there is plenty of information on the interGoogle on how to do this.

Also, I used FancyBox for the image gallery, which IMO is far supperior to Lightbox.  I haven't' used lightbox for several years, so it has probably gotten better... I  now use Fancybox b/c I have done some customizations that I use on many projects.

Thanks for the compliments.  There's also some good documentation about using EMs for font sizing, which should verify that it is by no means a "poor" technique.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.