A short lecture that discusses the key principles of grid systems and optimal lengths of sentences

1. HFD1100HistoriefortellendeDesign
1
Økt 10.2
Grid Systems

2. HFD1100HistoriefortellendeDesign
2
GRID SYSTEMS
What’s Wrong With This Design?
THIS IS AN EDITORIAL PAGE
What’s wrong this design? Can
you identify what is wrong and
how it can be improved?
The Life and Times of a Typeface
Helvetica Directed by Gary Huswit | Documentary | 1h 20m
By Matt Zoller Seitz Sept. 12, 2007
“Helvetica,” a feature-length documentary about that typeface, promises too much information. Luckily, the filmmaker Gary Hustwit — who was an executive producer of the
mesmerizing “Moog,” about the analog synthesizer — has a knack for finding a universe within a narrow topic.
Overlong but fascinating, Mr. Hustwit’s documentary posits Helvetica — a sans-serif typeface developed in 1957 at the Haas Foundry in Munchenstein, Switzerland — as an emblem of
the machine age, a harbinger of globalization and an ally of modern art’s impulse toward innovation, simplicity and abstraction. Its versatility is showcased in shots of storefronts, street
signs, public transportation systems, government forms, advertisements and newspaper vending boxes.
The film’s provocative, lively interviews with graphic designers and theorists — including Massimo Vignelli, who created directional signs for the New York City subway system, and
David Carson, author of “The End of Print” — assess Helvetica’s impact on human life and thought. Some praise it as a conceptual breakthrough; others blast it as a lowest-common-
denominator typeface whose use both reflects and perpetuates conformity.
Whomever you end up siding with, you’re guaranteed to spend the next few days scanning the world for Helvetica like a child on a cross-country car trip playing I Spy.
SYNOPSIS
The film’s provocative, lively interviews with graphic designers and theorists — including Massimo Vignelli, who created directional signs for the New York City subway system, and
David Carson, author of “The End of Print” — assess Helvetica’s impact on human life and thought. Some praise it as a conceptual breakthrough; others blast it as a lowest-common-
denominator typeface whose use both reflects and perpetuates conformity.
CRITIQUE
“Helvetica,” a feature-length documentary about that
typeface, promises too much information. Luckily, the
filmmaker Gary Hustwit — who was an executive
producer of the mesmerizing “Moog,” about the
analog synthesizer — has a knack for finding a
universe within a narrow topic.

3. HFD1100HistoriefortellendeDesign
3
What’s Wrong With This Design?
DESIGNING FOR READING
Although this example here applies
the visual hierarchy principles we
have just learned, the layout is
badly designed and provides for a
poor reading experience. This is
because the designer has not
applied the use of a grid system or
considered the optimal length of
sentences for reading.
The Life and Times of a Typeface
Helvetica Directed by Gary Huswit | Documentary | 1h 20m
By Matt Zoller Seitz Sept. 12, 2007
“Helvetica,” a feature-length documentary about that typeface, promises too much information. Luckily, the filmmaker Gary Hustwit — who was an executive producer of the
mesmerizing “Moog,” about the analog synthesizer — has a knack for finding a universe within a narrow topic.
Overlong but fascinating, Mr. Hustwit’s documentary posits Helvetica — a sans-serif typeface developed in 1957 at the Haas Foundry in Munchenstein, Switzerland — as an emblem of
the machine age, a harbinger of globalization and an ally of modern art’s impulse toward innovation, simplicity and abstraction. Its versatility is showcased in shots of storefronts, street
signs, public transportation systems, government forms, advertisements and newspaper vending boxes.
The film’s provocative, lively interviews with graphic designers and theorists — including Massimo Vignelli, who created directional signs for the New York City subway system, and
David Carson, author of “The End of Print” — assess Helvetica’s impact on human life and thought. Some praise it as a conceptual breakthrough; others blast it as a lowest-common-
denominator typeface whose use both reflects and perpetuates conformity.
Whomever you end up siding with, you’re guaranteed to spend the next few days scanning the world for Helvetica like a child on a cross-country car trip playing I Spy.
SYNOPSIS
The film’s provocative, lively interviews with graphic designers and theorists — including Massimo Vignelli, who created directional signs for the New York City subway system, and
David Carson, author of “The End of Print” — assess Helvetica’s impact on human life and thought. Some praise it as a conceptual breakthrough; others blast it as a lowest-common-
denominator typeface whose use both reflects and perpetuates conformity.
CRITIQUE
“Helvetica,” a feature-length documentary about that
typeface, promises too much information. Luckily, the
filmmaker Gary Hustwit — who was an executive
producer of the mesmerizing “Moog,” about the
analog synthesizer — has a knack for finding a
universe within a narrow topic.
GRID SYSTEMS

