Map labels that don't fight the map

Labels are the part of an interactive map that quietly ruin everything. Each one looks reasonable in isolation; together they fight the map, fight each other, and turn a clean canvas into a wall of text. The worst part is that the failure is incremental — you don’t notice while you’re drawing, only when you come back two weeks later and realise nothing reads.

What follows is the labelling discipline that keeps a map readable as it grows from five regions to fifty.

Hide labels until the viewer has zoomed in enough to need them

The single biggest legibility win on a busy map is also the easiest: stop showing every label at every zoom level. At the city-wide view, show only the largest neighbourhoods. At the district view, add the medium ones. At the street view, show everything. The map renders faster, the eye has somewhere to rest, and the labels that doappear feel earned instead of overwhelming.

A simple rule: a label should never appear at a zoom level where it would be touching another label. If two labels collide at zoom 12, hide the less important one until zoom 13.

Label inside the region when you can, outside when you can’t

The default is to put the label in the geometric centre of the region. When the region is large enough and roughly convex, that works fine. When it’s small, narrow, or shaped like an L, the label either gets clipped or overlaps the boundary — both of which look amateur.

Three options when the inside-the-region default fails, in order of preference:

• Shorter label. “HQ” instead of “Headquarters”. The label that fits is better than the one that’s technically more accurate.
• Outside the region with a leader line. Two-pixel line, label sitting in nearby empty space. Looks intentional, reads cleanly at any zoom.
• Drop the label entirely and use a marker instead. Some regions are better represented as a point on the map than as a polygon with a name floating over it.

Pick one font, one size, one weight

A common mistake is using font weight and size to encode importance — big bold for “main” regions, smaller italic for “sub-regions”. The instinct is right (some regions are more important than others), but the implementation is wrong: the visual differences end up reading as noise, not hierarchy.

One sans-serif font, one size for region labels, one weight. Use colour and zoom-level visibility to communicate hierarchy instead. Important regions show up sooner as you zoom in; less important regions appear later. The eye reads it as a layered map, not a typographic essay.

Sans-serif. Always sans-serif.

Serifs are beautiful in long-form prose. They’re unreadable as map labels, especially on phones. Sans-serif fonts have higher x-heights (the height of lower-case letters relative to upper-case), more uniform stroke weights, and better spacing — all three of which matter when a label has to read clearly at 12px, half-occluded by a region boundary, on a 5-inch phone screen.

If you absolutely need typographic flavour somewhere, put it in the map title or header. The labels themselves stay boring on purpose.

Casing that survives a glance

Title Case (“Eastside Park”) reads better than UPPERCASE (“EASTSIDE PARK”) at small sizes because the ascenders and descenders give the eye anchor points. UPPERCASE looks formal but turns into a uniform blob below 14px. Use Title Case everywhere; reserve UPPERCASE for category labels in the legend, where the size is bigger and the formality is doing intentional work.

Halo your labels so they survive the basemap

A label sitting directly on top of a satellite image is half-readable on a good day and unreadable on a bad one. The fix is a halo — a thin (1–2px) outline around the text in the opposite colour of the label. White text gets a black halo; black text gets a white halo. The halo isn’t a stylistic choice, it’s a legibility floor; without it, you’re hoping the basemap underneath your label happens to be the right colour, which it never reliably is.

Most modern map renderers (including Turf-map.io) add a halo by default. If yours doesn’t, it’s worth turning on everywhere.

Markers carry their labels with them

Marker labels are different from region labels and need their own rules. They live to the right of the marker by default; they go above when there’s no room on the right. They’re slightly smaller than region labels because the marker itself is doing some of the identification work. They snap to a consistent offset (8px or 12px from the marker, never variable) so the eye doesn’t get visual noise from inconsistent spacing.

The most common marker-labelling mistake is putting the label directly on top of the marker. The marker disappears, the label feels floating, the click target gets confusing. Offset, always.

Labels are part of the data; treat them like data

A region label is content, not decoration. Spell it the way the public knows it. Update it when reality changes. Don’t use shorthand that requires backstory to decode. The label is the only thing some viewers will ever read about the region, so it has to do the work alone.

The boring discipline — short, sans-serif, one size, haloed, hidden until the zoom earns it — produces maps that read at a glance and stay readable a year later. Skip the boring discipline and you produce maps that look fine until they don’t.