Type

1
Type

• Two basic families
• Serif and Sans Serif

• Parts of all type
• Ascenders, descenders, baseline, etc.
• Leading
• linespacing/paragraph
• Kerning

2
Ascender
Serif
Cañada College
X-Height
Baseline
Stroke
Cap Height
ThickThin
Descender
3
Type Families

• Serif (Readable)
• Body Copy
• Books, magazines
• lt14 point
• Sans Serif (Legible)
• 1816 then back again in 1920s
• Display Type
• Posters
• Headlines

4
Type Families and Fonts

• A typeface family Type Designer
• William Caslon, Giambattista Bodoni, Aldus
  Manutius (15th Century), Hermann Zapf (Palatino,
  Optima, Melior)
• Font metal type
• Adobe vs True Type (fonts?)

5
Type

• Point system72 points to an inch
• Picas1 pica 12 points6 picas to an inch
• Pixels72 pixels to an inch?Macintosh vs.
  Windows Monitors

6
Type

• Problem with ALL CAPS

7
Type on the WEB

• Controlling type
• Default fonts and sizes
• Browser text vs Graphic text

8
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

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

10
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

11
Type on the WEB

• Variables
• Proportional vs Monospaced (Preformatted or
  Teletype)
• Logical vs Physical Styles
• Emphasis vs Bold
• Special Characters () ( )
• Underline and Italic (issues!)

12
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

13
Sample Display Type
14
Sample Display Type
15
Sample Display Type
16
Sample Display Type
17
Sample Display Type
18
Sample Display Type
19
Sample Display Type
20
Sample Display Type
21
(No Transcript)
22
Objects Replacing Characters
23
(No Transcript)
24
Type Alignment