4. HFD1100HistoriefortellendeDesign
4
Using a Grid System
The Life and Times of a Typeface
Helvetica Directed by Gary Huswit | Documentary | 1h 20m
By Matt Zoller Seitz Sept. 12, 2007
SYNOPSIS
“Helvetica,” a feature-length documentary about that
typeface, promises too much information. Luckily, the
filmmaker Gary Hustwit — who was an executive producer
of the mesmerizing “Moog,” about the analog synthesizer —
has a knack for finding a universe within a narrow topic.
Overlong but fascinating, Mr. Hustwit’s documentary posits
Helvetica — a sans-serif typeface developed in 1957 at the
Haas Foundry in Munchenstein, Switzerland — as an
emblem of the machine age, a harbinger of globalization and
an ally of modern art’s impulse toward innovation, simplicity
and abstraction. Its versatility is showcased in
shots of storefronts, street signs, public transportation
systems, government forms, advertisements and newspaper
vending boxes.
The film’s provocative, lively interviews with graphic
designers and theorists — including Massimo Vignelli, who
created directional signs for the New York City subway
system, and David Carson, author of “The End of Print” —
assess Helvetica’s impact on human life and thought. Some
praise it as a conceptual breakthrough; others blast it as a
lowest-common-denominator typeface whose use both
reflects and perpetuates conformity.
CRITIQUE
The film’s provocative, lively interviews with graphic
designers and theorists — including Massimo Vignelli, who
created directional signs for the New York City subway
system, and David Carson, author of “The End of Print” —
assess Helvetica’s impact on human life and thought. Some
praise it as a conceptual breakthrough; others blast it as a
lowest-common-denominator typeface whose use both
reflects and perpetuates conformity.
“Helvetica,” a feature-length
documentary about that typeface,
promises too much information.
Luckily, the filmmaker Gary Hustwit
— who was an executive producer of
the mesmerizing “Moog,” about the
analog synthesizer — has a knack
for finding a universe within a narrow
topic.
GRID SYSTEMS
DESIGNING FOR READING
The same example but when applied
with a grid system will dramatically
improve the reading experience of a
design - sentences reduced to a
maximum number of words, multiple
columns are introduced and a cleaner
distribution of space overall.

5. HFD1100HistoriefortellendeDesign
5
The Life and Times of a Typeface
Helvetica Directed by Gary Huswit | Documentary | 1h 20m
By Matt Zoller Seitz Sept. 12, 2007
SYNOPSIS
“Helvetica,” a feature-length documentary about that
typeface, promises too much information. Luckily, the
filmmaker Gary Hustwit — who was an executive producer
of the mesmerizing “Moog,” about the analog synthesizer —
has a knack for finding a universe within a narrow topic.
Overlong but fascinating, Mr. Hustwit’s documentary posits
Helvetica — a sans-serif typeface developed in 1957 at the
Haas Foundry in Munchenstein, Switzerland — as an
emblem of the machine age, a harbinger of globalization and
an ally of modern art’s impulse toward innovation, simplicity
and abstraction. Its versatility is showcased in
shots of storefronts, street signs, public transportation
systems, government forms, advertisements and newspaper
vending boxes.
The film’s provocative, lively interviews with graphic
designers and theorists — including Massimo Vignelli, who
created directional signs for the New York City subway
system, and David Carson, author of “The End of Print” —
assess Helvetica’s impact on human life and thought. Some
praise it as a conceptual breakthrough; others blast it as a
lowest-common-denominator typeface whose use both
reflects and perpetuates conformity.
CRITIQUE
The film’s provocative, lively interviews with graphic
designers and theorists — including Massimo Vignelli, who
created directional signs for the New York City subway
system, and David Carson, author of “The End of Print” —
assess Helvetica’s impact on human life and thought. Some
praise it as a conceptual breakthrough; others blast it as a
lowest-common-denominator typeface whose use both
reflects and perpetuates conformity.
“Helvetica,” a feature-length
documentary about that typeface,
promises too much information.
Luckily, the filmmaker Gary Hustwit
— who was an executive producer of
the mesmerizing “Moog,” about the
analog synthesizer — has a knack
for finding a universe within a narrow
topic.
GRID SYSTEMS
DESIGNING FOR READING
The same example but when applied
with a grid system will dramatically
improve the reading experience of a
design - sentences reduced to a
maximum number of words, multiple
columns are introduced and a cleaner
distribution of space overall.
Using a Grid System

