Forum Moderators: not2easy
Why mix and match? Introduces unnecessary complications.Not quite: Older ie would not allow fonts specified in px to scale, and keywords were not consistent cross-browser or -platform. That meant ems or % for finer control. Some lengths could not be specified in %, or some browsers weren't that accurate, especially to decimal places, so that left ems. Assuming 16px as the default size, which was frequently too large, 62.5% as the base meant 1em=10px, 1.2em=12px, etc.*** See Clagnut's How to size text using ems [clagnut.com] and the ALA article. So the %/em combination was the least complicated way to achieve consistent font-sizes while allowing some degree of control as required for design.
the 62.5% thing should have workedcheaperholidays, not quite sure what you mean by that, but 62.5%/10px was always considered too small for readability by many of the advocates of this technique, depending on font and colour 12px may be too small as well - and 100% too large. For that reason another common setting was 76%, which broke the 16px@62.5%=10px relationship, but created a workable size to begin with.
<!DOCTYPE html>
<html>
<head>
<style>
#base {
font-size: 62.5%;
}
#increased {
font-size: 1.2em;
}
#twelvepx {
font-size: 12px;
}
</style>
</head>
<body>
<div id="base">
<div id="increased">
The quick brown fox jumped over the lazy dog.
</div>
</div>
<div id="twelvepx">
The quick brown fox jumped over the lazy dog.
</div>
</body>
</html>
The problem i have is this, if i set the base font size to anything less than 100% the text virtually disappears.Hmmm ... while 12px is small, it shouldn't almost "disappear".
Second, are we not dealing with much higher screen resolutions than the "old days"? ...Generally yes, but you asked why the OP was mixing % and ems.
"Setting font to 62.5% makes text tiny"
[edited by: alt131 at 7:36 am (utc) on Dec 28, 2011]
[edit reason] Thread Tidy [/edit]
On another subject we have a <snip> blog with the font set at 100% and the content set at 1em but oddly this seems to be about 12px how can a blog and our main page behave so differently?
