Designing Transit Maps

Ilya Birman

ūüĒć Start typing to¬†search the book or¬†go¬†directly to¬†a¬†page by¬†its number

It is convenient to navigate not only by scrolling, but also with the arrow keys:

 
between important places
Shift
between
spreads
Ilya Bir­man

Designing
Transit
Maps

Bu­reau Gor­bunov Pub­lish­ing
2019
Ilya Bir­man
De­sign­ing Tran­sit Maps
Bu­reau Gor­bunov Pub­lish­ing, 2019

In¬≠tro¬≠duc¬≠ing a¬†new book re¬≠leased by¬†Bu¬≠reau Gor¬≠bunov Pub¬≠lish¬≠ing‚Ā†‚ÄĒa practi¬≠gal guide to¬†tran¬≠sit map de¬≠sign. The book speaks of¬†tran¬≠sit map his¬≠tory, im¬≠por¬≠tant prin¬≠ci¬≠ples of¬†their de¬≠sign, and how they evolve to¬≠gether with their net¬≠works. The au¬≠thor talks about tech¬≠niques: plot¬≠ting the lines, de¬≠not¬≠ing the stops, choos¬≠ing the fonts, and com¬≠pos¬≠ing the fi¬≠nal poster.

Table of contents

4
The details

Bends

Af¬≠ter Henry Beck has stopped work¬≠ing on¬†the Lon¬≠don Tube map, Harold Hutchin¬≠son car¬≠ried the work¬†on. Hutchin¬≠son has aban¬≠doned smooth line bends, pre¬≠fer¬≠ring to¬†just ‚Äúcrunch‚ÄĚ the lines at¬†the turns.

This is a very bad map. The frac­tures is not the only prob­lem with it, but is one of the most prominent.

About Henry Beck:

Henry Beck, 1933

Turns must be smooth.

Turns must be vis­i­ble, not ob­scured by the des­ig­na­tions of trans­fer stations.

This is¬†counter‚ÄĎin¬≠tu¬≠itive: trans¬≠fers seem to¬†be¬†con¬≠ve¬≠nient ‚Äúpiv¬≠ots‚ÄĚ, and it‚Äôs nat¬≠ural to¬†want to¬†link them with straight line seg¬≠ments. But it‚Äôs im¬≠por¬≠tant to¬†make the whole route be¬†per¬≠ceived as¬†one line, not just in¬≠di¬≠vid¬≠ual seg¬≠ments be¬≠tween stations.

If¬†you frac¬≠ture a¬†line un¬≠der a¬†sta¬≠tion, a¬†bad gestalt oc¬≠curs: the color hints at¬†one re¬≠la¬≠tion be¬≠tween the seg¬≠ments; the con¬≠ti¬≠nu¬≠ity, at¬†an¬≠other. It‚Äôs easy to¬†get ‚Äúoff track‚ÄĚ.

For the color‚ÄĎblind, such map gets com¬≠pletely il¬≠leg¬≠i¬≠ble: it‚Äôs im¬≠pos¬≠si¬≠ble to¬†guess which seg¬≠ment con¬≠tin¬≠ues which line.

When the turns are vis­i­ble and lines al­ways pass straight through sta­tions, the eye fol­lows them easily.

This way, the lines stay leg­i­ble even with­out color.

About the angle grid:

When de¬≠sign¬≠ing a¬†geo¬≠met¬≠ri¬≠cal map, a¬†ques¬≠tion arises: may there be¬†a¬†dou¬≠ble or¬†triple turn? For ex¬≠am¬≠ple, when a¬†45¬į grid is¬†used, can you bend a¬†line at¬†a¬†90¬į or¬†a¬†135¬į angle?

A¬†90¬į turn is¬†com¬≠mon. But if¬†there is¬†only one such turn on¬†a¬†map, it¬†may at¬≠tract too much at¬≠ten¬≠tion and look as¬†an¬†in¬≠co¬≠her¬≠ence of¬†the de¬≠sign. If¬†there are sev¬≠eral of¬†them, they look fine.

A¬†135¬į turn is¬†ques¬≠tion¬≠able. One may ar¬≠gue that the de¬≠signer has plot¬≠ted the lines badly if¬†they need turn one of¬†them in¬†the op¬≠po¬≠site direction.

Some­times, for graph­i­cal unity, de­sign­ers con­struct the turn by putting two or three sin­gle ones ad­ja­cently. But this may make things look worse as well by ren­der­ing turns un­rea­son­ably clumsy.

