Which font should we use for shields?

[claysmalley]

Seeking community feedback on shield fonts.

It's become clear from numerous discussions that we'll need to decide on a single font for shields to ensure consistency across platforms. Some prior pull requests have attempted to address this (#538, #544, #768), but questions remain unresolved about what style we want to emulate. Do we want to find a font visually similar to Highway Gothic? Or might another font better match the metrics we're looking for? I brainstormed a list of ideal characteristics for a shield font:

• condensed
• sans-serif
• numeral 1 has no bottom serif
• numeral 1 is at most ⅔ the width of other numerals (i.e. 111 fits in a two-digit shield)
• numeral 3 has two strokes, not three (no > shape on top)
• numeral 4 is closed
• numeral 7 has two strokes, not three (no serif on top)
• looks like it belongs on an American road atlas

I looked through Google Fonts and found 8 fonts that meet most of these criteria. None of them are perfect, but I've made a summary of their pros and cons. Which ones are your favorites? Which ones should be removed from consideration? What stylistic direction should we aim for?

Font	Links	Pros	Cons
Antonio	demo, shield test		Missing Greek/Cyrillic
Cabin Condensed	demo, shield test	0, 1 and 8 are close matches to Highway Gothic; has National Geographic vibes	2 and 4 are pointy; missing Greek/Cyrillic
Encode Sans Condensed	demo, shield test		4 is open; missing Greek/Cyrillic
Fira Sans Extra Condensed	demo, shield test		1 a little too wide, 4 is open
Overpass	demo, shield test	Closest match to Highway Gothic	Not condensed; missing Greek
Pathway Gothic One	demo, shield test		Banner text is very narrow; missing Greek/Cyrillic
Roboto Condensed	demo, shield test	Close match to Noto for internationalization	1 too wide (tabular numerals)
Ubuntu Condensed	demo, shield test		1 too wide (tabular numerals)
Oswald (suggested by @1ec5)	demo, shield test		Missing Greek
Roboto Condensed (flattened proportional nums)	demo, shield test	Close match to Noto for internationalization
Noto Sans Condensed (flattened proportional nums)	demo, shield test	Matches rest of map style; seamless internationalization

[zekefarwell]

Wow! Thank you for putting all of this together. That is good list of ideal characteristics. I would add one more:

• The tail of the 6 and 9 should point off at an angle rather than looping around too much

Like this:

Not like this:

[1ec5]

I disagree that this needs to be a strict requirement – we aren’t designing signage for low-light conditions. But Pathway Gothic’s tails are rather extreme, so I would still shy away from it on that count.

[zekefarwell]

I also don't think it needs to be a strict requirement, just one of the ideal characteristics to aim for. I don't expect we'll end up with a font that meets all these ideals, but I care a bit more about this detail than some of the others. It's also not a binary choice. For example Roboto Condensed has tails that curve more than Highway Gothic's (which are nearly straight):

But it's a closer match than Pathway Gothic's more pronounced scoop:

[1ec5]

I think the problem with the tails on Pathway Gothic is that they make the glyphs too dense at a small size. That font isn’t really designed for fine print. If a font manages to keep the density to a minimum even as it curves the tails, then I care a lot less about the tails.

[zekefarwell]

Yes overly dense is a good description of the curvier 6 and 9 tails. I find it can easily make 6, 9, and 8 all looks too similar. Oswald is an improvement over Pathway but I think less of a curve makes the numerals more distinct and easier to parse at a glance.

[1ec5]

I think I could get used to the 6s and 9s in either Roboto Condensed and Noto Sans Condensed. The apertures on Roboto (also on 2 and 5) are slightly more closed, which lends a more formal appearance. But it’s very much in the area of diminishing returns at this point.

[zekefarwell]

Overpass looks great but the argument for a condensed font is strong so I think this one should probably be eliminated (perhaps Red Hat will sponsor a condensed variant in the future).

Of the other options Cabin Condensed, Ubuntu Condensed, and Roboto Condensed look the best to me (in order of preference). They each have minor drawbacks, but I don't find them very noticeable at the font size we are using.

I find the drawbacks of Fira Sans Extra Condensed and Encode Sans Condensed a bit more noticeable, but these two seem like they would also work fine.

Pathway Gothic One and Antonio are the ones I like the least. They both deviate from Highway Gothic numeral shapes much more noticeably.

[claysmalley]

(perhaps Red Hat will sponsor a condensed variant in the future).

I can see their headquarters out my window. Should I go over and knock? 🤔

[zekefarwell]

overpassfont.org, so proud of its eight weights, true italics, and monospace! Wouldn't you guys just love to add condensed to that list? 😉

[1ec5]

Ironically, Highway Gothic comes in plenty of pitches, but Overpass is the only reproduction that has a half-decent character repertoire.

[1ec5]

I think it’s fine if the font deviates from Highway Gothic numeral shapes to some extent – these are icons on a map, not signs. However, Antonio, Encode Sans, and Fira Sans are all too heavy. At these small sizes, we need a bold font weight, or maybe a medium, but not a heavy or black font weight.

[claysmalley]

Font weight is now 500 for Antonio, Encode Sans and Fira Sans.

[ZeLonewolf]

We'll still need to deal with some residual pixel pushing, but I was interested to note some shield width issues we'll also have to resolve (example from #947):

[claysmalley]

The pixels we push depend on which font we choose, so I plan on adjusting all the text constraints in a future font-changing PR.

[1ec5]

We already have extreme shield width problems with nonrectangular shields: #834. You just haven’t been noticing it as much with the less common fonts on your system. Regardless, we need to make sure that two-digit heater shields (Interstate, U.S., circle, California, etc.) have a roughly 1:1 aspect ratio. This has been the primary motivation for a condensed font.

[1ec5]

Part of the problem is that the constraint code wants to scale the text to fit the shield, rather than the other way around. Automatically scaled text makes sense at the extremes, and for some shield designs perhaps, but there’s no good reason for the 1- and 2-digit shields to have differently sized text, or for two 2-digit shields to have differently sized text as in the screenshot above.

[zekefarwell]

I agree. Sizing shield blanks to fit around 2, 3, and maybe 4 digits at a specified font and font size will give a more consistent looking result. Shrinking the font size to fit when the ref gets longer than that makes sense though.

[1ec5]

I assume this font will also apply to banner text, so we’ll need to consider how a variety of banners look with each option. In particular, four-letter banners still need to fit over two-digit shields.

[1ec5]

Antonio, Cabin, Encode, and Pathway all lack Cyrillic and Greek glyphs. Although we can rely on automatic browser font fallbacks, this will result in some discrepancies in Eastern Europe and Central Asia where Latin letters coexist with Cyrillic and Greek letters on shields; all three scripts have similar enough letterforms that it’ll look somewhat jarring.

[1ec5]

The 0 in Cabin Condensed is too wide. We want a variable-pitch font so that 1 can be a bit narrower, but I don’t think we want 0 to be wider than derivative glyphs like 8.

[claysmalley]

As pretty as Cabin Condensed looks, it's hard to work with when numeral widths are all over the place.

[zekefarwell]

I hadn't noticed the wider zero. That is a good point.

[Scott5114]

Cabin Condensed has an open license. If the only issue with it is the 0, it wouldn't be too hard to tweak it in FontForge to be the same width as the 8. Of course, that would mean Americana would have to host and maintain the modified font files, rather than simply pointing to Google's version.

[1ec5]

I think it would be a great idea to host whichever Web font we ultimately decide on, since we’re already hosting the SDF font for map labels in osm-americana/fontstack66. There isn’t much performance benefit to using a common CDN for the fonts anyways. That said, I still think a grotesque sans-serif would fit the overall map’s look and feel and any fallback fonts much better than Cabin Condensed, attractive as it would be for certain labels.

[zekefarwell]

I agree. Self hosting the chosen font is definitely the way to go these days. Pulling directly from Google Fonts is great for these initial comparisons and testing though.

[1ec5]

I’d like to add Oswald for consideration: an understated sans-serif, condensed, not too heavy, full complement of Latin/Cyrillic/Greek glyphs, narrow 1, standard-width 0. The 6 and 9 glyphs curve around, but the tails aren’t exaggerated. My only qualm is that the R has too high a bridge.

[claysmalley]

Added!

[claysmalley]

Oswald on Google Fonts doesn't appear to have Greek. I guess they'll have to join the likes of Armenian and Georgian in jarring font changes.

[1ec5]

Ah, I missed that. I think Greek would be nice and am surprised by its omission, but it’s a lower priority than Cyrillic. At least Greece is consistent about using Greek letters in route numbers within its borders, unlike some countries that use Cyrillic alphabets.

Oswald’s Cyrillic might not be a runaway success, judging from this critique: googlefonts/OswaldFont#21. Most of the shortcomings in that article would probably only become apparent in display typography, at larger sizes. The З/3 similarity would ordinarily be concerning, but hopefully no highway system is using З in conjunction with numerals, just as no jurisdiction would do that with vehicle registration plates.

Needless to say, I would advocate for using this font only for shields and not for other labeling needs.

[zekefarwell]

I'm liking Oswald but the 500 weight seems to be on the heavy side compared with the other fonts we're looking at. I'm wondering if the 400 weight would be a better match to the shields. It seems to already be slightly bold.

[pnorman]

I loaded them up in tabs and switched between them. I immediately removed Pathway Gothic One from consideration.

Encode Sans Condensed feels too light to match the look which Americana has been going with of replicating the shield outlines. You don't need to replicate the font - particularly since all the shields would have different fonts on the road - but the shields are designed to have a heavier font on them than this one. On some of the less pictorial ones, it looks okay.

Similarly, the proportions on Antonio seem wrong.

I consistently go with Roboto Condensed as my choice. Maybe this is influenced by seeing a lot of maps with Noto Sans. Being close to Noto Sans is both an advantage and disadvantage. I could see reasons to want a different font on shields than other text, but some shields are going to have to fall back to the wider coverage of Noto and you want those to look similar.

I also noted one of the US:AR shields is blue, while all the others are white.

[1ec5]

Roboto Condensed does have a proportional variant, but font-variant-numeric doesn't seem to be exposed in CanvasRenderingContext2D. Is there another way to do this in an HTML canvas?

The font property accepts CSS font syntax, which is shorthand for among other things font-variant, which in turn is shorthand for font-variant-numeric. However, I haven’t tried it out myself.

I guess this isn’t supported. 😅

I missed the caveat that font only allows the font-variant keywords from CSS 2.1 (normal and small-caps).

[zekefarwell]

Roboto Condensed’s full-width 1 is not nearly as jarring if we lighten the font

Hmm... I think we're looking at two different fonts here?

[1ec5]

I had to edit my post after the fact when realizing I was on the wrong branch. Sorry about that!

[1ec5]

Oh, wait, that’s the same font loading issue as #955 (comment). 🤦

[zekefarwell]

Yeah or similar behavior anyway. I've had a heck of a time being sure I'm really seeing the intended font when testing.

[zekefarwell]

Do we want to find a font visually similar to Highway Gothic? Or might another font better match the metrics we're looking for?

I had gotten the impression that there was quite a bit of enthusiasm for something visually similar to Highway Gothic so that's what I've been using as a benchmark. This style faithfully adapts real world shield designs in great detail so choosing a font that is also faithful (or at least similar) to the real world signs makes sense to me (American signs anyway, but hey the style is named Americana after all). If I've misread this enthusiasm, then I also feel fine choosing a font that simply works well for this use case.

[1ec5]

I think we toe the line of literalism without crossing into it. We do go the extra mile in identifying edge cases, such as the blue Arkansas Highway 980 shield, and we’ve gone the easy route by aligning the color palette to the MUTCD. However, I think users will forgive us for straying from Highway Gothic while remaining within the norms of map publishing. There are a lot of free fonts that fit the bill, just not as many on Google Fonts.

I’ve yet to encounter a print map that uses Highway Gothic on its shields, other than in an inset explaining the Interstate system with a large illustration of a shield. For ordinary markers on the map, I’d say that the norm is a medium-to-bold, often condensed grotesque or neo-grotesque typeface. I’ve seen some examples of geometric typefaces in transportation maps, particularly older ones, but humanist sans-serifs or slab serifs would be confined to tourist recreational maps.

[zekefarwell]

Just to be clear, Highway Gothic itself has never been under consideration. Overpass is inspired by Highway Gothic but designed for small text size and screen display so would work quite well on a map if it met our requirements by having a condensed variant. We're clearly going to use a different font than this. The question is simply if we're aiming for a font with somewhat similar shapes to Highway Gothic or not.

[claysmalley]

While it would be faithful to the real-world designs to adopt a Highway Gothic lookalike, we end up straying significantly from real-world shields anyway in our simplification process. Plus, we're going for an American road atlas aesthetic. Some atlases use a Highway Gothic lookalike, some don't.

[zekefarwell]

I assume we haven't been considering Noto Sans (except as an internationalization fallback) for lack of a condensed variant. However Noto Sans Display is a variable width font with a range from extra condensed to regular. Perhaps this could work for us?

[zekefarwell]

Unfortunately it appears that variable features of variable fonts are still not usable in canvas although a discussion about it was started five years ago:
whatwg/html#3571

It looks like a very complex workaround is possible but that doesn't seem like a good path to take:
https://stackoverflow.com/questions/65670959/variable-fonts-in-html5-canvas

[1ec5]

Noto Sans Display is designed for larger text like headlines. Noto Sans would be sufficient at these small sizes. The variable font stuff is for developer convenience only; a specific Noto Sans Condensed font is available for download from the Noto Dashboard. Per #954 (reply in thread), we should host this font on GitHub Pages as part of either this repository or fontstack66. The fontstack66 repository already pulls in google-font-installer as a dependency to ensure we’re getting all the latest bug fixes and updates to the Noto fonts.

[zekefarwell]

Oh good there is a condensed variant. Not sure why I was having a hard time finding it. This one seems worth considering as well then.

[1ec5]

Noto Sans has proportional numerals but also defaults to monospaced numerals. Here’s Noto SemiCondensed SemiBold:

[ZeLonewolf]

On thing that's missing is a look at some paper maps. Below are 1958 and 2011 AAA paper map screen shots, respectively. I was surprised to note that the fonts do not replicate physical shields but rather are differently chosen for map display. In particular, the Highway Gothic features - the clipped 6 and 9, the no-bottom-serif 1, and the snowman 8 - are not present on the paper map. On that basis, it seems fine to use a font that doesn't clip the tail of the 6 and 9. We might also consider whether per-network font weights are something we want to try to do. Note how much bolder the Interstate shield font is compared to the other routes around it.

[zekefarwell]

On thing that's missing is a look at some paper maps

In fairness, @1ec5 did post a number of paper map samples in #954 (reply in thread), but this branching conversation is hard to keep track of 😅. Rand McNally maps have short tails on the 6 and 9, but the 1 is also narrow. I see why you all consider that important. It does make the best use of space.

[1ec5]

We might also consider whether per-network font weights are something we want to try to do. Note how much bolder the Interstate shield font is compared to the other routes around it.

Some print maps make light text on a dark background bolder than dark text on a light background. I suspect this is just to keep the numerals from becoming illegible if the ink separates or smudges.

[zekefarwell]

This is unrelated to font family choice, but I find I'm enjoying lighter weight text on the banners. Feels more readable for such small text and helps the shield stand out more.

Encode 500 - lighter	Fira 500 - heavier

[claysmalley]

I'm thoroughly enjoying Noto Sans. It matches the rest of the style, and it makes internationalization easy. This one's a winner to me.

Next steps, if we want to go forward with Noto Sans:

• Create repository for .woff files, including the following fonts:
  • Noto Sans Condensed Medium
  • Noto Sans Armenian Condensed Medium
• Pull request to change fonts and adjust metrics

[ZeLonewolf]

This is now resolved, thanks everyone for the hard work!