GRIDS
WHAT ARE GRIDS FOR?
WHAT ARE GRIDS FOR?
- Breaking up space

WHAT ARE GRIDS FOR?
- Breaking up space

WHAT ARE GRIDS FOR?
- Building a framework
Why should we use a grid?
- Grids can make life easier
- For the reader
- For designer
- Grids bring order from disorder
- Grids build a visual language
EXAMPLES
GRID TOOLS IN NEWSPAPERS
- Baseline grid
- Column grid
- Document grid
BASELINE GRID
Horizontal lines that run across a page.

The vertical space between each grid line
should be equal to your body copy's leading.
BASELINE GRID
Anatomy of a typeface

BASELINE GRID
Rule of thumb:
Leading should be about 120% of the type size.
The baseline grid is based on leading.
BASELINE GRID
Using it in InDesign
- Preferences > Grids...
- Paragraph palette
- Paragraph style options > Indents and Spacing
- Baseline shift
- View > Grids and Guides > Snap to Guides
COLUMN GRID
A system of equal vertical divisions on a page.

COLUMN GRID
Most broadsheets use a 5- or 6-column grid.
COLUMN GRID
How many columns does this paper use?

column grid
15 — on News and Features fronts

column grid
More columns = more white space

column grid
More columns = more options

COLUMN GRID
Using it in InDesign
- Document columns
- Layout > Margins and Columns
- "Create Guides" on layers
- Layout > Create Guides
- Layout > Ruler Guides (change color)
- Columns within text boxes
- View > Grids and Guides > Snap to Guides
DOCUMENT GRID
It's an enormous piece of graph paper.

DOCUMENT GRID
It can be useful for aligning objects
— no need to drag out ruler guides.
It's underutilized at newspapers.
Use it in InDesign:
- Preferences > Grids...
- View > Grids and Guides > Snap to Document Grid
GRID BOOKS

GRID BOOKS
Ordering Disorder: Grid Principles for Web Design

ONLINE GRIDDY STUFF
GRIDS
By Josh Renaud
GRIDS
- 109