Your menu on a small screen: size, contrast and layout that can be read

The menu you see on a big screen at home is not the menu your guest sees. They open it on their phone, often with one hand, at a table on the terrace in the early afternoon or in the dim light of the evening. Sometimes their glasses are in their bag. So the question is not whether the menu is beautiful, but whether it can be read in exactly those moments.

What changes on the small screen

A monitor has room. A phone has a narrow column that the guest scrolls with a thumb. Anything small, low in contrast or crammed in is felt immediately. The good news is that most problems are easy to spot and can be fixed without special skills.

Contrast: the most common problem

Light grey text on a white background looks elegant in a studio and is almost invisible outdoors. The sun reflects off the screen, and anything that is not sharply different from the background gets lost.

There is an official benchmark. The W3C Web Content Accessibility Guidelines require a contrast ratio of at least 4.5 to 1 for ordinary text and 3 to 1 for large text, which is about 24 pixels or larger. This is not a law for menus, but a generally accepted measure of legibility. If you do not want to measure, a simple rule is enough: dark text on a light background or the other way round, with no in-between greys for prices and descriptions.

Three places that are often missed:

• the price, when it is in a paler colour than the name of the dish;
• descriptions and allergens, set small and in grey;
• text over a photo, where the background changes from dish to dish.

Size: think about enlarged fonts

Many guests, especially older ones, have already enlarged the font in their phone settings. The same W3C guidelines describe that text must be able to be enlarged to double without losing content or function. For a menu this means one concrete test: enlarge the font on your phone and see whether the prices stay next to the dishes, whether nothing is cut off and whether you have to scroll sideways.

You do not need to look for an exact number of pixels. It is enough to ask yourself: would I read this with a glass in my hand and without my glasses? If the answer is ‘with difficulty’, make it bigger.

Layout: the guest does not read, they scan

Also look at how the guest starts: we describe the first seconds of a menu in the article on the first 30 seconds with the menu. Here is only the essentials for legibility:

• sections should be short and clearly named, not one long unbroken list;
• the price should always be on the same line or in the same column, so nobody has to search for it;
• the description should be one or two lines, not a paragraph; there is a separate article on the length of the menu;
• enough space between the lines that a thumb does not touch the neighbouring dish by mistake;
• photos should help, not get in the way: they must not push the price off the screen.

For the layout of photos and descriptions, see the article on photos and descriptions in the menu.

In the dark and in the sun

A restaurant has two extreme environments. Outside in the afternoon, the screen must be readable without a hand held in front of it. Inside in the evening, some people lower the brightness, and then light grey sinks away. High contrast helps in both cases.

If the menu has a dark background, check it separately: light text on dark looks different in the sun. Do not assume that if one is fine, the other is too.

A 15-minute test with your phone

No special equipment is needed.

• Open the menu on your phone as a guest, not from the editor.
• Go outside into the sun, tilt the screen slightly and try to read three prices. If you have to shade it with your palm, you have a problem.
• Reduce the brightness to half and repeat indoors.
• Increase the font in the phone settings to the largest size and go through one section from top to bottom.
• Give the phone to a team member who has not seen the menu and ask them to find the price of a dish without helping them.
• Write down what was hard to read and fix it within a day.

Repeat the test after every major change to the menu, for example when you add photos or a new seasonal section.

What to remember

Legibility is not an art, but a series of small checks. High contrast, text that is large enough, short sections and a price in a clear place do more for guests than any decoration. If a menu is accessible to a guest with an enlarged font, it is usually more comfortable for everyone, including those who are simply in a hurry.

Where ISKA Menu fits

In ISKA Menu, the menu opens in the browser on the guest's phone, without an app, and changes are made from the portal or from a phone and stay a draft until you publish them. This way you can correct a text or change the layout, review it on your phone and only then publish it, with the same link. The free plan includes a basic menu in Bulgarian. The test above applies to any menu, regardless of what it was made with.