Tastiana
FI

Restaurant menu design for phones: 12 rules that help guests choose

Restaurant menu design rules for the screen guests actually use: structure, type, prices, descriptions and labels that read well on a phone.

A restaurant owner and a chef work on a new menu at a table before service.
Images in this article are AI-generated illustrations.

Most advice on restaurant menu design was written for paper: where the eye lands first on a folded card, how to frame a signature dish in a box, how to set prices so they do not shout. That advice still matters for the menu on your tables. But the first time most guests see your menu, it is on a phone, held in one hand, scrolled with a thumb, often in a hurry. On that screen the rules change.

These twelve rules are for the menu guests read on their phone, whether it is a page on your website, a digital menu or the menu behind your QR code.

Structure

1. Use one column

A phone scrolls up and down, not sideways. Two or three columns side by side, so elegant on an A3 card, turn into tiny text or sideways scrolling on a phone. Put everything in a single column, in the order guests should read it.

2. Follow the order guests decide in

Starters, mains, desserts, then drinks: the order guests think in. Give sections short names they recognise at a glance. "Small plates" and "From the grill" work; "Beginnings" and "The journey" make guests stop and wonder.

3. Let guests jump to what they want

On a long menu, scrolling past twenty starters to reach the mains is tiring. Section links at the top, or a bar that stays in view as guests scroll, let them jump straight to the part they care about. A search helps the guest who already knows they want the risotto.

Type and colour

4. Make the text big enough

Phone browsers show body text at 16 pixels by default, and that is a sensible minimum for menu descriptions. Make dish names larger and bolder than their descriptions, so a guest can scan the names first and read the details of the ones that catch their eye. And let the text grow when guests enlarge it in their phone's settings.

5. Give the text real contrast

Pale grey on cream looks refined on a mood board and disappears on a phone in a dim room. The web accessibility guidelines ask for a contrast ratio of at least 4.5 to 1 for normal text (WCAG 2.2, Contrast (Minimum)). Keep text off photos and patterned backgrounds, where some letters always end up unreadable.

Dishes and prices

6. Put the price next to the dish

On a printed menu, prices often sit in a neat column on the right, joined to the dish by a row of dots. On a phone that column is far from the name, and guests have to trace across the screen to match them. Put the price right after the dish name, or directly below it.

7. Write descriptions that help guests choose

A good description answers the questions a guest would ask a server: what is in it, how is it cooked, and why is it worth ordering? One or two lines is enough. "Pan-roasted cod, brown butter, crushed new potatoes and dill" tells a guest more than a list of twelve ingredients or a paragraph of poetry.

Three plated dishes from one menu on a dark wood table: a fresh salad, grilled fish and a simple dessert.
A description should make the dish as easy to picture as a photo.

8. Label diets the same way everywhere

Vegan, vegetarian, gluten-free and other labels only help if they are consistent: the same letter or symbol, in the same place, on every dish, with a key at the top. Pair symbols with text, so the meaning does not rest on a colour or an icon alone. And label only what you can stand behind; our guide to allergen information on your menu explains why.

9. Highlight sparingly

A "chef's favourite" badge or a short "popular" note can guide an undecided guest. Put one on every third dish and it guides no one. Choose a few dishes you are proud of and let the rest speak for themselves.

10. Make options and extras clear

Sizes, sides, supplements and set-menu choices belong directly under the dish they belong to, with their own prices. A guest should never have to wonder whether the fries come with the burger or cost extra.

Drinks and the next step

11. Keep drinks easy to browse

Group drinks by type, put them in their own section, and show glass and bottle prices next to each other. A long wine list benefits most from section links and a search, because guests usually know whether they want red, white or something sparkling before they start reading.

12. Make the next step obvious

A guest who has finished reading should know what to do next. Put your booking button, opening hours and directions within easy reach, and add a short note asking guests to tell your staff about allergies before they order.

Test it in thirty seconds

Hand your phone to someone who does not know your menu and ask them to find a vegetarian main and its price. Watch where they hesitate. If it takes longer than thirty seconds, or they have to zoom, the menu needs work. Repeat the test in your dining room in the evening, with the lights you actually have.

A note on print menu psychology

Some menu design advice, such as placing your most profitable dish in the top right corner of a page, comes from studies of printed menus. On a phone, guests scroll from top to bottom, so the first dishes in each section get the most attention. Put the dishes you most want guests to notice near the top of their section, and keep your printed menu design for the printed menu.

How Tastiana designs the menu on a phone

Tastiana shows your menu the way these rules describe, without you redesigning anything. It reads the menu already on your website, PDFs included, and lays it out in one column, with a tab for each menu, clear section headings, a search, exact prices next to each dish and your dietary labels. Guests can enlarge the text in the guide's own settings, and it keeps the text readable whatever brand colours you choose. Your printed menu stays exactly as it is. Try the demo on your phone.

Questions restaurants ask

What font size should a menu use on a phone?

At least 16 pixels for descriptions, the size phone browsers use for body text by default, with dish names larger and bolder. Let the text grow when guests enlarge it in their settings.

Should a digital menu have photos?

A few good photos help guests picture a dish. Poor or slow-loading photos do the opposite, so use them sparingly and keep the page fast.

Where should prices go on a menu?

Right after the dish name or directly below it. A separate price column far to the right is hard to follow on a phone.

How do we test our menu design?

Give your phone to someone who does not know the menu and ask them to find a vegetarian main and its price. If it takes more than thirty seconds or needs zooming, simplify.