Font Rendering Comparison

Dec 31 2009

After changing some font display settings in Linux, I wanted to test the changes. The specific change I wanted to test was the hinting level adjusted by pixel size. Hinting affects how sharp the edges of displayed fonts are. (Note that this is different from print appearance.) The article that got me started adjusting font display is a post on Planet Gentoo that I read a while ago. I noticed that there was a suggestion to use medium hinting to reduce fuzziness on small fonts. That was interesting, so I turned on full hinting for small fonts, hint medium for medium fonts, and hint slight for large fonts. You can see the result on the screenshot.

Linux

snapshot1

Medium hinting is set for pixel sizes between 7 and 11. As the size becomes larger, there are ┬ánoticeable┬ácolor fringes on the edge of the fonts. That’s where hint slight comes in.

Now, there’s nothing fancy going on in Linux as all the settings can be changed in an XML file. So after adjust font in Linux, I decided to write a webpage to test the different pixel sizes.

<html>
<head>
<title>Font Rendering Test</title>
<style type = "text/css">
        .col1 {
            float:left;
            width:33%;
            margin-left:1px;
        }
        .col2 {
            float:left;
            width:33%;
            margin-left:1px;
        }
        .col3 {
            float:right;
            width:33%;
            margin-right:1px;
        }
</style>
</head>

<body>
<center>

<?php
$s = "";
for($i=97;$i<123;$i++){
    $s = $s . chr($i);
}

$font_families = array("Serif", "Sans-serif", "Monospace");
$n = 1;

foreach ($font_families as $font){
    echo "<div class=\"col" . $n . "\"style=\"font-family:" . $font . "\">\n";
    for($i=5;$i<22;$i++){
        echo "<p style=\"font-size:" . $i . "px\">" . $i . " px</p>\n";
        echo "<p style=\"font-size:" . $i . "px\">" . $s . "</p>\n";
    }
    echo "</div>\n";
    $n++;
}
?>
</center>
</html>
</body>
</html>

I happened to be using a computer running XP while I wrote this, so I decided to run the test on that computer, too.

XP

screenshot.1

XP, like Linux, does have color fringes, but they are less noticeable and appear at all font sizes.

Today, I booted Windows 7 to fill out a PDF form and print it across the network. I also planned to do some PDF editing using PDF X-Change Viewer. One thing that makes Windows different from Linux is that applications don’t have system-wide configuration file. PDF viewers have their own font rendering settings. Anyways, here’s what the fonts look like in Windows 7:

7

screenshot.1

Fonts in 7 does not have any rendering artifacts. Which is a reason people do notice the difference when they switch to another OS.

No responses yet