Title: The Art of Typography
18/06
Principles of Design
The Art of Typography
2Design
- Design is organizing elements to support a
concept.
3Format
- Format deals directly with the space, size, and
shape of the area you are working with.
4- Texture (in our case, mostly the visual
- sense of texture, though actual texture
- with regard to functional controls)
- Repetition
- Pattern recognition
- Foreground/background
- Negative and positive space
- Visual hierarchy
- Gestalt
- Rhythm
- Camouflage
- Density
- Closure
- Line
- Shape/form
- Balance
- Unity
- Symmetry (3 types, only once)
- Force
- Tension
- Proximity
- Color saturation
- Color hue
- Color value
- Contrasts (5 types, only once)
- Variety (many types, only once)
(only once)
5Line
The most basic design element, a line is a mark
with greater length than width
6Shape / Form
A shape is a closed line that is flat and
expressed in length and width
A form is a three dimensional shape
7Balance
- Two distinct types of balance Symmetrical and
Asymmetrical - The organization of design elements to create a
sense of equal (but not necessarily symmetrical)
distribution of the visual weight throughout the
page. - The lack of balance can create tension, which may
be used creatively in a design.
8Unity
Resolving the needs of unity and variety is part
of the compositional problem. For a composition
to be understood it must exhibit a quality of
UNITY all the parts appear related, creating a
single unit.
UNITY A single shape represents a high degree of
unity. It is all the same, and there is nothing
to interrupt it or divide it into smaller units.
A field of similar shapes is also very
unified, but apart from its basic division into
figure and ground, it conveys little information
and holds little interest.
9Symmetry
Axial Symmetry - elements repeated across axis
Bilateral Symmetry - elements reflected across a
plane
Radial Symmetry - similar elements rotated around
a central point
10Force
Elements in a composition exert force on each
other, on the space around them, and on the edges
of the page. Making an interesting composition
is a process of generating and controlling these
forces.
- Ways of increasing the visual force within a
composition include - Closelycropped image
- Top-heaviness or imbalance
- Compressed, touching or nearly touching.
- Rapidly-converging lines, forced perspective or
acute angles - Forces acting on shapes (swelling, pulling,
stretching) - Rhythmic repetition
- Figure Ground ambiguity
- Spatial displacement
- Interruption or overlapping of edges
11Tension
12Proximity
Multiple related objects grouped together so they
are seen as one cohesive group
FREE WATER FOOD SOLD
13Color Saturation
Value
Intensity of a hue
14Color Hue
Value
The name of a color
15Color Value
Value
The relative lightness or darkness of any hue
16Contrast
Contrast
- A distinctive difference in...
- shape
- texture
- size
- color or light value
- typeface
- concept
17Variety
For an image to be interesting, it must also
exhibit VARIETY different elements compete for
attention, increasing visual excitement and the
level of information.
- The simplest and most direct way to achieve
variety is through contrast. Many designers and
artists rely on very basic and stark contrasts -
such as size contrast, shape contrast, color
contrast.
18Texture
A visual sense of surface
19Repetition
By repeating a graphical element over and over,
patterns emerge and other design elements can be
achieved
The symbol for the Girl Scouts was designed by
Saul Bass. (Saul Bass was also the assistant
film director who designed and directed the
famous shower scene in the movie Psycho.)
The graphic artist M.C. Escher made many famous
images that incorporate reversible figure and
ground.
20Pattern Recognition
Once a pattern has been established, it is easy
to notice when it has been broken
21Foreground / Background
One of the most fundamental processes in
perception is to separate the visual field into
foreground and background
Artists and Designers must learn to see both
figure and background at the same time
Any composition, whether it is a photograph, a
canvas or a freestanding sculpture, must consider
its background
22Positive Negative Space
A sculptor must consider the space as a part of
the sculpture. In fact, many sculptors think of
the material as shaping the space. In the same
way, graphic designers are always concerned with
organizing the white space of the page. And a
poster must emerge from the surrounding clutter
and attract attention to itself and its message.
23Visual Hierarchy
In any composition or message, there is an order
of importance to the elements, based on their
placement, size and tonality. Visual Hierarchy
is an arrangement of elements in a clearly
defined sequence from the most important to the
lease important. A clear hierarchy of headline,
subhead, text, and captions is considered
necessary in the organization of most printed
information. This is usually accomplished by
clearly-defined changes is type size and weight.
24Gestalt
- The German word for overall configuration is
gestalt - A thing that exhibits a strong, cohesive
configuration is said to have a - good gestalt
- Qualities that help a shape appear as a cohesive
figure include - simplified outline
- compact shape
- convex
- bold lines
- high contrast
A figure that turns back onto itself has a strong
gestalt
A figure that leads the eye away from it has a
weak gestalt
25Rhythm
Rhythm is a pattern of repetition that sets up an
expectation of recurrence you begin to
anticipate line or beat.
Rhythmic Repetition
26Camouflage
An instance when the background becomes so
assertive that it prevents the viewer from
perceiving a complete recognizable figure
27Density
Design elements placed closed together or on top
of another for visual effect
28Closure
The tendency to extend and complete the contours
of incomplete shapes is called the principle of
closure. This is what allows us to link the
parts of a partially obscured object and identify
its shape such as the numbers in the poster on
the right. The mental activity of having to
complete lost and found contours creates a more
dynamic interaction between figure and ground.
29The Art of Typography
30Elements of Type.
Elements of Type
31Font
- A typeface or letter set created by a type
designer.
32Type Family
Most fonts will have variations in
weight,proportion. Most families include a
regular, italic, bold and bold italic. Never
condense or extend a typeface using the vertical
or horizontal scaling option. This changes the
inherent proportional harmony of the font and
usually looks amateurish. Use a font that is
designed condensed or expanded
33Serif Fonts
- These fonts have either sharp triangles or heavy
square rectangles (serifs) on the ends of their
strokes. Serifs are used to carry the reader's
eye across the page.
font Times
34Lineal (San Serif) Fonts
- These fonts have a consistent stroke all the way
through, lacking serifs, - with a modern, utilitarian appearance.
font Helvetica
35Script Fonts
- Script fonts resemble handwritten or calligraphic
letters. They may be formal or casual in style.
36Display Typeface Fonts
- have eye-catching characteristics which, while
not designed for easy readability, make it stand
out and command attention. - Used for headlines, titles, and advertising
slogans
font Igloo Laser
37Point
- A unit of typographical measurement.
- Used to indicate the body size of a font
- (its point size), or the vertical space
between lines of type (leading). - There are 72 points to the inch.
38Leading
- The vertical space between lines of type.
- Expressed in number of points.
39Kerning
- The space specified between particular pairs of
letters (kerned pairs).
40Tracking.
Tracking
Overall spacing throughout text area
- Some typographical applications allow the
adjustment of how tight or loose the
characters may be set.
41Justification
- Text alignment in which all lines begin and end
at the same point.
Few people in the history of this country have
had as profound an impact on an institution of
higher education and on a city as did Mrs. Lydia
Moss Bradley at the turn of the century. This
extraordinary woman created what is now Bradley
University and helped build the city of Peoria.
Her life and career provide lasting proof that
one person can make a big difference in this
world, for her contributions have positively
impacted the lives of thousands of people through
the generations.
42Alignment (Justification)
flush left, centered, justified flush right
Most readable is flush left ragged
rightJustified type has additional space
distributed throughout each line so that all
lines of type in the text are the same
length.This creates a clean page layout but can
result in gaps or rivers of white space if done
with short lines of text or without careful
attention. Best avoided when using short line
lengths such as in narrow columns
43Readability - Font Style
For web or on-screen use, select a font with a
large x-height, moderate contrast between thick
and thin strokes Fonts that are designed for
the web and are common on most computers
include Verdana, Georgia, Trebuchet,
Myriad,Tahoma Inexpensive fonts designed for
print-only do not display well at small sizes.
Avoid these, and of course, avoid most
specialty display fonts
good
44Readability - Line Length
For print, maximum readability is achieved with
line length roughly 50-60 characters long.
Longer lines need more leading or interline
spacing. Avoid very short justified lines of
type Set fixed line length on web pages. Do not
allow type on web pages to expand to the full
width of the browser window.
45Readability - Alignment (Justification)
Justified type has additional space distributed
throughout each line so that all lines of type in
the text are the same length.This can result in
gaps or rivers of white space if done with short
lines of text or without careful attention. Best
avoided when using short line lengths such as in
narrow columns
46Readability - Alignment (Justification)
Alternative alignments can be used to unify
pages and create unique structures, but are best
used in for limited amounts of text.
47Readability - Capitalization
All caps are harder to read than upper and lower
case. Your brain sees words as shapes.
CAT DOG EAT RUN FUN
cat dog eat run fun
48Readability - Black or White?
White type on a dark ground(or reverse type)
is harderto read at textsizes than darktype on
a light ground.
49Suggestions
Contrast in Size
Emphasize One Letter
Matchthe Mood
Typography ... leads the Eye
Use Other Devicesfor Emphasis
Reverse OneWord or Line
50Avoid Solid Body Type
- Pages of Solid Body Type.
- Where possible, break up large text blocks with
graphics, section headlines, or paragraph spaces.
Lydia Moss Bradley Few people in the history of
this country have had as profound an impact on an
institution of higher education and on a city as
did Mrs. Lydia Moss Bradley at the turn of the
century. This extraordinary woman created what is
now Bradley University and helped build the city
of Peoria. Her life and career provide lasting
proof that one person can make a big difference
in this world, for her contributions have
positively impacted the lives of thousands of
people through the generations. A Remarkable
Woman A most remarkable, courageous, and able
woman was Mrs. Lydia Moss Bradley, the founder of
Bradley Polytechnic Institute. From 1896, when
the state charter for its establishment was
granted, to its evolution into a full four-year
college, and then in 1946, just a half-century
after the issuance of the original charter, the
transformation into Bradley University, we see
the determination with which Mrs. Bradley laid
the foundations for the school. Early Life Lydia
Moss was born July 31, 1816, in Vevay, Indiana.
Her father, Zeally Moss, was a Baptist minister
and had been a Captain in the Colonial Wars.
There were five children in the Moss family.
Educational facilities were quite limited, and
Lydia Moss received only a rudimentary education
at a log schoolhouse.
Few people in the history of this country have
had as profound an impact on an institution of
higher education and on a city as did Mrs. Lydia
Moss Bradley at the turn of the century. This
extraordinary woman created what is now Bradley
University and helped build the city of Peoria.
Her life and career provide lasting proof that
one person can make a big difference in this
world, for her contributions have positively
impacted the lives of thousands of people through
the generations. A most remarkable, courageous,
and able woman was Mrs. Lydia Moss Bradley, the
founder of Bradley Polytechnic Institute. From
1896, when the state charter for its
establishment was granted, to its evolution into
a full four-year college, and then in 1946, just
a half-century after the issuance of the original
charter, the transformation into Bradley
University, we see the determination with which
Mrs. Bradley laid the foundations for the school.
Lydia Moss was born July 31, 1816, in Vevay,
Indiana. Her father, Zeally Moss, was a Baptist
minister and had been a Captain in the Colonial
Wars. There were five children in the Moss
family. Educational facilities were quite
limited, and Lydia Moss received only a
rudimentary education at a log schoolhouse.
51Avoid Bold underline
- Excessive Bold Text
- Limited use of bold text can be effective if used
sparingly. - Avoid using underlined text.
52Avoid Widow
A widow is a single word or fragment left alone
on a line at the end of a paragraph (The
solution to this problem is to tighten the
tracking on the line above it)