Solved

Default font size

Posted on 2011-02-21
7
291 Views
Last Modified: 2012-05-11
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.
0
Comment
Question by:steva
7 Comments
 
LVL 22

Expert Comment

by:plusone3055
ID: 34946428
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
 
LVL 30

Expert Comment

by:LZ1
ID: 34946476
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
 

Author Comment

by:steva
ID: 34946981
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
ScreenConnect 6.0 Free Trial

Check out the updates in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI that improves session organization and overall user experience. See the enhancements for yourself!

 
LVL 14

Accepted Solution

by:
Designbyonyx earned 500 total points
ID: 34946994
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
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 34947073
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
 

Author Comment

by:steva
ID: 34947264
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
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 34947549
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

Featured Post

ScreenConnect 6.0 Free Trial

Explore all the enhancements in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Find out what you should include to make the best professional email signature for your organization.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question