Designing for screens: text size, contrast and viewing distance

Design each screen for the person furthest away who still needs to read it. That nearly always means much bigger text than looks right on your laptop, strong contrast between the words and whatever is behind them, and fewer things on the screen. Then check it on the real screen from the real spot, because a design on a laptop looks readable almost whatever you do to it.

Start with where people stand

Before you choose a font, picture the screen on the wall and the people looking at it. A menu board behind a cafe counter is read from the queue, a couple of metres back, by people with a minute or two to kill. They can cope with a dozen items in modest type. A window screen gets a second or two from someone on the pavement who hasn't decided to come in yet (and might be on the other side of the road), so it can carry one line, and that line needs to be huge.

So the first question for any screen is the furthest point someone needs to read it from. Go and stand there. You'll be back at that spot when the design is finished.

How big the text needs to be

There's no single number that works everywhere. It depends on the size of the screen and how far away people are, and on their eyesight, which you can't control. What I can tell you is that almost everyone's first design has text that's too small. On a laptop you sit half a metre from the canvas, so a price that looks generous there can shrink to a smudge on a 55 inch TV seen from across the room.

It helps to pick three sizes and stick to them. The headline should be readable from the back of the room. The main text (dish names, prices, class times) should be readable from wherever people normally stand to read it. Small print, if you really need it, is for people who walk right up to the screen, and anything that only works at that distance probably belongs on a paper menu or your website.

In the Casty layout editor you set Font Size on each text element, and the canvas matches the screen's resolution, 1920 x 1080 to start with. The editor shrinks that canvas to fit your browser window, so don't judge size by eye there. Use the preview, then look at the real thing.

Font weight matters nearly as much as size. Light and hairline weights look elegant on a laptop and break up on a screen across a room, especially on a cheaper TV. A regular or bold weight of a plain sans-serif font is the safe choice for anything people need to read, and the fancy script can stay in the logo. Casty lets you upload your own fonts, so your brand font can go on screen as long as it passes the distance test.

Contrast that survives a real room

Contrast is the difference in brightness between the text and what's behind it. Dark text on a light background works, and so does light text on dark. The trouble starts with mid-tones, like grey on teal or a pale brand colour on cream. They look fine in a brand guide and turn to mush on a screen with a window opposite.

Real rooms make it worse. Afternoon sun washes out a window screen, and in a pub the lights go down in the evening. Design for the worst hour of the day, which for a sunny window is probably mid-afternoon.

Photos behind text are where contrast usually goes wrong. A picture of a full English has light and dark patches all over it, and white text vanishes the moment it crosses the eggs. Keep the words off the photo, or put a solid panel behind them. In the layout editor, drag a Rectangle from Global Elements onto the canvas, set its colour, then right-click it and choose Send backwards until it sits behind the text.

Don't use colour as the only way to tell things apart, either. Some of your customers can't tell red from green, so a timetable that shows full classes in red and free ones in green needs the word "Full" as well. The class timetable in the Casty demo for Fitzroy Gym does exactly that. There's more on this in making screen content accessible.

Leave room at the edges

Some consumer TVs zoom the picture slightly and crop a strip off each edge, which is called overscan. The TV's picture size or aspect settings usually have an option to show the whole picture, and it's worth finding. Even then, keep text and logos a little way in from the edges.

Space between things matters too. A screen packed edge to edge with offers reads as noise from across a room, and people's eyes slide straight off it. Give the main message room and accept that some things won't fit. The fewer words you use, the bigger each one can be, and writing words for screens shows how to cut them down.

Build at the screen's real shape

Make each layout at the shape and resolution of the screen it's for. New layouts start at 1920 x 1080, and the Resolution setting in the editor switches to portrait and 4K sizes (the help page on designing a layout lists them). A wide layout squeezed onto an upright screen leaves everything smaller than it should be. If you're preparing pictures in another app, image and video sizes for HD and 4K screens has the pixel sizes.

Check it from the spot you picked

When the layout looks right in the preview, publish it, schedule it to the screen and go back to that spot. Read the screen as if you'd never seen it before. Can you read the smallest thing that matters, without squinting, in the time a customer would actually give it? If not, make it bigger or take something out.

Do it twice if you can, once in daylight and once in the evening. If you're not at the venue, you can request a screenshot from the Displays list to see what the screen is showing (the help page on sending commands to a screen explains how). A screenshot won't show you glare or distance, though. For that, somebody has to walk to the back of the room and look.