Art 368 WEB Design 1

Spring 2002

Type

Two basic families:

Serif and Sans SerifParts of all type

Ascenders, descenders, baseline, etc. Leading=

linespacing/paragraphKerning

Cañada

College

BaselineBaseline

DescenderDescender

Cap HeightCap Height

AscenderAscender

X-HeightX-Height

SerifSerif

StrokeStroke

ThickThickThinThin

Art 368 WEB Design 1

Spring 2002

Type Families

Serif (Readable)Body CopyBooks, magazines<14 point

Sans Serif (Legible) 1816 then back again in 1920’sDisplay TypePostersHeadlines

Art 368 WEB Design 1

Spring 2002

Type Families and Fonts

A typeface family = Type DesignerWilliam CaslonCaslon, Giambattista BodoniBodoni,

Aldus Manutius (15th Century), Hermann Zapf Zapf (PalatinoPalatino, OptimaOptima, MeliorMelior)

Font = metal type Adobe vs True Type (fonts?)

Art 368 WEB Design 1

Spring 2002

Type Point system

72 points to an inch Picas

1 pica= 12 points6 picas to an inch

Pixels72 pixels to an inch?Macintosh vs. Windows Monitors

Art 368 WEB Design 1

Spring 2002

Type

Problem with ALL CAPS

Upper and Lower CaseUPPER AND LOWER CASE

Art 368 WEB Design 1

Spring 2002

Type on the WEB Controlling type Default fonts and sizes Browser text vs Graphic text

Art 368 WEB Design 1

Spring 2002

Type on the WEB Controlling type

Browser text (those words typed in Dreamweaver) will fill the width of the window

Use tables or line breaks to control the length of a line of type

Art 368 WEB Design 1

Spring 2002

Type on the WEB Default fonts and sizes

Usually 12 point Times but the user can set any type and any size as the default

Paragraph and Normal are Default Heading applies to the entire paragraph and is

relative in size to the Default size 1-3 relatively larger, 4= the same, 5-6= relatively

smaller Select individual characters to add (+) to the size

or subtract (-)

Art 368 WEB Design 1

Spring 2002

Type on the WEB Variables

Browser default font Browser default size Resolution of the monitor Windows vs Mac (Windows users can change the font

size in Display) Specifying a font in the HTML code which will

override the default Specifying a size in the HTML code which will

override the default Cascading Style Sheets

Art 368 WEB Design 1

Spring 2002

Type on the WEB Variables

Proportional vs Monospaced (Preformatted or Teletype)

Logical vs Physical Styles Emphasis vs Bold

Special Characters (~) (“ ”) Underline and Italic (issues!)

Art 368 WEB Design 1

Spring 2002

Type on the WEB Browser text vs Graphic text

Cross-platform fonts Arial, Arial Black, comic Sans, Courier New, Impact,

Times New Roman, Verdana, and Webdings

Art 368 WEB Design 1

Spring 2002

Sample Display Type

Art 368 WEB Design 1

Spring 2002

Sample Display Type

Art 368 WEB Design 1

Spring 2002

Sample Display Type

Art 368 WEB Design 1

Spring 2002

Sample Display Type

Art 368 WEB Design 1

Spring 2002

Sample Display Type

Art 368 WEB Design 1

Spring 2002

Sample Display Type

Art 368 WEB Design 1

Spring 2002

Sample Display Type

Art 368 WEB Design 1

Spring 2002

Sample Display Type

Art 368 WEB Design 1

Spring 2002

Art 368 WEB Design 1

Spring 2002

Objects Replacing Characters

Art 368 WEB Design 1

Spring 2002

Art 368 WEB Design 1

Spring 2002

Type Alignment