Whereas I’d be aiming for 1.4 to 1.6, but that’s because I find taller line heights make it easier to read wider lines.
Which is why the “62.5% == 10px” Bull is exactly that, 100% grade A manure shovelled out by people who don’t understand the ENTIRE REASON FOR USING %/EM IN THE FIRST PLACE… that being it is NOT a fixed relationship to PX and instead is based off whatever the end user has set for preferences either in their browser or in the host OS. (in the browsers that actually take the SHOCK time to pay attention to it like Opera and IE)
I like to set whatever font size is being used for most of the content (my paragraphs) and then base everything else off of that… so that could mean anywhere from 75% to 120% depending on what actual font is in use.
Something I repeatedly point out is that the same font-size does NOT actually render the same if you change the face:
The top half being what 100% will typically give you on 96dpi systems, the lower half being what 120dpi systems (like the workstation I’m on) deliver at 100%. The first two lines of each – times and arial, showing why usually I use 85% for Arial/sans-serif (the extra bit is rounded down at 96dpi to 14px and up at 120dpi to 17px, which is perfect) and 100% for times/serif… and why I HATE Verdana since it’s ridiculously oversized compared to other serif fonts. (making fallbacks end up too big)… I honestly think most people who think verdana is “more legible” probably just need to increase how big they’re trying all the other serif fonts!
I mean, it’s bigger than Dejavu Sans or Dejavu Serif, two fonts that ‘in the old days’ were pissed on by font experts for being “too big proportionally to other fonts”.
Just like as I point out on an old test page of mine, %/EM/PT have different default sizes based on the system and browser they are used on:
Also notice down towards the bottom of that page the bit about line-heights.
1.2 is typically (not always) the default – the specification actually suggests a browser default of anywhere from 1.1 to 1.3… (likely explaining why Gecko based browsers like the sweetly retarded cousin of Nyetscape 4 they are seem to roll a d6 to determine line-height)… Again, I prefer a wee bit more so I set it to 1.4 to 1.6, again depending on the face, and where on the page it is… and as I always say, you change the font-size, you change the line-height.
Oh, and some people will tell you skipping adding a metric (px,em,%,pt,etc) will work properly on line-height-- those people have never used large font machines and usually have pages that are broken for me. It’s more BS much akin to the 62.5% malarkey.
It’s NEVER possible in the first place since you can NEVER rely on font engines kerning text to the same widths, having the perfect font you want actually available, etc, etc… It’s why the mere notion of fixed sized (particularly heights, or really narrow widths… or multiple narrow widths as sections across the page) is a miserable /FAIL/ at web design, and a hefty part of what I’ve come to call the “But I can do it in Photoshop” idiocy.
To go hand in hand with the idiocy of drawing a pretty picture in Photoshop before you even have semantic markup and layout done in CSS, and then having the cojones to call one’s-self a “designer” – basically shooting one’s-self in the foot before you even begin the code.