Layout conventions to help speed up the design process.
Our design style is very editorially influenced. The following grids and scales form a framework for layout and creativity for a number of mediums & media sizes.
Default
Standard margins. Grid gap = 1 line.
1 ⁄ 1
1 ⁄ 2
2/2
1 ⁄ 3
2 ⁄ 3
3/3
1 ⁄ 4
2 ⁄ 4
3 ⁄ 4
4/4
1 ⁄ 6
2 ⁄ 6
3 ⁄ 6
4 ⁄ 6
5 ⁄ 6
6/6
1 ⁄ 12
2 ⁄ 12
3 ⁄ 12
4 ⁄ 12
5 ⁄ 12
6 ⁄ 12
7 ⁄ 12
8 ⁄ 12
9 ⁄ 12
10 ⁄ 12
11 ⁄ 12
12/12
Default wide
Margins = 1 line. Grid gap = 1 line.
1 ⁄ 1
1 ⁄ 2
2/2
1 ⁄ 3
2 ⁄ 3
3/3
1 ⁄ 4
2 ⁄ 4
3 ⁄ 4
4/4
1 ⁄ 6
2 ⁄ 6
3 ⁄ 6
4 ⁄ 6
5 ⁄ 6
6/6
1 ⁄ 12
2 ⁄ 12
3 ⁄ 12
4 ⁄ 12
5 ⁄ 12
6 ⁄ 12
7 ⁄ 12
8 ⁄ 12
9 ⁄ 12
10 ⁄ 12
11 ⁄ 12
12/12
Default full-bleed
No margins. Grid gap = 1 line.
1 ⁄ 1
1 ⁄ 2
2/2
1 ⁄ 3
2 ⁄ 3
3/3
1 ⁄ 4
2 ⁄ 4
3 ⁄ 4
4/4
1 ⁄ 6
2 ⁄ 6
3 ⁄ 6
4 ⁄ 6
5 ⁄ 6
6/6
1 ⁄ 12
2 ⁄ 12
3 ⁄ 12
4 ⁄ 12
5 ⁄ 12
6 ⁄ 12
7 ⁄ 12
8 ⁄ 12
9 ⁄ 12
10 ⁄ 12
11 ⁄ 12
12/12
Loose
Standard margins. Grid gap = 2 lines.
1 ⁄ 1
1 ⁄ 2
2/2
1 ⁄ 3
2 ⁄ 3
3/3
1 ⁄ 4
2 ⁄ 4
3 ⁄ 4
4/4
1 ⁄ 6
2 ⁄ 6
3 ⁄ 6
4 ⁄ 6
5 ⁄ 6
6/6
1 ⁄ 12
2 ⁄ 12
3 ⁄ 12
4 ⁄ 12
5 ⁄ 12
6 ⁄ 12
7 ⁄ 12
8 ⁄ 12
9 ⁄ 12
10 ⁄ 12
11 ⁄ 12
12/12
Loose wide
Margins = 1 line. Grid gap = 2 lines.
1 ⁄ 1
1 ⁄ 2
2/2
1 ⁄ 3
2 ⁄ 3
3/3
1 ⁄ 4
2 ⁄ 4
3 ⁄ 4
4/4
1 ⁄ 6
2 ⁄ 6
3 ⁄ 6
4 ⁄ 6
5 ⁄ 6
6/6
1 ⁄ 12
2 ⁄ 12
3 ⁄ 12
4 ⁄ 12
5 ⁄ 12
6 ⁄ 12
7 ⁄ 12
8 ⁄ 12
9 ⁄ 12
10 ⁄ 12
11 ⁄ 12
12/12
Loose full-bleed
No margins. Grid gap = 2 lines.
1 ⁄ 1
1 ⁄ 2
2/2
1 ⁄ 3
2 ⁄ 3
3/3
1 ⁄ 4
2 ⁄ 4
3 ⁄ 4
4/4
1 ⁄ 6
2 ⁄ 6
3 ⁄ 6
4 ⁄ 6
5 ⁄ 6
6/6
1 ⁄ 12
2 ⁄ 12
3 ⁄ 12
4 ⁄ 12
5 ⁄ 12
6 ⁄ 12
7 ⁄ 12
8 ⁄ 12
9 ⁄ 12
10 ⁄ 12
11 ⁄ 12
12/12
Tight
Standard margins. Grid gap = 1/2 line.
1 ⁄ 1
1 ⁄ 2
2/2
1 ⁄ 3
2 ⁄ 3
3/3
1 ⁄ 4
2 ⁄ 4
3 ⁄ 4
4/4
1 ⁄ 6
2 ⁄ 6
3 ⁄ 6
4 ⁄ 6
5 ⁄ 6
6/6
1 ⁄ 12
2 ⁄ 12
3 ⁄ 12
4 ⁄ 12
5 ⁄ 12
6 ⁄ 12
7 ⁄ 12
8 ⁄ 12
9 ⁄ 12
10 ⁄ 12
11 ⁄ 12
12/12
Tight wide
Margins = 1 line. Grid gap = 1/2 line.
1 ⁄ 1
1 ⁄ 2
2/2
1 ⁄ 3
2 ⁄ 3
3/3
1 ⁄ 4
2 ⁄ 4
3 ⁄ 4
4/4
1 ⁄ 6
2 ⁄ 6
3 ⁄ 6
4 ⁄ 6
5 ⁄ 6
6/6
1 ⁄ 12
2 ⁄ 12
3 ⁄ 12
4 ⁄ 12
5 ⁄ 12
6 ⁄ 12
7 ⁄ 12
8 ⁄ 12
9 ⁄ 12
10 ⁄ 12
11 ⁄ 12
12/12
Tight full-bleed
No margins. Grid gap = 1/2 line.
1 ⁄ 1
1 ⁄ 2
2/2
1 ⁄ 3
2 ⁄ 3
3/3
1 ⁄ 4
2 ⁄ 4
3 ⁄ 4
4/4
1 ⁄ 6
2 ⁄ 6
3 ⁄ 6
4 ⁄ 6
5 ⁄ 6
6/6
1 ⁄ 12
2 ⁄ 12
3 ⁄ 12
4 ⁄ 12
5 ⁄ 12
6 ⁄ 12
7 ⁄ 12
8 ⁄ 12
9 ⁄ 12
10 ⁄ 12
11 ⁄ 12
12/12
Hairline
Standard margins. Grid gap = 1px.
1 ⁄ 1
1 ⁄ 2
2/2
1 ⁄ 3
2 ⁄ 3
3/3
1 ⁄ 4
2 ⁄ 4
3 ⁄ 4
4/4
1 ⁄ 6
2 ⁄ 6
3 ⁄ 6
4 ⁄ 6
5 ⁄ 6
6/6
1 ⁄ 12
2 ⁄ 12
3 ⁄ 12
4 ⁄ 12
5 ⁄ 12
6 ⁄ 12
7 ⁄ 12
8 ⁄ 12
9 ⁄ 12
10 ⁄ 12
11 ⁄ 12
12/12
Tight wide
Margins = 1 line. Grid gap = 1px.
1 ⁄ 1
1 ⁄ 2
2/2
1 ⁄ 3
2 ⁄ 3
3/3
1 ⁄ 4
2 ⁄ 4
3 ⁄ 4
4/4
1 ⁄ 6
2 ⁄ 6
3 ⁄ 6
4 ⁄ 6
5 ⁄ 6
6/6
1 ⁄ 12
2 ⁄ 12
3 ⁄ 12
4 ⁄ 12
5 ⁄ 12
6 ⁄ 12
7 ⁄ 12
8 ⁄ 12
9 ⁄ 12
10 ⁄ 12
11 ⁄ 12
12/12
Tight full-bleed
No margins. Grid gap = 1px.
1 ⁄ 1
1 ⁄ 2
2/2
1 ⁄ 3
2 ⁄ 3
3/3
1 ⁄ 4
2 ⁄ 4
3 ⁄ 4
4/4
1 ⁄ 6
2 ⁄ 6
3 ⁄ 6
4 ⁄ 6
5 ⁄ 6
6/6
1 ⁄ 12
2 ⁄ 12
3 ⁄ 12
4 ⁄ 12
5 ⁄ 12
6 ⁄ 12
7 ⁄ 12
8 ⁄ 12
9 ⁄ 12
10 ⁄ 12
11 ⁄ 12
12/12
Talk to us.
Learn more about our programs or just say hi.