How do you achieve an old-school look & feel for a basemap? What colors, fonts, or features define a retro or vintage map style? If you're wondering how to design a retro map in MapTiler Customize, keep reading!
Map color palette
The first thing you should focus on is the choice of colors. My tip is to start from deeper zoom levels and then adjust as you go up. I started from the Bright map style and zoomed in so that I could see buildings. Retro maps typically use pastel colors: variations of brown, beige, and dusty pink to imitate the aged and worn feeling.
To create additional colors in the same style, I use different opacity or lightness values.
The next step is the selection of features that should be included in the map. The Bright map style I started from is quite rich, so I decided to get rid of a few layers:
- Water offset
- River tunnel
- Tunnel path
- Ferry labels
- Oneway road
- Highway shields
- Building top
- Other POI
To reduce the number of POIs further, I went into the Amenity Data tab and included only bank, cemetery, library, park, post, and town_hall classes. I also removed all icons except for the star in Capital City labels and the circle in City labels.
Fonts and labels
What's typical for old-looking maps is the use of Serif fonts to imitate the look of traditional typefaces from the age of Johannes Gutenberg. In MapTiler Customize, you can choose from multiple Serif font families: Cinzel, Libre Baskerville, Merriweather, Noto Serif, PT Serif, and Volkorn.
Next, you should think about different font types to differentiate between labels or to create a hierarchy. For more important features, use Bold types; for emphasizing a difference, use Italic.
I used the following Merriweather types for label layers:
- Bold: Continent, Country, and Capital city labels
- Regular: City, Island, Town, and Road labels
- Italic: State, Place, Lake, Sea, and Ocean labels
- Light: Village labels
- Light Italic: River labels
For POI layers, I used Light Italic up to Zoom 16, then from Zoom 16 a classic Italic so that the labels are readable on top of the Buildings.
To differentiate between different kinds of labels, I also leveraged the letter spacing.
- 0em (none): Town, Village labels
- 0.1em: Lake, Sea, Lakeline, River, Island, Airport labels, and all POI layers
- 0.2em: Capital city, State, and City labels
- 0.3em: Continent and Country labels
- 0.4em: Road labels
You can also transform some of the labels to uppercase, which I did for Continent, Country, Capital city, State, Island, and Place labels.
For better readability, I added a halo to all labels, using #F9F1DC color, 80% opacity, width ranging from 1 to 1.5px, and a bit of blur.
Patterns and icons
Many old maps are easily recognizable by their imperfect paper texture and patina, indicating usage over the years. This feeling can be mimicked by creating an SVG seamless dot pattern designed in graphic software such as Inkscape.
The key here is not to make all the dots the same. You can start from perfectly symmetrical dots and then distort them randomly. The background needs to be transparent.
I tried to keep it simple with icons, as there are usually not that many on vintage maps. It is more common to have unique drawings alongside the actual map, but that would take a lot more work in Inkscape! I kept only star and circle icons for Capital cities and Cities. I recommend you keep these kind of icons around 15x15 px in size.
As we will be uploading the icons and pattern to MapTiler Cloud, this process will create a rasterized sprite. Because of that, you need to assign the desired colors beforehand. Compress all SVG files into one ZIP and upload it to your map. The Symbols upload is available when you close Customize and go to the three dots under the map.
For the pattern styling, I created two additional layers: The background pattern on top of the Background and the Water pattern on top of the Water layer and made their opacity 5%.
Now we have a styled Retro map! Check out your favourite locations or just zoom around and enjoy the blast from the past.