How to design a map

Map design begins with the problem you’re solving. As you craft your vision, the solution is reached beyond the dance of designing and building and sometimes starting over. 

Learn about the four key design elements you should identify and customize to fit your product. While you have complete control over your map style—in fact, any feature can be customized—make updates sparingly. It is recommended you start customizing your map by changing: color, typography, iconography, and texture.

Armed with those design decisions, adhere to these four key design principles that will ensure your map is well-designed: contrast, hierarchy, density, and legibility. These principles shouldn't be applied in isolation, they’re complementary.

Dive into custom map design for free with Mapbox Studio—no experience required. Build and design a map to your exact specifications using the following map design elements and principles. 

What are the 4 key elements of map design?

You want your map to match your brand or complement your brand’s user interface. You can typically find these elements outlined in your style guide. Look for the fonts, colors, imagery, patterns, tone, etc. specific to your brand to help you make decisions about your map’s customization, and design.

1. Color

Color is used in design to attract attention, group similar elements, show meaning, and enhance aesthetics. We typically begin the design process with a color palette for each map, comprised of a cohesive group of primary and accent colors. This is an iterative process.

Colors will most likely grow and morph once you start designing and seeing what works together on your map. Just make sure your final map and palette are consistent and work harmoniously together. 

How many colors should you use when designing a map?

Use color conservatively. The eye can only process so much at a time, so a limited color palette is best. Depending on the complexity of your map design, between 10-12 colors is pretty standard for a full-body color palette. Also, consider a significant portion of the population has limited color vision, so style accordingly. 

Limiting your colors will also help with visual harmony. For example, many features related to navigation and transportation share the same blue hue: rail labels, highway shields, ferry routes, and even road casings for this purpose.

Do map color palettes need to be consistent?

Make subtle adjustments to your color palette while maintaining visual harmony. Achieve this by matching saturation and lightness across the different hues in your color palette. Saturation represents the level of intensity in the color or the dominance of the color. As you decrease the saturation, the hue becomes less vibrant and the color less dominating. At 0 saturation all hues become a colorless gray. 

2. Typography

Typography is one of the most important design elements of your map and can make or break the readability of your map. Labels, which represent most of the text you find in maps, are often only one to three words long and are displayed in very small sizes. With this constraint, fonts with taller x-heights, open counters, and no serifs usually work best on maps.

Your brand’s font may or may not work for your map style needs. In that case, choose a font directly from Mapbox Studio that works for your brand. Consider the font’s quality, readability, and personality.

Quality

High-quality fonts offer a variety of styles: Italics, Caps, Caps Italic, and Small Caps; weights: Ultra Light to Ultra Black and everything in between; and widths: Condensed, Narrow, Normal, Mono, and Expanded, just to name a few. You can leverage this variety to easily differentiate between labels and show hierarchy in your map styles.

Readability

Readability is about arranging words in a way that allows the reader’s eye to access the content easily and intelligibly. This skill takes time to hone, but here are a few stellar ways to greatly enhance the readability of your maps:

1. Diversity of label classifications. Design distinction into the classifications and properties available in your label data. For example, place labels offer classifications of cities, towns, villages, neighborhoods, and more. Create a system of treatment to distinguish this diversity.

2. Diversity of label colors. This can be subtly enforced by altering the saturation or value of the same hue. This works particularly for styling points of interest (POIs) to give distinction to categories of points, like cafes or schools having distinct colors. But keep it moderate.

3. Control the spacing. Letter spacing (often called tracking) adjusts the spacing between all the letters in a piece of text. This can help to make your labels look more open and inviting. The tiny type is made more readable by opening the letter spacing a bit. As with everything, exercise caution: tracking is often wildly overdone. Monitor your label width as this determines how many letters fit on one row before a line break occurs. Be especially mindful of this, especially when working with Bold, Black, or more heavy typefaces.

Personality

The personality of a typeface speaks to the voice and energy it exudes. The most popular styles of type are sans-serif, serif, and script. Sans-serif fonts work best on the web and mobile because of the lower DPI (dots per inch) on screens. There are three main types of sans-serif fonts: humanist, transitional, and geometric.

1. Humanist sans-serif typefaces mimic handwriting and evoke a feeling of warmth and personality. 

2. Transitional sans-serif typefaces have strong strokes and are more upright and uniform. They typically have an unassuming, authoritarian, and modern personality. 

3. Geometric sans-serif typefaces use geometric shapes to form the backbones of the letters, which creates a strict, objective, and universal feel.

3. Iconography

Map icons typically indicate points of interest or POIs. They can represent any type of location or business; from libraries to cafes to parks to museums to bus stops. The icons you use in your map should reinforce your brand and strengthen your map’s brand recognition and readability. Successful map icons must be widely recognizable even across cultures, as simple as possible, and legible at sizes as small as 11px.

Mapbox has created a collection of pixel-aligned point of interest icons, known as Maki, made by cartographers for cartography. Maki aims to be the most high quality, consistent, and comprehensive point of interest icon set possible. Maki icons are designed simply and work seamlessly with Mapbox Studio

4. Texture

Texture is an added bonus in your map design toolkit. It represents the perceived surface quality of a design piece. Patterns can be added to map features to differentiate or blend elements. They can also stand independently as a texture for the map or full background patterns.

Textures need to be seamless. A seamless texture is an image or pattern that can be placed side-by-side with itself without creating a noticeable boundary between two copies of the image. Textures should also be small because they are repeating patterns. Typically they are between 16x16, 32x32, or 64x64 pixels.

What are the 4 key principles of map design?

Core map design principles form a system for seeing and understanding the relative importance of the content on the map and on the page. Without these applied principles, map-based communication will fail. 

1. Contrast

Human beings are wired to notice differences. This is what makes contrast such a powerful design principle in map design. Contrast attracts attention and draws the eye. This separates features from the surrounding elements and can instantly create emphasis and interest.

In addition to attracting attention, contrast establishes boundaries between elements.

2. Hierarchy

Hierarchy helps viewers focus on what is important while identifying patterns. A strong, visible hierarchical system is one of the most effective ways to increase comprehension. Color and scale are two major design elements you want to finesse to leverage the visual hierarchy of your map style.

3. Density

Although map features may be available at a certain zoom, features should not be styled based on availability. Revealing too much information at a certain zoom may cause confusion or dilute your map’s focus. As you design your map, consider how the density of information may increase the visual weight of the map, disturbing the visual hierarchy.

4. Legibility

To be legible is to be easily read which is of utmost importance in map design so the user can easily understand how to navigate the represented space. Legibility of most map features depends on color and size, and in addition to labels and text, can be iconography too. Icons must be designed simply enough to recognize small sizes and offer good contrast against the background.