What is the best font size to define in the body tag?
For example from something I read years ago I’ve always set the body font-size to 67.5%. From this I can define my fonts for the rest of the css doc in em’s that are easy to understand.
So by doing this 12px would be 1.2em 16px would be 1.6em.
I’ve now seen something saying you shouldn’t define the body font-size lower than 80-85%. Bit confused now.
So what is wrong with 67.5%? What should I be using?
Thank you.
I assume you mean ON BODY, and not on the tag? (since that’s presentation and as such has NO BUSINESS in the markup?!?)
the 67.5% BULL is 100% flawed and pure manure… why? because not all machines are 96dpi so that alleged 10px ends up 12px (rounded down from 12.2) on my workstation and 15px on my media center machine (120dpi and 144 dpi respectively).
Which is the POINT of declaring %/em fonts – they will adjust automatically to the size the user wants WITHOUT them having to dive for the zoom!!!
On top of which, it’s moronic to declare a default font size on all elements (since all inherit from BODY) that is smaller than you’d actually want on the page – and for the majority of people anything smaller than 85% is usually USELESSLY SMALL… since that’s 10px 72dpi, 14px 96dpi, 17px 120dpi and 21px 144dpi…
NOT ALL COMPUTERS ARE 96DPI, no matter how much the dips working on Webkit try to claim otherwise.
Quite some time ago I made a small demo to show the font size rendering differences across OS platforms and by font-metric, and how certain browsers are USELESS from an accessibility standpoint (webkit/gecko based)
http://battletech.hopto.org/html_tutorials/fontCompare/template.html
Just another reason many people actually stay with IE… or the fringe whacko’s like myself who use Opera… since Mozilla has a “accessibility, what’s that” attitude to match the “WCAG, what’s that?” attitude most developers practice.
Thank you for your help. Seems to make some sense. Looks like I may have made some dodgy websites then adding 67.5% font size in body. Yikes.
If you then correct it by scaling the text size back up on all other elements, so that it appears at about ‘100%’ (ie default) then you probably won’t have done too much harm for many people, but it’s still a completely messed up way of working.
People started using the 67.5% rule back when we first started saying “don’t specify font sizes in pixels”, because they thought that by using 67.5% they were getting a 10px baseline and they could then specify exact font sizes using % from that 10px baseline without having to do any difficult maths. Of course, that assumes that everyone has the same dpi and default font settings, which as DS60 said is complete rubbish. Scaling down to 67.5% and then back up to 100% doesn’t achieve anything (other than the chance of errors) that just leaving it at the default size wouldn’t have achieved.
Far better to just leave the body text at its default size and scale up or down as you need it for text that is larger (eg headings) or smaller than normal.
I’ve never used the Clagnut base font size technique, but isn’t it supposed to be 62.5% of an assumed browser default size of 16px?
16 x .625 = 10
67.5% assumes a browser default font size of 16.75px. Googling suggests the error is widespread.
You need to specify a percentage to fix an IE bug but 100% is as good a figure to use as any since whatever percentage you use isn’g going to allow you to convert em to pixels. The 62.5% figure only works for computers configured a particular way which was common at the time people started using that figure but which is far less common now.
From where I’ve sat as someone who’s used the 8514/120dpi/large font settings since windows 3.0 it was NEVER that uncommon a choice.
I always figured it came from Mac users (like the webkit obsessed since one of them ran their mouth about 96dpi being on EVERYTHING) where you don’t even have the choice to change the default sizes of the OS elements.
Just another reason NOT to use MacOS/OSX since they too have the “Accessibility, what’s that?” attitude.
As several people have already said, Richard Rutter’s 62.5% sizing deal was popular for a while, but its flaws have relegated it to the obsolete pile. There are a lot of knowledgeable people still advocating its use, and a lot of older articles out there still plumping for it, so no shame in thinking it’s okay, but it’s best not used any longer.
Thanks. Well it’s fair to say I may have picked this habit up around 2006/2007 so it probably explains the time when it was being used. So am I ok setting 100% font size in the BODY?
There, fixed. First time I encountered it my reaction was “well what ignorant fool came up with this?!?” – and I’ve seen nothing to revise that opinion. It had to be something like a Mac user where you can’t resize anything, as nobody who actually knew anything about computers OR browsers OR the POINT of using %/EM’s (or PT for that matter) would be dumb enough to come up with that in the first place.
Yes. It makes no difference what percentage you set as long as you set one so as to fix the bug in IE.
Thank you. I appreciate all your help.