24
Art 368 WEB Design 1 Spring 2002 Type Two basic families: Serif and Sans Serif Parts of all type Ascenders, descenders, baseline, etc. Leading= linespacing/paragraph Kerning

Art 368 WEB Design 1 Spring 2002 Type Two basic families: Serif and Sans Serif Parts of all type Ascenders, descenders, baseline, etc. Leading= linespacing/paragraph

Embed Size (px)

Citation preview

Page 1: Art 368 WEB Design 1 Spring 2002 Type Two basic families:  Serif and Sans Serif Parts of all type Ascenders, descenders, baseline, etc. Leading= linespacing/paragraph

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

Page 2: Art 368 WEB Design 1 Spring 2002 Type Two basic families:  Serif and Sans Serif Parts of all type Ascenders, descenders, baseline, etc. Leading= linespacing/paragraph

Cañada

College

BaselineBaseline

DescenderDescender

Cap HeightCap Height

AscenderAscender

X-HeightX-Height

SerifSerif

StrokeStroke

ThickThickThinThin

Page 3: Art 368 WEB Design 1 Spring 2002 Type Two basic families:  Serif and Sans Serif Parts of all type Ascenders, descenders, baseline, etc. Leading= linespacing/paragraph

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

Page 4: Art 368 WEB Design 1 Spring 2002 Type Two basic families:  Serif and Sans Serif Parts of all type Ascenders, descenders, baseline, etc. Leading= linespacing/paragraph

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?)

Page 5: Art 368 WEB Design 1 Spring 2002 Type Two basic families:  Serif and Sans Serif Parts of all type Ascenders, descenders, baseline, etc. Leading= linespacing/paragraph

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

Page 6: Art 368 WEB Design 1 Spring 2002 Type Two basic families:  Serif and Sans Serif Parts of all type Ascenders, descenders, baseline, etc. Leading= linespacing/paragraph

Art 368 WEB Design 1

Spring 2002

Type

Problem with ALL CAPS

Upper and Lower CaseUPPER AND LOWER CASE

Page 7: Art 368 WEB Design 1 Spring 2002 Type Two basic families:  Serif and Sans Serif Parts of all type Ascenders, descenders, baseline, etc. Leading= linespacing/paragraph

Art 368 WEB Design 1

Spring 2002

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

Page 8: Art 368 WEB Design 1 Spring 2002 Type Two basic families:  Serif and Sans Serif Parts of all type Ascenders, descenders, baseline, etc. Leading= linespacing/paragraph

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

Page 9: Art 368 WEB Design 1 Spring 2002 Type Two basic families:  Serif and Sans Serif Parts of all type Ascenders, descenders, baseline, etc. Leading= linespacing/paragraph

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 (-)

Page 10: Art 368 WEB Design 1 Spring 2002 Type Two basic families:  Serif and Sans Serif Parts of all type Ascenders, descenders, baseline, etc. Leading= linespacing/paragraph

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

Page 11: Art 368 WEB Design 1 Spring 2002 Type Two basic families:  Serif and Sans Serif Parts of all type Ascenders, descenders, baseline, etc. Leading= linespacing/paragraph

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!)

Page 12: Art 368 WEB Design 1 Spring 2002 Type Two basic families:  Serif and Sans Serif Parts of all type Ascenders, descenders, baseline, etc. Leading= linespacing/paragraph

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

Page 13: Art 368 WEB Design 1 Spring 2002 Type Two basic families:  Serif and Sans Serif Parts of all type Ascenders, descenders, baseline, etc. Leading= linespacing/paragraph

Art 368 WEB Design 1

Spring 2002

Sample Display Type

Page 14: Art 368 WEB Design 1 Spring 2002 Type Two basic families:  Serif and Sans Serif Parts of all type Ascenders, descenders, baseline, etc. Leading= linespacing/paragraph

Art 368 WEB Design 1

Spring 2002

Sample Display Type

Page 15: Art 368 WEB Design 1 Spring 2002 Type Two basic families:  Serif and Sans Serif Parts of all type Ascenders, descenders, baseline, etc. Leading= linespacing/paragraph

Art 368 WEB Design 1

Spring 2002

Sample Display Type

Page 16: Art 368 WEB Design 1 Spring 2002 Type Two basic families:  Serif and Sans Serif Parts of all type Ascenders, descenders, baseline, etc. Leading= linespacing/paragraph

Art 368 WEB Design 1

Spring 2002

Sample Display Type

Page 17: Art 368 WEB Design 1 Spring 2002 Type Two basic families:  Serif and Sans Serif Parts of all type Ascenders, descenders, baseline, etc. Leading= linespacing/paragraph

Art 368 WEB Design 1

Spring 2002

Sample Display Type

Page 18: Art 368 WEB Design 1 Spring 2002 Type Two basic families:  Serif and Sans Serif Parts of all type Ascenders, descenders, baseline, etc. Leading= linespacing/paragraph

Art 368 WEB Design 1

Spring 2002

Sample Display Type

Page 19: Art 368 WEB Design 1 Spring 2002 Type Two basic families:  Serif and Sans Serif Parts of all type Ascenders, descenders, baseline, etc. Leading= linespacing/paragraph

Art 368 WEB Design 1

Spring 2002

Sample Display Type

Page 20: Art 368 WEB Design 1 Spring 2002 Type Two basic families:  Serif and Sans Serif Parts of all type Ascenders, descenders, baseline, etc. Leading= linespacing/paragraph

Art 368 WEB Design 1

Spring 2002

Sample Display Type

Page 21: Art 368 WEB Design 1 Spring 2002 Type Two basic families:  Serif and Sans Serif Parts of all type Ascenders, descenders, baseline, etc. Leading= linespacing/paragraph

Art 368 WEB Design 1

Spring 2002

Page 22: Art 368 WEB Design 1 Spring 2002 Type Two basic families:  Serif and Sans Serif Parts of all type Ascenders, descenders, baseline, etc. Leading= linespacing/paragraph

Art 368 WEB Design 1

Spring 2002

Objects Replacing Characters

Page 23: Art 368 WEB Design 1 Spring 2002 Type Two basic families:  Serif and Sans Serif Parts of all type Ascenders, descenders, baseline, etc. Leading= linespacing/paragraph

Art 368 WEB Design 1

Spring 2002

Page 24: Art 368 WEB Design 1 Spring 2002 Type Two basic families:  Serif and Sans Serif Parts of all type Ascenders, descenders, baseline, etc. Leading= linespacing/paragraph

Art 368 WEB Design 1

Spring 2002

Type Alignment