If you re-size the Font in body, then everything in your website will be increasing/decreasing a “Base Font” that is only 90% the size of the default browser Font Size, right?
That seems kinda dangerous, because when you get deep into your website and code, now when you type…
I set the family in the body, that way I don’t have to constantly repeat the family in practically all my classes and IDs. I also set the font size in the body, and honestly, I rely more on my eyes than the mathematics for sizes. Although I use sites like http://www.pxtoem.com so see what the conversions are without calculating, I like setting a base font em or % because if I need to adjust the size of the whole site, it gives me the power to do it accross the board, AND if the line heights are in ems, it will adjust those naturally too.
However, yes you do have to be careful because when you set your fonts in ems, the cascade will change the sizes. So if you have 1em in your body, then .8em in a parent, then .8em in the child will be even smaller than the .8em in the parent because it is calculated based on the cascade not the original size. To me that is the real potential hazard of ems and %, a hazard that exists whether you base the font in the body or not.
Browsers all have default font sizes, so if you don’t set your body font size, you are still basing the em on SOMETHING, usually 16px. I might be wrong about any of the above, but it’s how I understand it.
The bottom line here is that the user can totally over-ride in their browser any font sizes you set anywhere on your website.
I always set “my” default font sizes for the <body> and <h1> to <h4> elements in em’s. With em’s the font sizes will be that fraction of whatever the user has as the default size in their browser. But as I said, the user can totally ignore any font sizes you specify and they can specify their own font sizes in their browser.
There is no danger in using em’s or % for font sizes in the <body>, or anywhere else for that matter, provided you know what you are doing and understand how the font sizes for rendering are calculated when setting font sizes in child elements.
In my experience, the perception of using em’s or % as being dangerous comes from those who don’t understand fully how font sizing works.
What I do, since the default size in most (all?) browsers is 16px, is to set the body font-size to 62.5% (10px) and work from there. I found out that working with em’s from a base size of 10px is a lot easier than working from 16px.
You can use whatever default size you want and specify it however you like, as long as it is valid of course. But remember, the user can choose to totally ignore any font sizes you specify and instead specify their own font sizes for any elements they like in their browser.
I guess I do not understand your line of reasoning. Doing a conversion like that doesn’t seem to be even necessary because you are just comparing apples to oranges at that point, right? If you set your base font size to .875em in the body, and the original text size is 16px, that means the base size is now 14px. That means that if you set someClass {2em}, it is now 28px. What’s the problem?
That appraoch was popular for a while (the 62.5% sizing, that is), but is discredited now, as it has the potential to make text completely unreadable for some users. It can potentially lead to extremely small font rendering, so better avoided. You can easily Google the arguments against it.
… and on computers like mine where the default is 20px and not 16? Or my media center where it’s 24px? Or my old phone where it was 12?
62.5% does NOT equal 10px on all systems, so that’s a very FOOLISH choice – as I’ve said MANY, MANY, MANY times on these forums, I’d like to find who started the 62.5%=10px bull – and introduce them to my buddy Shawn…
Once there was this girl who
swore that one day she would be a figure skating champion.
… and when she finally made it… she… saw…
some other girl who was better.
…and so she hired some guy to club her in the kneecap…
As to DoubleDee’s question, I usually set 85 to 100% on body depending on the face (serifs generally need larger font, not all faces are the same) – entirely BECAUSE it cascades down through the page. I want larger I can say larger, I want smaller I can say smaller – I do NOT worry about ‘exactly the right size’ because the size will be different depending on the user’s choice – which is the ENTIRE REASON TO BE USING %/EM IN THE FIRST PLACE!!!
NOT that you should be changing sizes ‘all over the place’ like most people seem to. Headings a little bigger (120-150%)… Much like the VERY good advice you’ll hear from time to time of “only use one or two font faces on a page” – the same should be applied to sizes for the most part. for 95% of the text on your page (pulling a percentage out of my ****) setting your font size should be a matter of “set it and forget it”.
… and BODY does a great job of that.
I think that’s what a lot of people coming from the whole “what do you mean I shouldn’t use px” mentality never quite grasp – the entire POINT of using %/EM is that it’s dynamic and inherits… and frankly if you’re nesting them enough for it to be an issue, there’s probably something wrong with how you’re building the page.
Based on some of the comments, it seems that some people are missing my original question(s).
I don’t have a problem with EMs. After all, I’m using them!
And I don’t have an issue with “cascading”.
What does seem strange to me is starting off with the highest level (i.e. <body>) being 0.90em.
To me that says, "Whatever size the User has chosen as their defaults font (e.g. 20px for DeathShadow, 10px for Hueij) it is TOO BIG so I need to knock it down 10% to 0.90em!)
That seems strange…
First, it presupposes that everyone is viewing my website in font that is too big?!
Next, to my original question, it just seems like you are starting off with a weird size and then from there everything is a derivation of a derivation of a derivation…
Assuming my browser is set to the default FireFox size, and assuming everything I develop looks reasonably good/readable, then I guess it doesn’t matter what ___em I am using when and where, but I’m big on SIMPLIFICATION and SYMMETRY and I just guessed that you’d leave <body> at “1em” and then increase/decrease from there?!
Yep, that’s exactly what it says, and it’s quite arrogant, although most people probably don’t set their font size themselves, but accept what the browser/system default dishes up, so designers want some control, thinking the larger sizes don’t look good. Still, it won’t kill users to hit Command +/- (or whatever the PC equivalent is).
If anything, I always set the body font size to 100% (which should be unnecessary, but apparently helps some older crap browsers).
I think “ärrogant” is a bit harsh. I normally set the default font-size for plain text in the <body> to 0.9em, which is the size I would like if I was visiting the site.
I suppose I could go tweak the default text size set in the browser, but like you say, most people leave the default setting.
That’s to help IE6 which has a scaling bug if you use em (although they are exactly the same thing as far as font-size is concerned). If you use em on the body (or nothing at all) and the user changes the text size it jumps up wildly. So use percent on the body and then you can use ems or percent everywhere else where needed.
You just need to be sensible with your font-choices and if you start very small then older browsers will never be able to get the text large enough to read. In reality there’s no difference from setting the font-size to 100% and then setting all the inner elements to 85% as there is from setting the body to 85% to start with. As others have said you just create a relationship between the font sizes on your page without worrying too much about what pixel size that equates to.
To get around the compounding issue css3 has introduced the rem (root em) unit but I’m yet to be convinced of its usefulness although I could see it being useful for small islands of content that you drop into a page and don’t want to be effected by context.
It’s not strange when, as I mentioned, different font faces are NOT the same size or have the same legibility needs. The default size is typically for a serif font like Times New Roman - you put 16px times next to 16px arial and…
Actually, let’s make this clear as a bell as to the ‘why’…
<style type="text/css">
span {
display:inline-block;
width:10em;
}
body {
font-size:16px;
}
div {
font-size:20px;
}
</style>
<h2>16px == default on 96dpi</h2>
<span>This is a test</span>default (times new roman)<br>
<font face="arial"><span>This is a test</span>arial</font><br>
<font face="comic sans"><span>This is a test</span>comic sans</font><br>
<font face="corbel"><span>This is a test</span>corbel</font><br>
<font face="courier new"><span>This is a test</span>courier new</font><br>
<font face="dejavu sans"><span>This is a test</span>dejavu sans</font><br>
<font face="dejavu serif"><span>This is a test</span>dejavu serif</font><br>
<font face="franklin gothic"><span>This is a test</span>franklin gothic</font><br>
<font face="georgia"><span>This is a test</span>georgia</font><br>
<font face="impact"><span>This is a test</span>impact</font><br>
<font face="segoe ui"><span>This is a test</span>segoe ui</font><br>
<font face="tahoma"><span>This is a test</span>tahoma</font><br>
<font face="times new roman"><span>This is a test</span>times new roman</font><br>
<font face="trebuchet ms"><span>This is a test</span>trebuchet ms</font><br>
<font face="verdana"><span>This is a test</span>verdana</font><br>
<div>
<h2>20px == default on 120dpi</h2>
<span>This is a test</span>default (times new roman)<br>
<font face="arial"><span>This is a test</span>arial</font><br>
<font face="comic sans"><span>This is a test</span>comic sans</font><br>
<font face="corbel"><span>This is a test</span>corbel</font><br>
<font face="courier new"><span>This is a test</span>courier new</font><br>
<font face="dejavu sans"><span>This is a test</span>dejavu sans</font><br>
<font face="dejavu serif"><span>This is a test</span>dejavu serif</font><br>
<font face="franklin gothic"><span>This is a test</span>franklin gothic</font><br>
<font face="georgia"><span>This is a test</span>georgia</font><br>
<font face="impact"><span>This is a test</span>impact</font><br>
<font face="segoe ui"><span>This is a test</span>segoe ui</font><br>
<font face="tahoma"><span>This is a test</span>tahoma</font><br>
<font face="times new roman"><span>This is a test</span>times new roman</font><br>
<font face="trebuchet ms"><span>This is a test</span>trebuchet ms</font><br>
<font face="verdana"><span>This is a test</span>verdana</font><br>
</div>
at the same font size, different font faces don’t render the same size… I think that’s part of what you’re missing. See how Arial is so much larger than the default/times? Get a load of DejaVu, Courier new and Verdana, some of the worst offenders in that department.
You change the face, want the same size, you have to adjust – which is why when using serif fonts I typically leave it at 100%, while on sans-serif I go smaller… how much smaller depends on what font family and stack I’m using.
It’s also where EM can be annoying in browser, as the fonts don’t report the actual width of a letter M – so saying “10 em”… well, all of the spans making the column above are 10em – does it look like those fonts would have the same width caps M? It can be REALLY annoying when dealing with monospace fonts.
Like “courier new” in the above demo. I’m declaring 10EM… its’ a monospace font… that means the fourteen character long “this is a test” shouldn’t even fit.
It’s why you can’t predict font size across platforms and typically should plan for 15-20% growth of an area even when using %/em… or even pixels for that matter! It’s another reason why fixed width layouts and fixed width/height containers on elements are a miserable /FAIL/ at web design and development!
I also think it’s why some folks favor verdana – they don’t realize that the other sans-serif fonts would be just as legible if you increased their size 15-20%; they get tricked into thinking it’s got better glyphs just because it’s larger at the same declared size… which is why many sites designed with Verdana are useless without zooming in on systems that don’t have said font available.
Bottom line, I want arial at the same approximate size as times new roman is at the default size, I need to declare it at 85% of that default. The default isn’t just about size, it’s about face.
That’s an interesting idea. I’ve been able to avoid the compounding issues so far. If I have defined the size in the BODY, I just define any variations at the child text element level rather than a parent level. So, if I have a side bar with smaller text overall than the rest, I define that in the p element, like .sidebar p = .8em, and combine that with .sidebar li and so on. So, then if I have headers that need to be the same size as the main content or bigger, I don’t have to start overcompensating for the compounding in the H elements by all these strange em sizes, I want the em size variations to be based directly on the BODY as much as possible.
To me, since I place all regular copy in <p> tags that is where I define my sizes. Anything I can do to keep from having a middleman between the body and the innermost children, I try to do it and it has worked out pretty well.
No you can set the size on the body to start with (usually set a size that suits most of the elements on the page) then when needed apply the changes to the elements that need it but avoid doing things like:
#test div {font-size:80%}
The div is likely to be nested and will compound unlike the p element that actually holds the text.
#test p{font-size:80%}
For lists the same applies and avoid:
#test ul {font-size:80%}
but instead ul#nav {font-size:80%}
Then nested lists won’t compound.
Which means also avoid :
ul#nav li {font-size:80%}
Because nested lists will be affected by the above.
Of course you van compensate where things have to be nested.
e.g. #test ul(font-size:80%) #test ul ul {font-size:100%}
