CalArts: Intro. to Typography-W3: 3.3 The Grid

One way you can make a typographic composition look refined is to define a structure for the space of page or screen and then to align elements in the composition to this structure. And in typography, this structure is called a grid.

People have been using grids of one kind or another since the earliest days of printing and before.

In traditional Chinese manuscripts for instance, 
text is arranged in columns of equal width, 
and each character takes up a perfectly square space, within it’s column.

In Medieval Europe, the pages of books were sometimes laid out with margins that were defined by the golden ratio, a special mathematical proportion.

Scribes คนงานคัดลอกหนังสือ ในสมัยที่ยังไม่มีแท่นพิมพ์ and later typesetters often used systems of lines to measure out these margins.

They noticed that this system creates margins that are of different widths at the top, bottom, left, and right of the page.

And this creates a composition with a dynamic rather than a static feel.

The proportion of the golden ratio, roughly 1.618 Continued to inform typographic composition in the 20th century.

Jan Tschichold ยาน ชิโขล, the German typographer who advocated for sans serif type in the 1920’s
studied medieval manuscripts and often applied the golden ratio to his compositions.

In this poster from 1938 for instance, 
Tschichold arranged elements in relationship to a structure based on that ratio.

In the mid twentieth century,
designers of the Neue Grafik movement in Switzerland refined the use of grids to create highly organized visual structures.

Here’s a poster by Joseph Miller Brockman from 1955

and here’s a page spread from Neue Grafik, the publication.

Defining and using a grid can help you create compositions that feel visually refined.

Grids are particularly useful in publications where they can help each spread feel like it belongs to the next.

So let’s look at the elements of a classic page grid.


Margins define the borders of the main printed area of the page.

If you’re setting up margins for a book, it’s important to remember that the inside margin corresponds to the spine, สันหนังสือ

so depending on how the publication will be bound, 
it’s a good idea to make that margin pretty generous.

hang line

Some layouts use a hang line.
The point on the page where for instance text, and new chapters might begin.


Large format publications often use multiple columns so that line length can be kept reasonable.

Often those columns are in turn subdivided

so that the designer has the flexibility to create text blocks of different widths.
Some spanning several columns.


The space between columns is called the gutter
and often the width of the gutter is set to the size of the type’s leading.

Finally, a baseline grid

can be used to make sure that lines of text and adjacent columns are on succeeding pages lined up with one another. There.

And the interval ช่วงห่าง of these lines will be defined by the leading of the type.

Today, grids are almost everywhere that typography is.

On the web, screen

they’re often actually built into the CSS.
A popular website grid like the one used on this sight on grid systems is 
960 pixels wide, with 6, 12, or 16 columns across.

Grids are a really useful tool. 
Still, if they’re used incorrectly or just too much, they can limit and constrain your compositions.

So I’d recommend always starting compositions without a grid.

And then once you figured out what you want to do, go back and reverse-engineer a grid that will help you refine alignments and make distances consistent.

And always remember that there are plenty of instances where a grid may not be necessary or even appropriate at all.