Speaking at AIGA Chattanooga – June 20
I will be speaking at AIGA Chattanooga on June 20. I will be talking about art, design, typography, responsive design and life. More details to come.
The end is here
Album art illustration experiment. Made from imagery and personal photography.
Suspense
Collins Ink
A free display font inspired by early American tattoo lettering, specifically Norman Collins, best know as Sailor Jerry.
Broken Compass – Free Font
Rilian – Losing Myself
Designed some artwork for my long time friend, Jerad Griffin (Rilian) and the song “Losing Myself”. Proceeds go to help pay for his newborn boy’s recent surgery on his ears.
Designspiration.net
I enjoy spending my free time at Designspiration.net - It’s a great place to find amazing new work from all over the web. From furniture, branding, cars, prints, type, etc. It’s nice to let my brain unwind and indulge in work that inspires me. Check out my collection of things I’ve saved for inspiration here.
They don’t know what they want. Give ‘em what they need.
Consistently think about those who use your product or design with the intention of making the use of it as simple as possible. Always have a vision of where you are going. Be confident in the direction and execute accordingly. It’s not about what a client wants, but what they need.
Obama Campaign Webfont Icons Case Study
Working directly with the 2012 Obama for America campaign to produce webfont icons for the Obama for America Young Americans website.
The Story
I was contacted by the campaign to produce webfont icons that had been designed by Taylor LeCroy, Art directed by Josh Higgins, and developed by Front-End Director of Development, Daniel Ryan for the Young Americans site .
The campaign timeline and schedule moves very quickly and they needed a working file of icons that could continuously be updated and revised for the web. I was really excited they asked me to produce their icons as a single font file for use on the site.
What are webfonts?
Webfonts are embedded fonts that are loaded via CSS to display a specific font on the web. The goal was to convert a series of campaign icons into a font file to be loaded on a site the same way webfonts are displayed. This responsive approach to displaying icons is mobile-first and performance driven.
Illustrator Setup
Having a properly setup Illustrator file is key to successfully producing icons into a font file. You need to scale the icons up very large so they do not lose detail when they are exported to Fontlab and generated out as a font glyph. Make sure you setup your Illustrator file like like the below screenshots.
Illustrator > Preferences > Guides & Grid
Illustrator > Preferences > File Handling & Clipboard
Once you scale up your icons, they should fit into the illustrator file like the image below. They need to be BIG because if they are not, they will lose detail and your design won’t look right when you move them into Fontlab. Scale up!
Fontlab Setup
Before copy and pasting each glyph into a Fontlab glyph area, make sure you setup proper key dimensions in Fontlab so the icon will paste exactly how it is setup in illustrator. This will make the process go smoothly and you will be able to generate icons that do not lose detail or scale poorly in each glyph panel.
Files > Font Info > Metrics and Dimensions > Key Dimensions
Ascender = 773
Caps (H) = 733
X-Height = 527
Descender = -227
Baseline = 0
Production
Once you have your glyphs sized and setup in Illustrator, you want to start moving them into the character glyphs in Fontlab. Copy and paste and put them into the desired glyph of your choice.
When you copy and paste, everything should move over seamlessly if you have both of your documents properly setup. Make sure you set the dimensions as shown above.
When you are finished, save your completed font and move it to your web server to start generating some CSS for converting it to a webfont icon set.
Resource File
Credits
Daniel Ryan – Front End Director of Development
Taylor LeCroy – Icon Designer
Josh Higgins – Campaign Art Director