Relative font sizes?

Hi,

I’ve heard about them, but what is the best way to include relative font sizes in a web site? Is it right the default font should be 76% for the p tag?
I just need it so when the text resize is used on the browser, the site will change gracefully.

Does this mean I need to also look at my width/height values in my CSS for <div> elements?

I’ve seen the following:


h1 { font-size: 160%; }
h2 { font-size: 140%; }
h3 { font-size: 120%; }
h4 { font-size: 100%; }
h5 { font-size: 85%; }
p, ul, ol, td { font-size: 85%; }

ul ul { font-size: 100%; }
td p { font-size: 100%; }

body { font-size: 80%; } 

used previously, but don’t want to mess up my layout :frowning:

Thanks for any advice.

I reset everything in one fell swoop while paying no attention to what an “ideal” font size should be since the user will have ultimate control over that anyway.

What I tend to do is set the font size to 85% and then the leading (line-height) to 1.5 so that the fonts can scale nicely - and if using an elastic layout, the containers as well (when sized using EM).

I’ll also set the heading sizes to 1em as well. Here’s a rough example…


body {
	background: #FFF;
	color: #000;
	font: 85%/1.5 verdana, arial, helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font: bold 1em/1.5 georgia, garamond, "times new roman", times, serif;
}

From there, I can declare what I need to be larger or smaller by targeting a specific selector within a particular element or attribute (classes or IDs).

Don’t get fooled into thinking that 62.5% = 10px because it doesn’t. Not only do certain browsers actually obey the system metric (the operating system), such as Internet Explorer and Opera, but others also use 16px as a default no matter what (Gecko browsers such as Firefox), and then to make matters worse you have Safari, which IIRC uses 14px (or thereabouts) as well.

And then if that wasn’t bad enough you also have some people who have their .dpi settings set to “large” (100 .dpi on Linux, or 120 .dpi on Windows) rather than “normal” (75 .dpi on Linux, or 96 .dpi on Windows), which results in the fonts being approximately 25% larger (this can be simulated in Firefox by increasing the text two sizes by using the control button and mouse wheel).

Just remember that when you use the example code above (should you decide to use it), that you’re setting the font size to be 85% of whatever the user’s browser has it set to, and the line-height will be 1 1/2 times that (to allow for sufficient white space between lines of text), and that EM measurements (such as the headings) will be set to that baseline - in this case the 1em of the headings will be the same size as regular body text, but can be over-ridden individually on an as-needed basis.

Using one relative font size for body and another for paragraphs, lists, tables, etc. is not a good idea. The issues of nesting elements will cause a nightmare and result in unnecesssarily bloated CSS.

Instead, set the desired font size on body and be done with it.

Forget the silly stuff about ‘converting ems to pixels’, because that’s a fallacy. It’s like comparing apples to oranges. Think in ems instead of pixels and everything becomes much easier.

Hi,

I use this method that sets all browsers to have a 13px font size by default.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body{    font-size: 13px}
</style>
<!--[if IE ]>
<style type="text/css">
/* IE CSS Document */
body {font-size:x-small;f\\ont-size:small}/*ie5 and 5.5. that are one size out*/
body table{font-size:x-small;f\\ont-size:small}
</style>
<![endif]-->
</head>
<body>
</body>
</html>

This assumes the user hasn’t changed the browser settings to ignore fonts or use their own definitions etc.

By setting the font-size in the body to 13px you sidestep the issue of what the default font size setting is because if you said 75% then that would only be 75% of the default which may vary between browsers.

To get over the fact that IE won’t scale font sizes the keywords are used as a base instead which will allow scaling and the keywords chosen will equate to 13px also.

From then on in the inernal elements in your page you can increase/decrease the font sizes using percentages by what ever percentage you need and the relationship will be stable. There is a chart on the yahoo font page that tells you roughly what percentages to use to effect pixel changes.

Be careful when setting font-sizes on elements that are nested because the relative size will compound. If you had a nested list where the parent was set to 85% the a nested ul would be set to be 85% smaller than its parent and so on. Compounding is an issue you will need to understand in order to avoid or correct it.

In nested lists you could do this.


ul{font-size:85%}
ul ul{font-size:100%}

Of course you will need to make sure that the elements that hold your text content can grow also. This doesn’t always mean sizing then in ems as well although if you did the scaling would be much better. Just make sure that if elements have a height and contain text then set a min-height instead (or no height at all) and then they can grow with the text even if they may look a little odd at times.

Remember that ultimately the user has control so all we can really strive for is a best fit type of scenario.

Here’s a very old em demo:

http://www.pmob.co.uk/temp/emdemo.htm

lol - three different opinions to choose from :slight_smile:

Depending on the site, I usually set my body font size to 0.75 or 0.8em, and then go from there. Headings slightly larger, footers slightly smaller. And that’s really all you have to worry about.

Haha no kidding. Many thanks for such a positive and speedy set of replies.
I’m off to try implement one of them, and hopefully it’ll work out ok :slight_smile:

Thanks again!

Oh, and Paul, I think I can trump your old EM demo with this: http://www.dan-schulz.com/temp/4columnlayout/ :wink:

So if I went with:


body {
font : 75% arial, sans-serif;
}

I wouldn’t have to declare font sizes in the rest of my CSS ?

If you want the font sizes to all be the same size (75% of whatever the browser says the default font size), yes. I do the same thing with my reset example above, as you can see in the link I provided a couple posts up.

Aaa yes, this one I see that, looks great. I think I’ll try something similar for mine, or perhaps even try using the first example I put up and see what happens :slight_smile:
Thanks.
I’ll be back :slight_smile:

That will incur an incorrect scaling bug in IE and you should use 75% or 80% instead.

