Ba0615 Design A Small Chart

Before&After
BAmagazine.com
LIQUID measures
1 gal = 4 qt = 8 pt = 16 cup = 128 fl oz
gal = 2 qt = 4 pt = 8 cup = 64 fl oz
gal = 1 qt = 2 pt = 4 cup = 32 fl oz
gal = qt = 1 pt = 2 cup = 16 fl oz
gal = qt = pt = 1 cup =
8 fl oz
DRY measures
1 cup =
16 tbsp =
cup =
12 tbsp =
cup = 10 tbsp =
cup =
8 tbsp =
cup = 5 tbsp =
cup =
4 tbsp =
cup =
2 tbsp =
cup =
1 tbsp =
48 tsp =
36 tsp =
32 tsp =
24 tsp =
16 tsp =
12 tsp =
6 tsp =
3 tsp =
Pinch or dash = less than tsp
Your recipe for success!

Compliments of Stacy Thomas, Realtor
.. www.stacythomas.com
250 ml
175 ml
150 ml
125 ml
75 ml
50 ml
30 ml
15 ml
i U X
Design a
small chart
Visual simplicity transforms
a kitchen gimmick into
a useful tool
Continued
Continued
Design a small chart
0615
Before&After
BAmagazine.com
i U X
Visual simplicity transforms a kitchen gimmick into a useful tool
LIQUID measures
1 gal = 4 qt = 8 pt =
gal = 2 qt = 4 pt =
gal = 1 qt = 2 pt =
gal = qt = 1 pt =
gal = qt = pt =
16 cup = 128 fl oz
8 cup = 64 fl oz
4 cup = 32 fl oz
2 cup = 16 fl oz
1 cup =
8 fl oz
DRY measures
1 cup =
16 tbsp =
cup =
12 tbsp =
cup = 10 tbsp =
cup =
8 tbsp =
cup = 5 tbsp =
cup =
4 tbsp =
cup =
2 tbsp =
cup =
1 tbsp =
Before
48 tsp =
250 ml
36 tsp =
32 tsp =
24 tsp =
16 tsp =
12 tsp =
175 ml
150 ml
125 ml
6 tsp =
3 tsp =
75 ml
50 ml
30 ml
15 ml

Compliments of Stacy Thomas, Realto
r
Youre up to your elbows in eggs and flour, the recipes calling for a quarter cup of corn starch, and all
you can reach is a tablespoon. Quick! How many are
in a quarter cup? Smart you. Stuck to the fridge door
is Stacy Thomas handy measurement chart; one
look, and you keep cooking without missing a step.
Such usefulness is the idea behind these flat,
lightly magnetic vinyl charts; pass them out to your
customers, and you stay in their kitchens forever.
Theyre great for visibility.
But, of course, to be visible, they must be kept,
and for that they must be attractive and easy to use.
The keys to this are good organization and visual
simplicity. Heres how to transform a hard-to-read,
clip-arty gimmick into a sleek kitchen helper.
After
2 of 12
0615
Before&After
BAmagazine.com
3 of 12
i U X
Before: Its festive and informative, but . . .
The original 4 x 7 magnet has the use-me qualities of a good promotional piece,
but its complicated and unattractive. Thats because the space wasnt designed.
Diluted Because
positive and negative
elements have similar
sizes, they strongly
compete, diluting
their effectiveness.
3
3
Why veggies?
Its a kitchen chart,
but the topic is
measurements,
not food.
No rhythm Stuff is
aligned left (1), right
(2), center (3).
Misdirected Uncoordinated lines pull

the eye everywhere.
Unfocused Absence
of a focal point leaves
the page vague.
Before
3 of 12
0615
Before&After
BAmagazine.com
4 of 12
i U X
. . . the type is almost right
Helvetica is a versatile typeface, but at small sizes and low resolution it loses readability;
ink (or pixels) can obscure its fine detail and fill in small apertures.
agc
Helvetica Medium
Closes
Closes
Closes
While excellent at headline size, Helvetica

is not the best choice for small typeits
curve strokes curl around far enough to
leave only small openings, called apertures, which at small sizes tend to close up.
Lowercase letters a, e and s are
especially vulnerable to filling
in (right) and can be mistaken
for one another.
31/2
Full-size fractions are never a
good idea. Same-size numerals
have no visual hierarchy and can
easily be mistaken for separate
characters; they require careful
(and slow) reading to decipher.
Before
4 of 12
0615
Before&After
BAmagazine.com
5 of 12
i U X
After: Start over with clearer type
A clear typeface is key to any chart. Look for simplicitystraight lines, plain junctions,
no extra curlicuesbefore stylishness, which can be conveyed by other elements.
agc 3
Myriad Pro Regular
Steeper angle
LIQUID measures
1 gal = 4 qt = 8 pt = 16 cup = 128 fl oz
gal = 2 qt = 4 pt = 8 cup = 64 fl oz
gal = 1 qt = 2 pt = 4 cup = 32 fl oz
8 fl oz
DRY measures
1 cup =
16 tbsp =
cup =
12 tbsp =
cup = 10 tbsp =
cup =
8 tbsp =
cup = 5 tbsp =
cup =
4 tbsp =
cup =
2 tbsp =
cup =
1 tbsp =
48 tsp =
36 tsp =
32 tsp =
24 tsp =
16 tsp =
12 tsp =
6 tsp =
3 tsp =

