Digital Menu Design: Colors, Fonts, and Spacing That Sell More (2026)

August 12, 2026 at 9:44 PMTabres Team

digital menu design qr menu design restaurant menu design menu fonts menu colors menu psychology

Guests decide how they feel about your menu before they read a single dish name. Research on web pages puts that first judgement at roughly half a second — long before anyone reaches your slow-braised short rib. Half a second of color, type size, and empty space. That's your first impression, and most restaurants hand it over to whatever the default template looked like.

Short answer: the digital menu design that sells more in 2026 is boring on purpose. High contrast beats "appetite red" (aim for a 4.5:1 text-to-background ratio). Body text sits at 16px or bigger. One accent color, used only on things you want tapped. Generous space around each dish — white space is what makes a plate look expensive. Prices in the same size as the dish name, no currency symbol, no dotted lines, never in a neat right-hand column. And 6 to 8 dishes per category, because a long list gets skimmed and a short one gets read.

That's the whole thing. Now let's talk about why each piece works, and how to fix yours tonight without paying a designer.

Your phone menu is not a paper menu shrunk down

This is the mistake underneath most bad QR menus. Someone takes a beautiful A4 menu, exports it as a PDF, and calls it digital. It isn't. It's a poster you have to pinch and drag.

Paper and phone are different animals:

Paper is a glance. A phone is a scroll. On paper, a guest sees the whole page at once. On a phone they see maybe four dishes, then thumb down for more.
Paper has edges. A phone has depth. There's no "bottom right corner" on a scroll. There's only how far down.
Paper is one size. Phones are all sizes. Your menu has to work on a cracked six-year-old Android in a dim corner booth.

Which kills a classic bit of menu advice. You've probably heard about the "golden triangle" — the idea that eyes land in the middle of a menu, shoot to the top right, then top left, so that's where you put your money-makers. Newer eye-tracking work has poked big holes in it even for paper. People mostly read menus like a book, top to bottom. On a phone, the triangle doesn't exist at all.

The new rule: position means scroll depth. The first thing a guest sees when the page loads is your most valuable real estate. Everything below that gets less attention with every swipe. If your best-margin dish is in category seven, it might as well not be on the menu. That's a menu engineering decision, and the design just carries it out.

If you're still serving a PDF, stop reading design tips and fix that first — turning a PDF menu into a real QR menu takes an afternoon and beats every trick in this article.

Colors: contrast sells more than color psychology

Search "menu colors" and you'll get the same list every time. Red boosts appetite. Yellow grabs attention. Green says fresh and healthy. Blue kills hunger because there's no blue food in nature.

Honest take? That advice is half folklore. It gets repeated everywhere, but the studies behind it are thin, old, and mostly about packaged food, not a menu on a phone at 8pm. I'm not saying color doesn't matter. I'm saying it matters far less than the thing nobody talks about: can people actually read it?

The one number that matters: 4.5:1

Contrast ratio is the difference in brightness between your text and the background behind it. The accessibility standard says body text should hit at least 4.5:1, and big text (roughly 24px+, or 19px+ bold) at least 3:1.

That's not a nice-to-have. That's the difference between a guest reading your description and a guest skipping to the price. Free contrast checkers are everywhere — paste your two hex codes in and you'll know in five seconds.

The usual offenders:

Light grey descriptions on white. Designers love it. It fails contrast almost every time, and your dish descriptions are exactly where the selling happens.
White text on a photo. The photo's brightness changes per dish, so it passes on the dark steak and vanishes on the pavlova. Add a dark overlay or don't do it.
Gold or beige "elegant" text. Looks luxurious in the design file. Unreadable on a terrace at noon.
Thin fonts in a light weight. Contrast isn't only color. A hairline font at 300 weight is low-contrast even in pure black.

The 60-30-10 split

A simple rule that keeps menus from looking like a paint sample:

60% — your background. One calm color. Usually near-white or near-black.
30% — your text and structure. Category titles, dish names, separator lines.
10% — your accent. One color, and only one.

Use the accent for things you want tapped or noticed: the "Add" button, a "Chef's pick" tag, the active category chip. The moment the accent appears on five different things, it stops meaning anything. An accent color everywhere is the same as no accent at all.

What colors actually do on a menu

Strip out the folklore and this is what's left, which is still useful:

Warm colors (red, orange, terracotta) pull the eye. Not because they make people hungry, but because they're loud next to a calm background. Use them to point, not to decorate.
Green reads as "fresh" and "plant-based" because we've all been trained by supermarket packaging. It's cultural, but it's real.
Dark backgrounds read as expensive. Steakhouses and cocktail bars aren't dark by accident. If you're premium, a dark menu earns you a bit of price headroom for free — and that's the same logic behind pricing and perceived value.
Your brand color is not automatically your menu color. A neon-pink brand can still have a near-white menu with neon-pink buttons. Brand is the accent, not the wallpaper.

