Grids in web design

A grid disaggregates a page vertically and horizontally into margins, columns, inter-column spaces, lines of type, and spaces between blocks of type and images.

The first definition of word "grid" we can find just in the mid-twentieth century. But before this date designers, commercial artists and other creators had been thinking about content, space, proportion, and form. The ancient pages were surprisingly modern, often using more than one column, with lettering that was ranged left, and color and variations in letter size used for emphasis. Taken from a late-sixteenth-century English Bible (pic.1), this page shows how printers quickly adopted symmetry. The text is justified and the two columns placed symmetrically on the page.

Pic.1. Late-sixteenth-century English Bible page

From the mid-fifteenth century until the Industrial Revolution (late eighteenth century), the book was the primary output of printing. And type was generally set in one justified column per page, placed symmetrically on the spread with larger outer margins than inner, and a larger margin at the foot than at the head (pic.2). Also in this period people started to use Golden section measure which means the relationship of short to long side of a golden rectangle is 1:1.618.

Pic.2. The Meditations of Marcus Aurelius Antoninus, published in 1792, uses the golden section to determine the text area.

Industrial revolution created profession of graphic designer. This job needed to communicate between increasingly literate people with help of print messages. There was rise of posters, leaflets, newspapers and magazines (pic.3).

Pic.3. Industrial revolution's leaflet (the English Illustrated Magazine of 1884)

In 1917 Dutch architect, designer, and painter Theo van Doesburg founded de Stijl where members advocated minimalism using only rectilinear forms and limited color palette: the primaries plus black and white. After that typographer Jan Tschichold wrote 2 books about typographic principles: The New Typography (1928) and Asymmetric Typography (1935). In his work Tschichold explored vertical and horizontal alignments and used a limited range of fonts, type sizes, and type weights.(pic.4)

Pic.4. Tschichold's work Asymmetric Typography (published in 1935)

During WWII, and in the decades that followed, typography in Swiss was developing very fast (better than in other countries). Several Swiss artists, most notably Max Bill and Richard Paul Lohse, explored systematic forms in their paintings concurrently with graphic design, while the graphic designers Emil Ruder and Josef Muller-Brockmann both wrote educative texts explaining what grids were and how to use them. For example, in Josef Muller-Brockmann's Grid Systems in Graphic Design he explains how multicolumn and field-based grids can be used flexibly to achieve any number of different layouts in both 2-D and 3-D work (pic.5).

Pic.5.Josef Muller-Brockmann's Grid Systems in Graphic Design

According to the web site sixrevision.com (July 2010) the grid idea stems from one of the oldest and most basic design principles: alignment. The majority of people prefer orderly and well organized information on a site so the grid system provides this opportunity. This theory has been around for thousands of years and was exemplified in the works of Pythagoras, who proposed numbers as ratios rather than single units (onextrapixel.com, 2011).

It is clear that basic of web grid is a typographic grid which is used for newspapers and magazines (pic.6.1. and 6.2.). According to Wikipedia typographic grid is a two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy to absorb manner. And it is not surprise that web designers adopt this method to presentation of online information.

Pic.6.1. and 6.2. Typography grid.