Monday 18 March 2013

The designer and the grid


I am going to thoroughly read this book and document in note form anything that I find particularly useful and will help me with my understanding of grids and creating systems. 

The page before the information shows the grid that has been used to create the book and every page that is in the book.


 It shows how much diversity that you can have within a more complex grid structure whist maintaining the grid boundaries. Overlay areas of the grid systems that I use when I print my final layout ideas would look effective, perhaps the overlay would look nice either as a fine line like here, or as blocks of varnish.
I like the problem statement in the introduction of the book- "a chaotic world in which parameters are always changing; a need for control without being controlled; a desire to find beauty and truth; vast quantities of words and images that need to be placed on the page..."

-A grid has been made impossible to completely break when working digitally because of the pixel.

A grid is essentially a series of vertical and horizontal lines. The vertical lines represent the column width, and the horizontal lines determine the space that that module of text/information will occupy. Column widths should be determined by the point size of the text that is being used, so the point size of text needs to be specified on a stylesheet for the stylesheet to be successful. Width of columns should also be affected by how many words per line are displayed in order to get aesthetic balance and also ease of reading. You can also rotate the grid structure, columns do not have to be vertical, and the same rules apply. insert the image of simple grids I read in another book that generally, for aesthetic balance and to draw your eye inwards at the information, the margin of the document should be at least double the width of the gutter of the grid.





Grids are practical for producing multiple paged documents because you have a system to work to. You get a strong visual consistancy, a consistancy that works. Designers are forced to think about the minute details of the design. They bring order to a page and unite aesthetic with practicallity.

An aesemetric grid- Joining columns to create text boxes are different from left side of the document ot the right side. The grid was designed with aesymetry in mind. It allows you to think more broardly about the potential of the layout of a page.

The baseline grid- is a series of horizontal lines across the page, and each line represents the potential baseline for a line of type. "(Baseline is the line that the bottom of capital letters sit)". This is known as leading. For my layouts, it is important for me to show leading of the type that will be used. The document that I produce will show this. To give greater flexability, the leading is usually smaller in point size than the height of the baseline to baseline of the type size. For instance, if the baseline to baseline is 9points in size, then a baseline grid would be sufficient to be every 3 points. Then this system is used to develop a higherarchical spacing system. For instance, 6 points gap between headers and main text, 12 point font for headers etc...Note, consider where you will be setting up the type before setting up the baseline grid.



vertical layout- columns. Horizontally- baseline grid and top and bottom margins. also, page can be divided into horizontal areas called fields. long lines of text can be difficult for the reader to read. smallest column- measurable in whole or half millimeters makes it easier. space between columns- generally 4 or 5 mm to make the whole system easier to add up and for the grid to be created. You can create a grid that is made with two or more grids placed on top of each other. may give unusual spacing for captions etc, harder to work with.

If the grid is made with small columns, one or two can be left blank deliberately to give a larger margin, aiding aesemetric layout on the page.



You can also use the grid and fields to align text horizontally for titles etc, gives the page more dynamism and interest.




Extremes in layout make pages more dynamic and more visually interesting, so experiment with extremes in layout when I have constructed my grid.

A nice idea would be to design a bookshelf in the style of my grid that would display the books for the typographic workshop, or the structure that the books should be layed out on the table. The size of book and positioning would matter heavily. (Areas could be mapped out with small pieces of masking tape for instance to get the layout of the books on the table. Units of furniture become one and easily stored- this is all done with grids.This design is with grids.



The starting point to designing a grid is the text- its meaning and the hierarchical devices it requires. Look at the information, then work out how the form can be broken down into it.




The above two images are examples of Wim crouwels work. He strictly utalises the grid to create not only his typographic layout but also the type itself. I want to experiment with this idea for my TW typography  Perhaps I could create a system where everything including the type is derived from the grid that is used to construct the document?




Relationship of the font and the grid is extremely important and differs for every font. Univers 55 is the most neutral of fonts. Then amend your weight and tone for hierarchy. Be expressive with the composition over the type.

Even if the font changes, the baseline grid should be the same throughout. This will maintain control over spacing between paragraphs. The x-height can also be considered in alignment  though the baseline is standard for optimum text alignment.

The system needs to accomodate the audience, what sort of text and images illustrate it, where it will be read, in what way the text is subdivided, and other typographic devices such as running heads, quotes, captions, lists, tables, contact details, footnotes or anything else that will interrupt the straight running of text.

To determine a grid, Muller Brockman suggests that the optimum number of words for a line is 7. Use this when designing my grid initially and to determine the column width. Providing an odd number of columns aids the asymmetric layout of the production. Narrowest column- may be used to give captions, address details, multiples of this unit might work as standard text boxes.


Paper size determines printing size, and so you must use your grid economically and also your paper source economically. Standardization of paper size results in a system that can  be applied to anything and is the most economical way of production. Therefore, why produce a document that is a different size or format just for the sake of it?

Try having the intercolumn gaps or the gutter as one linespace as this will be further than paragraph to paragraph spacing.


Grid systems by muller brockman-

printed matter is normally read at 30cm-35cm distance away. Therefore you should design your work with this in mind.

The corporate identity is a big project to tackle. This is because you have to plan for information that has not maybe even been thought of yet. You need to create a sense of tension and innovation. In the words of brockmann it requires a very high order of intelligence, knowledge, ability and imagination on the part of the designer.

titles of the same size and in the same position on all of the pages must be used throughout
subtitles of the same size and position always are the same distance from text around it
captions are the same size and illustrate the illustration around it in the same format and way
the same grid is used for text and pictures on all pages
photos reflect the same typographic style throughout
statistical information should be displayed in the same way throughout
leading to be constant throughout for the same size of type








No comments:

Post a Comment