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.
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 an HTML5 DOCTYPE as shown:
<!DOCTYPE html> <html lang="en-us"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> ....
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.
If you are happy it's OK - but your browser is giving a less than optimal experience on our site. You could, at no charge, upgrade to a W3C standards compliant browser such as Firefox
W3C HTML 4.01
HTML4 vs HTML5
W3C Page Validator
CSS 3 Media Queries
CSS 3 Colors
W3C DOM 3 Core
W3C 3 Events
W3C - WAI
Web Style Guide
A List Apart
Eric Meyer on CSS
Our DOM Pages
CSS Short Cuts
CSS One Page
Copyright © 1994 - 2023 ZyTrax, Inc.
All rights reserved. Legal and Privacy
|site by zytrax
web-master at zytrax
Page modified: January 20 2022.