Solved

Default font size

Posted on 2011-02-21
7
289 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

863 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

25 Experts available now in Live!

Get 1:1 Help Now