Some­times, it’s pos­si­ble to hide the prob­lem by mov­ing some sta­tion to the mid­dle seg­ment of the turn, as shown on the next spread.

45¬į
90¬į. Fine, if¬†there is¬†more than one turn like this
135¬į. Questionable
2‚ÄČ√ó‚ÄČ45¬į. OK
3‚ÄČ√ó‚ÄČ45¬į. Too clumsy

On¬†my¬†Moscow Metro map, the 90¬į an¬≠gles are al¬≠lowed, but I¬†pre¬≠fer 2 √ó¬†45¬į.

‚ÄėOre¬≠hovo‚Äô sta¬≠tion is¬†put in¬†the mid¬≠dle a¬†turn seg¬≠ment to¬†jus¬≠tify its existence.

On¬†the 2004 Lon¬≠don Tube map, the frag¬≠ment of¬†the Hammersmith & City line af¬≠ter Liv¬≠er¬≠pool Street turns at¬†90¬į, but makes the next 135¬į turn to¬†Aldgate East in¬†three 45¬į steps.

On¬†the 2018 map, the same frag¬≠ment looks cleaner, with just one 45¬į and one 90¬į turn. This be¬≠came pos¬≠si¬≠ble af¬≠ter sig¬≠nif¬≠i¬≠cant changes in¬†the con¬≠fig¬≠u¬≠ra¬≠tion of¬†the sur¬≠round¬≠ing lines .

Sharper curve
Two distinct turns

When a turn is split into seg­ments, those seg­ments must be ap­par­ent, i. e. be of suf­fi­cient length rel­a­tive to the bend’s length. In the two left­most ex­am­ples, the bends are quite sharp, so the dou­ble turn looks conclusive.

Smoother curve
Go figure

If you make the bends smoother while leav­ing the seg­ments’ lengths the same, a dou­ble turn will look man­gled. You no longer see an ob­vi­ous mid­dle frag­ment, in­stead, you see a line drawn by a shaky hand.

You may make the mid­dle seg­ment longer, but then the turn will take even more space.

The of­fi­cial Moscow Metro map had such bad turn on the Lublinskaya line next to Trub­naya sta­tion. In­stead of a turn in two steps, there was a man­gled line.

In¬†the later ver¬≠sion, the flaw was fixed. Also, note a¬†nice jux¬≠ta¬≠po¬≠si¬≠tion of¬†two 90¬į turns.

Now let’s talk about how to draw the ac­tual bends.

Imag­ine you are draw­ing a line with your hand us­ing a brush of a cer­tain width. In this case, to make an abrupt turn you will need to in­ter­rupt your mo­tion. In the same way, the eye stum­bles upon such turn.

It’s bet­ter to at least make the line main­tain its width along the turn. Still, the turn is too abrupt.

A¬†sim¬≠ple way to¬†make a¬†turn smooth on¬†a¬†com¬≠puter is¬†radial rounding. In¬≠stead of¬†a¬†cor¬≠ner, an¬†arc of¬†a¬†cir¬≠cle is¬†drawn. The dot ‚ÄĘ rep¬≠re¬≠sents the cir¬≠cle‚Äôs center.

The larger the ra­dius of a cir­cle whose arc is used, the smoother the line and the eas­ier it is for the eye to follow.

But an overly large round­ing takes up too much space on a map, mak­ing it hulky. For a great ship, it is dif­fi­cult to manoeuvre.

When ra­dial round­ing is used, for graph­i­cal unity it’s bet­ter to choose a stan­dard ra­dius for the whole map.

Line bun­dles will re­quire an ex­cep­tion: if you use the same ra­dius for all lines, holes will oc­cur be­tween them.

To¬†re¬≠move the holes, you‚Äôll need to¬†‚Äúhar¬≠mo¬≠nize‚ÄĚ the round¬≠ings by¬†fitting:

  • to¬†the outer one, by¬†re¬≠duc¬≠ing the in¬≠ner ones;

  • to¬†the mid¬≠dle one, by¬†re¬≠duc¬≠ing the in¬≠ner ones and en¬≠larg¬≠ing the outer ones;

  • to¬†the in¬≠ner one, by¬†en¬≠larg¬≠ing the outer ones;

The more lines there are in a bun­dle, the more op­tions you have.

If you har­mo­nize the bends of the neigh­bor­ing bun­dles in dif­fer­ent ways, this will stand out.

Har­mo­nize the bends consistently.

Line diagram standard. Radii and angles
Transport for London

The Trans¬≠port for Lon¬≠don stan¬≠dards call for us¬≠ing 45¬į and 90¬į turns with ra¬≠dial round¬≠ing with a¬†ra¬≠dius of¬†a¬†triple line width.

