How to Design a Readable Menu with Hierarchy

Before we get into how to create hierarchy in your menu, let’s talk a little about the why. Imagine listening to a TED Talk where the presenter speaks in a completely monotone voice. There is no pace change or moments of silence—just straight talking.

Bueller? Bueller anyone? Anyone?

When we create hierarchy in our type, we are setting the tone and pace of how we want others to read. Just like the breakdown of paragraphs and sentences, visual hierarchy helps us understand where thoughts and sections begin and end.

Sometimes you might find you go to a bookstore and find a large selection of books on sale. As customers rifle through them, the pile starts to get fairly messy. So when you arrive and want to find a book, everything is sort of everywhere.

Now what if those books were all organized by genre, author, and title? Visual organization becomes more important for you to find what you are looking for or to find something you might want to try.

When we do this with type in a menu it makes it that much easier for your patrons to decide. They can quickly navigate between appetizers, mains, and desserts and within those see the separation of menu items and what is in them.

In turn, this will make the job of your server easier. It will cut down on questions and allow them to focus on specials or possible up-sells in a shorter period of time. Most importantly though, it makes the life of the reader a joy.

When you design a menu they enjoy reading that is free of the complication of comprehension, you elevate their experience. The last thing you want is for a customer to feel like an idiot just trying to figure out where the drinks are.

The first step in creating a hierarchy is organizing the information itself.

You’ll probably have courses and within those courses, menu items, and within those the name of the dish and the ingredients. And lastly, there is the price.

Some menus like to break the meat dishes away from the vegetarian or vegan ones. Those again would be another section each in your courses or you would separate the entire menu into to two pages. Again, whatever makes it the most straightforward for your customers is the way you should go.

So let’s dig into this a little bit. First of all let’s look at some text that has no hierarchy.

‍Often this what text will come to you looking like.

We can see already that this is difficult to read. There are very few places for our eyes to land on. Instead we start jumping around or skimming over lines.

Size and Style

Bigger always means more important. We find ourselves focussing on large text first, hence why newspapers have big headlines. Using that principle, we can lead our readers to what we want read first and begin to visually organize information into groups.

Since it can be hard to tell where one type of information starts and another begins, we can also introduce text styling. By playing with bold and italic (and other fonts in the family) we can assign certain types of information with a style. By being consistent the reader intuitively begins to learn that italic means ingredients, for instance.

‍Use of size and style will differentiate information types.

Spacing

Looking at our text as is, there are some natural spaces in the lines that help. Small Plates and Menu quickly jump out because of their extra white space.

By accentuating natural breaks we can take the burden off a reader of finding them.

Natural small blocks of information are easier and less intimidating than one mega wall of text.

You might consider more substantial whitespace between main sections than you would for sub-sections. Looking at our menu text, we added more space around “Small Plates” and “Menu”. Between each menu item itself we have a little less space. So now we have large chunks with smaller chunks inside.

We can look to our heading to read into whether the group as a whole has information that we are looking for.

It should be said that smaller space generally confers greater relation—which makes sense. The closer people stand to each other the more they have in common or are familiar with each other. They are friends.

‍Don’t underestimate the power of space.

Indents and All Caps

Already our menu is miles ahead of where we started. Someone could reasonably read it without too much hesitation. But we can do better.

The idea is to take out any obstacles between your reader and the information. We want them to passively absorb the menu. They look at it and it just seeps in.

Spacing between blocks is all fine and dandy but horizontal space should also be considered.

By indenting we can take our hierarchy to the next level. The further something is indented the more it appears as a subsection to the line above it. Here we’ve indented the menu item and then the ingredients indented again below that.

This is another visual clue for a reader to spot upon scanning. Text being left aligned leaves obvious gaps against the margin when indented.

Our menu items were still slightly lost. By making them all caps we’ve again assigned them importance: more importance than the ingredients but less importance than section headings.

We could have done that a number of different ways. Sometimes all caps are difficult to read. A slightly more bold type or even a colour could do the same job.

‍All caps and indentation can help lead the eye and show importance.

Colour And Placement

Colour can be used to draw attention or simply differentiate information. Let’s say you do have Vegan options. A green leaf denoting it might be the perfect touch that jumps out for those looking for it.

