The seven types of contrast

20
t r T n c o S The se 7 en types of A

description

Book on seven types of contrast designed by me for OCAD project. Pictures by GB Studio 65

Transcript of The seven types of contrast

Page 1: The seven types of contrast

COVER

tr Tnco SThe se7en

types of A

Page 2: The seven types of contrast

tr Tnco S

A

Page 3: The seven types of contrast

tr Tnco SThe se7en

type of ACommunication and expression are always affected by contrast. With greater contrast, comes greater clarity. The readability becomes relative through proper use. Contrast supplies the viewer with a path to follow. A visually expressive map of typography allows for comprehension High contrast commands attention and generates direction. Low contrast is assigned to supportive information and is applied to word or text shapes, which are of secondary and tertiary importance. The control of type on the page, gives the reader a hierarchy of importance and a sense of expression.

A successful graphic designer will guide the reader through the page using words and columns of type as value shapes. He or she carefully scrutinizes the proportion and arrange-ment of lights and darks in a composition. Clear and concise use of value distribution will increase emotional impact. A composition that employs eighty-percent black has a different expression than one that employs eighty-percent white. This book demonstrates that careful use of contrast will greatly enhance the communicative use of type as a visual form, in an effort to expand and clarify typographic principles.

tr T

Page 4: The seven types of contrast

speaks

if your work

Hen

ry J

. Ka

iser

02

Page 5: The seven types of contrast

speaks

Size is the first and most basic form of typographic contrast. By changing the font size, the viewers eye is immediately drawn to the content. Words or letters set in the same style of type maintain the relationship of the letter to the background and you create a physical enlargement of the pattern – ABA. What is the first thing you see on the opposite page?

In reviewing the quotation, the eye is immediately drawn to the word speak. Through contrast, you are lead to the two word “don’t interrupt” and finally the remainder of the statement. The font used for the lettering is the same, allowing the viewer to remain undistracted and permit the size contrast to control and lead the eye.

The relative sizes of things can be adjusted for the purposes of creating a perspective illusion, exaggerating comparative apparent attributes, as a message or metaphor, or simply to achieve a balanced layout in terms of the distribution, mass, and space.

Size

01

if your work

for itself,don’t interrupt. 03

Page 6: The seven types of contrast

canyou look

deathmakea star

really like

Weight refers to the perceived mass created by the typeface’s stroke and counters. Using weight easily communicates meaning as well as creating rhythm on the page. Selecting a typeface with several families, makes it easy for the designer to control hierarchy inside a composition without risking the sense of harmony. Priorities can be structured as the weight increases or descreases from the focal point.

Weight is often used to create emphasis, also called focus – causing text of an image to seem more important than others. Creating a balanced series of emphases is critical to creating a good overall composition: too many emphases is chaotic, too few is boring. When the eye is not directed where to look, it tends to just look away. In any layout, a maximum of 3 weights is recommended.In reviewing the quotation, the eye is immediately drawn to death

make a star. Through contrast, you are lead to the word “death make a star” and finally the remainder of the statement. The viewer almost hears the emphasis allowing the full meaning of statement to communicate, control and lead the eye.

Weight

04

Page 7: The seven types of contrast

canyou look

TITLE : WEIGHT DESCRIPTION

VISUAL TIP

02

An

dy

Wa

rho

l

05

Page 8: The seven types of contrast

The opposite of a great idea

is an

othe

r gre

at

THE OPPOSITE OF

ANOTHER IDEA

Nie

ls B

oh

r

06

Page 9: The seven types of contrast

Directional c

ontrast is

a grea

t way t

o prompt the v

iewer t

o take in

a quick

emotion or m

essage v

iewpoint w

ithout interr

upting the

informatio

n the view

er has r

ead or w

ill read

. As an

efficien

t use of

space, it

opens up the o

pportunity

for texture s

hifts an

d size sh

ifts.

The view

er’s eye

is like w

ater. O

nce it has e

ntered the p

icture p

lane

it will s

eek the co

urse of lea

st resis

tance.

Left to its

own devices,

the eye is

happy to move ar

ound, seeking the ea

siest ro

ute – their

conventional read

ing direction.

In general, im

ages dominate

