N341  Chapter 10 Notes - Text

HTML and CSS can be used to control text attributes. Though similar, the use of HTML and CSS is different and results are not always the same.

HTML

<FONT> defines a area of text that will be treated. Example:

<font size="5" face="Arial"> some text </font>

CSS

Any of the number of ways to define style can be used: Example:

<p style="font-size:18pt; font-face:Arial">  some text </p> 

Garamond - a serif font.

Arial - a sans serif font.

Serif

Decorative line, circle, or other flourish at the end of a stroke in a letter. Sans serif is without decoration.

Baseline

Imaginary line on which most lowercase letters appear to rest.

Midline

Imaginary line at the top of most lowercase letters.

x-height

Distance between baseline and midline.

Font

Set of all printable characters in a specific style and size. Example: 

14-point Arial bold

<span style="font-size:14pt; font-face: Arial; font-style:bold"> 

Typeface

Design for a set of fonts. Example: Times New Roman bold.

Family

Typeface family or font family consists of all the sizes and variations (bold, italic, etc.). Example: Times New Roman

Point

1/72^nd of an inch, generally used to measure vertical sizes and distances. The size of a type is given in points as measured from the bottom of the lowest descender to the top of the highest ascender, plus a little bit which varies from one typeface to another. The little bit is designed to prevent adjacent lines from touching. 

This should be 1/4 inch or 18-point Times New Roman.

<font face="Times New Roman" style="font-size:18pt"> 

Pica

1/6^th of an inch, generally used to measure horizontal sizes and distances. 12 points in a pica.

em

Linear measure equal to the point size of the font. In any 12-point font, one em is 12 points or 1/6^th of an inch. While pica and points are absolute sizes, em is relative to the current point size. For a 24-point font, one em is 1/3 inch.

Current size 12 pt Verdana.

1 em. 2 em. 3 em. 4 em. 5 em. 6 em.

<font size="5em">

Roman

Normal or upright versus italic.

Pixel

A single point on a computer display. 800 pixels wide by 600 tall is common resolution, yielding 80 pixels per inch on a 10 inch screen. Screen height to width ratio is normally 3/4. On a typical monitor today, one pixel is about one point.

Exercise 0

• How many pixels should used to display a 36-point font on a 640x480 monitor? 
• On a 800x600? 
• Will the size of the display change the size the of the font?

Proportional
Monospaced

Monospaced characters are each the same size while proportional characters use more space for larger letters such M than smaller characters such a .

Monospacing is commonly used in display of program code of other text where horizontal alignment is important. For example, in Courier and Times New Roman:

function DaysInMonth(month, year ) {
     if(month==1 || month==3 || month==5 || month==7) 
            return 31; 
     if(month==4 || month==6 || month==9 || month==11) 
            return 30; 
     if(month==2)  
            if((year%4)==0 && (year%100)!=0 || (year%400)==0) 
                return 29;
            else return 28;
   }

function DaysInMonth(month, year ) {
   if(month==1 || month==3 || month==5 || month==7) 
       return 31; 
   if(month==4 || month==6 || month==9 || month==11) 
       return 30; 
   if(month==2) 
       if((year%4)==0 && (year%100)!=0 || (year%400)==0) 
         return 29;
       else return 28;
}

The terminology and concepts were developed over the years since the Gutenberg printing press was developed in about 1455. While printing is precise, a Web designer has little control over the display medium. A partial list of things you don't know:

Resolution

Depends on type of monitor, video display, and screen settings.

Browser
Window
Size

Could be 4 inches, all of a 21 inch monitor or projected on a 6 foot screen. The 12-point text may be a foot long.

User Text Setting

Older users tend to want larger text for easier reading while younger users tend toward smaller text for less scrolling.

Quality of display

Setting such as contrast, brightness, color balance.

Ambient lighting

Commonly more than optimal lighting which washes out colors, making low-contrast text and backgrounds hard to see. This may be hard to read in a high light area.

Available fonts

The fonts on your computer may not be on the user computer. This is monotype Corsiva Windows.

Body text is the regular sized text, not heading, for example.

Use Georgia or Verdana

Not much difference between legibility of serif and sans serif faces on screen in these choices. Front Page only supports Verdana. 

Trebuchet is a screen-friendly sans serif option. <font face="Trebuchet MS">

Limit font faces

Limit the number of fonts to about two. Generally, use one for body, one for display. 

12-point

If you know that your users have Georgia and Verdana, 10-point may be OK, 10-point is too small for Times New Roman.

Roman

Instead of bold or italics. Extended text in italics is difficult to read and bold is almost as bad. Use italics and bold only for emphasis.

Upper case

USE ONLY FOR FIRST WORD OF SENTENCE, PROPER NAMES, ETC. ALL UPPER CASE IS MUCH HARDER TO READ.

Line length

Maximum length of about 5 inches. Shorter is better, remember that people scan page. Line length can be limited to only part of the available window by:

<div style="width:24%> The text to be displayed at 24% of the available window</div>

Leading

The number of points between lines should be 2, or 1/36^th of an inch. To double space regular text in the body.

body  { line-height: 200%}

Alignment

Centered and right aligned text is hard to read, when the eye reaches the end it is difficult to find the beginning of the next line. 

OK for variety on a small amount of text but should be avoided for large amounts.

Background

Use black text on white background. Dark blue or gray text on white background is pleasant and easy to read and can be used for emphasis.

Exercise 1

• What confusion might use of blue text create for the user?
• Columns are often used in printed text. Are they a good idea for Web pages?

Underlining

Never use underlining for emphasis, use italics or bold. Users tend to think underlined text is a link.

By definition, display type is larger and uses far fewer characters than text type. Generally, 18 points and up is used for display.

Size

Use any size that fits. Right/left scrolling occurs if larger than the window. 

Type face

Any that is legible, but must exist on user's machine.

Line height

Use line height attribute to get the graphic effect you want, from making the letter touch to spread out. This was done by:

<style="line-height: 50%;">

Letter or Word Spacing

Spread words and letters out to achieve a more powerful effect. 

Spider Man             

<span style="letter-spacing: -4">

Spider Man

<span style="letter-spacing: 5">

Animation

Do not use any form of animation on text. Users hate it, they will scroll the ugliness off the screen.