In our example below we’ve used a purely greyscale palette with grey being our different “colour” from the rest of our black text. In this usage case we aren’t trying to draw attention to it per se but allow it to be easily recognized as the patron reads through the menu items.

The key items we want read in this menu are the items themselves. We want price to be available and easily found, but our focus is on the actual dish and the ingredients in it. The idea being that patrons will decide based on dishes and not simple price comparisons.

To make it that much easier for the reader we’ve also made this price a large superscript. By moving it off of the baseline (the line that all text lies) it signifies that we are changing from one type of info to another.

‍Prices are now superscripted and in grey making them quickly spotted when the time comes.

Tweaks

Hierarchy only really works when it is applied consistently. Every time a dish is listed, it should be formatted identically. A price should look and feel the same for every dish.

Without consistency we are back to the pile of bargain books at the bookstore.

While not purely to do with hierarchy, let’s go just one step further to make this menu more readable by applying some more consistency.

Things to watch out for are case mismatches. This means that if you are using sentence case (only the first word is capitalized) make sure it is like this across the board for all similar items.

Likewise, line lengths should be roughly the same or at least have a limit. The general rule of thumb for reading text is 7–9 words per line. This is easier for us to process and doesn’t feel as encumbering as lines that nearly extend off the page.

The smallest details in type make the most readable and visually appealing text.

All else being equal, the menu that feels easier to read is the one that will be. That is its sole job. By introducing hierarchy you will beat out about 80% of the menus out there.

December 19, 2016
Posted on 
Author photo in a circle
Kyle Lincoln

Kyle is a logo crafter, avid reader, and writer. His experience expands across a wide spectrum of clients such as Nandos, Shaw Business, and Destination Canada. Growing up, it didn’t take him long to go from doodles to design. Kyle’s previous work in identities for conferences and events left him longing for something more enduring. He’s got a vested interest in helping businesses thrive and an eye for brand incongruences. In Vancouver he can be found scoping out his client’s location and/or the nearest gelateria and is always up to discuss your project or favourite flavour.

Before we get into how to create hierarchy in your menu, let’s talk a little about the why. Imagine listening to a TED Talk where the presenter speaks in a completely monotone voice. There is no pace change or moments of silence—just straight talking.

Bueller? Bueller anyone? Anyone?

When we create hierarchy in our type, we are setting the tone and pace of how we want others to read. Just like the breakdown of paragraphs and sentences, visual hierarchy helps us understand where thoughts and sections begin and end.

Sometimes you might find you go to a bookstore and find a large selection of books on sale. As customers rifle through them, the pile starts to get fairly messy. So when you arrive and want to find a book, everything is sort of everywhere.

Now what if those books were all organized by genre, author, and title? Visual organization becomes more important for you to find what you are looking for or to find something you might want to try.

When we do this with type in a menu it makes it that much easier for your patrons to decide. They can quickly navigate between appetizers, mains, and desserts and within those see the separation of menu items and what is in them.

In turn, this will make the job of your server easier. It will cut down on questions and allow them to focus on specials or possible up-sells in a shorter period of time. Most importantly though, it makes the life of the reader a joy.

When you design a menu they enjoy reading that is free of the complication of comprehension, you elevate their experience. The last thing you want is for a customer to feel like an idiot just trying to figure out where the drinks are.

The first step in creating a hierarchy is organizing the information itself.

You’ll probably have courses and within those courses, menu items, and within those the name of the dish and the ingredients. And lastly, there is the price.

Some menus like to break the meat dishes away from the vegetarian or vegan ones. Those again would be another section each in your courses or you would separate the entire menu into to two pages. Again, whatever makes it the most straightforward for your customers is the way you should go.

So let’s dig into this a little bit. First of all let’s look at some text that has no hierarchy.

‍Often this what text will come to you looking like.

We can see already that this is difficult to read. There are very few places for our eyes to land on. Instead we start jumping around or skimming over lines.

Size and Style

Bigger always means more important. We find ourselves focussing on large text first, hence why newspapers have big headlines. Using that principle, we can lead our readers to what we want read first and begin to visually organize information into groups.

