Color & Typography

COLOR
and
TYPOGRAPHY

Thursday, December 15, 11

Goals for today
•Review
•Colors & color palettes
•Accessibility
•Image formatting
•Typefaces
•Typography site review


What is progressive
enhancement?


A layered approach
to Web Design,
focused on content,
accessibility & the
user.

Progressive
Enhancement
HTML - Structure
CSS - Presentation
JS - Behavior


Review: The Design
Process


The Design Process
•Deﬁne
•Structure
•Design
•Build & Test
•Launch


Colors & Color Pallets


The Color Wheel


RGB vs CMYK


1 cool/
3 3 passive
2 2

3 3

1 1
warm/
active 3 2 3


Color Types


RED


PURPLE


BLUE


GREEN


ORANGE


YELLOW


http://wearepandr.com/labs/colour_bookmark


Accessibility


Color Blindness
•Total
•Red-Green
•Blue-Yellow


Color Blindness


Color Blindness
Click the red button to continue

continue continue


Image formatting


Image formatting
•GIF
•JPEG
•PNG 8
•PNG 24
•PNG 32
•Vector


Typography


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

Anatomy of a Font
Ascender
Cap height Meanline

Special font, the letter y.
Baseline

Descender


Anatomy of a Font

ecial font x x-height


Anatomy of a Font

Special font
Serif


Font Face
•Serif
•Sans-serif
•Monospace
•Slab Serif
•Handwritten
•Decorative
•Ornamental

Serif


Sans-Serif


Monospace


Slab-Serif


Handwritten


decorative





Size & weight
•Emphasis like this

•hierarchy...
•...shows order
•general readability

http://www.bostonglobe.com/todayspaper


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.


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


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


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.


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.


Color


Font as a logo
What movie is it?


0123456789
ABCDEFGHIJKLMNOP
QRSTUVWXYZ


Harry Potter


0123456789
ABCDEFGHIJKLMNO
P QRSTUVWXYZ


The Godfather


Back to the
future


007 GOLDENEYE


Great Typography


Typography on the
Web


http://ruth.realityla.com/


http://www.smashingmagazine.com/2011/10/07/16-pixels-
body-copy-anything-less-costly-mistake/

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


Great Sites to Read
•I Love Typography
•We Love Typography
•Typography Daily
•Fonts.com
•The Noun Project
•Colour Lovers


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


Next Class
•Navigation
•Information Architecture
•Accessing Information
•Site mapping
•Wireframing


Slide Color Pallet


Concerns
E-mail: timwright12@gmail.com

Twitter: @csskarma

AIM: csskarma


Color & Typography

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

More from Tim Wright

More from Tim Wright (18)

Recently uploaded

Recently uploaded (20)

Color & Typography