Recipe Hierarchy Exercises

I made a series of twelve interpretations of a recipe, inspired by the chapter ‘Expressing Hierarchy’ in John Kane’s A Type Primer, as a way to begin thinking about typographic hierarchy in recipes.

"In most circumstances, a designer's first goal is to make material comprehensible to the reader. In other words, you should understand the material well enough to know how someone else needs to read it to make the best sense out of it. This understanding happens on two levels: content and form."[1]

Version 1 is the text without any formatting, downloaded from

Version 2 is a two-column grid with the text all one size and one weight, using line breaks to divide the different types of information within the recipe: title, commentary, ingredients, method, source.

Version 3 uses a wider left-hand margin to create a more dynamic page. Bold and medium are used to add emphasis to the hierarchy established in version 2.

Version 4 uses italic to emphasise the commentary by the author, creating a further separation within the recipe.

Version 5 uses a three-column grid to break up the information. One typeface in one weight and size is used throughout. the list of ingredients occupies one column of the grid, the method is spread across two columns. There is a single line break between the list of ingredients and a double line break between the sections of the method to create a different rhythm for the different parts of the text.

In Version 6, the ingredients are ranged right against the gutter between the first and second columns of the grid to reinforce the structure of the page.

In Version 7, the title is emphasised with a larger and heavier weight of type to create a clear starting point for reading. An italic is added to emphasise the author's commentary separating it from the method.

Version 8 introduces a seven-column grid allowing the author's commentary to be moved to the right-hand column.

Version 9 uses an eight-column grid allowing a wider line length for the author's commentary. The method has been highlighted in a heavier weight.

Version 10 returns to a more asymmetric page, ingredients are separated by an empty column of the grid, the method is emphasised with a heavier weight type and the author's commentary separated with italics.

Version 11 is a variation of Version 10 with the text in the method and commentary justified to test readability.

Version 12 moves the ingredients closer to the main column creating more dynamic white space around the text block but less white space between the different parts of the recipe.

[1] Kane, John (2002) A Type Primer, London, Laurence King




Click here to subscribe to James Brook / Design

Please visit for more information

The content (content being images and text) of this website is copyright © James Brook
All rights expressly reserved
Powered by Blogger.