Web 210 Chapter 6
Lecture Notes
In addition to reading Ch. 6 of our main textbook,
read Ch. 5 (Typography)
of "The Web Style Guide"
Objective #1: Understand problems and limitations of using fonts and
typography in Web design.
- Follow Sklar's 4 suggestions regarding fonts on p. 166:
- Choose fewer fonts and sizes
- Use available fonts
- Design for legibility
- Avoid using text as graphics
- Notice how our one textbook author, webstyleguide.com,
uses relatively few fonts, font sizes, and font styles but still maintains
a visual hierarchy that increases the usability (and aesthetics) of the site.
- The default font on a PC is Times New Roman. On a Macintosh, it is Times.
See Table 6-1 on p. 168. 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.
- Choose wisely between serif and sans-serif fonts. See this
discussion and this discussion
about fonts to use on the Web and whether to use serifs or not.
- common serif fonts include Times New Roman, Courier, and Georgia.
- common sans-serif fonts include Arial, Helvetica, and Verdana.
- Realize that fonts that are expressly suited for printed documents such
as newspapers may not be easy to read on a computer screen. The fonts Georgia and Verdana were created specifically for use on computers. The Windows OS
and Internet Explorer include Verdana as a pre-installed font so you can be
pretty sure that your audience has Verdana.
- Be sure that the contrast between the background color of the web page and
the font color allows the text to be easily read. It is difficult for users
to read large amounts of light text on dark backgrounds.
- The HTML <font> element has been deprecated in HTML 4.0 and XHTML.
You should use CSS rather than the <font> element to specify fonts.
Using CSS allows you to effectively manage the text within a large web site
and it helps you keep content and format separate.
- If you do use the <font> element, use relative font sizes such as <font size="+1"> rather
than absolute sizes to make your page more usable. If you use CSS to define
font sizes, it is recommended that you use em units rather than absolute pixel
or point sizes to make your pages more usable. See Table 6-2 on p. 179 for a list of CSS measurement units including em (width of the capital M which equals font size), ex (height of a lowercase x), px, and % (percentage). Overall screen legibility is most influenced by the x-height (ex) and the overall size (em) of the typeface according to webstyleguide.com. Read the section under "Choosing Typefaces" for a discussion on the selection of the best typeface.
- See Weinman's font
inspirational sites (under typography). Some of the examples use graphical text though.
- If you don't want to worry about the user seeing HTML text exactly as you mark it up using <font> or CSS, you can use graphical text, that is text created as a .gif graphic.
- When should you include graphical text?
- Advantages:
- WYSIWYG
- no dependence on user's pre-installed fonts
- design richness (i.e. wow effect)
- Disadvantages:
- It is not searchable, nor can it be read by blind people's screen
readers, but <alt> tags can be used.
- It cannot be copied and pasted and is slower to download.
- It takes longer to download.
- Must choose whether to alias or antialias graphical text due to
the dithering effect. Read the discussion here
about antialiased graphical text. Activity: Try to spot examples
of antialiases graphics-based text on the Web as well as aliased text.
- If you don't have many interesting fonts to use in Fireworks when making
graphical text, you can obtain and install free fonts. One place to obtain
many free fonts is 1001freefonts.com
- 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 has good embedded
fonts tutorials.
Also be wary of this method since fonts can be copyrighted and it increases
the size of a Web page
- Use pdf files effectively
- Adobe's pdf (portable document format) technology can be used to distribute documents
exactly as they are produced with any other application. pdf files are very
convenient for sharing, delivering, and distributing documents but people
who browse your pdf files must have the free Adobe
Acrobat Reader plug-in installed. Most people do have this plug-in installed with their browsers. 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.
- There are a few downsides to using pdf files though. Some users are uncomfortable or confused with the different icons and shortcuts on the Adobe Reader's toolbar. Also, some files that were designed for print do not look particularly good for the screen and it can be annoying waiting for the Adobe Reader plug-in to install and load a pdf file.
- You can create pdf files
using programs like Adobe
Acrobat , Wind2PDF or CutePDF and upload them
to your Web site or you can make five free conversions at createpdf.adobe.com.
At goBCL.com, you can convert documents to .htm web pages as well as pdf files.
- You can create pdf's dynamically in a number of ways:
- The FPDF library for PHP is free at www.fpdf.org. It can be used to write code that creates a customized pdf file.
- The Apache Project's FOP is free at xml.apache.org/fop and it allows you to use a mark-up langugage to add tags to a text file.
- There are also expensive tools that you can install on a Web server that will automatically translate HTML files into PDF files (e.g. Corda's Highwire program and activePDF's WebGrabber programs which are over $1000).
Objective #2: Control typography in a Web site using CSS.
- See p. 173 for an example of how to use a CSS style to define all text in
the <p> element on a given web page to be blue with a size of 24 points.
<style> p {color: blue; font-size: 24 pt;} </style>
where p is the selector and the declaration
is the part in the curly braces. Within the declaration, color is a property
and blue is a value.
- To use an external style sheet, you can place selectors and declarations
in a file with the .css extension and then add the HTML code
<link href="myStyles.css" rel="stylesheet">
to the <head> of a web page.
- Be wary of using CSS with older browsers since they do not interpret some
CSS rules differently.
- By creating a class attribute, you can more easily apply a CSS class repeatedly
throughout one or more web pages by adding this line to the <head> section
of a web page or by adding it to a .css style sheet
<style type="text/css"> .important {color: red;}</style>
and then using the <p> element as in
<p class="important">Important Stuff</p>
- To avoid using the HTML <font> element, you can specify fonts and even more general font families using the following CSS attributes.
- To control the font itself use
<style type="text/css">
p {font-family: arial, helvetica, sans-serif;}
</style>
- To specify the font weight such as bold, bolder, and lighter use
<style type="text/css">
blockquote {font-weight: bold;}
</style>
- To specify line height which is also known as "leading" to adjust the white space between lines of text use
<style type="text/css">
blockquote {line-height: 30 pt;}
</style>
or
<style type="text/css">
blockquote {font-size: 1.5em; line-height: 150%;}
</style>
- To control letter spacing which is also known as "kerning" to adjust the white space between letters use
<style type="text/css">
blockquote {letter-spacing: 2pt;}
</style>
- To control the foreground and background color of the font, use
<style type="text/css">
p {color: white; background-color: black; }
</style>
- As it is described above, it is recommended that you use em units rather than absolute pixel or point sizes to make your pages more usable. See Table 6-2 on p. 179 for a list of CSS measurement units including em (width of the capital M which equals font size), ex (height of a lowercase x), px, and % (percentage). Overall screen legibility is most influenced by the x-height (ex) and the overall size (em) of the typeface according to webstyleguide.com.
- CSS Information & Tutorial links: