Menu
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:
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:
643
Depending on the country where you live, you might actually end up breaking the law using pt instead of em, depending on how hard your legislature want to enforce rules. Here in the UK, there is a disability discrimination act, which has been used to target companies where their websites have been rendered in a fixed font. This is treated as discrimination because it disadvantages the partially sited who may have increased their browser font sizes to compensate - but your site still renders fonts at the size you set, and not at the size they would expect.
Yes, it's harder to get to grips with relative font-sizes and fluid layouts, but if you want to comply with legislation, you have to take the time to get to grips with this.
For local government work in the UK, targets have been set to ensure that websites follow Double A guidelines, one of which states "Use relative rather than absolute units in markup language attribute values and style sheet property values". See here.
112
Even if you hard-code the font-size in pixel, you can still use em for unit to specify margin, length, etc.. , similar to using em quad to indent a paragraph in the printing press anyway.
Edit (After the poster changed from px to pt): If you want to be "pixel perfect", it's safer to go with px rather than pt, since different operating system has different dpi setting, and user change change dpi dramatically especially on Linux. PostScript point is defined to be 1/72 of an inch. An "inch" on screen can be anywhere between 72 pixels to whatever floats your boat.
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
