Color & Typography

COLOR

TYPOGRAPHYand

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.


HTML - StructureCSS - Presentation

JS - Behavior

ProgressiveEnhancement


Review: The Design Process


The Design Process•Define

•Structure

•Design

•Build & Test

•Launch


Colors & Color Pallets


The Color Wheel


RGB vs CMYK


cool/passive

warm/active

1

1 1

2

2 2

3

3

3 3

3

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

Special font, the letter y.

Cap height

Ascender

Meanline

Descender

Baseline


Anatomy of a Font

Special font x x-height


Anatomy of a Font

Special fontSerif


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


http://www.bostonglobe.com

http://www.bostonglobe.com

Line LengthIn 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.


http://en.wikipedia.org/wiki/Leading


http://en.wikipedia.org/wiki/Typography#cite_note-17


http://en.wikipedia.org/wiki/White_space_(visual_arts)


http://en.wikipedia.org/wiki/Printing_press










Line HeightIn 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/Length











Word Spacing











Letter Spacing I n t y p o g r a p h y , c o l o r i s t h e o v e r a l l d e n s i t y o f t h e i n k o n t h e p a g e , 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 , b u t a l s o b y t h e w o r d s p a c i n g , l e a d i n g a n d d e p t h o f t h e m a r g i n s . [ 1 8 ] T e x t l a y o u t , t o n e o r c o l o r o f s e t m a t t e r , a n d t h e i n t e r p l a y o f t e x t w i t h w h i t e s p a c e o f t h e p a g e a n d o t h e r g r a p h i c e l e m e n t s c o m b i n e t o i m p a r t a " f e e l " o r " r e s o n a n c e " t o t h e s u b j e c t m a t t e r . W i t h p r i n t e d m e d i a t y p o g r a p h e r s a r e a l s o c o n c e r n e d w i t h b i n d i n g m a r g i n s , p a p e r s e l e c t i o n a n d p r i n t i n g m e t h o d s .














Color


What movie is it?Font as a logo


0123456789ABCDEFGHIJKLMNOP

QRSTUVWXYZ


Harry Potter


0 123456789A B C D E F G H I J K L M N O

P Q R S T U V W X Y Z


The God f a t h e r


0123456789ABCDEFGHIJKLMNOP

QRSTUVWXYZ


Back to the future


0123456789

ABCDEFGHIJKLMNOP

QRSTUVWXYZ


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/unfinished-spaces-look-plan-from-castro-revolution/

K723H16LY24PR9zfqtROsN/story.html


http://bostonglobe.com/arts/2011/12/15/unfinished-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


ConcernsE-mail: [email protected]

Twitter: @csskarma

AIM: csskarma


mailto:[email protected]