250 ml
175 ml
150 ml
125 ml
75 ml
50 ml
30 ml
15 ml
Open
Open
Open
The strength of Myriad Pro is its brevity

lines are straight, junctions are simple,
and its curves dont close, the benefit of
which is clarity even at small sizes (below)
and poor resolution. Look again
at Helvetica.
Myriad Pro includes true fractions, whose weight is proportional to full-size numerals.
Numerators align with the cap
height, denominators sit on the
baseline, and the slash has a
steeper angle than the keyboard
backslash. Clear hierarchy, easy
to read at a glance.
After
5 of 12
0615
Before&After
BAmagazine.com
6 of 12
i U X
Spread it out
The magnet looks like its about cooking, but actually its about numbers. To make
numbers reader-friendly, put them in columns, and spread them out.
LIQUID measures
1 gal = 4 qt = 8 pt = 16 cup = 128 fl oz
gal = 2 qt = 4 pt = 8 cup = 64 fl oz
gal = 1 qt = 2 pt = 4 cup = 32 fl oz
8 fl oz
DRY measures
1 cup =
16 tbsp =
cup =
12 tbsp =
cup = 10 tbsp =
cup =
8 tbsp =
cup = 5 tbsp =
cup =
4 tbsp =
cup =
2 tbsp =
cup =
1 tbsp =
48 tsp =
36 tsp =
32 tsp =
24 tsp =
16 tsp =
12 tsp =
6 tsp =
3 tsp =

After
250 ml
175 ml
150 ml
125 ml
75 ml
50 ml
30 ml
15 ml
Before: Allruntogether
The original chart was typed
sentence-style as though the
designer were typing a letter.
Elements are congested and
undifferentiatedand therefore hard to read.
After: Clearly visible
Clarity is what white space
creates. Spread the numbers
into rows and columns; here,
rows are equivalencies, and
columns are like kinds of
datagallons, quarts, pints
and so on. Note columns are
aligned to the right.
1gal = 4 qt = 16 cups = 128 fl oz

1/2 gal = 2 qt = 8 cups = 64 fl oz
1/4 gal = 1 qt = 4 cups = 32 fl oz
1/2 qt = 2 cups = 16 fl oz
1/4 qt = 1 cup = 8 fl oz
1 gal =
4 qt =
8 pt = 16 cup = 128 fl oz
gal =
2 qt =
4 pt =
8 cup = 64 fl oz
gal =
1 qt =
2 pt =
4 cup = 32 fl oz
gal = qt = 1 pt =
gal = qt = pt =
2 cup = 16 fl oz
1 cup = 8 fl oz
Aligned
right
6 of 12
0615
Before&After
BAmagazine.com
7 of 12
i U X
Lighten it up
Next, separate measures from quantities. Lighten the type weight and tint it gray,
which creates visual depth and yields two levels of hierarchy.
All the same
LIQUID measures
1 gal = 4 qt = 8 pt = 16 cup = 128 fl oz
gal = 2 qt = 4 pt = 8 cup = 64 fl oz
gal = 1 qt = 2 pt = 4 cup = 32 fl oz
8 fl oz
DRY measures
1 cup =
16 tbsp =
cup =
12 tbsp =
cup = 10 tbsp =
cup =
8 tbsp =
cup = 5 tbsp =
cup =
4 tbsp =
cup =
2 tbsp =
cup =
1 tbsp =
48 tsp =
36 tsp =
32 tsp =
24 tsp =
16 tsp =
12 tsp =
6 tsp =
3 tsp =

