Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

IDF-502 Wk 5 - Introduction to Typography

Origins, Parts, Classifications, Hierarchy, Fonts, and Chinese Typography
by

Wright Seneres

on 4 October 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of IDF-502 Wk 5 - Introduction to Typography

IDF-502 Foundations in Web Design & Strategy
Week 5
Introduction to Typography
Origins of
typography

Punches and dies for seals in ancient times
Brushstrokes
Phaistos Disc
Movable type / Gutenberg Bible
Parts of a letter
(just a few)
Serifs and stems
Baseline and x-height
Ascender height vs. cap height
Descender line
Ascenders and descenders
Counter, character width
Classification
10 groups
(1964 Deutsche Normenausschuss)
vs.
11 groups
(1962 Vox-ATypI/1967 British Standard)
Fonts
"Typefaces" vs. "Fonts"

Typefaces: created by type designers, these are the designs we know as Baskerville, Comic Sans, Times New Roman, etc.

Fonts: are created by type foundries, are the digital files that enable printing of typefaces
"Typography is the visual component of the written word."
-Typography For Lawyers

Hierarchy
Size: typographic scale (from Bringhurst):
Chinese typography
"Typography exists to honor
the content."
- Robert Bringhurst, The Elements of Typographic Style
"Good typography reinforces the goals of the text."
- Matthew Butterick,
Typography for Lawyers
Typography is the art and technique of arranging type.

It can also include type design.
Source: typographyforlawyers.com
Source: wikipedia.org
Type "color"
Kerning
The space between
two letters
Tracking
(also called letterspacing)
Overall spacing of word or line of text
Leading
Vertical space between lines of text
The 1964 DN Groups
Graphic
Humanist
Garalde
Transitional
Didone
Slab Serif
Lineale
Glyphic
Script
Stylized
The Vox-ATypI Groups
Graphic
Humanist
Garalde
Transitional
Didone
Mechanistic
Lineal
Glyphic
Script
Blackletter
Gaelic
(plus Non-Latin)
(plus Non-Latin)
Simplified Groups
Humanist
Old Style
Transitional
Modern
Slab Serif / Egyptian
Sans Serif
(plus Non-Latin)
Measure
(width of a body of type)
One point = 1/72 of an inch
One pica = 12 points
One em = distance horizontally equal to the type size being used (e.g. 12pt text, 1 em = 12pt)
One en = half of an em
Also used for measure:
Millimeter = mm
Pixel = px
x-height = ex
% = percentage
Fundamental rule:
leading should be wider than the word spacing

Small measure, less leading

Wide measure, more leading
Leading = line-height
Source: retinart.net
Weight
Beyond typeface "weight" like bold or light versions of roman (regular) weight
Choose weights carefully, based on solving design and/or content problems
TrueType vs. OpenType vs. PostScript Fonts
Source: opentype.info
In traditional printing, the font is the complete set of one size, weight, and style of a typeface
Source: fineartamerica.com
TrueType Fonts
.ttf file
Originally developed by Apple to compete with Adobe Type 1 fonts
Compatible with Windows and Mac
Most fonts on your computer are TT fonts
All "outline" fonts, similar to
vector images
PostScript Fonts
Also known as Adobe Type 1, Type 3, PostScript Type 1, etc.
These fonts use the PostScript language to create outlines (like vector images)
.pfb, .pfm (Windows)
.pfm, .afm (Mac)
OpenType Fonts
.otf file
Originally developed Microsoft (and later Adobe) to supersede TrueType (and Adobe Type 1)
OT contains outlines in TrueType and Type 1 (actually CFF) formats plus additional metadata
Computer Fonts vs.
Web Fonts
Computer fonts stored on local machine vs. web fonts stored in cloud
Embedded Fonts
Font (or subset of font) saved with a document (e.g. PDF) so another user can view document with intended font
Font Licensing
Fee-based usage ($0 and up) of premium fonts
Various licenses available (single-user, multi-user, web server, commercial, etc.)
Desktop vs. web vs. mobile apps vs. e-publishing
Full transcript