The dim room problem nobody plans for

Here's a real scenario. Your menu is a bright white page. It's 9pm, the lighting's low, the guest is at a candlelit table. They scan, and their screen turns into a flashlight in their face. It's uncomfortable, and it makes your restaurant feel less warm than it is.

Modern phones are mostly set to dark mode by default now. If your menu ignores that and blasts white, you're fighting the guest's own settings. Two options: build a dark version of your menu, or at least drop that "white" from pure #FFFFFF to a soft off-white. Small change, noticeably kinder at night.

And test in the other direction too. Terraces exist. Take your own phone outside at midday and see if your menu survives the sun.

Fonts: readable beats fancy, every time

A script font is a promise to your guest that they will squint. Save it for your logo and your restaurant name — not for 40 dish names.

Sizes that actually work on a phone

Start here and adjust to taste. These are phone sizes, not laptop sizes:

Element	Size	Weight
Category title	20–24px	Bold
Dish name	17–18px	Semi-bold
Description	14–15px	Regular
Price	16–18px	Medium
Portion / volume label	12–13px	Regular

Two things to hold onto here.

16px is the floor for anything people have to read. It's the browser's own default body size. Go under it and guests start pinch-zooming, and every pinch is a tiny reason to give up and just order the thing they always order.

Hierarchy is about the gaps, not the sizes. If your dish name is 17px and your description is 16px, they read as one grey blob. Make each step down clear — a couple of pixels and a weight or color change. A guest should be able to scan only the bold names, ignore everything else, and still navigate your whole menu.

Two fonts. That's the limit

One font for headings, one for body. Or honestly, one font in two weights — that's a completely respectable menu.

Some practical rules:

Skip the script and blackletter fonts for dish names. They cost you readability and gain you nothing at 17px.
ALL CAPS is fine for short labels, terrible for sentences. "STARTERS" works. A caps dish description does not — we read word shapes, and caps flattens them all into rectangles.
Use real bold, not fake bold. If the font family doesn't include a bold weight, browsers fake it and it looks smeared on some phones.
Check the numbers. Some elegant fonts use old-style figures where digits sit at different heights. Cute in a novel, messy in a price column.
Line height around 1.4–1.5 for descriptions. Tight line spacing is the most common reason a menu "feels hard to read" when people can't say why.

The multilingual trap

This one bites restaurants in tourist towns. You design a beautiful menu in English, then add Dutch, German, or Turkish — and suddenly dish names wrap onto three lines and your whole layout breaks. Longer languages need more room. Some fonts don't even include the accented characters you need, and the browser silently swaps in a different font mid-word.

If you publish in more than one language, design the layout in your longest language, not your shortest. Arabic needs a proper right-to-left layout, not a mirrored patch. Check the whole thing on a small screen in every language you publish. Multilingual QR menus for tourists goes deeper on that, and how to translate your restaurant menu covers getting the words themselves right.

Spacing: the free upgrade almost nobody uses

If you only change one thing after reading this, change your spacing.

Here's the effect, and it's remarkably consistent: empty space around an item makes that item feel more expensive. Look at any luxury brand's website. Enormous margins, one product, a lot of nothing. Now look at a discount supermarket flyer — items crammed edge to edge, screaming. Same principle, opposite ends.

Your menu is doing one of those two things right now, whether you chose it or not.

The numbers to start from

Card padding: 16–20px. The space between your dish text and the edge of its card or row. Under 12px and everything feels cramped and cheap.
Category title to first dish: 24–32px. This gap is what makes a category feel like a new section instead of one endless list.
Between dishes: 12–16px, plus a light separator line if your background doesn't already separate them.
Page side margins: 16px minimum. Text running to the very edge of a phone screen is uncomfortable in a way people feel but don't name.

Space is also a selling tool

Spacing isn't only decoration — it's a way to say look here. Give your signature dish a bigger card, or its own block with real air around it, and it reads as special without a single "CHEF'S SPECIAL!!" badge. That's the polite version of upselling, and it works better than the loud version.

The reverse is true too. If you have a plate you'd rather not sell — high cost, low margin, but a regular would riot if it vanished — put it in the tight middle of a long list. It stays available. It stops being the star. Doing that on purpose is exactly what to do with worst-selling menu items.

Thumbs are fat and that's your problem

Anything tappable needs to be at least 44px tall — that's Apple's guideline, and Google's is 48px. That covers category chips, add-to-cart buttons, and any dish card that opens a detail page.

