Solved

Default font size

Posted on 2011-02-21
7
288 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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

757 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now