In bun­dles, the curves should be fit­ted to the in­ner one, by mak­ing the outer ones larger.

There is¬†an¬≠other rea¬≠son to¬†make an¬†ex¬≠cep¬≠tion to¬†the ‚Äúone map‚Ā†‚ÄĒone ra¬≠dius‚ÄĚ rule.

When the ra¬≠dius is¬†fixed, the length of¬†an¬†arc is¬†pro¬≠por¬≠tional to¬†the an¬≠gle of¬†a¬†turn. A¬†45¬į¬†turn is¬†short, a¬†90¬į¬†turn is¬†longer, a¬†135¬į¬†turn is¬†too long.

It‚Äôs bet¬≠ter to¬†se¬≠lect an¬†ap¬≠pro¬≠pri¬≠ate cor¬≠ner ra¬≠dius for each an¬≠gle. On¬†the right, the ra¬≠dius for the 45¬į turn is¬†1,5 times as¬†big as¬†for the 90¬į turn. For the 135¬į turn, it‚Äôs 1,5 times smaller. That‚Äôs nicer.


Ai

Il¬≠lus¬≠tra¬≠tor‚Äôs ‚ÄėRound¬†cor¬≠ners‚Äô ef¬≠fect has a¬†prob¬≠lem. Only for the 90¬į turns it¬†uses the radii that you spec¬≠ify. On¬†the right, all lines have the same round cor¬≠ners set¬≠ting. How¬≠ever, only the yel¬≠low one is¬†ac¬≠tu¬≠ally built from an¬†arc of¬†that ra¬≠dius. As¬†you see, the 45¬į turn has a¬†much larger ra¬≠dius; the¬†135¬į turn, a¬†much smaller one.

True ra¬≠dial round¬≠ing is¬†achieved with the ‚ÄėLive¬†cor¬≠ners‚Äô tool, which ap¬≠peared in¬†the ver¬≠sion 17.1

With ra­dial round­ing, a line is con­structed by af­fix­ing three frag­ments to each other: a sec­tion of a straight line, an arc, and a sec­tion of straight line again. This is un­nat­ural: real ob­jects don’t bend like this.

When you bend a¬†steel cane or¬†a¬†shower hose, the cur¬≠va¬≠ture smoothly rises in¬†the di¬≠rec¬≠tion of¬†the cen¬≠ter of¬†the bend¬≠ing. It¬†is¬†im¬≠pos¬≠si¬≠ble to¬†say where ex¬≠actly the ‚Äúturn‚ÄĚ ends.

In¬†the be¬≠gin¬≠ning of¬†the chap¬≠ter I¬†said that frac¬≠tured lines look¬†bad. Lines with ra¬≠di¬≠ally‚ÄĎrounded cor¬≠ners are also frac¬≠tured in¬†a¬†way: once you see the joints be¬≠tween the arc and the straight sec¬≠tion, you won‚Äôt be¬†able to¬†‚Äúun¬≠see‚ÄĚ them.

To¬†smoothen the line in¬†a¬†nat¬≠ual way, you need to¬†pull its Bezier ‚Äúwhiskers‚ÄĚ in¬≠side the turn, and pull the tie points in¬†an¬†op¬≠po¬≠site di¬≠rec¬≠tion. It‚Äôs im¬≠por¬≠tant to¬†not overdo this: if¬†a¬†line starts to¬†look like a¬†mac¬≠a¬≠roni tube boiled too soft, make one step back.

When draw¬≠ing a¬†90¬į turn with ra¬≠dial round¬≠ing, the whiskers stick out about 56% of¬†the radius.

A¬†nice‚ÄĎlook¬≠ing nat¬≠ural curve is¬†usu¬≠ally achieved by¬†pulling the whiskers to¬†about 75%.

When we were look­ing at ra­dial round­ing, we dis­cussed that it was bet­ter to se­lect dif­fer­ent radii for the turns of dif­fer­ent angles.

The nat¬≠ural, hand‚ÄĎtuned bends will also need to¬†be¬†sep¬≠a¬≠rately ad¬≠justed for each type of¬†turn.

Radial

De­pend­ing on the an­gle grid used, you will need to draw by hand a num­ber of dif­fer­ent turn seg­ments. The larger the an­gle, the more pro­nounced is the dif­fer­ence be­tween ra­dial round­ing and nat­ural curves.

  • 30¬į

  • 60¬į

  • 120¬į

  • 150¬į

Natural

