WordPress and the Rise of Vector Image Fonts

June 4, 2013Category: WebTags: ,

As a WordPress developer, one thing I follow pretty closely is the WordPress Make Design blog. An overhaul of the WP backend has been cooking for several months now, and one aspect of that overhaul is a change in the way icons are displayed. Currently, WP uses PNG rastor icons, but the new backend will likely use vector icons in the format of a font. Confused yet? Let me give you some background info.

Images come in two types: Raster and Vector. Most images you see on the internet are Raster. JPGs, PNGs, GIFs, all of these are Raster images. You can think of them as a giant grid, with each point, or pixel, having a specifically set color. When all these points are put close enough together, you can’t tell that it’s square points. But when images are zoomed in, they look blocky. Vector images don’t consist of set points. They use lines and formulas and things that I don’t fully understand. The end product is an image that will look sharp no matter how far it is zoomed in and out.

WordPress is switching from Raster to Vector, because Vector images look better when zoomed in (when using a Retina display, for example). They are also going one step further and using a font, instead of image files. Fonts have used Vector images for a long time. Each character is a small image with a transparent background. It’s certainly possible to place custom images yourself. I found a very interesting article on the reasoning behind switching to icon fonts, rather than using icon image files, so if you are interested in the topic:

Further Reading: The Era of Symbol Fonts