After
250 ml
175 ml
150 ml
125 ml
75 ml
50 ml
30 ml
15 ml
Contrasts add clarity
gal gal
Myriad Pro Light Lighter weight and value (65%) recede
Well differentiated
Quantitieswhich change
remain bold; measures
which repeatrecede in gray.
Now well differentiated, the
comparisons are easy to see
and attractive, too. Note the
kinds of separation: Space
separates columns, hairlines
separate rows, and gray
separates foreground from
midrange.
1 gal =
4 qt =
8 pt = 16 cup = 128 fl oz
gal =
gal =
2 qt =
1 qt =
4 pt =
2 pt =
8 cup = 64 fl oz
4 cup = 32 fl oz
gal = qt =
1 pt =
2 cup = 16 fl oz
gal = qt = pt =
7 of 12
1 cup =
8 fl oz
0615
Before&After
BAmagazine.com
8 of 12
i U X
The layout
Charts centered on the page are the focal point of the design. The remaining
information and images are added as supporting, not primary, elements.
LIQUID measures
LIQUID measures
1 gal =
gal =
4 qt =
2 qt =
gal = 1 qt =
gal = qt =
8 pt = 16 cup = 128 fl oz
4 pt = 8 cup = 64 fl oz
1 gal =
gal =
2 pt =
1 pt =
4 cup = 32 fl oz
2 cup = 16 fl oz
gal = 1 qt =
gal = qt =
1 cup =
8 fl oz
gal = qt = pt =
gal = qt = pt =
4 qt =
2 qt =
8 pt = 16 cup = 128 fl oz
4 pt = 8 cup = 64 fl oz
1 gal =
gal =
2 pt =
1 pt =
4 cup = 32 fl oz
2 cup = 16 fl oz
gal = 1 qt =
gal = qt =
1 cup =
8 fl oz
gal = qt = pt =
DRY measures
4 qt =
2 qt =
8 pt = 16 cup = 128 fl oz
4 pt = 8 cup = 64 fl oz
2 pt =
1 pt =
4 cup = 32 fl oz
2 cup = 16 fl oz
1 cup =
8 fl oz
250 ml
DRY measures
1 cup =
16 tbsp =
48 tsp =
250 ml
1 cup =
16 tbsp =
48 tsp =
250 ml
1 cup =
16 tbsp =
48 tsp =
cup =
12 tbsp =
36 tsp =
175 ml
cup =
12 tbsp =
36 tsp =
175 ml
cup =
12 tbsp =
36 tsp =
175 ml
cup = 10 tbsp =
cup =
8 tbsp =
32 tsp =
24 tsp =
150 ml
125 ml
cup = 10 tbsp =
cup =
8 tbsp =
32 tsp =
24 tsp =
150 ml
125 ml
cup = 10 tbsp =
cup =
8 tbsp =
32 tsp =
24 tsp =
150 ml
125 ml
cup =
cup =
5 tbsp =
4 tbsp =
16 tsp =
12 tsp =
75 ml
50 ml
cup =
cup =
5 tbsp =
4 tbsp =
16 tsp =
12 tsp =
75 ml
50 ml
cup =
cup =
5 tbsp =
4 tbsp =
16 tsp =
12 tsp =
75 ml
50 ml
cup =
cup =
2 tbsp =
1 tbsp =
6 tsp =
3 tsp =
30 ml
15 ml
cup =
cup =
2 tbsp =
1 tbsp =
6 tsp =
3 tsp =
30 ml
15 ml
cup =
cup =
2 tbsp =
1 tbsp =
6 tsp =
3 tsp =
30 ml
15 ml
The data is the message

Center the data like a picture in a
frame. A centered layout is motionless, so eyes can rest on the data.
Add the titles

The titles, not the data, are where
you can be typographically expressive ( quietly, in this case ).
Add the images

Use images that really depict the
topic. Dont mix image styles, and
dont vary the sizes.
8 of 12
0615
Before&After
BAmagazine.com
9 of 12
i U X
The layout
Images carefully placed draw the readers eye into the information, not away
from it. Note that the images are what they illustrate.
LIQUID measures
LIQUID measures
LIQUID measures
1 gal =
4 qt =
8 pt = 16 cup = 128 fl oz
gal =
gal =
2 qt =
1 qt =
4 pt =
2 pt =
8 cup = 64 fl oz
4 cup = 32 fl oz
gal = qt = 1 pt =
gal = qt = pt =
2 cup = 16 fl oz
1 cup =
8 fl oz
1 gal =
gal =
4 qt =
2 qt =
gal = 1 qt =
gal = qt =
8 pt = 16 cup = 128 fl oz
4 pt = 8 cup = 64 fl oz
2 pt =
1 pt =
4 cup = 32 fl oz
2 cup = 16 fl oz
gal = qt = pt =
1 cup =
8 fl oz
4 qt =
8 pt = 16 cup = 128 fl oz
2 qt =
1 qt =
4 pt =
2 pt =
8 cup = 64 fl oz
4 cup = 32 fl oz
gal = qt = 1 pt =
gal = qt = pt =
2 cup = 16 fl oz
1 cup =
8 fl oz
DRY measures
DRY measures
DRY measures
1 gal =
gal =
gal =
1 cup =
16 tbsp =
48 tsp =
250 ml
1 cup =
16 tbsp =
48 tsp =
250 ml
1 cup =
16 tbsp =
48 tsp =
cup =
12 tbsp =
36 tsp =
175 ml
cup =
12 tbsp =
36 tsp =
175 ml
cup =
12 tbsp =
36 tsp =
250 ml
175 ml
cup = 10 tbsp =
32 tsp =
150 ml
cup = 10 tbsp =
32 tsp =
150 ml
cup = 10 tbsp =
32 tsp =
150 ml
cup =
8 tbsp =
24 tsp =
125 ml
cup =
8 tbsp =
24 tsp =
125 ml
cup =
8 tbsp =
24 tsp =
125 ml
cup =
5 tbsp =
16 tsp =
75 ml
cup =
5 tbsp =
16 tsp =
75 ml
cup =
5 tbsp =
16 tsp =
75 ml
cup =
4 tbsp =
12 tsp =
50 ml
cup =
4 tbsp =
12 tsp =
50 ml
cup =
4 tbsp =
12 tsp =
50 ml
cup =
2 tbsp =
6 tsp =
30 ml
cup =
2 tbsp =
6 tsp =
30 ml
cup =
2 tbsp =
6 tsp =
30 ml
cup =
1 tbsp =
3 tsp =
15 ml
cup =
1 tbsp =
3 tsp =
15 ml
cup =
1 tbsp =
3 tsp =
15 ml

Create difference
The sponsorship area is another
kind of information, so differentiate
it visually with a background color.
Bridge the sections

