Foundations of Web Design

Fonts

1. Which font to use?
   
   
• Verdana (sans-serif) and Georgia (serif) are supposedly the best screen fonts. The Windows OS and Internet Explorer include Verdana as a pre-installed font so you can be pretty sure that your audience has Verdana.
• Realize that not all computers contain the same fonts, especially Windows PC's vs. Macintoshes. The default fonts on the two different platforms are different.
• Remember that you can and probably should use CSS (stylesheets) to specify fonts
• You can obtain and install free fonts. But, if the user's computer doesn't have the font, his browser will substitute another font and possibly ruin the design of your page.
• Never assume that web surfers are using the browser default fonts, since some people may have overidden the default browser fonts in their browser's preferences.
• See this discussion and this discussion about fonts to use on the Web and whether to use serifs or not.
• You can obtain many free fonts at sites such as 1001freefonts.com
  
  
• Activity: Choose the font(s) for the site you are creating in this workshop and update your CSS style sheet accordingly.
  
  
• Activity: Use the FONT FACE tag on the Properties palette to override the linked stylesheet font specification for some text on your index.htm home page.
  
  
2. See Weinman's font inspirational sites (under typography).
   
   
3. When should you include graphics-based text?
   
   
• graphics-based text is not searchable, nor can it be read by screen readers
• such text cannot be copied and pasted and is slower to download
• Fireworks can create nice graphics-based text
  
  
• Antialiased vs. aliased text
  • antialiasing adds size to graphics-based text because of the dithering effect
  • Fireworks antialiases text by default however it is not always proper to antialias text. If the text is pretty small (e.g. 8 font size) then antialiasing will cause the font to look blurry.
  • Activity: Try to spot examples of antialiases graphics-based text on the Web as well as aliased text.
  • Activity: Generate text in Fireworks that is aliased and a sample that is antialiased. Change the size of the font to see the effect of aliasing small text.
    
    
• Activity: Create the banner text for the home page to your Final Project in this class. Add a Fireworks effect or create a drop shadow with two layers.
  
  
• Activity: Use Flash to create graphics-based text that includes subtle animation.
  
  
4. Mac vs. PC text difference
   
   
• if you design on a PC, do not use too small of a font size since text will look even smaller on a Mac
• Mac's display type at 72 dpi while PC's at 96 dpi
  
  
5. Embedded fonts
   
   
• you can embed fonts with a page so that they are downloaded to the user with the page but this is not done too often
• Webmonkey.com has good embedded fonts tutorials
• be wary of this method since fonts can be copyrighted and it increases the size of a Web page
  
  
6. You can use pdf (portable document format) files to distribute documents exactly as they are produced with any other application.
   
   
• Examples: my worksheets, my students' grades, and all of the IRS tax forms
• create pdf files using Adobe Acrobat ($250 or so) and upload them to your Web site; you can make five free conversions at createpdf.adobe.com.
• Optional homework - create a pdf file from a MS Word document (using createpdf.adobe.com if necessary) that supports your Final Project web site and bring it to our next class so that you can include it in your web site.
• people who browse your pdf files must have the free Adobe Acrobat Reader plug-in installed. This often comes pre-installed with a Web browser though.
• pdf files are very convenient for sharing, delivering, and distributing documents. Suppose your company uses Quark Xpress and you wish to share files with someone who doesn't have access to Quark or anything that can reliably import a Quark file. You can use Acrobat to turn any file into a pdf  which can be viewed with the free Acrobat Reader. The pdf preserves the layout and formatting of the original document.
• You can add hyperlinks, graphics, Quicktime Movies, and Flash animations to pdf documents with Acrobat. Web browsers can perform full-text searches of pdf documents and even interact with form elements. Acrobat can even make your forms more interactive with Javascript validation.