Over a year ago we released a small collection of free icons on our blog. As it turns out people liked them, and not just because they’re free. So in keeping with the spirit of being Interactive Superheroes we’ve made a new and improved set, and we’re calling them melticons Mk 2!
So what’s new?
- All the icons have been cleaned up and redrawn.
- We’ve doubled the number from 20 to 40.
- Each icon now has a circle-less variant, which technically brings number of icons up to 80 (but who’s counting?).
- And in what is probably the coolest addition, we’ve made them into an icon font with ligatures.
Pretty exciting huh? Wait, what’s that?
A ligature is created whenever two or more letters are represented by a single glyph. The most common use for a ligature is to make fonts more readable. Like the examples below.
They can also be used to simply make a font more interesting to look at or to create a handwritten appearance by using so many ligatures that characters are rarely rendered in the same way (e.g. Liza Pro by Underware — seen below). The latest (and possibly coolest) use for ligatures is icon fonts.
Why use ligatures for icons?
Icon fonts have been around for a while. They are great for rendering vector icons in a single color on the web, but most icon fonts have one big drawback. They aren’t very accessible. If your user’s browser doesn’t support web fonts (or her connection is too slow to render them), she will be left with a single character instead of the intended icon. The same problem will occur for users accessing your site with screen readers. Where you wanted them to see a twitter icon, now they only get the letter ‘t’. But not so if your icon font is using ligatures. Using ligatures, your twitter icon can be rendered as a ligature of ‘twitter’. So your screen reading user and your user on IE 8 will now get your message “Follow me on twitter” instead of “Follow me on t”. Much better, right?
Technical deets
Implementing a web font with ligatures works just like implementing any other web font. Ligatures in web fonts are supported in all major browsers (IE 10, Chrome & Firefox, iOS), but some common browsers don’t support it (IE 9 & below, Android). If you need support for these, a CSS sprite fallback is never a bad idea. Without a fallback, the browsers that don’t support ligatures should just display the word itself instead of the icon. It just takes a few extra lines of CSS to enable ligatures in the browsers that support it:
1 2 3 4 5 6 7 8 9 10 11 | /* Enable Ligatures */ -webkit-font-feature-settings: "liga","dlig"; -moz-font-feature-settings: "liga=1, dlig=1"; -moz-font-feature-settings: "liga","dlig"; -ms-font-feature-settings: "liga","dlig"; -o-font-feature-settings: "liga","dlig"; font-feature-settings: "liga","dlig"; /* Make icons appear as clear as possible */ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; |
Time to put it in action
As always our set of melticons are free of cost and of any rights management. Feel free to use them as you’d like without worry. If you’d like to give us some credit, that’d be great, but we won’t be hurt if you don’t.
The download includes the ligature set and an EPS file containing all icons. If there are any specific icons you’d like to see in a future release leave a comment or drop us a line.
Download the melticons web font kit here (or you can get it sans circle here). You can also download the EPS.
And for good measure, here’s a preview of the icons:
About Jimmy King
Jimmy King is a front-end developer. He is an avid motorcyclist, runner & dishwasher. When he's not building awesome internet things, he likes to spend most of his time with his wife & son.
About Guillermo Garcia-Mont
Guillermo is a user experience designer. He enjoys illustrating, designing interfaces for any device with a screen, reading up on emerging technologies, and the occasional comic book.