Portrait links the two sections,
yet they remain distinct. Organic
silhouette softens the hard edge.
Finish with type

Font matches (in this case) the title
font. Small type is professionally lowkey, yet the section is highly visible.
9 of 12
0615
Before&After
10 of 12
BAmagazine.com
i U X
The relationships
Always adjust to whats on the page, not whats on your rulers (or in your head).
Note how relationships of color, value, size and alignment unify the design.
(Left) Note the spacing. Because theyre the same, the glass and margin
harmonize without visual tension, which allows the charts to remain primary.
LIQUID measures
1 gal = 4 qt =
gal = 2 qt =
gal = 1 qt =
gal = qt =
8 pt = 16 cup = 128 fl oz
4 pt = 8 cup = 64 fl oz
2 pt = 4 cup = 32 fl oz
1 pt = 2 cup = 16 fl oz
gal = qt = pt =
1 cup =
8 fl oz
1 cup =
16 tbsp =
cup =
12 tbsp =
cup = 10 tbsp =
cup =
8 tbsp =
cup = 5 tbsp =
48 tsp =
36 tsp =
32 tsp =
24 tsp =
16 tsp =
250 ml
175 ml
150 ml
125 ml
75 ml
cup =
cup =
cup =
12 tsp =
6 tsp =
3 tsp =
50 ml
30 ml
15 ml
United by size and value (Below) Glass, powder and face are the
same size and even have similar value (light-dark). This uniformity connects
the elements and at the same time simplifies the design.
DRY measures
4 tbsp =
2 tbsp =
1 tbsp =

Colors from the image unify

type and background.
Aligned
10 of 12
0615
Before&After
BAmagazine.com
11 of 12
i U X
Article resources
Typefaces
5a
1a
3
3
1 gal = 4 qt =
gal = 2 qt =
gal = 1 qt =
gal = qt =
8 pt = 16 cup = 128 fl oz
4 pt = 8 cup = 64 fl oz
2 pt = 4 cup = 32 fl oz
1 pt = 2 cup = 16 fl oz
gal = qt = pt =
1b
2
1b
1 cup =
1 (ab) Adobe Garamond Regular

a) 18 pt, b) 10.5/13 pt
C10 M20 Y35 K65
2 Adobe Garamond Bold | 10.5/13 pt
C18 M12 Y20 K0
3 Myriad Pro Regular | 12/18 pt

4 Myriad Pro Light | 10.5/18 pt
8 fl oz
5c
DRY measures
1 cup =
cup =
5b
LIQUID measures
Colors
16 tbsp =
12 tbsp =
48 tsp =
36 tsp =
250 ml
175 ml
cup = 10 tbsp =
cup =
8 tbsp =
32 tsp =
24 tsp =
150 ml
125 ml
cup =
cup =
5 tbsp =
4 tbsp =
16 tsp =
12 tsp =
75 ml
50 ml
cup =
cup =
2 tbsp =
1 tbsp =
6 tsp =
3 tsp =
30 ml
15 ml
Images
5 (ac) iStockphoto.com |
6 Rubberball.com

Page size: 4x 7
11 of 12
0615
Before&After
BAmagazine.com
12 of 12
Subscribe to Before & After

Did you enjoy this article? Subscribe, and
become a more capable, confident designer
for pennies per article. To learn more, go to
http://www.bamagazine.com/Subscribe
i U X
Before & After magazine

Before & After has been sharing its practical approach
to graphic design since 1990. Because our modern world
has made designers of us all (ready or not), Before &
After is dedicated to making graphic design understandable, useful and even fun for everyone.
To pass along a free copy of this article to
John McWade Publisher and creative director

Gaye McWade Associate publisher
Vincent Pascual Staff designer
Dexter Mark Abellera Staff designer
others, click here.
Editorial board Gwen Amos, Carl Winther
E-mail this article
Join our e-list

To be notified by e-mail of new articles as
they become available, go to
http://www.bamagazine.com/email

323 Lincoln Street, Roseville, CA 95678
Telephone 916-784-3880
Fax 916-784-3995
E-mail mailbox@bamagazine.com
www http://www.bamagazine.com
Copyright 2005 Before & After magazine, ISSN
1049-0035. All rights reserved
You may pass this article around, but you may not alter
it, and you may not charge for it. You may quote brief
sections for review. If you do this, please credit Before
& After magazine, and let us know. To feature free
Before & After articles on your Web site, please contact
us. For permission to include all or part of this article in
another work, please contact us.
12 of 12
Printing formats
0615
Before&After
BAmagazine.com
i U X
Before & After is made to fit your binder

Before & After articles are intended for permanent reference. All are titled and numbered.
For the current table of contents, click here. To save time and paper, a paper-saver format of this article,
suitable for one- or two-sided printing, is provided on the following pages.
For presentation format

Print: (Specify pages 112)
For paper-saver format

