Change shield font to Noto Sans Condensed #965
Conversation
icons/shield_ca_mb_winnipeg.svg
Outdated
There was a problem hiding this comment.
Replaced with a JS-drawn trapezoid. I probably should have done this in #585, honestly.
icons/shield_ca_ns_h.svg
Outdated
There was a problem hiding this comment.
Replaced with a JS-drawn escutcheon. It was either that, or vertically stretch the SVG.
icons/shield_ca_tch_2.svg
Outdated
There was a problem hiding this comment.
Visually identical to the 'deleted' shield_ca_tch.svg. Drawn in a different way to make widening easier.
claysmalley
force-pushed
the
clay-shields-fonts-noto
branch
from
66300cb to
3577712
Compare
There was a problem hiding this comment.
The shield definition changes look great to me at a glance. Thanks for facilitating the discussion around choosing a font. I haven’t heard much enthusiasm for continuing to rely on system fonts, so at least we can standardize on this font while we pursue further improvements either to the font selection or to metrics in #768.
icons/shield_kr_expressway_2.svg
Outdated
There was a problem hiding this comment.
Do we need to adjust the Americana project’s logo given these changes? 😄
There was a problem hiding this comment.
The Korean expressway shield bulges out in a different way. I think our logo is fine 😅
| <p | ||
| style=" | ||
| font-family: 'Noto Sans Condensed'; | ||
| font-weight: 500; | ||
| visibility: hidden; | ||
| " | ||
| > | ||
| Invisible text so the font will load early | ||
| </p> |
There was a problem hiding this comment.
Do we need to add any aural CSS properties or an ARIA role to avoid exposing this text to assistive technology?
/ref #768 (comment)
There was a problem hiding this comment.
I'm sure there must be a way to ensure the font is loaded before the first shield is rendered without relying on a hidden text hack.
There was a problem hiding this comment.
Two-digit Interstate shields are massively improved. I would consider #834 to be fixed. We’re still fitting the text to the shield a bit too pedantically. For example, the 7 and 1 in I-71 conspire to gain an extra point or two compared to I-65. However, this discrepancy is much less glaring than before.
Unfortunately, the text metrics are still a mess in Safari: #625. But at least it remains usable:
| <link rel="preconnect" href="https://osm-americana.github.io" /> | ||
| <link href="fonts.css" rel="stylesheet" /> |
There was a problem hiding this comment.
Is the #955 (comment) still possible, but less likely? Or should we continue to investigate a JavaScript-based alternative to the CSS stylesheet that can respond to font loading events?
There was a problem hiding this comment.
It's still possible. I'm probably not going to include it in this PR, but it may be useful as tail work.
There was a problem hiding this comment.
Yes still possible. Try shield test with browser cache disabled and you'll see a fallback font for the first few rows.
Fixes #834
Based on discussion in #954, Noto Sans Condensed satisfies all our needs, and matches the existing style. This PR changes the shield font to Noto Sans Condensed, and updates various shield definitions to accommodate the change.
I've set up a repository for web fonts at osm-americana/web-fonts. If we want to support route networks that incorporate other scripts like Georgian and Arabic, we'll need to add their corresponding fonts.