Traditional ligature fonts leverage the ability of modern programs to replace specific sequences of characters with more typologically pleasing alternatives. In this video, learn how icon font leverage the ligature feature to allow you to type keywords in
- [Instructor] Beyond the basic blocks of content, you're likely also going to need some more intricate shapes. Icons, for example. Now, you can use the Pen tool and when you need to, you need to. But I'd like to show you one other way that you can quickly get icons that are scalable into your designs. There are services online, like IcoMoon, and Linearicons, which offer something called ligature fonts. I'm going to click Free Version here, for Linearicons, where you can download a true type font.
Now, ligature fonts leverage the same settings in fonts that will replace characters with alternatives. For example, if you've ever seen that fancy double F, or a place where an S and a T join together. Now, if you're not intimately familiar with typography, that's okay. The takeaway is, if you download and install one of these fonts, you can type in a keyword and it will replace it with an icon. I've already installed Linearicons, and what I'm going to do is duplicate the text for My Stats.
I'm going to rearrange the layers so that that's up at the top of our interface. Using the Text tool, I'm going to reset that to right align. I'm going to pull that to the right, and now I'm going to type in the word, cog. Now, that's all that's there. The word cog. But using the Type tool again, to change the font, I'm now going to pick Linearicons Free. And you'll notice that as I hover over that font, it was replaced it with an icon of a cog.
Similarly, if I duplicate this layer, pull it to the left. Using the Type tool, I'm going to left align that so I can get a little bit more control over where that sits. Now I'm going to double-click, and I'm going to type in the word, left. And here you'll see, I have a navigation arrow that goes to the left. By typing in two keywords and setting a font, I have been able to add two reasonably good-looking icons to my mock-up. I would encourage you to look at Linearicons and IcoMoon.
Both of them offer icon fonts that you can use that have ligature options for replacing keywords with icons. IcoMoon has a number of different icon fonts that you can mix and match. You can even upload your own .svg images and create a custom icon font. Now, for me, I actually have just opted to purchase the IcoMoon Ultimate Pack, which has 16,000 icons. And from here, you can get a good sense that there are a lot of interface icons, a lot of file management icons.
Basically, a lot of places that you can start your design and find something very quickly, which is going to communicate what you're trying to put into your prototype. Now, I've only added two icons here, but I hope you can understand how quick and how easy this makes adding icons to your interface. If you try this out, and you find that it works for your workflow, I'd encourage you to look at some of the premium packages that icon font-makers make. They can make your life a lot easier.
- Creating a document with artboards
- Using grids, guides, and guide layouts
- Adding placeholders and text
- Using ligature fonts for icons
- Using layer comps to display states
- Using Adobe Preview CC
- Exporting artboards for review
- Exporting assets for use in InVision
- Working with user interface kits
- Extracting CSS values from a design
Skill Level Intermediate
Q: This course was updated on 11/14/2017. What changed?
A: New videos were added that cover how to use user interface kits to create pixel-perfect designs.