Tech Info - Web Font Rendering Experiment

We had cause recently to play around with fonts for a web application and were surprised at the rendering quality of some fonts on some browsers. These pages were built to test a selection of fonts . This page simply displays the default CSS font families (serif, sans-serif, cursive, monospace and fantasy) at a set of point sizes. And this page displays the same data using supposedly common fonts (Times New Roman, Georgia, Courier New, Tahoma, Arial, Verdana, Trebuchet MS ) at the same set of point sizes. Viewing these pages with a variety browsers lets you investigate browser font support and rendering quality.

Notes:

The default font family definitions, which may be contained within a (deprecated) <font> tag or within a CSS style definition, are selected and rendered by the local browser and hence you may get some surprises.
The style sheet we use in the various pages defines the fonts as, say, 12pt (12 point) which is a normal printing value. It has been pointed out to us that since screens use pixels the browser must perform a conversion (with appropriate rounding - up or down) from point size to pixels which can significantly change the character rendering. To perfectly control the font size you can always define the fonts in pixels. The rough conversion factor is 1pt = ~1.33px (example 12pt = 12 * 1.33 = 15.96 = 16px) or you can use this table from the Reed Group as a quick guide (it also shows ems and % values). When you display a printer-friendly version of the page you may then want to redefine the styles to use a pt value since the page rendering here is less important than the printing.

The demo pages use a DOCTYPE as shown:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Fonts can be downloaded with the CSS2 @font-face directive.

Problems, comments, suggestions, corrections (including broken links) or something to add? Please take the time from a busy life to 'mail us' (at top of screen), the webmaster (below) or info-support at zytrax. You will have a warm inner glow for the rest of the day.

Tech Info - Web Font Rendering Experiment

Tech

HTML Stuff

CSS Stuff

DOM Stuff

Usability/Access

Jolly Useful

Our Stuff

Javascript

Pop-out Menus