If you read yesterday’s post about HiDPI screens, also knows as “retina displays”, you may have seen the mention of icon fonts.
But before we dive into the greatness that is them, let me educate you on the topic of fonts. What exactly, is a font? Most of you will know it as a style to display text on a screen. If you dive into the workings of a font, however, there seems to be a lot more to them than just that.
A font is, in essence, a vector. Its shape is defined by a bunch of complicated mathematical functions. Why, what does this mean? It means it can be scaled to any size without loss of quality. If you set a font’s size to “very large” or 70p or whatever, does it looks pixelated? Nope, because it isn’t enlarged in the same way, say, an image is. The mathematical functions behind it allow it to keep its original, perfect shape, even in preposterous sizes!
I hear you tapping your foot, waiting for me to get to the gist of it. But hey look, here we are already!
If you want, for example, a website to be very flexible and scalable to any size, you’ll often find yourself struggling with images that are part of the UI of your website, such as icons. This is where you can put the power of fonts to good use.
Grab yourself any old font editing software, throw the already-existing icon into it (or create it first), trace over it, and save it into your very own font as a random letter of your choice. Throw the font into your CSS as a @font-face, have it apply (using spans, or your preferred method) to the random letter that you chose put in the place where the icon used to be, set the font-size nice and high, and tada! You’ve got yourself a fully scalable icon!
Great advantage of that these days is that it’ll also look ultra-crisp on the new retina displays, and also a lot faster than important a high-res image!
That was a real dumbed down explanation, but hey, whatcha gonna do ’bout it?