Justin O'Beirne

Justin O'Beirne of San Francisco, California. Essays, projects, and contact information.

✍️ ESSAY / DECEMBER 2010
Google Maps & Label Readability
Why are Google Maps’s city labels more readable than those of its competitors?

Clutter is not an attribute of information, clutter is a failure of design... fix the design rather than stripping all the detail out of the map.
EDWARD TUFTE

For months, I’ve been trying to figure out why Google Maps’s city labels seem much more readable than the labels on other mapping sites.

Google’s labels seem to pop much more than the other sites’ labels. Major cities also seem to stand out much more. And whenever you’re quickly scanning the maps, the label you’re searching for seems to stand out just a little sooner on Google Maps.

Take a look for yourself:

🔍 Click to Enlarge — The exact same area on Google Maps and Bing Maps. Notice how Google’s city labels seem easier to read than Bing’s. And how they also seem less cluttered.

 

🔍 Click to Enlarge — The same area on Google Maps and Yahoo! Maps. Notice, once again, how Google’s city labels seem easier to read than Yahoo!'s.

 

This essay will investigate the reasons behind the superior readability of Google Maps’s city labels.

 

*   *   *

 

LABEL DENSITIES?

At first, I assumed that Google Maps was more readable because it just had fewer city labels than the other sites. But this isn’t the case — and Google’s label density isn’t much different from the other sites:

🔍 Click to Enlarge — If you count all the city dot icons appearing entirely within the image above, you’ll find that Google displays 86 city labels.

 

🔍 Click to Enlarge — On the exact same area and zoom, Bing shows 91 city labels—only five more than Google.

 

🔍 Click to Enlarge — Yahoo!, meanwhile, shows 83 city labels—just three fewer than Google.

 

As you can see from the maps above, there’s not really an appreciable difference between the number of city labels on any of these sites. If Google’s superior label readability isn’t on account of it having fewer labels than the other sites, then what other reasons can account for it?

 

THE 3 UNIQUE EFFECTS THAT GOOGLE APPLIES TO THE TEXT OF ITS CITY LABELS

I’ve found that there are three unique effects that Google applies to the text of its city labels, and that these three effects seem to greatly enhance their readability:
 

1. White Outlines (that Completely Obscure all Background Data)

I can see you thinking it now: “Wait”, you say, “Doesn’t Yahoo! Maps also have white outlines around the text of its city labels?” It certainly does—but there’s a key difference: the white outlines of Google’s city labels are thicker, and you can’t see the maps’ background details (roads, rivers, etc.) behind them.

Look here at Google’s label for New York. Notice how you can’t see any roads or any other map details behind the “N”, the “e”, or any of the other letters:

 

Now contrast this with Yahoo!’s approach:

Similar to Google, Yahoo! also outlines the text of its labels in white—but Yahoo!’s outlines are much thinner than Google’s. And unlike Google’s labels, the map’s roads are visible behind Yahoo!’s, making them more difficult to read.

Yahoo!’s decision to allow background map information to remain visible underneath its city labels harms their overall legibility. Individual letters are broken up by other dark lines, forcing users to give a second look to many labels. I, myself, find that whenever I’m looking at Yahoo’s maps, I’m often deciphering labels—instead of simply reading them.

Let’s see what happens to Yahoo’s map if we enlarge the white outlines of its city labels:

🔍 Click to Enlarge — A world of difference ensues when we enlarge the outlines of Yahoo! Maps’s city labels. Look at how much more readable the map becomes (especially around New York City) with the enlarged outlines. Clearly, Google’s on to something here.

 

2. A Greater Number / Diversity of Label Classes

In addition to the thicker white outlines, Google typically uses more classes of city labels, at a time, than the other two sites:

🔍 Click to Enlarge — Google uses four different types (or classes) of city labels on the map above.

 

🔍 Click to Enlarge — In contrast to Google, Bing uses only three classes of city labels on the map above.

 

🔍 Click to Enlarge — Like Bing, Yahoo! also uses only three classes of city labels on the map above.

 

With Google’s use of an additional label class, fewer city labels look alike, creating an expanded hierarchy of labels. This expanded hierarchy, in turn, allows smaller cities to fade into the background, while promoting larger cities to the foreground. This causes the larger cities (often used as reference points) to stand out much more, making the map more readable as a whole.

 

