Continental

A Symbol Font for Europe

Overview

Continental is a specialized web font. It doesn't contain the typical
letters and characters of a standard font; instead, its symbols are
maps, specifically maps of the countries of Europe. Continental makes
it easy to include these maps within web pages. Include the font like
any other web font, and then use standard HTML and CSS to create maps.
No Javascript and no complicated API calls are necessary. Continental
is not a replacement for a mapping service like Google Maps. It can't
provide directions, or traffic conditions, or even satellite images.
But if you're creating simple diagrams or visualizations that include
maps, Continental may be able to help.

Using the Font

Continental isn't (yet) available in any of the web font services,
so you'll have to host it on your own web server. First you'll want
to get the code from Github. Fork if you like, or simply download
the master branch as a zip file.

The font itself is in the fonts folder.
There are four different formats which should cover all possible browsers
(even going back to IE6).

The css folder contains the
continental.css style sheet.
You can either include this style sheet directly in your pages,
or you can combine it with your other style sheets. By default
the styles give priority to the SVG font format because Windows
systems tend to render that more format more accurately. The
SVG file is much larger, however; if you'd rather optimize for
network performance instead of display quality, you can edit
continental.css to remove the
extra references.

Finally, there's a js folder with a
Javascript file for supporting IE6 and IE7. If you have to support
those browsers, you can include that file in your pages. Please use a
conditional comment so that other browsers don't see it. The
Javascript conflicts with the CSS styles, plus it really slows downs
performance.

Once you've installed the appropriate files on your server and added
references to them in your web pages, using Continental is a piece of
cake. Whenever you want to show a country map, simply include the
following markup:

<span class="map-XX"></span>

Instead of XX use the
ISO 3166-1
two-letter abbreviation for the country you wish to show. Wikipedia has a
complete list
of those abbreviations. You can also use the class
map-eur to get a map for all of Europe.

Note: The map-eur symbol is very
complex (with all those Norwegian fjords, Greek islands, etc.
combined into a single glyph), and most browsers take several seconds
to render it. You might want to take extra steps to deal with any
performance issues that this delay could create. As an alternative,
you can simply combine all the countries in your markup (see next
section). The browsers that have problems with the
map-eur symbol don't seem to
have problems with all 51 other symbols, even when they're combined
on the page.

Each map is a single character, so you can apply CSS styles just like you
would to any text. Set the color, size, text shadows, etc. The font doesn't
include variations such as bold or italics, however, so keep the
font-style and
font-weight normal.

Check out the next section for some examples.

Examples

The font's design allows you to create maps by stacking individual country symbols on top of
each other. An easy way to do that is to start with a container tag and give that element a
position of relative.

.map-stack {
position: relative;
}

Within that element each individual country symbol can be give a
position of
absolute and the same
top and left coordinates.
That will overlay each country on top of the one before it.

.map-stack > [class*="map-"] {
position: absolute;
top: 0;
left: 0;
}

Of course, you can style the countries individually. Perhaps you might set
the base color of the entire European map to lightgray
and then individual countries worthy of highlighting to
steelblue.

With those styles, creating the map is simple. Here's an example showing
the countries that have adopted the Euro currency.

Reference

Here are all of the individual glyphs in the font. (At this size it's
hard to see some of the microstates, but they're there if you need them.)

Andorra

class: map-ad

Albania

class: map-al

Austria

class: map-at

Bosnia

class: map-ba

Belgium

class: map-be

Bulgaria

class: map-bg

Belarus

class: map-by

Switzerland

class: map-ch

Cyprus

class: map-cy

Czech Republic

class: map-cz

Germany

class: map-de

Denmark

class: map-dk

Estonia

class: map-ee

Spain

class: map-es

Finland

class: map-fi

Faroe Islands

class: map-fo

France

class: map-fr

Georgia

class: map-ge

Guernsey

class: map-gg

Greece

class: map-gr

Croatia

class: map-hr

Hungary

class: map-hu

Ireland

class: map-ie

Isle of Man

class: map-im

Iceland

class: map-is

Italy

class: map-it

Jersey

class: map-je

Liechtenstein

class: map-li

Lithuania

class: map-lt

Luxembourg

class: map-lu

Latvia

class: map-lv

Monaco

class: map-mc

Moldova

class: map-md

Montenegro

class: map-me

Macedonia

class: map-mk

Malta

class: map-mt

Netherlands

class: map-nl

Norway

class: map-no

Poland

class: map-pl

Portugal

class: map-pt

Romania

class: map-ro

Serbia

class: map-rs

Russia

class: map-ru

Sweden

class: map-se

Slovenia

class: map-si

Slovakia

class: map-sk

San Marino

class: map-sm

Turkey

class: map-tr

Ukraine

class: map-ua

United Kingdom

class: map-uk

Vatican City

class: map-va

Europe

class: map-eur

License

The Continental font is licensed under the
SIL Open Font License
and is free for commercial and non-commercial use with no restrictions or
constraints.

The supporting files (CSS and Javascript) are products of the
icomoon.io web app and are
licensed under the open source
MIT license.

In a nutshell, you're free to use Continental however you'd like, in
free or commercial projects. You don't have to include any
attribution, though one is always appreciated. If you do use Continental,
and can send me a note, I'll add
your project to the list of examples.

Acknowledgements

Even though my name is in the footer, this project would not have been possible
without a lot of other folks.

First and foremost, thanks to Ben Markowitz.
As soon as I saw his cool Stately font,
I knew I had to try my hand at it. (I do hope he understands that imitation is the
sincerest form of flattery.)

Of course Continental wouldn't be possible without maps. For those I thank
Marcin Floryan
for his contribution
to Wikimedia Commons.

Bohemian Coding makes the best web
design app in the world: Sketch 2.
Sketch 2 made it easy to generate individual country files from the complete map.

Keyamoon's awesome
icomoon.io has all the tools you need to create
perfect symbol fonts for the web. The technology is top-notch, and the
web app is a joy to use.