Print: (Specify pages 1419)
Print
Format: Landscape
Page Size: Fit to Page
Save
Presentation format or
Paper-saver format
Back
Paper-saver format
gal =
1 gal =
1 qt =
2 qt =
4 qt =
2 pt =
4 pt =
4 cup = 32 fl oz
8 cup = 64 fl oz
8 pt = 16 cup = 128 fl oz
Design a
small chart
250 ml
0615
gal =
2 cup = 16 fl oz
1 cup =
8 fl oz
LIQUID measures
gal = qt = 1 pt =
gal = qt = pt =
DRY measures
175 ml
250 ml
150 ml
36 tsp =
32 tsp =
50 ml
125 ml
75 ml
48 tsp =
24 tsp =
16 tsp =
30 ml
16 tbsp =
12 tsp =
15 ml
12 tbsp =
4 tbsp =
8 tbsp =
5 tbsp =
3 tsp =
6 tsp =
1 cup =
2 tbsp =
cup = 10 tbsp =
cup =
cup =
cup =
1 tbsp =
cup =
cup =
48 tsp =
175 ml
150 ml
125 ml
8 fl oz
16 fl oz
64 fl oz
32 fl oz
128 fl oz
Visual simplicity transforms

a kitchen gimmick into
a useful tool
LIQUID measures
1 gal = 4 qt = 8 pt = 16 cup =
gal = 2 qt = 4 pt = 8 cup =
gal = 1 qt = 2 pt = 4 cup =
gal = qt = 1 pt = 2 cup =
DRY measures
36 tsp =
32 tsp =
24 tsp =
16 tsp =
12 tsp =
Youre up to your elbows in eggs and flour, the

recipes calling for a quarter cup of corn starch, and
all you can reach is a tablespoon. Quick! How many
are in a quarter cup? Smart you. Stuck to the fridge
door is Stacy Thomas handy measurement chart;
one look, and you keep cooking without missing a
step.
Such usefulness is the idea behind these flat,
lightly magnetic vinyl charts; pass them out to your
customers, and you stay in their kitchens forever.
Theyre great for visibility.
But, of course, to be visible, they must be kept,
and for that they must be attractive and easy to use.
The keys to this are good organization and visual
simplicity. Heres how to transform a hard-to-read,
clip-arty gimmick into a sleek kitchen helper.
1 of 6
Before&After | www.bamagazine.com
After
50 ml
30 ml
15 ml
75 ml
4 tbsp =
3 tsp =
6 tsp =
2 tbsp =
1 tbsp =
1 cup =
16 tbsp =
cup =
12 tbsp =
cup = 10 tbsp =
cup =
8 tbsp =
cup = 5 tbsp =
cup =
cup =
cup =

cup =

Before
0615 Design a small chart
Why veggies?
Its a kitchen chart,
but the topic is
measurements,
not food.
Before: Its festive and informative, but . . .
Closes
Unfocused Absence
of a focal point leaves
the page vague.
0615
Diluted Because
positive and negative
elements have similar
sizes, they strongly
compete, diluting
their effectiveness.
31/2
Full-size fractions are never a
good idea. Same-size numerals
have no visual hierarchy and
can easily be mistaken for separate characters; they require
careful (and slow) reading to
decipher.
3
3
No rhythm Stuff is
aligned left (1), right
(2), center (3).
Misdirected Uncoordinated lines pull

the eye everywhere.
The original 4 x 7 magnet has the use-me qualities of a good promotional piece,
but its complicated and unattractive. Thats because the space wasnt designed.
Before
. . . the type is almost right
Helvetica Medium
Closes
While excellent at headline size, Helvetica

is not the best choice for small typeits
curve strokes curl around far enough to
leave only small openings, called apertures, which at small sizes tend to close up.
Lowercase letters a, e and s are
especially vulnerable to filling
in (right) and can be mistaken
for one another.
2 of 6
Closes
agc
Helvetica is a versatile typeface, but at small sizes and low resolution it loses readability;
ink (or pixels) can obscure its fine detail and fill in small apertures.
Before
After: Start over with clearer type
Open
Myriad Pro Regular
Open
Open
The strength of Myriad Pro is its brevity

lines are straight, junctions are simple,
and its curves dont close, the benefit of
which is clarity even at small sizes (below)
and poor resolution. Look again
at Helvetica.
Steeper angle
3
Myriad Pro includes true fractions, whose weight is proportional to full-size numerals.
Numerators align with the cap
height, denominators sit on
the baseline, and the slash has
a steeper angle than the keyboard backslash. Clear hierarchy,
easy to read at a glance.
gal =
gal =
1 gal =
1 qt =
2 qt =
4 qt =
1 pt =
2 pt =
4 pt =
1 cup =
2 cup = 16 fl oz
4 cup = 32 fl oz
8 cup = 64 fl oz
8 pt = 16 cup = 128 fl oz
1gal = 4 qt = 16 cups = 128 fl oz