When us­ing nat­ural smooth­ing, the prob­lem of bun­dles man­i­fests it­self in a big­ger way.

As usual, if you nest the bends, holes ap­pear. But un­like with ra­dial round­ing, here, the holes can’t be elim­i­nated by just ad­just­ing the radius.

Here is an in­ef­fec­tual at­tempt to fit all lines to the yel­low one. In some places, gaps are still there; in oth­ers, the lines overlap.

If the tie points are po­si­tioned per­pen­dic­u­larly, you can make the over­lap much less noticeable.

Next, you can cheat by¬†putting the lines un¬≠der each other‚Ā†‚ÄĒno¬≠body will no¬≠tice the trick.

But if you have spac­ing be­tween the lines, you won’t be able to hide the imperfection.

You can tell that lines don’t ide­ally fit each other by look­ing at the shape of the white spac­ing. You will need to ad­just the bends even more carefully.

But let’s get back to the vari­ant with­out spac­ing. We have an­other prob­lem with it: the green line has fractured.

Let’s try to fix it and fit other lines to it. It’s al­most good now, but look at the blue line: its whiskers are not pulled into the an­gle enough, and so its bend looks too close to ra­dial. If you had more than four lines, the outer ones would be even worse in this way.

To per­fect the bend, you’ll need to pull the points of the outer lines far­ther from the turn to far­ther pull their whiskers into the an­gle. Now the bend looks good, and this vari­ant will work with a larger num­ber of lines.

We’ve dis­cussed the sit­u­a­tion where a whole bun­dle is mak­ing a turn.

But what if one of the lines goes straight? In this case, the round­ings dishar­mo­nize un­neatly. If we leave the blue line as if it just was the fourth in a bun­dle, the turn will look too large.

We may draw the bend as if it was the third in the bun­dle, and it will look neater.

An­other op­tion is to smoothen it the same way as the red one. Not too log­i­cal, but looks even better.

Or, we may stop think­ing of it as of a part of the bun­dle and smoothen it in­de­pen­dently, as a sin­gle line.

But the ideal so¬≠lu¬≠tion is¬†to¬†work‚ÄĎaround the prob¬≠lem by¬†sort¬≠ing the lines.

On the Aus­tralian trains map, the line is not drawn well: on the left, the spac­ing be­tween it and the blue line is of un­even width. It’s not ob­vi­ous how to sort the lines to avoid the prob­lem. But if you just make the green line’s round­ing smaller and no longer con­sider it a part of the bun­dle, it will look better.

Even more no¬≠tice¬≠able is¬†the prob¬≠lem on¬†the bus map for Riga. The turns look half‚ÄĎbaked: the de¬≠signer tried to¬†har¬≠mo¬≠nize them, but didn‚Äôt succeed.

Riga, Latvia

The bun­dles are nicely bent on this Chelyabinsk trams map.

The per­cep­tion of the whole map dif­fers de­pend­ing on the sharp­ness of its bends, so it makes sense to ad­just the smooth­ing when look­ing from a distance.

A map with smaller, sharper turns usu­ally looks more rigid, as­sur­ing, and mechanical.

In­creas­ing the turns size makes the map friendlier.

On¬†the other hand, the geom¬≠e¬≠try‚ÄĎness gets lost.

When a¬†map is¬†close to¬†its fi¬≠nal form, —Ėt‚Äôs time to¬†fine‚ÄĎtune the size and shape of¬†the bends. But when all of¬†them are hand‚ÄĎdrawn, chang¬≠ing each just to¬†see if¬†it‚Äôs bet¬≠ter to¬†the eye, is¬†too much work. Also, there is¬†no¬†way to¬†make sure that all the bends are drawn with¬≠out a¬†mistake.

That’s why it’s im­por­tant to be able to ad­just all the bends simulataneously.


Ai

Tip: make a sym­bol out of a turn. Ad­just the sym­bol to see how the change im­pacts the whole map. Here, I’ve drawn a twirl in­side the bends’s sym­bol, and the whole map in­stantly got twirls.

When there is no an­gle grid and a map is drawn by a free hand, the stan­dard for the bends qual­ity be­come even higher. The beauty that arises from con­sis­tency and uni­for­mity is achiev­able by mere carefulness.

But there is a dif­fer­ent kind of beauty: the one that arises from im­mac­u­late feel and abil­ity to main­tain ten­sion in lines. There is not recipe for this. Graphic de­sign­ers, and even more so, type de­sign­ers, re­fine this feel in decades.

Odessa Trams, 2016
Art. Lebedev Studio