Since it can be hard to tell where one type of information starts and another begins, we can also introduce text styling. By playing with bold and italic (and other fonts in the family) we can assign certain types of information with a style. By being consistent the reader intuitively begins to learn that italic means ingredients, for instance.

‍Use of size and style will differentiate information types.

Spacing

Looking at our text as is, there are some natural spaces in the lines that help. Small Plates and Menu quickly jump out because of their extra white space.

By accentuating natural breaks we can take the burden off a reader of finding them.

Natural small blocks of information are easier and less intimidating than one mega wall of text.

You might consider more substantial whitespace between main sections than you would for sub-sections. Looking at our menu text, we added more space around “Small Plates” and “Menu”. Between each menu item itself we have a little less space. So now we have large chunks with smaller chunks inside.

We can look to our heading to read into whether the group as a whole has information that we are looking for.

It should be said that smaller space generally confers greater relation—which makes sense. The closer people stand to each other the more they have in common or are familiar with each other. They are friends.

‍Don’t underestimate the power of space.

Indents and All Caps

Already our menu is miles ahead of where we started. Someone could reasonably read it without too much hesitation. But we can do better.

The idea is to take out any obstacles between your reader and the information. We want them to passively absorb the menu. They look at it and it just seeps in.

Spacing between blocks is all fine and dandy but horizontal space should also be considered.

By indenting we can take our hierarchy to the next level. The further something is indented the more it appears as a subsection to the line above it. Here we’ve indented the menu item and then the ingredients indented again below that.

This is another visual clue for a reader to spot upon scanning. Text being left aligned leaves obvious gaps against the margin when indented.

Our menu items were still slightly lost. By making them all caps we’ve again assigned them importance: more importance than the ingredients but less importance than section headings.

We could have done that a number of different ways. Sometimes all caps are difficult to read. A slightly more bold type or even a colour could do the same job.

‍All caps and indentation can help lead the eye and show importance.

Colour And Placement

Colour can be used to draw attention or simply differentiate information. Let’s say you do have Vegan options. A green leaf denoting it might be the perfect touch that jumps out for those looking for it.

In our example below we’ve used a purely greyscale palette with grey being our different “colour” from the rest of our black text. In this usage case we aren’t trying to draw attention to it per se but allow it to be easily recognized as the patron reads through the menu items.

The key items we want read in this menu are the items themselves. We want price to be available and easily found, but our focus is on the actual dish and the ingredients in it. The idea being that patrons will decide based on dishes and not simple price comparisons.

To make it that much easier for the reader we’ve also made this price a large superscript. By moving it off of the baseline (the line that all text lies) it signifies that we are changing from one type of info to another.

‍Prices are now superscripted and in grey making them quickly spotted when the time comes.

Tweaks

Hierarchy only really works when it is applied consistently. Every time a dish is listed, it should be formatted identically. A price should look and feel the same for every dish.

Without consistency we are back to the pile of bargain books at the bookstore.

While not purely to do with hierarchy, let’s go just one step further to make this menu more readable by applying some more consistency.

Things to watch out for are case mismatches. This means that if you are using sentence case (only the first word is capitalized) make sure it is like this across the board for all similar items.

Likewise, line lengths should be roughly the same or at least have a limit. The general rule of thumb for reading text is 7–9 words per line. This is easier for us to process and doesn’t feel as encumbering as lines that nearly extend off the page.

The smallest details in type make the most readable and visually appealing text.

All else being equal, the menu that feels easier to read is the one that will be. That is its sole job. By introducing hierarchy you will beat out about 80% of the menus out there.

December 19, 2016
Posted on 
Author photo in a circle
Kyle Lincoln

Kyle is a logo crafter, avid reader, and writer. His experience expands across a wide spectrum of clients such as Nandos, Shaw Business, and Destination Canada. Growing up, it didn’t take him long to go from doodles to design. Kyle’s previous work in identities for conferences and events left him longing for something more enduring. He’s got a vested interest in helping businesses thrive and an eye for brand incongruences. In Vancouver he can be found scoping out his client’s location and/or the nearest gelateria and is always up to discuss your project or favourite flavour.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
<< Back to Blog