Also, remember where the thumb lives. Holding a phone one-handed, the easy zone is the bottom half of the screen. Sticky category navigation at the top is fine to read, but if a guest has to stretch for every tap, they'll stop navigating and just scroll — which means they see less of your menu, not more.

Price typography that doesn't start price-scanning

Price-scanning is when a guest reads down your prices first and picks a number, then works backwards to find out what food comes with it. It's the enemy. It turns your menu into a price list.

Layout causes it. Four fixes, all easy:

1. Kill the dotted leader lines. Those ......... running from the dish to the price are a highway for the eye. They exist to help you compare prices. Why would you help with that?

2. Don't right-align prices in a column. A tidy vertical stack of numbers is a shopping list. Put the price right after the description instead, or immediately under the dish name — attached to the food, not floating in its own lane.

3. Drop the currency symbol. A well-known Cornell study found guests spent noticeably more when prices were plain numerals ("24") instead of "$24.00" or the word "twenty-four dollars." The symbol is a small reminder that money is leaving. Your header already says what currency you're in.

4. Match the price to the promise. Prices ending in 9 ($14.99) shout deal — perfect for fast casual, wrong for a tasting menu. Round numbers with no decimals (24) whisper quality. Neither is better; a mismatch is what hurts. Premium styling with .99 prices makes guests feel like they're being worked.

One more thing while you're in there: be clear about whether tax is included. Nothing sours a good meal like a total that doesn't match the menu. If that's a question in your market, tax-inclusive vs tax-exclusive menu pricing has the details.

Photos: powerful, and easy to get wrong

Photos genuinely move orders on a digital menu. They also break menus faster than anything else on this list.

Some rules I'd stand behind:

All or nothing per category. A category where three dishes have photos and five don't isn't a menu, it's a ranking. The five will underperform, and not because they're worse.
One consistent crop and angle. Mixed portrait and landscape shots make an expensive kitchen look like a Facebook album.
Bad photo is worse than no photo. A dark, yellow, shot-from-above plate on a cluttered pass actively costs you money. If you can't shoot it properly yet, leave it out — menu photos for online ordering covers doing it right with a phone.
Watch the weight. A 4MB image per dish means a menu that takes six seconds to appear on café Wi-Fi. Guests leave. Keep images small and let the tool compress them.
Photos push everything down. Every image you add buries the rest of that category deeper in the scroll. Sometimes text-only is the higher-selling design, purely because guests see more dishes.

Structure: the design decision hiding inside your categories

You can pick perfect colors and still lose the sale in your category list.

Keep categories to 6–8 dishes. The common rule of thumb is around seven. Too many options and people freeze, or they retreat to the safe thing they order everywhere. A short list gets read properly; a list of 22 gets skimmed.

First and last get remembered. It's a well-documented memory effect: people recall the start and end of a list better than the middle. So put your best-margin, best-loved dish first in its category, and your second-best last. The middle is where the fillers go.

Category order is your whole layout. On a phone, category one is the top of the page. If Drinks come before Mains, you're selling drinks. Decide that on purpose.

Name categories in guest language, not kitchen language. "Small plates" beats "Garde manger." Nobody wants to feel stupid reading a menu.

Put allergens in the design, not in a footnote. A guest with a nut allergy who can't find the answer just orders nothing, or leaves. Icons or short tags on the dish itself work far better than a wall of text at the bottom — declaring allergens on a digital menu walks through it.

Accessibility is revenue, not charity

Two things worth knowing in 2026.

First, the money. A large share of your guests are over 50, and reading small grey text at arm's length in dim light is genuinely hard for them. Around 1 in 12 men has some form of color blindness — so if your only "unavailable" marker is a red tint, a chunk of the room can't see it. Design for them and everyone else benefits.

Second, the rules. Accessibility requirements for digital services have tightened. In the EU, the European Accessibility Act's requirements came into application in June 2025 and cover many consumer-facing digital services, including e-commerce. In the US, web accessibility complaints under the ADA are common for consumer businesses. Whether a QR menu counts, and to what degree, depends on your country, your size, and what your menu does — a simple menu and a full online ordering system aren't the same thing. Don't take my word for the rules where you trade: check with your national authority or a local advisor, because this area is changing quickly.

The good news is that the practical work is the same design work you'd want anyway: real contrast, 16px+ text, big tap targets, never using color alone to carry meaning, and text that a screen reader can read out loud (which a PDF or an image of a menu cannot).

Your menu is being read by machines now, too

New in the last couple of years, and worth ten minutes of your time. Guests increasingly ask an AI assistant things like "which places near me do a proper vegan brunch?" To answer, those systems read what's on your page.

They can't read a picture. They can't read a PDF very well. They read text.

