I have noticed that rendering of fonts differ considerably if the size is, for example. 11px. Running Windows 7
The following HTML and CSS is used
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testing font</title>
<style>
body {
font-family: "Helvetica","Arial",sans-serif;
color: #1A1A1A;
padding: 10px;
}
.foo{
font-size: 14px;
}
.bar{
font-size: 11px;
}
</style>
</head>
<body>
<div class="foo">
<p>HOME</p>
</div>
<div class="bar">
<p>HOME</p>
</div>
</body>
</html>
As the attached images shows, FF and Chrome tends to tighten the width in 11px but not in 14px.
Why is that, is there a workaround?
See Question&Answers more detail:os