3. Different Label Colors (i.e., Smaller Labels are Grey, Larger Labels are Black)

While the primary difference between each mapping site’s city label classes is their size, Google takes this one step further by also using color to differentiate its city label classes. In that, the smallest city labels on Google’s maps are significantly lighter in color than the largest ones. These lighter labels, in turn, enable smaller cities to fade into background, while allowing the larger cities to stand out.

Notice the comparatively lighter color given to Google’s “Class 4” labels:

On the surface, the effect of these lighter labels might not seem that drastic—but look what happens when we make Bing Maps look a little more like Google Maps (we’ll give Bing a fourth class of labels, with lighter text than the other three classes):

🔍 Click to Enlarge — Here we take two of Google’s techniques—a fourth label class, with lighter text and smaller fonts—and apply them to Bing’s map. The result is nothing short of astonishing: the map instantly becomes less cluttered, and all without removing any of its detail. In fact, by adding a fourth class of city labels, we’ve arguably added even more detail to the map. (The fourth label class I created, above, is comprised of all of the map’s cities with populations fewer than 50,000.)

 

🔍 Click to Enlarge — Zooming in once, the changes are even more dramatic.

As you can see, Google’s use of a fourth label class, combined with the effect of lighter text, seems to serve as a far better, and even more visually appealing, way of organizing information on its maps. It’s clear that part of the reason why Google’s maps are so readable is that the labels of smaller cities are subdued, making the maps seem less cluttered.

Let’s investigate a few more tricks that Google uses to enhance the readability of its maps…

 

OTHER VISUAL TRICKS

Beyond the three effects that Google applies to the text of its city labels, Google also seems to apply a few interesting visual tricks to its maps, as well:
 

VISUAL TRICK #1: Label Decluttering Outside of Metro Areas

For several months now, I’ve noticed that Google shows more cities on its maps of Iowa than on its maps of Illinois, and while this doesn’t happen on every zoom-level, it happens on quite a few:

🔍 Click to Enlarge — On Google Maps’s seventh zoom-level, 68 Iowa cities are shown, while only 41 Illinois cities are shown.

This struck me as odd considering that Illinois is both larger than Iowa (in terms of land area) and has many more cities than Iowa:

In trying to make sense of this, I noticed that Iowa is uniformly covered with cities, while Illinois is not: central Illinois is uniformly covered with cities, but there are portions of the maps immediately outside of Chicago and St. Louis that are relatively devoid of cities.

I then closely examined other states and noticed that many of them with large metro areas also had comparatively fewer cities on the maps. Even more interesting, though, I discovered that pretty much every major U.S. metro area has a ring of white space immediately outside of it on the maps.

A few examples:

ATLANTA

 

MINNEAPOLIS / ST. PAUL

 

ST. LOUIS

Interesting, isn’t it?

These white space rings outside of major cities are even more apparent when you remove everything else off the maps using Google Maps API 3:

 

ST. LOUIS

 

ATLANTA

 

DALLAS / FORT WORTH

It seems that by removing cities immediately outside of major metro areas, Google is actually making these metro areas stand out even more on the maps. This, in turn, makes it easier for many users to navigate the maps, because they’re often using major cities as reference points while browsing. In any event, the removal of cities immediately outside of large metro areas also makes the maps appear less cluttered.

 

VISUAL TRICK #2: Absence of City Clusters

Unlike some of the other sites, Google also seems to avoid clustering cities closely together. Revisiting some of the images from earlier, notice the distribution of cities on Google, compared to Bing:

🔍 Click to Enlarge — Look at how Bing clusters cities together, especially close to Washington, Baltimore, Philadelphia, and throughout Connecticut. In contrast, Google seems to use larger spacings between cities, giving them room to breathe.

The relative lack of city clusters on Google’s maps (especially close to major cities) seems to make the overall map easier to read.

 

CONCLUSION

Google uses a variety of techniques and visual tricks to make its city labels more readable than those of its competitors. From the use of additional label classes to label decluttering outside of major cities, Google has clearly put significant thought into how it displays the labels on its map. I have no doubt that little touches like these are among the many reasons why Google has quickly become the web’s most popular mapping site.


🏠 Home  ·  ✍️ Essays
Copyright © 2010–2017 Justin O’Beirne