So a real text-based digital menu with clear dish names, honest descriptions, and labelled dietary tags is now doing double duty — it sells to the guest on the phone and it's the thing an assistant quotes when someone asks. If your menu is a JPEG, you're invisible in that conversation. It's the same reason your menu should be on a page that search engines can crawl, not locked inside an app.

The 15-minute menu design audit

Grab your phone. Do this at an actual table in your actual dining room, not at your desk.

Scan your own QR code. Time how long the menu takes to appear. Over three seconds on café Wi-Fi is a problem.
Don't scroll yet. What's visible on that first screen? Is anything there something you actually want to sell?
Squint at it. Blur your eyes. The things that stay visible are the things guests see. Is that the right list?
Read a description at arm's length. Too small? Too pale? Bump the size and darken the text.
Check the contrast of description text against the background with a free checker. Under 4.5:1, fix it.
Count the dishes in your biggest category. Over 8? Split it or cut it.
Look at your prices. Column? Dotted lines? Currency symbols? Fix all three.
Tap everything with your thumb, one-handed. Anything you have to aim for is too small.
Switch your phone to dark mode and reload. Does it still look like your restaurant?
Walk outside into daylight and read it again.
Switch to every language you publish and check that nothing wraps or breaks.
Hand your phone to someone who's never seen the menu. Say nothing. Watch where they stop and where they give up. That last one is worth more than the other eleven combined.

Common mistakes I see over and over

The PDF menu. No search, no zoom, no accessibility, no analytics. It's the single biggest one.
Grey text on white because it looked classy in the design tool.
A different accent color per category. Rainbow menu, zero hierarchy.
Every dish crammed together to "fit more above the fold." Fitting more isn't the goal. Selling more is.
Photos on some dishes only, which quietly demotes everything else.
A logo that eats the first screen. Guests know where they are. They scanned your table.
Designing on a laptop. Almost every guest is on a phone. Design there.
Setting it once and never touching it. A menu design is a hypothesis, not a monument.

How to know if it worked

Design changes are guesses until you check. Give any change two weeks, then look at:

Which dishes got ordered more. Best-seller and worst-seller reports, before and after.
What guests looked at but didn't order. This is the sharpest signal in the whole business, and design fixes a lot of it — viewed but not ordered unpacks what each pattern means.
How deep people scroll. If almost nobody reaches category five, category five is the problem, not the dish.
Average ticket. Better hierarchy and clearer add-ons usually show up here first — see how to increase average ticket.
Add-on attach rate. If your extras are hard to see, they don't get added.

Change one thing at a time if you can. Change six and you'll never know which one worked.

Frequently asked questions

What's the best color for a restaurant menu? There isn't one. There's a best contrast: text at 4.5:1 or better against its background. Pick a calm background (near-white or near-black), one accent color for buttons and tags, and stop there.

What font size should a digital menu use? 16px minimum for anything guests read, 17–18px for dish names, 20–24px for category titles. Anything smaller means pinch-zooming.

Do red and yellow really make people hungry? The evidence is much weaker than the internet suggests. Warm colors do pull the eye, which is genuinely useful — just don't expect the color itself to sell a dish.

Should I show photos of every dish? Every dish in a category, or none in that category. Mixed coverage makes the photo-less dishes look like the ones nobody orders.

Is it bad to put the currency symbol on prices? Plain numerals tend to perform better — a Cornell study found guests spent more without the symbol. It's a small effect, but it's free.

How many items should a menu category have? Six to eight. Long lists get skimmed and push guests toward the safe familiar option.

Do I need to hire a designer? For colors, fonts, and spacing on a digital menu, usually no. Any decent QR menu tool exposes these settings, and the audit above catches most of what a designer would flag. Save the budget for photography, which is much harder to do yourself.

A note on the tools

You don't need design software for any of this. Most digital menu platforms let you set these directly. Tabres, for example, has a menu designer with 11 color controls, 5 font-size controls, and 2 spacing controls — page and card backgrounds, category and dish text, price and description colors, separator lines, plus the exact category-to-product gap and card padding this article keeps going on about, with a live preview beside it. It's free, with no per-branch fee, and our reasoning for that is public.

Use whatever tool you like. The principles above work anywhere — and if your current tool doesn't let you change contrast, text size, and spacing, that's a decent reason to look at other QR menu tools.

Good digital menu design isn't about looking designed. It's about getting out of the way. Readable text, real contrast, room to breathe, prices attached to food instead of stacked in a column, and your best dishes where thumbs actually land. None of that costs money. Most of it takes an evening. And unlike a printed menu, you can change it, watch what happens, and change it again next week — which is the real advantage of going digital and the one almost nobody uses. Scan your own menu tonight, at a real table, and be honest about what you see. Your guests already are.