One-Quarter of a Century

Los Angeles County Metropolitan Transportation Agency would celebrate the 25th anniversary of the re-introduction of rail transit and something special was being planned. Often, an event brand’s first contact with its target audience is through the Internet and a web font was the icing on the cake.

Working with a talented designer who created a custom typeface for use in print, signage and static images online, I suggested creating a web icon font to leverage a jQuery counter to highlight talking (key data) points related to the anniversary.

The font shadows the Metro brand’s way-finding map line and station imagery and the original concept showcases a multi-color numeral set representing the various modes of transportation (Metro Rail or Metro Bus).

Too much, too soon

As I developed the web icon font, three things were working against us. A very hot deadline, 7-8 color numerals and creating what is referred to as a layered web font.

To create a one-color set would be optimal and doable, but multicolor, or ‘stacked’ web font is far more complicated. Each color would represent a separate objects/elements, layered through CSS classes meaning one number would consist of eight layers (red, yellow, green, blue, aqua, purple, black and white). Multiply that by 11 characters and the one week deadline was going to be a challenge.

Add to that the deal breaker – the jQuery counter requires NUMBERS to run its math calculations to achieve the final animation – and the project wasn’t feasible. Eight-layered characters don’t represent numbers but parts of an object negating the desired effect. Project shelved and static images used on the vanity site (a one-page style web site).

If you don’t succeed, try, try again

Fast forward to 2016 and the upcoming Exposition Line Phase 2 extension to Santa Monica. A new visual campaign entirely icon based but ONE COLOR! A perfect opportunity to use the web fonts previously designed.

One potential pitfall in web font creation is receiving Adobe Illustrator assets that aren’t built with web typography in mind. In this example, too many points, extra information that needed to be cleaned up prior to SVG export.

The original vector art had lots of extra points and required clean-up prior to export. Below – the number six without clean-up prior to Glyphs import.

I used Glyphs to build out a revised numerals font, in my opinion more streamlined for legibility at smaller sizes (laptops, tablets and mobile devices). When converting vector graphics draw your paths as clean as possible with as few points as you can. When exported to SGV files and imported into a web font creation tool your results require less backend editing.

TIP ONE: When converting vector graphics draw your paths as clean as possible with as few points as you can; exported to SGV files imported into a web font creation tool generate better results…

Happy Endings for Web Fonts

After export and font creation using Font Squirrel, I added the font to moreexpo.metro.net (a WordPress one-page vanity site using the Elegant Themes Divi frameworks and a counter plugin) to present the data points as requested.

jQuery Counter Effect using Rail Anniversary web font on http://moreexpo.metro.net

Additional Resources

If you’d like more information on this collaboration with a very talented designer or want to read more about web fonts:

• More Expo to Santa Monica – website that uses Rail Anniversary Numerals;
• Font Test – version one of font and implementation of counter effect;
• Adobe Illustrator – export to SGV and vector character creation;
• Glyphs Mini – font creation tool, demo used for project;
• Font Squirrel – free, web font generator;
• Stacked Icon Fonts – CSS Tricks; and
• Creating Icon Fonts for the Web, James Williamson Lynda.com

I’d love to hear about what you’ve done to add flair to your projects.