Best Practice for font-size?

Hi all,

I am reading a book on CSS and have some knowledge in css, but one thing I am having difficulty with is discerning what the best practice is for css font-sizes.

Should I use relative font-size in css (i.e: % or em) or should I use the distinct sizes (i.e: xx-small or 14px) with an increase/decrease font button on the web page?

Thanks!
-James

Usability-wise, it’s better to use relative sizes so that the user can resize the text themeselves (using the functions of their browsers).

I tend to start with something like 80% for html/body (as a “global” setting for the font size), then use ems from then on. For some elements - footers, for example - I might opt for a fixed size (e.g., 10px)

I put a percentage on body and then use EMs for other elements.

This might be helpful:
CSS Font Size Explained
How to size text using ems

Why not just simplify and use one or the other? There isn’t a noticeable difference, is there?

If you mean between px and ems (or %) yes if you have poor eyesight and use IE. You can’t resize px sized fonts and you would not do that, block a large number of people accessing your site.

Between % and em, there is a bug in at least one version of IE that can not cope with a font-size declaration in the body tag. So you set you font-size in % in the bodytag 100% = 16px, 75% = 12px, 62.5% = 10 px (at normal font size) and use ems from there.

Read the links that Kravvitz provided for more.

they are effectively the same, so yeah you can also use % throughout your stylesheets.

Also a tip for the font-size beginners;
relative fontsizes (EM/%) are inherited, that means when you declare
body {font-size:90%}

#column1 {font-size:110%;}

p {font-size:95%;}

So the effective fontsize of a paragraph in column 1 is, 90x110x95=94%.
These fontsizes are again multiplied when a user changes the text-size is his browser. Inheritance of fontsizes can give surprisingly large or small font sizes when you change the browser’s text size, so it’s good practice to keep font-size inheritance as low as possible.

(for instance by declaring fontsize on “#column1 p{” as 94% rather then declaring sizes on both “#container1” and “p”.

Hello

body{font-size:75%;}

div {font-size:1em:}

.wrapper{width:64em;}

75% of 16px (default font size) 12px
12 x 64 768 px

% and em scale if the user increases the font

basic 3 column demo


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Basic 3 Column Bare </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	*{margin:0;padding:0;}
	
	body{font-size:75%;background:#a2a2a2;}
	
	div{font-size:1em;}
	
	.wra{
	margin:0 auto;
	background:#b7b7b7;
	}
	.w{width:64em;margin-top:.5em;}
	
	.he{background:#ff8c00;}
	
	* html .he,* html .fo,* html .na,* html .r{ height:1%;}
	
	.na{background:#fbfbfb;}
	
	.l,.ll{ width:14em;}
	.l{float:left;}
	.ll{float:right;}
	
	* html .r{float:left;}
	
	.q{background:#d8d8d8;}
	* html .q{width:100%;}
	head+body .q{margin:0 14em 0 14em; }
	
	
	
	.fo{background:#fbfbfb;clear:both;}
	
	.wra h1,.wra p,.fo p{padding:5px;}
	
	</style>
</head>
<body>

<div class="wra w">

<div class="he">
<h1>header</h1>
<p>Basic 3 Column Bare</p>
</div>

<div class="na"><p>nav</p></div>

<div class="l"><p>left<br /><br /><br /><br /><br /><br /><br /><br /><br />end</p></div>

<div class="ll"><p>left<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />end</p></div>

<div class="r">
<div class="q">
<p>Content in this box must always be heigher then that of the left or right colunm</p>
<p><a href="../../../layouts.htm">back</a></p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
</div>
</div>

<div class="fo"><p>footer</p></div>
</div>

</body>
</html>

oh and another point, different browsers assign certain fontsizes by default to some elements, like Hn tags for example.
If you want to take back control over all elements from the beginning you can reset the browser’s internal fontsizes:

  • {font-size:1em}

Nobody uses small or x-small? Because the problem I have with ems is that while in Firefox and Opera looks fine, in IE looks horrible and big.

Are you setting your font size in % on the body first?

No, I used to set up a default size for the body in ems as I know that helps to disable people, but it does look so much bigger in IE…

With small, the difference between browsers is still big. Then I started to use x-small, because it is a size that at least looks similar among browsers (a bit small in Firefox, but still redeable).

I tried to use 75% for the body… The difference between Firefox and IE is similar to using x-small. Is there any advantage for using %?

Hello

if you set body font to % , (100%) there is n inprovement in IE for view with font size large extra large , small, etc

IE has some bugs when it comes to font sizing in ems. These are eliminated by setting the base font size (e.g., for HTML or BODY) in percents. It doesn’t matter (for IE) which percentage you use.

I got hooked on the idea of using em’s for everything, not just font size.

I have now rolled back to using pixel sizes again as I found the Konqueror browser had a tendency to “break” whan dealing with em’s.

Firefox and Opera will increase text size for the user even if text is in pixel sizes. I would wish to hope any user with accessibilty requirements would not be using IE.

I have used pixel sizes for quite some time now. My clients just couldn’t accept the variation that results from using other methods, and I have never been happy with the CSS hacks required to make relative font sizes consistent.

I am OK with it because of the fact that both Opera and Firefox provide very good methods of overriding CSS font sizes.

Also, the one person I know who is vision impaired uses the Microsoft Windows screen magnifier. It is like a built in magnifying glass that gives the user a magnified view of whatever the user’s mouse is hovering over. It allows him to not even have to worry about whether or not a web designer used fixed or relative font sizes.

I think you should never have your body text font-size below 90%.

An ideal thing would be if every website had their font at 100%, and let the user decide what setting they liked. I browse at + 1 level font size, and I find myself having to change it a bit, because some sites have way too small text (no, its not just my eyes :p)

You shouldn’t have to use any ‘hacks’. Set your body size in % and scale everything else in either ems or % and there shouldn’t be much difference between the browsers (except for Opera I find which is a bit smaller).

The thing is that many people don’t change the font settings in their browsers.

Most Windows browsers default to 16px for sans-serif fonts. Many Linux browsers default to 14px.

But do your clients accept that roughly 20% of all visitors will find there font size too small and leave the site (80% IE market share * 25% of all people have eyesight problems) and if you are targeting the 40+ age group, that is closer to 95% of your target group.

Actually the default is 16px in all Windows browser, all recent (ie post 2000) Mac browsers and the Linux browser I recently tested (FF, Moz, Konqueror on Ubuntu and Fedora).