6. HFD1100HistoriefortellendeDesign
6
Defining Grid Sytem
A grid is a network of lines. The line in a grid typically
run horizontally and vertically in evenly placed
increment, but grids can be angled, irregular or even
circular as well. They function as guidelines to help
the designer align elements in relation to each other
and create a consistent underlying structure that
unifies the pages of a document and makes the
layout process more efficient. (Lupton, 2008)
GRID SYSTEMS

7. HFD1100HistoriefortellendeDesign
7
Limitations of Lecture
GRID SYSTEMS
To really learn about Grid Systems, it will take many sessions
as grids are designed based on the size of the page, medium,
text size, and takes into account the optimal baseline for a
type size, margins based on page size, size of columns based
on text length and many more. There is no one grid design
that rules them all and it is impossible to learn all the
considerations for a good grid in one lecture. If you are really
interested, get yourself a copy of The Elements of
Typographic Style by Robert Bringhurst or Grid Systems by
Josef Müller-Brockmann.
Fig1. (left to right) The canon of page construction;
Grid system for a design spread; Baseline grids for
typesetting.

8. HFD1100HistoriefortellendeDesign
8
Parts of a Grid - Margins
Fig2. The areas outside a grid system are called the margin. The
margins on the outside towards the edge of the sheet are called
outer margins and those towards the inside are the inner
margins. There are no standard measurements and is dependent
on the size of the paper the artwork is based on. Instead use
ratios to help you establish margin sizes.
GRID SYSTEMS
InnerMargin(1/3ofbottommargin)
OuterMargin(2/3ofbottommargin)
Top Margin (0.5 of bottom margin)
Bottom Margin
OuterMargin(2/3ofbottommargin)
InnerMargin(1/3ofbottommargin)
Bottom Margin
Fig3. Same proportions are applied to a single page.
Note that there is no inner margin as this is a single
sheet of paper.
OuterMargin(2/3ofbottommargin)
OuterMargin(2/3ofbottommargin)
Top Margin (0.5 of bottom margin)
Bottom Margin

9. HFD1100HistoriefortellendeDesign
9
Parts of a Grid - Columns
Fig4. (left and right) Columns are the most difficult part in
designing a grid system as their width is directly related to the
number of words in a line. It is a very complex process that takes
a long time to learn and develop. Without going into too much
detail, the general guide is that a line of text should be no more
than 50-60 characters including spaces. It is then up to you to
have it in one column, two or any number of columns. Note that a
line length should be no less than 5 words.
GRID SYSTEMS
A4A3 A5
50-60 characters at 10pt
50-60 characters at 10pt
50-60 characters at 10pt
50-60 characters at 14pt
50-60 characters at 16pt

10. HFD1100HistoriefortellendeDesign
10
Parts of a Grid - Rows
Fig5. The height of rows is directly related to the leading in the
baseline grid. Typically, designers will try to set the height of each
row to match the height of 5-6 lines of text. Again, it is hard to
explain without going into baseline grids and so, a good measure is
to set a height that is a multiple of the leading i.e. a text with leading
12pt can have a row of 60pt (5 lines of text), 120pt (10 lines) or any
other possible values that can be divided by 12.
Note: 12 pt is 4.2mm
GRID SYSTEMS

11. HFD1100HistoriefortellendeDesign
11
Parts of a Grid - Modules
Fig5. The units formed in a grid system are called modules (marked
in blue)
GRID SYSTEMS

12. HFD1100HistoriefortellendeDesign
12
Parts of a Grid - Gutters
Fig4. (left and right)The areas marked blue are the gutters of a
grid system. These are the spaces in-between the modules .
Gutters are based on your baseline height (this is too
complicated to detail in this lecture) A good guide though is
typically 4-5mm based on a 12pt size body text.
GRID SYSTEMS

13. HFD1100HistoriefortellendeDesign
13
There is too much to teach about grid systems and too little
time to do this. What is important for you exam now is:
1. Make sure that the line length in your poster,
researchdokument and skissedokument do not exceed
50-60 characters (including spaces)
2. Use columns to help you align things
3. Use the margin ratio in your poster, researchdokument
and skissedokument.
Note: Tina will be teaching you more about grids in editorial
design.
Summary
GRID SYSTEMS