Enhancing efficiency is a continuing course of. First we ditched tables, spacer gifs, and inline markup such because the <font> component in favor of CSS, lowering web page sizes, and separating fashion from structure. Then we turned conscious of all our DNS requests, caching, and the full variety of recordsdata and began utilizing CSS sprites, shifting many small photographs out of the HTML and right into a single background picture.
Article Continues Beneath
Now it’s time we embrace the third epoch in efficiency optimization: image fonts.
Embedding an emblem font lets us transfer a few of these tiny icons right into a single font file fairly than a sprite. This has the identical caching and file measurement advantages as a CSS sprite, in addition to some further advantages we’re solely now realizing with high-resolution shows. On this article, I’ll stroll you thru a few of the benefits and points you’ll encounter when utilizing an emblem font.
A easy expertise#section2
Because the variety of fonts designed to be used as icons, glyphs, and decorations enhance, a number of high-traffic web sites have changed all the photographs on their web site with a single image font. Among the best-known examples is GitHub, which has improved each its pace and its consumer expertise by dropping all its tiny icon recordsdata in favor of Octicons, a single, customized image font file.
Image fonts commerce blocky raster photographs for easy vector photographs in your HTML. That is vital as a result of rasterized photographs are designed to work at a selected decision, so at larger pixel densities, like these present in at present’s high-resolution shows, the photographs have to be scaled as much as seem the identical measurement. This ends in one thing that appears extra “blocky.” Vectors by no means have this drawback, scaling endlessly up or down for any decision.
Embedding vector graphics into HTML has had limitations prior to now. PDF and SVG are doable, however create interoperability issues. Fonts are vectors and all net browsers, even IE6, have the power to render embedded fonts in an HTML web page. This convergence of applied sciences—font embedding, high-resolution shows, and browser assist—has created a brand new alternative to additional optimize efficiency and consumer expertise.
In relation to accessibility, image fonts are within the conflicted scenario of working poorly as photographs, but fairly properly as textual content.
Most of the early image font companies mapped the graphic to a letter within the ASCII vary. Typing a “w” would produce an image of a globe, typing an “m,” an envelope. This made it simple to see the character-to-symbol conversion just by typing. Issues would happen when the font embedding failed, ending up with unusual letters in random locations that didn’t make sense. As an illustration, in case your markup was meant to show an arrow, then the textual content “Subsequent,” the HTML would possibly appear like:
<div><span class="icon">L</span> Subsequent</div>But when the CSS, JavaScript, or font loading had been to fail, you’d see the character “L” fairly than the image for a left arrow. You can put all of the fallbacks in place, inject the code with JavaScript or CSS :earlier than or :after, however on the finish of the day, search engine spiders would possibly nonetheless index that textual content as “L Subsequent.”
There’s a higher method.
We’ve matured, discovered extra about these points, and solved the issue by utilizing the private-use space in Unicode. The glyphs on this space are usually not linked to the semantics of any letters of the alphabet. If the font isn’t accessible or doesn’t load, then an empty field will seem as an alternative of a letter.
However wait—we will enhance much more!
Fonts even have particular characters known as ligatures—delicate, usually hardly noticeable, tweaks to the letterforms which can be used to help studying. Take, as an example, two consecutive “f” characters. font will convert that “ff” right into a single ligature the place the fs join easily. There are a number of customary ligatures, together with ff, fl, and fi. However there isn’t a purpose you’ll be able to’t additionally outline your individual. In a font file, it’s a easy substitution; all of the ligature is in search of is the correct sequence of letters. Once they’re typed, they’re changed with one other glyph. This implies you’ll be able to have a string like “A Checklist Aside” and convert it right into a single image icon of the brand.
Browsers that don’t assist font embedding—particularly, search engine spiders—will index the uncooked un-ligatured textual content, however units able to rendering the font and ligature will present you the great vector image as an alternative. It’s the very best of each worlds, baked in at a a lot larger degree than HTML and CSS.
When you perceive how ligatures work, a world of recent prospects opens up! All these mystery-meat icons utilized in navigation might be symbols in a font, however past that they might be ligatures. So your HTML markup would possibly appear like:
<ul>
<li>Residence</li>
<li>Contact</li>
<li>About</li>
<li>Cart</li>
</ul>However the ensuing rendered ligatures would possibly appear like:
Symbolset has been experimenting with ligatures and image fonts for some time, and now sells packs of image fonts with generally used icons. It additionally has nice ligature assist, and a demo the place you’ll be able to merely sort key phrases and watch them snap to symbols instantly. Don’t be stunned if this makes your thoughts race with concepts.
Utilizing ligatures as glyph substitutes has sensible purposes. For instance, the BBC Information web site previously featured a ticking clock within the nook of the homepage. The clock may have used Flash, however that may have been ill-advised given its lack of assist and the existence of options. Another choice would have been to make use of CSS to rotate photographs of the palms with somewhat JavaScript timing. As a substitute, the BBC selected HTML5, utilizing Canvas plus JavaScript to repeatedly redraw the clock face.
However each these non-Flash options use rasterized photographs that wouldn’t look as good on high-resolution shows. There are JavaScript libraries, like Raphaeljs, which might create SVG or VML objects that may be good and vectorized, however since they’re loaded and created in JavaScript, they’d be invisible to look engine spiders or different non-JavaScript browsers.
Utilizing an emblem font as an alternative would provide the better of each worlds: accessibility and vectors. Typing 12:00 would name up a ligature, which might convert to a clock with each palms at 12. Typing 12:01 can be a unique ligature for the corresponding clock face. Whereas there can be quite a lot of ligatures to create, the ensuing clock can be a superbly designed vector graphic that may work throughout platforms. Actually, a couple of clock typefaces are already doing this; http://timepiece.inostudio.de has a number of examples. Go forward—view supply, and also you’ll see its simplicity. [Ed. note: We restored the link to inostudio.de after hearing from the site owner that the issue had been addressed, and after running our own scan.]
Take into consideration all an internet web page’s little particulars that might be image fonts. Open your thoughts to the probabilities. The whole lot from bullets and arrows to feed and social media icons might be bundled right into a single, tiny font file that may be cached and rendered at varied sizes with no need a number of photographs or colours.
Creating your individual image font#section4
Internet builders and designers minimize their tooth on purposes like Photoshop, Fireworks and others. For us, shifting to CSS sprites or background photographs wasn’t an enormous leap as a result of the instruments didn’t change. With image fonts, a brand new program enters into the combination: the font editor. This can be a new beast we have to be taught, however it’s not that troublesome.
Even higher, loads of instruments are being launched to help in image font creation. For instance, Icomoon permits you to add your SVG recordsdata, map them to unicode characters, and export a font to be used on-line.
What if you wish to get extra particular and tweak the design past its default shows? There are a number of instruments on the market to create your individual fonts. Just a few are paid, skilled apps, however the most typical free instrument is FontForge. It’s a bit unwieldy, however there are lots of tutorials on the market that will help you use it.
As any good designer will let you know, an icon or emblem can have subtly totally different designs at totally different sizes, akin to altering its line thicknesses and even dropping a few of its element at small sizes. With an emblem font, nonetheless, you’ll be able to’t have different designs for various font sizes. Your design at 20 level have to be the identical as at 120 level or 6 level.
If you would like totally different designs at totally different font sizes, then it is advisable to duplicate the icon within the font file and choose the suitable glyph relying on the utilization. This too is problematic, as a result of you haven’t any thought how the top consumer will really view your design. Rising the font measurement of their browser natively gained’t change your image design. For many of us, this isn’t an issue, as lots of the utility icons we use at present for feeds and social networking scale comparatively properly.
The opposite main problem with utilizing an emblem font is that you just solely get one colour. You may work some magic with background colours and font gradients to emulate a two-color emblem, but when your icons are multicolored, then the present image font setup gained’t give you the results you want.
To treatment this, Apple is proposing multicolor fonts, which might allow you to create and embed pure vector graphics into any net web page. Its first foray into this subject is the Apple Shade Emoji font, which you would possibly have already got in case your machine runs OSX Lion. The draw back of introducing a brand new font format is the dearth of browser assist and font creation instruments wanted to come back on top of things, which suggests it is likely to be some time earlier than this turns into a actuality.
Welcome to the subsequent epoch#section6
Image fonts are the subsequent step ahead in web site design and optimization, and it is advisable to perceive them to work on the net at present. With follow, you’ll be able to create your individual customized image fonts with logos, icons, and branding to embed into your web sites. Not solely will these little extras impress your viewers, however they are going to concurrently optimize your web site’s efficiency. It’s time all of us begin utilizing image fonts—and assist enhance the instruments, requirements, and methods to make them.