Yale Web Style Guide
Copyright Lynch & Horton, 1997. Yale University.
http://info.med.yale.edu/caim/manual/

 

Typefaces and other Cross platform issues

Specifying particular typefaces

    "If the typeface you specify is not available [on the user's system], the browser will switch to the default font. Note that although 'Bookman' and 'Bookman Old Style' are basically the same typeface, the exact name you specify in the face attribute matters. If you want both Macintosh and Windows95 users to see the typeface Bookman, then use both names in your face attribute for <font> tags:

<font face="Bookman, 'Bookman Old Style'"> Names matter </font>

 

    The below diagram, together with some experience, recommends 4 font combinations (with the font family, used only by Style Rules, specified last):

"Arial, Helvetica, sans-serif"
"Verdana, Geneva, Arial, Helvetica, sans-serif"
"'Times New Roman', Times, serif"
"'Courier New', Courier, monospace"

    It should be further noted that Verdana was first created as a bit-map font, then converted into a vector font. So that font will display very well, when shown (back) as bitmap images on a monitor.

 

Cross-platform font sizes

    "The Macintosh and Windows operating systems display type differently, even when the same typefaces are involved. In general, type displayed on Windows Web browsers will look 2 to 3 points larger than the equivalent face on the Macintosh."

[Windows & Mac System fonts]

 

    "Currently, WebTV uses one proportional-width font (Helvetica) and one fixed-width font (Monaco)." (Source: WebTV developer site.) With both these fonts appearing to be presented more in the manner that the Mac OS handles them.

    Originally, Mac's were THE computer system for desktop publishing. Where the system was specifically set-up so what you see on the screen, was almost exactly what you get in print. (To the point that a gamma of 1.8 was about the same as the early Apple LaserWriters.) And the basic unit for (desktop) publishing is the point, which is equal to 1/72 of an inch. Thus on Macintosh computers, the screen pixels are assumed to be 72 DPI (Dots Per Inch), and one point (pt) is equal to one pixel (px). However, Microsoft Windows systems are based only on general graphics, and the pixels those are made of. With Microsoft usually assuming that the monitor pixel size is about 1/96 of an inch. (Using a common TV gamma value of 2.2) Thus on Windows computers, the screen pixels are assumed to be 96 DPI, and one point would equal 1 1/3 pixels (12pt = 16px). Which results in fonts specified in points appearing smaller when displayed on Mac computers.

 
 
Related Information:
 
[In-site WWW Page]>>		  
<font> Coding Pitfalls
Web development font problems and solutions.
 

Monitor gamma settings

    "In computer imaging and display screens 'gamma' refers to the degree of contrast between the mid-level gray values of an image. The default gamma settings for Macintosh (1.8 target gamma) and Windows monitors (2.2 target gamma) are quite different, and this can lead to unpleasant surprises when you first see your images displayed on 'the other' platform. Mac users will see their images get much darker and more contrasty on Windows displays; Windows users will see their images as flat and washed out on Mac displays. Most Web designers opt for a middle-ground solution, lightening images slightly if they work on the Macintosh; darkening slightly and adding a little more contrast if they work in Microsoft Windows.

    "If you use Adobe Photoshop you can use the 'Gamma' Control Panel that ships with Photoshop to experiment with your monitor gamma settings. To simulate the windows display on a Macintosh, set the target gamma to 2.2 and the gamma adjustment slider to '-43', then save those settings. In the Windows version of Photoshop the gamma control only applies to images within Photoshop windows, not to the global display environment as it does on the Macintosh. The default gamma setting for the Windows version of Photoshop is 1.8 (same as the Mac). To see how your graphics may look once they are out of Photoshop and into your Windows Web browser, use the gamma control in Windows Photoshop to boost the Photoshop display gamma to 2.2 (to match the normal Windows operating system gamma)."

 
Back UP: Yale Web Style Guide index page  

 

[Supports Any Browser]*
 E-mail the Webmaster
Page Content Updated: July 10, 2003
   

This document is my personal study notes. Not something that was authorized by the authors or the publisher of this book. All excerpts from the original book are just fragments of material, with the book being quoted from providing the context and full meaning. This selection of excerpts, along with any annotations added to them, are Copyright © 2000- 2003 Allen Smith. All rights reserved, to protect the Copyright of the original (quoted from) work. Thus permission is not granted to save, print or copy these notes in any manner.