Color & Typography

COLOR and TYPOGRAPHYThursday, December 15, 11

Goals for today •Review •Colors & color palettes •Accessibility •Image formatting •Typefaces •Typography site reviewThursday, December 15, 11

What is progressive enhancement?Thursday, December 15, 11

A layered approach to Web Design, focused on content, accessibility & the user.Thursday, December 15, 11

Progressive Enhancement HTML - Structure CSS - Presentation JS - BehaviorThursday, December 15, 11

Review: The Design ProcessThursday, December 15, 11

The Design Process •Deﬁne •Structure •Design •Build & Test •LaunchThursday, December 15, 11

Colors & Color PalletsThursday, December 15, 11

The Color WheelThursday, December 15, 11

RGB vs CMYKThursday, December 15, 11

1 cool/ 3 3 passive 2 2 3 3 1 1 warm/ active 3 2 3Thursday, December 15, 11

Thursday, December 15, 11

Color TypesThursday, December 15, 11

REDThursday, December 15, 11

PURPLEThursday, December 15, 11

BLUEThursday, December 15, 11

GREENThursday, December 15, 11

ORANGEThursday, December 15, 11

YELLOWThursday, December 15, 11

http://wearepandr.com/labs/colour_bookmarkThursday, December 15, 11

AccessibilityThursday, December 15, 11

Color Blindness •Total •Red-Green •Blue-YellowThursday, December 15, 11

Color BlindnessThursday, December 15, 11

Color Blindness Click the red button to continue continue continueThursday, December 15, 11

Image formattingThursday, December 15, 11

Image formatting •GIF •JPEG •PNG 8 •PNG 24 •PNG 32 •VectorThursday, December 15, 11

TypographyThursday, December 15, 11

Typography •font face (font-family) •size (font-size) •line length (max-width) •leading (line-height) •tracking (word-spacing) •kerning (letter-spacing) •color (color)Thursday, December 15, 11

Anatomy of a Font Ascender Cap height Meanline Special font, the letter y. Baseline DescenderThursday, December 15, 11

Anatomy of a Fontecial font x x-heightThursday, December 15, 11

Anatomy of a Font Special font SerifThursday, December 15, 11

Font Face •Serif •Sans-serif •Monospace •Slab Serif •Handwritten •Decorative •OrnamentalThursday, December 15, 11

SerifThursday, December 15, 11

Sans-SerifThursday, December 15, 11

MonospaceThursday, December 15, 11

Slab-SerifThursday, December 15, 11

HandwrittenThursday, December 15, 11

decorativeThursday, December 15, 11

 Thursday, December 15, 11

Size & weight •Emphasis like this •hierarchy... •...shows order •general readability http://www.bostonglobe.com/todayspaperThursday, December 15, 11

Line Length In typography, color is the overall density of the ink on the page, determined mainly by the typeface, but also by the word spacing, leading and depth of the margins.[18] Text layout, tone or color of set matter, and the interplay of text with white space of the page and other graphic elements combine to impart a "feel" or "resonance" to the subject matter. With printed media typographers are also concerned with binding margins, paper selection and printing methods. In typography, color is the overall density of the ink on the page, determined mainly by the typeface, but also by the word spacing, leading and depth of the margins.[18] Text layout, tone or color of set matter, and the interplay of text with white space of the page and other graphic elements combine to impart a "feel" or "resonance" to the subject matter. With printed media typographers are also concerned with binding margins, paper selection and printing methods.Thursday, December 15, 11

Line Height In typography, color is the overall density of the ink on the page, determined mainly by the typeface, but also by the word spacing, leading and depth of the margins.[18] Text layout, tone or color of set matter, and the interplay of text with white space of the page and other graphic elements combine to impart a "feel" or "resonance" to the subject matter. With printed media typographers are also concerned with binding margins, paper selection and printing methods. In typography, color is the overall density of the ink on the page, determined mainly by the typeface, but also by the word spacing, leading and depth of the margins.[18] Text layout, tone or color of set matter, and the interplay of text with white space of the page and other graphic elements combine to impart a "feel" or "resonance" to the subject matter. With printed media typographers are also concerned with binding margins, paper selection and printing methods.Thursday, December 15, 11

Line Height/Length In typography, color is the overall density of the ink on the page, determined mainly by the typeface, but also by the word spacing, leading and depth of the margins.[18] Text layout, tone or color of set matter, and the interplay of text with white space of the page and other graphic elements combine to impart a "feel" or "resonance" to the subject matter. With printed media typographers are also concerned with binding margins, paper selection and printing methods.Thursday, December 15, 11

Word Spacing In typography, color is the overall density of the ink on the page, determined mainly by the typeface, but also by the word spacing, leading and depth of the margins.[18] Text layout, tone or color of set matter, and the interplay of text with white space of the page and other graphic elements combine to impart a "feel" or "resonance" to the subject matter. With printed media typographers are also concerned with binding margins, paper selection and printing methods.Thursday, December 15, 11

Letter Spacing In typography, color is the overa ll density of the ink on the page, d e t e r m i n e d ma i n l y b y t h e t y p e f a c e, but also by the word spacing, leading and depth of the margin s. [18] Text layout, tone or color of set matter, and the interplay o f text with white space of the pag e and other graphic elements com bine to impart a "feel" or "resona nce" to the subject matter. With printed media typographers are a lso concerned with binding margin s, paper selection and printing m ethods.Thursday, December 15, 11

ColorThursday, December 15, 11

Font as a logo What movie is it?Thursday, December 15, 11

0123456789 ABCDEFGHIJKLMNOP QRSTUVWXYZThursday, December 15, 11

Harry PotterThursday, December 15, 11

0123456789 ABCDEFGHIJKLMNO P QRSTUVWXYZThursday, December 15, 11

The GodfatherThursday, December 15, 11

Back to the futureThursday, December 15, 11

007 GOLDENEYEThursday, December 15, 11

Great TypographyThursday, December 15, 11

Typography on the WebThursday, December 15, 11

http://ruth.realityla.com/Thursday, December 15, 11

http://www.smashingmagazine.com/2011/10/07/16-pixels- body-copy-anything-less-costly-mistake/Thursday, December 15, 11

http://bostonglobe.com/arts/2011/12/15/unﬁnished-spaces- look-plan-from-castro-revolution/ K723H16LY24PR9zfqtROsN/story.htmlThursday, December 15, 11

Great Sites to Read •I Love Typography •We Love Typography •Typography Daily •Fonts.com •The Noun Project •Colour LoversThursday, December 15, 11

Today is in the past •Review •Colors & color palettes •Accessibility •Image formatting •Typefaces •Typography site review •http://wearepandr.com/labs/colour_bookmarkThursday, December 15, 11

Next Class •Navigation •Information Architecture •Accessing Information •Site mapping •WireframingThursday, December 15, 11

Slide Color PalletThursday, December 15, 11

Concerns E-mail: timwright12@gmail.com Twitter: @csskarma AIM: csskarmaThursday, December 15, 11

Color & Typography

by Tim Wright on Dec 15, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 7

Statistics

Color & Typography — Presentation Transcript

http://iteach.org	3
http://www.coderwall.com	2
http://jobster-pc	2