I wouldn’t have to declare font sizes in the rest of my CSS ?

So all the text is going to be the same size everywhere:). Seems unlikely to me. However, that is no different to all the other methods above in that respect as they all set the font size for the body. My method is the only one that you can guarantee (as much as you can guarantee these things) will set text at 13px though :slight_smile:

Looks good Dan :slight_smile:

The only comment I would make is that my demo scales the whole layout so that it is still the same uniform layout but only bigger/smaller. I’m not saying that it’s any better and may indeed be worse if you don’t like sideways scrolling but just a different approach. Your method is good for keeping the content on the same viewport and saves that sideways scroll effect although it may change the look of the layout a little. :slight_smile:

Well you know me, I like adaptive layouts and HATE horizontal scrolling, though that’s the Opera user in me talking.

Not if you want all normal text to be 75% of what the user prefers and accept that the font sizes of headings are a browser-dependent factor multiplied by that. You’ll usually end up with a 12px base font, which may be a bit small for a hi-res monitor. It depends on your target audience, though.

Me, I’ll often set the base font size (on html or body) to 81.25%. That will make it 13px in most contemporary browsers, unless the user has changed his/her settings. Paul’s method is another way, although it doesn’t respect user preferences quite as much. Of course, the only real way to do that would be to use 100%, but most users don’t change the defaults and 16px is too large for comfort with most fonts.

I’ll also specify the font sizes for headings, since the browser defaults aren’t very aesthetically pleasing. For those I’ll use percentages or ems, i.e., make them relative to the base font size to preserve the proportions if the user changes the text size.

I use em for the dimensions of all containers, as well as for most paddings and margins. That also helps preserve proportions.

Setting the base font size as a percentage has the added benefit of fixing an IE bug that otherwise makes sub-one-em font sizes microscopic. I don’t know if Paul’s way does that, too, or if he simply avoids using sub-one-ems.

The keyword method avoids this bug also. :slight_smile:

Paul’s method is another way, although it doesn’t respect user preferences quite as much

Yes agreed - although we are all doing that in some respects if we reduce the size via the body element.

Good to know. Thanks, Paul! :tup:

Absolutely. I meant to write that, too, but I guess it didn’t come out very explicitly. :slight_smile:

Hi Guys,

I see that none of you guys do it this way so I thought I’d add my two cents in order to give another opinion. This is the way I do it - the 62.5% way. It’s clean and easy to understand - that’s why I use this method.

The fact remains that you have to give the base font size a percent value or key words to prevent the IE bug. So if that’s the case, then why not give it a 62.5% instead of 75% or 81.25% in order to make things a little easier. But that’s just me - everyones brain works differently. Which ever method is the easiest for “you” to wrap your brain around is the one that you should use. All the methods explained here in this thread are solid.

body {
height: 100%; /* helps make height 100% /
font: 62.5%/1.5 Tahoma, Arial, Helvetica, sans-serif; /
62.5% makes font-size 1em = 10px, 1.2em = 12px, etc /
background-color: #FDFDFD;
color: #333;
}
/
------------------ Typography ------------------- /
h1, h2, h3, h4, h5, h6, p, pre, blockquote, address {
margin: 0 0 1em;
}
h1 {
font-size: 2.2em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.8em;
}
h4 {
font-size: 1.6em;
}
h5 {
font-size: 1.4em;
}
h6 {
font-size: 1.2em;
}
p, ul {
font-size: 1.2em;
}
ul {
margin: 0 0 1em 25px;
list-style: none;
}
ul ul { /
fixes nested lists */
font-size: 100%;
font-weight: normal;
}

I have taken the time and trouble to set the default font size in my browser at 20 pixels, which is what my ageing eyes need to see print clearly on an LCD monitor. Now you decide that when I visit your site that my preferences don’t matter, and that you are going to present me with text that is smaller than optimum for my eyesite. So I have to do extra work to enlarge the fonts when I visit your page.

Ever consider that I might not bother with the extra work and just go away to some site where they treat my preferences with more respect in the first place?

Do you just not want money or business from older folks, is that your plan?

Because 62.5% is likely to be 10px for many users, which is way too small to read unless you’ve got the eye-sight of an eagle or run a 21" monitor at 800×600.

You then need to increase the font size for all elements, which causes lots of trouble when nesting elements. Why bother with that when you can set a more legible size from the start?

There is no reason whatsoever to set the base font size as small as 62.5%, since the notion that this will equal 10px is utterly false. Ed’s reply above is a prime example of that. He’ll get 12px or 13px, and if you’ve relied on the belief that 1em=10px the layout will fall apart.

I’ve got a question for you, Ed: Did you set the size to 20px because you need it to be 20px, or because that gives you a good size on pages that set the font to 75%–80%?

Ed, I think you may have overlooked some important statements throughout this thread.

Of course you will need to make sure that the elements that hold your text content can grow also. This doesn’t always mean sizing then in ems as well although if you did the scaling would be much better. Just make sure that if elements have a height and contain text then set a min-height instead (or no height at all) and then they can grow with the text even if they may look a little odd at times.

Remember that ultimately the user has control so all we can really strive for is a best fit type of scenario.
As Paul has stated, and as most people are aware of, is that at the end of the day the user is still the one that is in total control of text size.

With all of the methods described above it is just an effort to create a layout that will hold together and look decent through various font size changes on the users end.

              I have taken the time and trouble to set the default font size in my browser at 20 pixels

I guarantee you it takes a lot more time and trouble to develop a website that is accessible to all people and there have already been two examples posted so far. With most modern browsers supporting zoom features now there is no one with eyesight that has been left out. Those using FireFox can just press the Ctrl key and scroll the mouse to increase font size.

In my opinion Elastic layouts are the most user friendly as the whole site scales with font changes.