Designing readable F1 headlines for mobile screens

Most people see your graphic on a phone, in a noisy feed, for about a second. Here is what I learned making headlines in the Breaking News and Race Winner editors.

Aim for one glance

Broadcast lower-thirds are short for a reason. On a 1080-wide export viewed at maybe 350 CSS pixels wide in the feed, long sentences collapse into mush.

Patterns that worked:

• NORRIS / Takes pole in Austria
• HAMILTON / Joins Ferrari — confirmed
• WINNER with the driver name in the supporting line (winner tool)

Patterns that failed:

• Full press-release sentences in the headline
• All-caps paragraphs
• Tiny subtitles with thin tracking

Contrast over clever colour

Team presets give you strong backgrounds. Your job is to pick light or dark text so the headline still pops after Instagram’s compression.

Background	Prefer
Ferrari / Ferrari-like red	Light text
Mercedes silver / teal fields	Dark or light depending on the wash — preview on your phone
McLaren papaya	Dark text usually wins
Near-black grids	Light text only

If you squint and the word disappears, the feed will eat it.

Length vs auto font size

The breaking news editor scales type with copy length. That is helpful and dangerous: you can fit a paragraph, but the letters shrink until they look timid.

My rule: if the auto size feels small, cut words, do not accept the shrink.

Mobile checklist before export

1. Preview on the actual phone browser if you can.
2. Read only the headline — does the story survive without the subtitle?
3. Check the lower third of the frame; geometric overlays and safe zones matter.
4. Export PNG, then look at the file in Photos — not only the in-page preview.

Discord vs Instagram

Discord dark themes forgive slightly lighter text. Instagram’s bright UI chrome and aggressive rescale punish low contrast harder. When in doubt, design for Instagram; Discord will still be fine.

Related reading: How I recreated an F1 broadcast graphic and the Guide.