3/12/10

Lecture Objectives:

•  By the end of this lecture, you should be able to:

–  Describe how mass relates to graphic design
–  Explain how size relates to graphic design
–  Recognize good and bad use of texture in graphic
design

1
 3/12/10

Mass

•  Mass is size
•  There is physical size and visual size.
•  Size can be relative.

Mass

•  A physically small
brochure can have a
great deal of mass
through the use of
heavy text and graphic
elements.
•  A physically large
brochure can appear
smaller, lighter by
using text and graphics
sparingly.

2
 3/12/10

Mass

•  While the paper projects you create have a

certain size because of the size and weight of the
paper, visual mass — how light or heavy it
appears — is also an element of the design.
•  Each piece you create has a physical mass.

Mass

•  Additionally, each element within the design

(graphics, photos, lines, text blocks) have their
own mass relative to the whole piece.

3
 3/12/10

Use of Mass in
Design
•  To accommodate information or
content
– Example: To present all the desired or
needed information comfortably a
designer may create a bi-fold rather
than the usual single business card

4
 3/12/10

Use of Mass in
Design
•  To accommodate normal size
restraints or expectations
– Example: The postal service has
limitations on the height and width of
different types of envelopes. If a
designer ignores those requirements it
could incur additional mailing costs for
the client.

Use of Mass in
Design

5
 3/12/10

Use of Mass in
Design
•  To convey a mood or provide
emphasis
– Example: A place that is physically large
(such as an amusement park) or a
business that offers a huge assortment
of products may use brochures or other
marketing pieces that are larger
(physical dimensions) or heavier
(weight) than normal to carry out the
'bigger' or 'more' theme.

6
 3/12/10

Use of Mass in
Design
•  To create contrast
Example: A designer might design a full-
page magazine ad using a single small
image in the middle of the page with lots
of white space.
•  The contrast between the size of the page
and the size of the content (image) draws
attention to the image and can create a
specific mood (depending on other
elements) such as conservative, elegant,
lonely, or open.

Size

•  What is large?
•  What is small?
•  In graphic design and desktop
publishing there are many ways to
specify size.

7
 3/12/10

Size

•  Effective use of type means knowing how

to measure type.
•  Traditionally, type size is designated in
points and is set to specific pica widths and
depth
•  Column width and height
–  1 point = .013837 in
–  12 points = 1 pica

Size

•  Two common misconceptions are:

–  72 points (6 picas) = 1 inch (72 points = .996264
inches)
–  A letter at 72 points is 1 inch tall (possible but not
usually true)
•  However, for all practical type measurement
purposes we round 72 points to 1 inch.
•  When we take spacing above and below a line of
type into consideration, when set at 72 points the
line of type will take up approximately an inch of
vertical space.

8
 3/12/10

Size

•  X-Height is not the average height of all the

X-Men
•  There are several different size aspects of a
standard typeface that affects its appearance,
readability, and suitability to different tasks.
•  The point size of a font is a measure of the
overall space that the characters occupy not the
actual size of any individual character.

Size

•  In addition to point size, caps height and

x-height are two other measures of
importance.
•  All three are moving targets.
•  That is, two fonts at 72 points can have
vastly different visual size due to caps
height, x-height, and other factors specific
to that font.

9
 3/12/10

Size

•  This image shows one font and some of it size

factors.
•  The font size is 72 points.
•  The distance between the two blue lines is 1 inch.
•  As you can probably tell, none of these characters
are 1 inch (or even .996264 in.) tall.

Size

•  The red line that the type

sits on is the baseline.
•  The tail (descender) of
the lower case g extends
below the baseline.
•  The baseline is the
starting point for several
type-related
measurements including
x-height, caps height, and
leading (space between
lines of type).

10
 3/12/10

Size

•  The red line above the

baseline sits on top of the
g and the bowl of the d.
•  The space between those
two lines represent the
x-height of that font.
•  The x-height relative to
the caps height affects
font readability and is one
factor to consider when
specifying leading for a
passage of text.

Size

•  The next red line in

this image runs along
the top of the T.
•  The space between
the baseline and that
line is the caps
height.
•  It represents the size
of most uppercase
characters in that font.

11
 3/12/10

Size

•  Not all characters fit

neatly within the x-height
and caps height
measurements.
•  The tallest character in
this specific typeface is
the $ (dollar sign) which
extends both above and
below those
measurements

What’s the Point?

•  Points are used not only to measure the

type itself, but the space around it.
•  Setting leading (line spacing) requires a
basic understanding of points and type
measurements.
•  Points and picas may also be used to set
margins, specify column widths, and
spaces between columns.

12
 3/12/10

What’s the Point?

•  Points are the smallest unit of measurement.

•  Type and leading are measured in points with 72
points to the inch.
•  Use picas for measuring column width and
depth, margins, and other larger distances.
•  Picas and points have a direct relationship to
each other… There are 12 points in a pica.

SPI

•  Samples Per Inch is scanner and digital

image resolution.
•  To scan an image the scanner takes a
sampling of portions of the image.
•  The more samples it takes per inch, the
closer the scan is to the original image.
•  The higher the resolution, the higher the
SPI.

13
 3/12/10

PPI

•  Pixels Per Inch (PPI) is the number of pixels

displayed in an image.
•  A digital image is composed of samples that your
screen displays in pixels.
•  The PPI is the display resolution not the image
resolution.
•  (Adobe Photoshop uses PPI and Corel Photo-
Paint uses DPI for image resolution so it's no
wonder everyone is confused.)

DPI

•  Dots Per Inch is a measure of the resolution of a

printer.
•  It properly refers to the dots of ink or toner used
by an imagesetter, laser printer, or other printing
device to print your text and graphics.
•  In general, the more dots, the better and sharper
the image.
•  DPI is printer resolution

14
 3/12/10

LPI

•  Lines Per Inch refers to the way printers

reproduce images, simulating continuous
tone images by printing lines of halftone
spots.
•  The number of lines per inch is the LPI,
sometimes also called line frequency.
•  You can think of LPI as the halftone
resolution.

Texture

•  On the Web, especially, backgrounds that

simulate familiar fabrics, stone, and other
textures are common to add effect
•  Be careful not to allow the texture to
detract from the message on the screen.

15
 3/12/10

Good Example of
Texture

Good Example of
Texture

16
 3/12/10

Good Example of
Texture

Good Example of
Texture

17
 3/12/10

Good Example of
Texture

Good Example of
Texture

18
 3/12/10

Good Example of
Texture

Bad Example of
Texture

19
 3/12/10

Bad Example of
Texture

Bad Example of
Texture

20
 3/12/10

Conclusion

•  Mass relates to graphic design in many

ways
•  Size is relative. Physical size and visual
size are two different concepts in graphic
design
•  Texture can make or break your graphic
design

21