3Grids, fonts, columns and responsive design

This is the first part of the web­site de­sign sec­tion, and in it I ad­dress the prob­lem of lay­ing out the web­page — I do this in some de­tail and this is largely be­cause I found the whole process quite in­ter­est­ing and en­joy­able; in fact the more I looked into it the more in­ter­ested I be­came — there is lot to it, a lot of his­tory too.

Now, I recog­nise that not every­body shares this in­ter­est, the finer de­tails of point con­struc­tion, line spac­ing, grid lay­outs and eco­nom­ics mag­a­zines from the 1960s are not for every­one, and some of you just want to get on with using the web­site (I know, let’s just call you “Bar­bar­ians”).

Well for the Bar­bar­ians amongst you, just skip to section 3.4 where I sum­marise what I did and how it works — its ok, I use short words that are easy to un­der­stand.

For the rest of you I spend a good deal of time ex­plain­ing about grid arrange­ments, fonts, point size and line spac­ing — and par­tic­u­larly, how these thing apply to web­sites (and Mi­crosoft Word).

Broadly, this sec­tion sets out the fol­low­ing:.

1. How to lay­out the web­site in columns

2. The size (width) of the web­site

3. The best fonts to use on the web­site

4. The size of the web­site body text

5. What line spac­ing to use

The ap­pear­ance of a web­site, its lay­out and the guide­lines for cre­at­ing it are many and var­ied. There is no end to the the­o­ries and opin­ions: golden ratio, Fi­bonacci se­ries, his spi­ral, two columns, three columns, flat de­sign, par­al­lax, ma­te­r­ial de­sign, sin­gle page scrolling — all sorts of things.

This is the field of graphic de­sign and it’s a bit com­pli­cated (ap­par­ently some peo­ple even make a liv­ing out of it). I looked at many dif­fer­ent styles and did some re­search — I started with the Guten­berg Bible (1455) and learnt all about the Van De Graaf canon^†1 (no re­la­tion to the Van De Graaff of gen­er­a­tor fame); and this was good, but only re­ally for printed doc­u­ments. I wanted some­thing that works on the web.

I fi­nally set­tled on the Ger­st­ner grid. This was de­vel­oped by Karl Ger­st­ner^†2 in the 1960s for lay­ing out mag­a­zines. And it’s clever, re­ally clever — those of you (and me) of a cer­tain in­cli­na­tion are going to love this — let’s call our­selves pedants (or en­gi­neers).

The Ger­st­ner grid arrange­ment was de­vel­oped for the pub­li­ca­tion of a busi­ness and eco­nom­ics mag­a­zine (Cap­i­tal) in 1962 (Fig­ure 3.1):

†1		For those of you that still have a will to live, the pdf version of this document is constructed using the Van De Graff cannon — I explain it in Appendix xxx.
†2		Karl Gerstner (b.1930) is a Swiss graphic designer that worked in advertising from the 1950s onwards. In 1962 he worked on the design of a business magazine called Capital. It was while working on Capital that he developed the grid arrangement that determined the layout and appearance of the magazine. The same grid I’m using here.

Fig­ure 3.1   Cap­i­tal mag­a­zine
These im­ages are re­pro­duced cour­tesy of the Herb Lubalin Study Cen­ter at The Cooper Union, New York.
Their web­site is: lubalincenter.cooper.edu

The Ger­st­ner grid is a mod­u­lar grid arrange­ment in a square of 58 units by 58 units. It looks like this:

Fig­ure 3.2   The Ger­st­ner grid

This I agree is a bit con­fus­ing; but re­ally it’s just squares laid on top of each other — you can see an an­i­mated ver­sion of this below; just scroll down, you’ll get the idea of how it works:

• I give an explanation of how I animated this square in appendix xxx. There is a much better version of this animation in the Herb Lubalin flatfile magazine. I havn’t figured out how they did it yet, but when I do I’ll update the site with instructions.

Things be­come clearer if I show this as a se­ries of columns, and after all, the web­site is based upon columns (Fig­ure 3.3).

Fig­ure 3.3   Ger­st­ner grid as columns

“How does it work?” you ask; well, this is how it works — and this is the clever bit.

The Ger­st­ner grid is based on a square of 58 × 58 units (I’ll come to what a unit is, but for the minute it doesn’t mat­ter).

So in its sim­plest arrange­ment, it is a sin­gle col­umn of width 58 units.

Now, when the grid is split into columns, each col­umn is al­ways sep­a­rated from its neigh­bour by 2 units.

So if we want two equally sized columns, there will be one gap be­tween them (2 units), this leave 56 units for the columns, di­vid­ing this by two gives a col­umn width of 28 units.

If we want three equal width columns, there would be two sep­a­rat­ing gaps each of 2 units (4 units in total), this leave 54 units to split into three columns, giv­ing a col­umn width of 18 units; and so on.

The equa­tion for work­ing out col­umn widths is:

	Where	Widthcol	is the width of the column (equally sized)
		Ncol	is the number of columns

The el­e­gance of this is that the col­umn width gives an exact in­te­ger (whole num­ber) when the num­ber of columns is 1, 2, 3, 4, 5 or 6 — it falls down at seven, but six columns is enough.

The Ger­st­ner grid al­lows for columns of un­equal width, I’ve put to­gether a poor ap­prox­i­ma­tion of the Cap­i­tal mag­a­zine arrange­ment to high­light this:

Fig­ure 3.4   Vari­a­tions of the Ger­st­ner grid (with apolo­gies to Messrs Ger­st­ner and Theobald)

The three im­ages of Chester are cour­tesy of Michael D. Beck­with, the image of the Houses of Par­lia­ment is cour­tesy of Samel Zeller
(all im­ages are via the unsplash web­site under the creative common zero licence).
The dogs Hec­tor (left) and Henry (right) are my dogs (at least they con­de­scend to live with me) and I took the pho­tographs.

By over­lay­ing the Ger­st­ner grid on the pages, the flex­i­bil­ity of the arrange­ment can be seen:

Fig­ure 3.5   Ger­st­ner grid over­lay

Ok, so I can see the po­ten­tial in all this, it’s a colum­nar arrange­ment and it’s dri­ven by math­e­mat­ics — I like math­e­mat­ics. None of that airy-fairy it just feels right stuff.

Now we come to the di­men­sions of the unit, the basis of the Ger­st­ner grid.

Ger­st­ner de­signed the grid with a unit equiv­a­lent to the small­est point size used on the page; this leads to a dis­cus­sion of fonts and point size. — Read on: