, , ,

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.

, , ,

Iconic Thinking

blog-pic-icon

Does anyone surfing the web these days see a blue bird or a chubby aqua “T” and not think of Twitter?

Icons—pictorial representations of brands, products, or people—can be powerful tools to help you stand out in the cyber crowd.

A customized icon set—a group of similarly styled icons, much like a family of fonts—takes iconic branding to the next level by helping you:

  • Differentiate one product, application, or blogger from another.
  • Organize products into like groups—without sacrificing the consistent elements of your brand.
  • Streamline the back-end functionality of your content management system, which makes it easier for staff to navigate and to train new staff on how to use it.
  • Provide a consistent theme for graphic, product, app, and other designers to use for creating new icons.

Here at Atomic, my process for developing icon sets is pretty straightforward. It focuses on upfront preparation, which conserves your time, cuts down on costs, and ensures that we get the best results.

  • Brainstorm. First, I’ll brainstorm with you to learn who and what the icon set is for. What message, position, feeling do you hope to convey? I might just listen to how you talk about your products or brand, take notes, and then jot down some ideas to see what creative concepts emerge.
  • Research. Often, these early brainstorming sessions are augmented with additional research. I want to know what your competition is doing. I also like to check out how other sites use icon sets and to what effect.
  • Sketch. Next, I’ll sketch out some more concrete ideas for you to review—including color schemes that bring the concepts to life. I’ll typically present ideas from a variety of different angles to see which ones you think work best for your goals. And I’ll provide my two cents to help you decide.
  • Refine. Once I get more feedback, I can refine the sketches to create full, polished illustrations.

Soon enough, your customized icon set is ready to be deployed.

Now that’s iconic thinking for your brand and your business.