d with strong verti

cals an

d horizontals

have a more f

ormal q

uality co

mpared with im

ages dominate

d by

diagonals

(slanted

lines,

triangles)

or orbiculari

ty (sweep

ing curves,

spirals) c

reating a f

eeling of motion or dynam

ism.

By usin

g direction, th

e desig

ner can provide st

rong pathways

for

the eye to

adhere

to, sweep

ing through the prim

e areas

of focus

and moving along, but not fa

lling outsid

e the ed

ge of the p

icture

plane. I

f the desig

ner has c

ontrol, th

e view

er will f

eel that t

hey are

“compelled” by th

e image to

follow it.

Direction

A G

RE

AT ID

EA

IS THE OPPOSITE OF

03

ANOTHER IDEA

07

Page 10: The seven types of contrast

Form refers to the distinction between uppercase letters and its lowercase equivalent. These forms not only compliment each other, but the letters themselves have now have ability to express a different context. Contrast-ing uppercase against lowercase depicts formality against casual. Uppercase letters start sentences or are often used as Acronyms. Too many cap forms and there is loss in legibility so use it sparingly. Working with form allows some freedom with design, as layout need not be changed to draw attention to a piece of text of the same point size and leading.

In reviewing the quotation, the eye reads through, but takes note of the words design, profitable and art. As a visual cue, the letterform contrast awakens the importance of a specific word or words.

FOrm

NO ONE complains, if

isn’t then its

DESIGNPROFITABLEART

Hen

rik

Fis

ker

08

Page 11: The seven types of contrast

DESIGNPROFITABLEART

04

09

Page 12: The seven types of contrast

don’t find a fault. find a remedy.

FINDDYA .

DON’TREFIND

Hen

ry F

ord

10

Page 13: The seven types of contrast

AMEFAULT FINDDYA .

DON’TREFIND 05

Colour alters the scale of relationship between similar letterforms. A typographic colour change allows a designer to highlight struc-ture and invigorate a page. A letterform’s shape and value are more important in determining it’s spatial depth. The tonal values of the colours can be used to create the illusion of size difference and the perceptual difference among colours like red, blue or green can play a dramatic role in typography.

Rich spatial perceptions can be achieved through varying colour intensities and allows the designer to separate information as well as creating visual interest. Notice how in the quotation, colour is used to RE, ME and DY .

Colour

11

Page 14: The seven types of contrast

Letters are not pictures

it’s easy to be differentbut difficult to be better

The use of structure involves contrasting the thicks and thins of type. The roman letter and the italic counterpart are a common method. A true italic is measured at 12 to 15 degrees less upright than it’s counterpart. Typefaces are purposely designed with variations in structure so that letterforms compliment each other and give the designer a clear advantage when distinguishing textual priority. To con-trast structure you can also contrast different families and achieve distinct visual differences between thicks and thins.

The quotation demonstrates how emphasis can be con-trolled. The words letters , are, not and pictures contrasts with the words things, of and things and by doing the, the structure change is not only like increasing or decreasing the volume, but changes the very quality and tone of the voice to suit the expression.

Structure

12

Page 15: The seven types of contrast

06Structure06

Eri

c G

ill

things, of things

13

Page 16: The seven types of contrast

solve problems geniuses prevent intellectuals

themTexture is how the type appears as a single unit on the page – creating a grey value. This texture is derived from the letterforms, their rhythm, density and how they are arranged letter to letter, word to word and line to line on the page. Texture can be compared to fabric – the type is equal to the threads that form it. Texture also calls to our sense of touch so the viewer can be spoken to on two levels.

By altering type’s visual darkness, you alter the space it occupies. With variations in light, dark, dense, and volumous, the texture is keyed to the brain’s function to identify visual stimuli and the viewer’s experience is used to tell them where the eye should travel next.

Texture

14

Alb

ert

Ein

stei

n

Page 17: The seven types of contrast

07

solve problems geniuses prevent

15

Page 18: The seven types of contrast

Cover design © 2011 by Henry NguyenBook written © 2011 by Valerie ScheinBook design by Henry NguyenPhotograph by Mert and Marcus

Credits

Page 19: The seven types of contrast
Page 20: The seven types of contrast