Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Default font size

Posted on 2011-02-21
7
Medium Priority
?
298 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 14

Accepted Solution

by:
Designbyonyx earned 2000 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

610 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