1/2 gal = 2 qt = 8 cups = 64 fl oz
1/4 gal = 1 qt = 4 cups = 32 fl oz
1/2 qt = 2 cups = 16 fl oz
1/4 qt = 1 cup = 8 fl oz
gal = qt =
8 fl oz
gal = qt = pt =
Aligned
right
0615
8 pt = 16 cup = 128 fl oz
4 pt = 8 cup = 64 fl oz
2 pt = 4 cup = 32 fl oz
250 ml
175 ml
150 ml
125 ml
75 ml
50 ml
2 cup = 16 fl oz
1 cup =
8 fl oz
48 tsp =
36 tsp =
32 tsp =
24 tsp =
16 tsp =
12 tsp =
30 ml
15 ml
agc
A clear typeface is key to any chart. Look for simplicitystraight lines, plain junctions,
no extra curlicuesbefore stylishness, which can be conveyed by other elements.
4 qt =
2 qt =
1 qt =
LIQUID measures
1 gal =
gal =
gal =
gal = qt = 1 pt =
gal = qt = pt =
1 cup =
16 tbsp =
cup =
12 tbsp =
cup = 10 tbsp =
cup =
8 tbsp =
cup = 5 tbsp =
cup =
4 tbsp =
6 tsp =
3 tsp =
DRY measures
2 tbsp =
1 tbsp =
cup =
cup =

After
Spread it out
250 ml
3 of 6
After: Clearly visible

Clarity is what white space
creates. Spread the numbers
into rows and columns; here,
rows are equivalencies, and
columns are like kinds of
datagallons, quarts, pints
and so on. Note columns are
aligned to the right.
Before: Allruntogether
The original chart was typed
sentence-style as though the
designer were typing a letter.
Elements are congested and
undifferentiatedand therefore hard to read.
The magnet looks like its about cooking, but actually its about numbers. To make
numbers reader-friendly, put them in columns, and spread them out.
LIQUID measures
48 tsp =
175 ml
150 ml
125 ml
75 ml
50 ml
30 ml
15 ml
128 fl oz
64 fl oz
32 fl oz
16 fl oz
8 fl oz
36 tsp =
32 tsp =
24 tsp =
16 tsp =
12 tsp =
6 tsp =
3 tsp =
1 gal = 4 qt = 8 pt = 16 cup =
gal = 2 qt = 4 pt = 8 cup =
gal = 1 qt = 2 pt = 4 cup =
16 tbsp =
DRY measures
1 cup =
cup =
12 tbsp =
cup = 10 tbsp =
cup =
8 tbsp =
cup = 5 tbsp =
cup =
4 tbsp =
cup =
2 tbsp =
cup =
1 tbsp =

After
Lighten it up
Contrasts add clarity
gal gal
gal = qt =
gal =
gal =
1 gal =
1 qt =
2 qt =
4 qt =
1 pt =
2 pt =
4 pt =
1 cup =
2 cup = 16 fl oz
4 cup = 32 fl oz
8 cup = 64 fl oz
8 pt = 16 cup = 128 fl oz
gal =
gal =
1 gal =
2 qt =
1 qt =
4 qt =
4 pt =
2 pt =
2 cup = 16 fl oz
1 cup =
8 fl oz
8 cup = 64 fl oz
4 cup = 32 fl oz
8 pt = 16 cup = 128 fl oz
LIQUID measures
gal = qt = 1 pt =
gal = qt = pt =
250 ml
175 ml
2 cup = 16 fl oz
1 cup =
8 fl oz
8 pt = 16 cup = 128 fl oz
4 pt = 8 cup = 64 fl oz
2 pt = 4 cup = 32 fl oz
48 tsp =
36 tsp =
75 ml
50 ml
150 ml
125 ml
8 fl oz
gal = qt = pt =
Myriad Pro Light Lighter weight and value (65%) recede
Well differentiated
Quantitieswhich change
remain bold; measures
which repeatrecede in gray.
Now well differentiated, the
comparisons are easy to see
and attractive, too. Note the
kinds of separation: Space
separates columns, hairlines
separate rows, and gray
separates foreground from
midrange.
4 qt =
2 qt =
1 qt =
LIQUID measures
1 gal =
gal =
gal =
gal = qt = 1 pt =
gal = qt = pt =
1 cup =
cup =
32 tsp =
24 tsp =
2 cup = 16 fl oz
1 cup =
8 fl oz
8 pt = 16 cup = 128 fl oz
4 pt = 8 cup = 64 fl oz
2 pt = 4 cup = 32 fl oz
250 ml
175 ml
16 tsp =
12 tsp =
cup =
cup =
6 tsp =
3 tsp =
0615
8 pt = 16 cup = 128 fl oz
4 pt = 8 cup = 64 fl oz
250 ml
175 ml
150 ml
125 ml
4 cup = 32 fl oz
2 cup = 16 fl oz
1 cup =
8 fl oz
48 tsp =
36 tsp =
32 tsp =
24 tsp =
75 ml
50 ml
30 ml
15 ml
All the same
Next, separate measures from quantities. Lighten the type weight and tint it gray,
which creates visual depth and yields two levels of hierarchy.
4 qt =
2 qt =
LIQUID measures
1 gal =
gal =
gal = 1 qt = 2 pt =
gal = qt = 1 pt =
gal = qt = pt =
1 cup =
16 tbsp =
cup =
12 tbsp =
cup = 10 tbsp =
cup =
8 tbsp =
16 tsp =
12 tsp =
6 tsp =
3 tsp =
DRY measures
5 tbsp =
4 tbsp =
2 tbsp =
1 tbsp =
cup =
cup =
cup =
cup =

