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