typography -...
TRANSCRIPT
![Page 1: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/1.jpg)
TYPOGRAPHYNiels Joubert, 10th August 2010, CS147
Tuesday, August 10, 2010
![Page 2: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/2.jpg)
WHY DO WE CARE ABOUT FONTS?
Tuesday, August 10, 2010
![Page 3: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/3.jpg)
WHY DO WE CARE ABOUT FONTS?
HelveticaThe aim of the new design was to create a neutral typeface that had great clarity, no intrinsic meaning in its form, and could be used on a wide variety of signage.
Tuesday, August 10, 2010
![Page 4: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/4.jpg)
WHY DO WE CARE ABOUT FONTS?
helveticafilm.com
Tuesday, August 10, 2010
![Page 5: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/5.jpg)
WHY DO WE CARE ABOUT FONTS?
helveticafilm.com
Tuesday, August 10, 2010
![Page 6: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/6.jpg)
Introduction
Introducing Typography• “The Organization of Letters on a blank page ... [for] acts of visual
communication”
• Designer Mentality• Using Types to Represent Information
• Graphics Mentality• Representing and Rendering Typography
Tuesday, August 10, 2010
![Page 7: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/7.jpg)
Introduction
Designer Mentality• LETTER
• The letterform, represented as a glyph
• TEXT• Ongoing sequences of letters
• GRID• The organization of visual elements
Tuesday, August 10, 2010
![Page 8: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/8.jpg)
DESIGN MENTALITY
Tuesday, August 10, 2010
![Page 9: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/9.jpg)
Design Mentality
ReferencesDisclaimer: I am not a designer - I can only point you the right way.
The TomeThe Intro
Tuesday, August 10, 2010
![Page 10: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/10.jpg)
FONT Typefaces and Font Families
Tuesday, August 10, 2010
![Page 11: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/11.jpg)
Font
Pre-Gutenberg (BC-1400s)• Western Alphabet
• Cumae Alphabet (Greet) evolves to Roman Alphabet
• Eastern Alphabet• Chinese invented ʻmovable typeʼ (1040 AD), large alphabet hampers it
• Words• Calligraphy: Gestures of the Body
Tuesday, August 10, 2010
![Page 12: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/12.jpg)
Font
13th CenturyMonk fixes incorrect line
Tuesday, August 10, 2010
![Page 13: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/13.jpg)
Font
Movable Type• 1450
• Johannes Gutenberg independently invents movable type (1st mass production system)
• Large quantites of letters molded, arranged into galley proofs
• Uniform, precise lettering leads to fonts
• Tension:
• Organic, Human Body vs Geometric, Abstract System
•
Tuesday, August 10, 2010
![Page 14: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/14.jpg)
Font
First Fonts• Emulates Scribes
• “Blackletter”
• contains Ligatures
• Letter Styles• Upper Case
• Lower Case
•
Tuesday, August 10, 2010
![Page 15: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/15.jpg)
Font
Copyright Laws• Print
• Establishes author as owner of text (commoditizes reproduction)
• Influences 18th Century Lawmaking
• Modern Day Struggle• Fundamental Liberty of Ideas
• Protect investment in authoring and publishing content
Tuesday, August 10, 2010
![Page 16: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/16.jpg)
Font
Type Classification• Distinguishing groups of types
• Flourishes:
• Serif
• Slab Serif
• Sans Serif
• “Organic”-ness:
• Humanist / Old-Style
• Transitional
• Modern SerifsTuesday, August 10, 2010
![Page 17: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/17.jpg)
Font - Type Classification
Seri
fSa
ns S
erif
Humanist Transitional Modern Slab
Tuesday, August 10, 2010
![Page 18: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/18.jpg)
Font - Type Classification
Humanist (Oldstyle)
Tuesday, August 10, 2010
![Page 19: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/19.jpg)
Font - Type Classification
Modern
Tuesday, August 10, 2010
![Page 20: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/20.jpg)
Font - Type Classification
Slab Serif
Tuesday, August 10, 2010
![Page 21: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/21.jpg)
Font - Type Classification
Sans Serif
Tuesday, August 10, 2010
![Page 22: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/22.jpg)
Font - Type Classification
Example: HelveticaGenerations are defined by their typeface
Tuesday, August 10, 2010
![Page 23: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/23.jpg)
Font - Type Classification
Example: HelveticaGenerations are defined by their typeface
Tuesday, August 10, 2010
![Page 24: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/24.jpg)
Text
Glyph Metrics
(No need to know all this)
Text
Tuesday, August 10, 2010
![Page 25: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/25.jpg)
Font
Anatomy (Font Metrics)• Baseline:
• Stable line on which letters sit
• Cap Height:• Baseline to capital top
• x-Height:• height of body of lowercase
• Height:• “Pt”, Capital top to lowest
decender + buffer(Know all this)
Tuesday, August 10, 2010
![Page 26: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/26.jpg)
Font
Font x-height
• Both have the same cap height.• Larger x-height gives Times a bigger feel
• Small fonts for screen usage has large x-heights.
• Small difference between capitals and lower case.
•
Tuesday, August 10, 2010
![Page 27: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/27.jpg)
Font
Sizes and Units• Height measures in Points (1700s)
• 72 pt = p72 = 1 inch (Adobeʼs standard. Traditionally, 0.996in)
• 12 pts = 1pica = 1p (column width measurement)
• Font Size today: Pixels• Problem: Displays at various resolutions
• How to get consistency across hardware?
Height
Tuesday, August 10, 2010
![Page 28: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/28.jpg)
Font
Font Families• A set of variations on a typeface• Thesis Serif Medium Roman, Thesis Serif Medium Italic, Thesis Serif Medium Small Caps, ...
Style Emphases Stretch
Tuesday, August 10, 2010
![Page 29: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/29.jpg)
Font Families Example
Tuesday, August 10, 2010
![Page 30: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/30.jpg)
TEXTCoherent Arrangement of Words & Sentences
Tuesday, August 10, 2010
![Page 31: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/31.jpg)
Text
Text• Letters -> Words -> Sentences• Question: How do we relate individual font
elements to each other?
“Typography manipulates the silent dimensions of the alphabet, employing habit and technique - such as spacing and punctuation - that are seen but not heard or spoken.” - Ellen Lupton
“Frees the reader from the bounds of linearity”
Tuesday, August 10, 2010
![Page 32: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/32.jpg)
Text Evolution
Dominant Subject• Humans interacting with information:
• No longer “reader” or “writer”
• “User”
• Bundle of needs and impairments
• Should be cared for but controlled and guided.
• Typography is designed to do this.
• “Productive” vs “Contemplative”
Tuesday, August 10, 2010
![Page 33: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/33.jpg)
Text
Kerning• Variable spacing between letters
depending on the letter pair• Automatically Adjusted
• Manually Tweaked by Typesetter
Tuesday, August 10, 2010
![Page 34: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/34.jpg)
Text
Leading• The distance from the baseline of one line of type
to another. “Line Spacing”• “Leading”
• Reference to strips of lead inserted between lines of type
Tuesday, August 10, 2010
![Page 35: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/35.jpg)
Text
Leading• The distance from the baseline of one line of type
to another. “Line Spacing”
Tuesday, August 10, 2010
![Page 36: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/36.jpg)
Text
Ligatures• Multiple ʻlettersʼ form a
single glyph.• Used to create correct
kerning.•
Tuesday, August 10, 2010
![Page 37: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/37.jpg)
Text
Paragraphs• Unlike Sentences, Paragraphs do not occur in
nature. Literary convention to help reader.• Start with indent
• End with line break
Tuesday, August 10, 2010
![Page 38: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/38.jpg)
Text: Paragraphs
Tuesday, August 10, 2010
![Page 39: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/39.jpg)
Text: Takeaway
Eg: Words
Typography manipulates the
meaning of words though visual cues
Student Work at Maryland Institute College of Art
Tuesday, August 10, 2010
![Page 40: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/40.jpg)
GRIDLayout of Visual Elements
Tuesday, August 10, 2010
![Page 41: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/41.jpg)
Grid
Context for Arrangement• All traditional design is built from a grid
• Legacy of printing press grids that was painstakingly built
• Skeleton for layout of typography
• Design Pro-tip:• Make a grid, and align things with it.
Tuesday, August 10, 2010
![Page 42: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/42.jpg)
Grid
Latin Bible1497
Tuesday, August 10, 2010
![Page 43: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/43.jpg)
Grid
4 layoutsone grid
Tuesday, August 10, 2010
![Page 44: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/44.jpg)
Grid
Tuesday, August 10, 2010
![Page 45: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/45.jpg)
ENCODINGRepresenting textual information
Tuesday, August 10, 2010
![Page 46: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/46.jpg)
Encoding
Encoding• Storing text in a digital format:
• ASCII - byte-by-byte representation of 256 letters
• Unicode - much expanded variable-length letter representation
• Storing typography in a digital format:• Basic Gylphs - “Font”
• Document Layout - PostScript, TeX, PDF, Word processors
Tuesday, August 10, 2010
![Page 47: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/47.jpg)
Encoding
ASCII• Uses a single byte for each character• Limited to 256 characters, mainly roman
numerals• Stateless - each character stands alone• Outdated
Tuesday, August 10, 2010
![Page 48: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/48.jpg)
Encoding
Unicode• “Unicode provides a unique number for every character, no
matter what the platform, no matter what the program, no matter what the language.”
• 256 Code Pages, 107k characters (http://www.unicode.org/charts/)
• Defines character numbers but does not specify storage requirements
• Encodings:• UTF-8: uses the ASCII character set (8 bits) and can
expand up to 4 bytes for other characters.
Tuesday, August 10, 2010
![Page 49: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/49.jpg)
Encoding
OpenType [Adobe, Apple, Microsoft]
• Contains:• Character map: Unicode # -> Glyph
• Glyphs (Bezier curves), thus it is a vector font
• Glyph Metrics (sized)
• May contain:• Multiple character maps and fonts
• Bitmaps and Outline fonts
Tuesday, August 10, 2010
![Page 50: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/50.jpg)
Encoding
Anatomy of a Glyph
Tuesday, August 10, 2010
![Page 51: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/51.jpg)
BEZIER CURVESRepresenting Glyphs
Tuesday, August 10, 2010
![Page 52: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/52.jpg)
Curves
Requirements• Smooth Curves at any resolution• Sharp Corners and Smooth Transitions
• Choose between C0 and C1 continuity
• Fast and simple to calculate• Small storage footprint
Tuesday, August 10, 2010
![Page 53: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/53.jpg)
Curves
Remember Splines• Set of basis functions and control points
• Different types of splines gives us different curve properties and control points
• Cubic Hermite:
• Two endpoints (interpolates), two tangents
• Catmull-Rom generates Smooth path
• B-Splines:
Tuesday, August 10, 2010
![Page 54: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/54.jpg)
Curves
Cubic Bézier
• Like Hermite splines, but tangents indirectly specified.
Tuesday, August 10, 2010
![Page 55: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/55.jpg)
Curves
Cubic Bézier Properties
• Like Hermite splines, but tangents indirectly specified. Just another cubic polynomial
• Local Support
• Interpolates endpoints
• Convex Hull
• Invariance under affine transforms - transforming points is enough
• Extrapolation to subdivide splines
Tuesday, August 10, 2010
![Page 56: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/56.jpg)
Curves
Local Support• Perturbing a control point does not have a global
impact• Good for editing purposes!
• Fast evaluation - donʼt need to do global solves
• Interpolates endpoints
Tuesday, August 10, 2010
![Page 57: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/57.jpg)
Curves
DeCasteljauʼs Algorithm
Tuesday, August 10, 2010
![Page 58: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/58.jpg)
Curves
Joining Bézier
• C0• Endpoints touch
• C1• C0 + ʻtangentʼ points (a, c) on line
• C2• C1 + ʻtangentʼ points (a, c) equidistant wrt. b
Tuesday, August 10, 2010
![Page 59: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/59.jpg)
Encoding
Anatomy of a Glyph
Tuesday, August 10, 2010
![Page 60: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/60.jpg)
RASTERIZATIONDisplaying Glyphs on Bitmap displays
Tuesday, August 10, 2010
![Page 61: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/61.jpg)
Rasterization
Tuesday, August 10, 2010
![Page 62: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/62.jpg)
Rasterization
Anti-Aliasing• Pixels are partially black
• Make intensity be relative to vector overlap of pixel
Tuesday, August 10, 2010
![Page 63: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/63.jpg)
Rasterization
Subpixel Smoothing• Exploit pixel arrangement of monitor
• Increases apparent resolution
• Anti-aliases on a per-color value depending on device pixel arrangement
Tuesday, August 10, 2010
![Page 64: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/64.jpg)
Things to Remember:• Type Classification
• Font Metrics, Sizes & Units
• Font Families
• Kerning, Leading
• Encoding UTF vs ASCII
• Character Encoding versus Glyph
• Bezier Curve Properties, DeCastaljau, Joining
• Rasterization
Tuesday, August 10, 2010
![Page 65: TYPOGRAPHY - graphics.stanford.edugraphics.stanford.edu/courses/cs148-10-summer/docs/TypographyLe… · TYPOGRAPHY Niels Joubert, 10th August 2010, CS147 Tuesday, August 10, 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5a7a10407f8b9ab80d8d00b6/html5/thumbnails/65.jpg)
Acknowledgements• “thinking with type”, Ellen Lupton
• Pretty much all the examples are from this book
• Prof. Pat Hanrahan, Prof. James OʼBrien• CS148 Slides
• CS184 Slides Fall 2008 (http://www-inst.eecs.berkeley.edu/~cs184/fa09/lectures.php)
Tuesday, August 10, 2010