The brief

Choose a magazine, newspaper or journal and work out the grid or grids they have used.  You will probably need to look at least four pages to get a feel of the layout.  Measure the size of the pages, the margins, the text columns and the gaps in between them.  How many columns do they use?  Is it the same on every page?  Can you identify the fonts they use?  Do you have it or one with similar properties?  How do they use photographs and illustrations?  How much ‘white space’ on the page is there?

Draw up a two-page spread using the same grid as the magazine.  Indicate text using Lorum Ipsum and indicate images by either filling a picture box with a 10% tint or using a picture from your collection.  When you have done this see if you can develop the grid further.

Select a title and images and see how many variations you can come up with.  What happens when you alter the body font or headline font?  Do different kinds of images change the ‘feel’ of the publication?  Do you think the readership for each of your variations would be the same?  Does the image you choose suggest a different design?  Which one work best and why?  Make notes in your learning log.

Getting started

I have selected a four-page spread from the magazine called Psychologies.  I have chosen this article because the layout is relatively simple and has a variety of different forms of content.  The first page has a large photo with the heading and the subheading.  The heading consists of a serif, and the subheading is a sans-serif but seems to be one typeface.

Different styles of this typeface are used throughout the article.  The body text is a serif and on the second page is a quote in the same italic serif as the heading.  There is also an illustration between the two columns on page two.  All the pages are divided into a three-column layout, but parts of the columns have been used for photos, illustrations and quotes.

The closest typeface family I could find to this article is IvyPresto Display and IvyPresto Display Italic for the heading and IvyStyle Sans for the subheading and body text.   IvyPresto and IvyStyle Sans are both superfamilies and consist of dozens of related fonts in multiple weights and/or widths, often with both sans-serif and serif versions.  I have noticed that a thinner type is used in the red text box on page four.

Page three has one column on the left and another large photo covers two columns and extends almost right to the top.  I am noticing a lot of white space above the body text especially on the top of the pages, and less white space above the photos.  The heading and the quote on page four are surrounded by plenty of white space.

On page four the designer introduced another typeface in a script font, used in the quote.  There are two typefaces throughout this article.  The serif and sans-serif are from the same superfamily and the script is from another typeface family called Braisetto.

The page size of this magazine is 210mm x 284mm with a 30mm top margin, 20mm outer margin and a 20mm bottom margin.  The inner margin is a bit of a mystery to me because it is difficult to measure, but I can estimate it at 20mm.  The photo in figure 1 is deceiving because of the scan.

The gutters between the columns are 5mm but can appear to be more or less due to the pictures placed over the column grids to create exciting proportions.

Drawing up the spread

Once I started drawing up the spread, I realised I had missed a few measurements, so I added those.  I measured the column width wrong and I realised this when the text looked more cramped compared to the magazine.

I also learned not to estimate the inner margin of the page but instead work from the outside inwards until I find the ‘balance’ measurement of the page.  I estimated the inner margin at 20mm, but in actual fact it is only 10mm.  My column and outside measurements did not add up, but once I adjusted the inner margin to 10mm, all the other measurements fell into place.

I counted the letters of the headings and subheadings and replaced them with the same size Lorem ipsum words to get the same amount of words fitting into the text boxes.

The template (or grid design) is now correct and according to the measurements of the original magazine.  I will now use this template and develop the grid further by selecting a title and images in several variations.

Template typefaces

Heading:

IvyPresto Display Semibold Italic at 88pt and tracking at 50,  IvyPresto Display Bold at 88pt and tracking at 10.  The leading for both styles is 74pt.

Subheading:

IvyStyle Sans Light at 17pt, no tracking, leading at 20,4pt.

Quotes:

IvyPresto Display Italic at 16pt, no tracking, leading at 19,

Braisetto at 36pt, 15 tracking , leading at 43,2pt

Body text:        

IvyPresto Text Light at 8pt, no tracking, leading 12pt.

I am using the concept “The journey to natural chemistry” in three ways.  The first concept is chemistry between two people, the complex emotional or psychological interaction between lovers.  The second concept has to do with the chemistry of cosmetics and the third is biochemistry. 

Variation 1

Once I had the template, the text and images were relatively easy to slot into the boxes.  I used Baskerville regular as the body text and once I changed the text, I noticed that Baskerville takes up less space than the previous font.  I then increased the point size by one point and also increased the leading so the line space stayed at 150%.  The smaller quote on the second page is 16pt and the larger quote on page 4 is 21pt.  I have done this purposefully so that the point size is relative to the space it occupies.

Variation 1 typefaces

Heading:

AdornS Pomander Script at 90pt and tracking at 50,  AdornS Condensed Sans at 80pt and tracking at 10.  The leading for both styles is 75pt.

Subheading:

AdornS Condensed Sans at 17pt, no tracking, leading at 20,4pt.

Quotes:

AdornS Garland Regular at 16pt , no tracking, leading at 19,2pt. 

AdornS Garland Regular at 21pt, 15 tracking , leading at 25,2pt

Body text:

Baskerville regular at 9pt, no tracking, leading 13,5pt.

Variation 2

The second variation with the cosmetics worked well.  As long as I keep the measurements of the text boxes consistent to the template, the text can easily be sized to fit the text box.  I used earthy tones for the text to tie in with the word natural, but red was appropriate for variation one because the emphasis is more on chemistry than natural. 

Variation 2 typefaces

Heading:

Didot LT Pro Italic at 72pt and tracking at 25,  Museo Sans Rounded 900 at 72pt and no tracking.  The leading for both styles is 74pt.

Subheading:

Museo Sans Rounded 700 at 16pt, no tracking, leading at 19,2pt.

Quotes:

Didot LT Pro Bold Italic at 16pt , no tracking, leading at 19,2pt. 

Didot LT Pro Bold Italic at 25pt, 15 tracking , leading at 30pt

Body text:

Museo Sans 300 at 10pt, no tracking, leading 14pt.

Variation 3 typefaces

Heading:

Coranto Headline at 72pt and tracking at 25,  Classico URW Medium at 72pt and no tracking.  The leading for both styles is 74pt.

Subheading:

Classico URW Black at 16pt, no tracking, leading at 19,2pt.

Quotes:

Classico URW Bold Italic at 16pt , no tracking, leading at 19,2pt. 

Classico URW Bold Italic at 25pt, 15 tracking , leading at 30pt

Body text:

Coranto 2 Regular at 10pt, no tracking, leading 14pt.

It is incredible to see how a different typeface, images and colours can completely change the feel of the publication.  Although the articles all have a different subject and look different, there is still a cohesiveness between them.  This might be because they all have the same layout style.  I have chosen the images to fit the grid, but if it were the other way around, it would be necessary to adjust the grid.  I know from previous exercises that it is better to establish the grid according to the sizes of your images and the quantity of your body text.

The first two variations will have the same readership, such as a women’s magazine, but the last publication will fit better in a science magazine.  I think the first one (red colour palette) works the best.  The layout is cohesive with the hearts scattered throughout the publication.  The typography is eye-catching and contrasts nicely with the simple layout.

Reflecting on this exercise

• I have learned how to measure and analyse a layout and figure out measurements that could be unclear, such as the inside margin.
• I now understand how to use grids, white space, gutters, columns and margins and how to handle a larger amount of text. 
• Overall, this exercise has built my confidence to make any kind of layout by analysing existing layouts and developing the grid further.