running words around
design education and visual communication
authored by chris m hughes

Improvising the Capital Grid

Wednesday, 4 February 2015

Karl Gerstner's  'Capital Grid' is a cornerstone of graphic design theory and practice. Devised by the Swiss designer in 1962 for Capital Magazine, this elegant blueprint of intersecting guides for print design is arguably the ultimate expression of the Swiss Style, emphasising clarity, proportional measure and functionality. It's a thing of beauty but is undeniably complicated, and in his book 'Designing Programmes', Gerstner admitted that "once the grid was constructed, it required considerable study before I could make free use of it in a creative sense".

Given its provenance and complexity, I was excited to see of my design students, Saulius Stebulis, experimenting with this grid as part of a typographically-based web design project for ISTD (International Society of Typographic Designers). I'd like to look at how he accomplished this, what kind of creative work it can facilitate, and the implications for digital design.

As a general rule, using a grid creates order, consistency and harmony. Designers employ specific grids for different formats, and the tension created by the restriction of a grid versus the energy of the idea is very often the key to a great layout. These days, as digital design appropriates more and more of its sensibilities from print, its a reasonable proposition to ask why print, tablet and web formats can't share a single basic grid system.  Some variation of Gerstner's grid may be a possible answer to this idea of a 'unified' single grid system. To see why this might be, we have to look at how it was constructed, bearing in mind that the end result was always envisaged as being designed for the printed page.

Using a square divided into 58 horizontal and vertical units, Gerstner came up with a set of guides that allowed print designers to create far more variations in layout than was possible with standard grids. The result is a 'compound' grid, comprising a number of sets of columns and rows. The grid looks like this -

The Capital Grid - a 58-unit square with 2,3,4,5 and 6 available columns.

Examples of 1,2,3,4,5 and 6 column layout using the Capital Grid.

The second diagram above shows the power of Gerstner's idea.  Here is a flexible 1,2,3,4,and 6 column layout which also includes the option of an asymmetrical 5 column layout, greatly increasing the possible variations.  This square grid is then placed in the middle of a page and scaled to fit the side margins, leaving equal header and footer spaces, producing the ultimate grid system for print design.

Translating this complex structure from print to web was therefore a big challenge, as Saulius explains -

"The concept I was working on was very personal - 'Pursuit Of Happiness' - and I wanted to be able to show scattered thoughts, diary entries and random incidents from my daily life anywhere on screen, in a vertical scrolling website. These random entries needed to fit into a definite geometry on the screen that could be easily followed by the viewer.  So I needed a grid that would return harmonious and well organised results, no matter where the information appeared on the web page. This need for harmony inspired me to experiment with the Capital Grid."

Despite numerous attempts to use the square shaped grid, Saulius eventually settled on a rectangular grid in portrait orientation, shown in the visual below.  The first set of guides is 3 horizontal and 4 vertical columns (i.e. 3x4, red lines). This is then overlaid with a 4 X 6 (green lines) and then a 6 X 8 (blue lines). The combination is then repeated sideways, like adding a facing page to a spread, to arrive at a grid that fits the full screen desktop proportions. Once complete, the new grid accommodates  2, 3, 4, 6, 8, and 12 column layouts. There are also four locations across the page that support half-unit increments.

This grid gives us a possible 192 different positions that an element can occupy (via 16 horizontal and 12 vertical intersection points per row or column respectively).  Elements can also be stacked on top of or nested inside of each other as well using this formula. The gutters can also be dispensed with unless multi-columned text is going to feature in the design. So there is an incredible amount of flexibility inside the screen.

With the grid in place, Saul then looked at the construction of the web page using semantic html5 markup.  Just like a typical scrolling website, the page is divided vertically into sections.  Each section is full desktop size (1920px X 1080px), and is overlaid with a div class which contains one instance of the grid. As we add sections down the page, the grid is repeated vertically.  This ensures that the vertical rhythm in each section is repeated down through the scrolling experience. In the css, elements inside each section are placed using absolute positioning.  The 192 positions in a section are each defined by a combination of two percentage values - left and top. The basic unit of increment is 8%, with subunits of 4% (horizontal) and 2.66% (vertical).

There are limitations (not least in terms of  responsive design), but at fullscreen the pattern or flow of elements on the page produces a harmonious result as long as elements are placed in one of the intersections -

Above : harmonious absolute positioning using percentage units on the grid. 
Below : sample sections using the grid.

Although this is still a work in progress, we can already see an original and unusual layout in this work. The arrangement seems simple, and communicates the concept clearly, but is held together by a complex geometric construction.  All the heavy lifting is done at the outset by the development of the grid.

Paula Scher once said "Less is more, unless it's less, and then maybe 'more' really is more". This improvisation of the Capital Grid illustrates the point perfectly.  In pursuing a really systematic approach to layout, its possible to create a structure that actually makes it easier to experiment and produce free-flowing, minimal layouts and arrangements that would have been unattainable otherwise.

Note: Saulius is submitting the finished design, including a full annotation, to ISTD's Student Assessment Project 2015.