A Web Font for that Very Special Occasion

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.

Rail Anniversary Typography Sample

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.

Rail Anniversary, Adobe Illustrator

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.

 

Rail Anniversary Working file, Glyphs

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.

 

Rail Anniversary, More Expo, jQuery Counter Effect

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:

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

Posted by Joe A. Simpson, Jr.

Front-end web developer/web designer at LACMTA (Metro Los Angeles). Manages Metro's WordPress Network of blogs including the Source, Metro Developer and Metro Primary Resources. Avid WordCamper and budding theme/plug- in wrangler.

Leave a Reply for Joe Simpson

This site uses Akismet to reduce spam. Learn how your comment data is processed.