One CSS rule I have learned is that you should use the relative "em" font-size unit instead of the absolute "pt". The general idea is to set the font-size in your body tag to e.g. "94%" and then set all other elements with an "em" size like this. The reasoning is:
- you can then change the relative size of all the font sizes on your site by modifying the body's font-size at one point
- users themselves can modify the size of the fonts since they are defined in "em"
However, when using "em" instead of "pt" I constantly run into issues such as the following where an element with font-size gets embedded in another element with font-size and thus becomes tiny (in the case below one vocabulary word is .8 of .8 and the other is .8 of 1.2).
<html>
<head>
<style type="text/css">
body {
font-size: 94%;
}
p {
font-size: .8em;
}
li {
font-size: 1.2em;
}
.vocabulary {
font-size: .8em;
}
</style>
</head>
<body>
<p>This is an <span class="vocabulary">egregious</span> test.</p>
<ul>
<li>This is in a <span class="vocabulary">superb</span> list.</li>
</ul>
</body>
</html>
Of course in very simple, straight-forward HTML sites this is no problem, but in the real world with imported stylesheets that perhaps you didn't even make and with dynamic sites where controls are embedded in other controls all of them outputting HTML with perhaps in-line styling, I find websites with "em" unit font-sizes are sometimes impossible to maintain and the way to get font-size under control is to just convert everything to hard "px" sizes.
In addition, I just checked the four main browsers and each of them have hotkeys which increase and decrease the size of "pt" styled fonts.
So here are my questions:
- is there any real-world reason why I should use "em" instead of "pt"?
- is there trick in using "em" sizes so that I don't run into the embedded font-size issue above?