, , ,

Why You Should be Using Icon Fonts

Remember dingbats?

They’re the fonts that come preloaded on most computers, made up of hand gestures, zodiac signs, and tech dinosaurs like floppy disks and cassette tapes. (Windows’ version is called Wingdings.) They were used for…actually, I have no idea. Sending secret messages in code, maybe?

Well now, dingbats are all grown up. And believe it or not, they’re an important part of any modern web designer’s toolkit.

Say it with icons

We’ve talked a lot about responsive design here. But there’s one piece of the puzzle we have yet to address: how to deal with icons. The most obvious move might be to upload an image of the icon you need—say, a shopping cart to represent your online store, or a gear to link to your settings menu.

But image files are clunky. They get pixelated on larger displays. They don’t always size correctly. One option is to use a vector to ensure consistency across screens—but these tend to be large files, and can slow down your site if you have lots of icons to display.

So, what’s the solution? Over the past few years, many web designers have made the transition to icon fonts. Says The Next Web, think of icon fonts as a grown-up version of dingbats—with an actual purpose. These font faces are made up of the symbols we see all over the web every day: tiny speech bubbles, which we now associate with commenting features. Lock icons meant to suggest security. Miniature trash cans that allow us to scrap whatever we’re doing and start over.

Without even meaning to, we’ve all learned the “language” of these icons. When we see a picture of an envelope or a calendar page, we know what to expect. And fortunately for web designers, you don’t have to start from scratch when you need icons to use for your own site. There are plenty of font libraries out there—some of them available for free. Many of these fonts even contain logos for social platforms, like the Facebook “f,” Twitter bird, and Google “g.”

Good for users, good for you

Why else do icon fonts trump images? Chris Coyier at CSS-Tricks gives a great explanation. With just a few deft change to your code, you can change icons’ size and color, add shadows, use transparent knockouts, rotate, and more.

Plus, icon fonts’ minimalist, no-frills look is right in line with what’s popular in design right now (think Windows 8 Start menu icons or Apple’s new iOS).

Getting started with icon fonts is pretty simple. Download the font packs you want, then use the “data-icon” attribute to tell your CSS how you want icons to behave. You can take this a step further to be sure icons are interpreted correctly by screen readers—more on that here.

You can also use a service like IcoMoon, which allows designers to create one-of-a-kind icons (or use IcoMoon’s own), then store them remotely on IcoMoon’s servers. Then, you can swap out icons easily, without having to change your CSS.

This might sound complicated, but once you get the hang of using icon fonts, you’ll wonder why you ever bothered with pesky jpegs and vector files. Your site visitors will see faster loading times and great displays on any screen.

Sometimes icons speak louder than words. Need help integrating them into your site? Give Atomic a call today.

, ,

Typekit

Fonts have been a sore spot for web designers for a long time.

Back in the day, we were limited to the most basic of fonts – Arial, Times, and Helvetica – because we needed to use fonts that most people had on their machines. Then came the time of JavaScript- and Flash-based plug-ins. They let us use a wider range of fonts … but things still weren’t great. Often the fonts didn’t load quickly or smoothly. Strange things happened when you used special fonts for links or wrapping text. And of course, Apple has decided not to support Flash in the iPhone and iPad environments.

Thank goodness, we finally have something new. It’s Typekit.

Typekit is a subscription-based library of fonts that designers can use for their websites. All the fonts are hosted online by Typeface, so anything you can find on Typekit, you can plug into your site. And your users won’t require Flash, like other font substitutors have in the past.
As a designer, I appreciate the selection of fonts that Typekit makes available. They look like they were hand-picked by someone with a strong design sensibility and an understanding of what works visually on the web.

And as a developer, I love how easy it is to find the font you’re looking for and apply it to your CSS classes, IDs, or any other HTML tag in your markup. You can also pare down your bandwidth use by choosing only the weights and styles in each font family that you need.

Finally, from a business perspective, Typekit is just plain affordable. You can buy one subscription for your company and use it across all the sites that you develop.

I can hardly believe I’m saying this, but Typekit may make fonts fun again for web designers. I think it’s time to break out the champagne.