4 qt =
2 qt =
1 qt =
48 tsp =
36 tsp =
5 tbsp =
4 tbsp =
cup = 10 tbsp =
cup =
8 tbsp =
DRY measures
1 cup =
cup =
150 ml
125 ml
DRY measures
250 ml
175 ml
32 tsp =
24 tsp =
2 tbsp =
1 tbsp =
16 tbsp =
12 tbsp =
48 tsp =
36 tsp =
cup = 10 tbsp =
cup =
8 tbsp =
16 tbsp =
12 tbsp =
1 cup =
cup =
75 ml
150 ml
125 ml
50 ml
32 tsp =
24 tsp =
cup =
cup =
Add the images

Use images that really depict the
topic. Dont mix image styles, and
dont vary the sizes.
30 ml
15 ml
16 tsp =
75 ml
50 ml
30 ml
15 ml
12 tsp =
16 tsp =
12 tsp =
6 tsp =
3 tsp =
4 of 6
Add the titles

The titles, not the data, are where
you can be typographically expressive ( quietly, in this case ).
5 tbsp =
4 tbsp =
2 tbsp =
1 tbsp =
4 tbsp =
30 ml
15 ml
cup =
cup =
cup =
cup =
5 tbsp =
cup =
cup =
6 tsp =
3 tsp =
The data is the message

Center the data like a picture in a
frame. A centered layout is motionless, so eyes can rest on the data.
cup =
cup =
2 tbsp =
1 tbsp =
cup = 10 tbsp =
cup =
8 tbsp =
16 tbsp =
12 tbsp =
gal = qt = 1 pt =
gal = qt = pt =
1 gal =
gal =
gal =
Charts centered on the page are the focal point of the design. The remaining
information and images are added as supporting, not primary, elements.
The layout
After
The layout
Images carefully placed draw the readers eye into the information, not away
from it. Note that the images are what they illustrate.

Finish with type

Font matches (in this case) the title
font. Small type is professionally lowkey, yet the section is highly visible.
United by size and value (Below) Glass, powder and face are the
same size and even have similar value (light-dark). This uniformity connects
the elements and at the same time simplifies the design.
(Left) Note the spacing. Because theyre the same, the glass and margin
harmonize without visual tension, which allows the charts to remain primary.
Aligned
5 of 6
0615
8 pt = 16 cup = 128 fl oz
8 fl oz
4 qt =
LIQUID measures
1 gal =
DRY measures
8 pt = 16 cup = 128 fl oz
8 fl oz
8 cup = 64 fl oz
4 cup = 32 fl oz
2 cup = 16 fl oz
8 fl oz
4 qt =
1 cup =
DRY measures
1 gal =
4 pt =
2 pt =
1 pt =
250 ml
175 ml
150 ml
LIQUID measures
gal = 2 qt =
gal = 1 qt =
gal = qt =
125 ml
75 ml
50 ml
8 pt = 16 cup = 128 fl oz
gal = qt = pt =
48 tsp =
36 tsp =
32 tsp =
30 ml
15 ml
4 qt =
1 cup =
16 tbsp =
cup =
12 tbsp =
cup = 10 tbsp =
6 tsp =
3 tsp =
24 tsp =
16 tsp =
12 tsp =
1 gal =
8 tbsp =
5 tbsp =
4 tbsp =
LIQUID measures
2 tbsp =
1 tbsp =
8 cup = 64 fl oz
4 cup = 32 fl oz
2 cup = 16 fl oz
cup =
cup =
cup =
1 cup =
250 ml
175 ml
150 ml
cup =
cup =
4 pt =
2 pt =
1 pt =
48 tsp =
36 tsp =
32 tsp =
125 ml
75 ml
50 ml
gal = 2 qt =
gal = 1 qt =
gal = qt =
1 cup =
16 tbsp =
cup =
12 tbsp =
cup = 10 tbsp =
24 tsp =
16 tsp =
12 tsp =
30 ml
15 ml
gal = qt = pt =
8 tbsp =
5 tbsp =
4 tbsp =
6 tsp =
3 tsp =
8 cup = 64 fl oz
4 cup = 32 fl oz
2 cup = 16 fl oz
250 ml
175 ml
150 ml
cup =
cup =
cup =
2 tbsp =
1 tbsp =
1 cup =
48 tsp =
36 tsp =
32 tsp =
125 ml
75 ml
50 ml
cup =
cup =
4 pt =
2 pt =
1 pt =
1 cup =
16 tbsp =
cup =
12 tbsp =
cup = 10 tbsp =
24 tsp =
16 tsp =
12 tsp =
30 ml
15 ml
gal = 2 qt =
gal = 1 qt =
gal = qt =
8 tbsp =
5 tbsp =
4 tbsp =
6 tsp =
3 tsp =
gal = qt = pt =
cup =
cup =
cup =
2 tbsp =
1 tbsp =
Bridge the sections

Portrait links the two sections,
yet they remain distinct. Organic
silhouette softens the hard edge.
DRY measures
cup =
cup =
Create difference
The sponsorship area is another
kind of information, so differentiate
it visually with a background color.
The relationships
250 ml
175 ml
128 fl oz
64 fl oz
32 fl oz
16 fl oz
8 fl oz
Always adjust to whats on the page, not whats on your rulers (or in your head).
Note how relationships of color, value, size and alignment unify the design.
LIQUID measures
1 gal = 4 qt = 8 pt = 16 cup =
gal = 2 qt = 4 pt = 8 cup =
gal = 1 qt = 2 pt = 4 cup =
48 tsp =
36 tsp =
150 ml
125 ml
75 ml
50 ml
30 ml
15 ml
DRY measures
1 cup =
cup =
32 tsp =
24 tsp =
16 tsp =
12 tsp =
6 tsp =
3 tsp =
16 tbsp =
12 tbsp =
cup = 10 tbsp =
cup =
8 tbsp =
cup = 5 tbsp =
cup =
4 tbsp =
cup =
2 tbsp =
cup =
1 tbsp =

Colors from the image unify

type and background.
5a
8 pt = 16 cup = 128 fl oz
4 pt = 8 cup = 64 fl oz
2 pt = 4 cup = 32 fl oz
cup =
cup =
2 tbsp =
4 tbsp =
8 tbsp =
5 tbsp =
1 cup =
16 tbsp =
cup =
12 tbsp =
cup = 10 tbsp =
3 tsp =
6 tsp =
12 tsp =
24 tsp =
16 tsp =
48 tsp =
36 tsp =
32 tsp =
15 ml
30 ml
50 ml
125 ml
75 ml
250 ml
175 ml
150 ml
Page size: 4x 7
5b
4
5c
C10 M20 Y35 K65
Colors
7
C18 M12 Y20 K0
Typefaces
1 (ab) Adobe Garamond Regular

a) 18 pt, b) 10.5/13 pt
2 Adobe Garamond Bold | 10.5/13 pt

3 Myriad Pro Regular | 12/18 pt
4 Myriad Pro Light | 10.5/18 pt
Images
5 (ac) iStockphoto.com |
6 Rubberball.com

Before & After has been sharing its practical approach
to graphic design since 1990. Because our modern world
has made designers of us all (ready or not), Before &
After is dedicated to making graphic design understandable, useful and even fun for everyone.
John McWade Publisher and creative director
Gaye McWade Associate publisher
Vincent Pascual Staff designer
Dexter Mark Abellera Staff designer
Editorial board Gwen Amos, Carl Winther
323 Lincoln Street, Roseville, CA 95678
Telephone 916-784-3880
Fax 916-784-3995
E-mail mailbox@bamagazine.com
www http://www.bamagazine.com
Copyright 2005 Before & After magazine, ISSN
1049-0035. All rights reserved
You may pass this article around, but you may not alter
it, and you may not charge for it. You may quote brief
sections for review. If you do this, please credit Before
& After magazine, and let us know. To feature free
Before & After articles on your Web site, please contact
us. For permission to include all or part of this article in
another work, please contact us.
0615
4 qt =
2 qt =
1 qt =
cup =
1 tbsp =
2 cup = 16 fl oz
1 cup =
8 fl oz
cup =

cup =
DRY measures
gal = qt = 1 pt =
gal = qt = pt =
1 gal =
gal =
gal =
LIQUID measures
Article resources
1a
3
3
1b
6 of 6
http://www.bamagazine.com/email
they become available, go to
To be notified by e-mail of new articles as
Join our e-list
others, click here.
To pass along a free copy of this article to
E-mail this article
http://www.bamagazine.com/Subscribe
for pennies per article. To learn more, go to
become a more capable, confident designer
Did you enjoy this article? Subscribe, and
Subscribe to Before & After
1b

Ba0615 Design A Small Chart

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ba0615 Design A Small Chart

Uploaded by

Copyright:

Available Formats

Before&After

Pinch or dash = less than tsp

Your recipe for success!

Design a small chart

Design a small chart

Visual simplicity transforms a kitchen gimmick into a useful tool

Pinch or dash = less than tsp

Your recipe for success!

Design a small chart

Design a small chart

Before: Its festive and informative, but . . .

Misdirected Uncoordinated lines pull

Design a small chart

Design a small chart

. . . the type is almost right

While excellent at headline size, Helvetica

Design a small chart

Design a small chart

After: Start over with clearer type

Pinch or dash = less than tsp

Your recipe for success!

The strength of Myriad Pro is its brevity

Design a small chart

Design a small chart

Pinch or dash = less than tsp

Your recipe for success!

1gal = 4 qt = 16 cups = 128 fl oz

Design a small chart

Design a small chart

All the same

Pinch or dash = less than tsp

Your recipe for success!

Contrasts add clarity

Design a small chart

Design a small chart

Pinch or dash = less than tsp

The data is the message

Add the titles

Pinch or dash = less than tsp

Add the images

Design a small chart

Design a small chart

Pinch or dash = less than tsp

Pinch or dash = less than tsp

Pinch or dash = less than tsp

Your recipe for success!

Bridge the sections

Finish with type

Design a small chart

Design a small chart

Pinch or dash = less than tsp

Your recipe for success!

Colors from the image unify

Design a small chart

Design a small chart

1 (ab) Adobe Garamond Regular

C10 M20 Y35 K65

2 Adobe Garamond Bold | 10.5/13 pt

C18 M12 Y20 K0

3 Myriad Pro Regular | 12/18 pt

Pinch or dash = less than tsp

Your recipe for success!

Design a small chart