Let’s look at an alternative approach for displaying logos on a web page. Normally, you’ll approach the challenge by using an <img> tag. Perhaps you’ll use image replacement through CSS, perhaps you’ll even venture into SVG files, but have you considered what’s possible by designing your own web font ligature?
The Importance of Accurate Branding
First up, a quick word about branding. Visual identity (when done properly) is designed very thoroughly and very specifically. Typography, colors, whitespace, variants – take a look through the corporate branding guidelines of anyproduct or company and you’ll quickly become aware of the small margins for interpretation.
Logos can’t be approximated; they must be reproduced precisely, which is why we’re reliant on image files to display them on web pages.
Displaying Logos on Web Pages
Most web pages display a logo (which makes you wonder why there’s no <logo> or <brand> element?) and they’re often implemented either with an <img> tag:
<a href="/" title="homepage" id="logo"><img src="/img/logo.png" alt="logo" /></a>
or by using an image replacement technique on the content of the anchor:
<h1><a href="/" title="homepage" id="logo">Logo</a>
h1 a#logo {
font: 0/0 a;
text-shadow: none;
color: transparent;
background:url(/img/logo.png);
}This is fine. The markup says “important heading, link to the home page, with indexable (accessible) content to tell us what it’s about”. The CSS swaps out the content for 100% visually accurate branding.
But what about the issue of high pixel density screens. For the above techniques to work in a retina world, a second hi–res version of the logo would have to be served when needed. Or an SVG version instead. Both possibilities, but how about we lean on web fonts by desiging our own ligature?
Think about it:
- If you’re using web font icons already (why wouldn’t you be?) then patching an additional glyph into the font file would mean no extra server requests and very little extra bandwidth.
- Having your logo in font format means you can color it with CSS however you like, with as many variants of it on the page as you please.
- Using ligatures means no need for image replacement techniques (which are a bit hacky, when all’s said and done).
So What’s a Ligature?
For a detailed explanation, take a look at our Anatomy of Web Typography. To summarize, ligatures are purposefully designed character pair combinations. If two characters in a font look awkward when placed next to one another (fl being a classic example) a ligature can be designed to help out. The ligature glyph is then “mapped to” (associated with) the letter combination in question. When the browser encounters that combination, it switches the letters out for a single ligature.
This principle needn’t only apply to letter pairs either; glyphs can be mapped to whole strings.
Our ligature glyph is going to be a fake app logo (named “Vectr”; the last vowel has been removed to prove it’s an app..) and it’s going to be mapped to the string “Vectr”.
The Process
Make no mistake, IcoMoon has made this process easy peezy. Before IcoMoon came along, you would have needed to use a font designing application (Inkscape‘s SVG font editor being one of the few ways to do this affordably) to align and map each glyph. Then you’d save the file, with luck directly as TTF (TrueType), alternatively as SVG after which you’d convert to TTF using another tool. Then, at last, you’d upload your TTF to a webfont generator in order to give you your final product.
With IcoMoon, all you need to do is..
Finally, the Tutorial
Step 1: Vector File
Before we start anything, we’re going to need a logo, in vector form. Many vector file formats can be opened and edited in a range of graphics applications. Encapsulated Post Script (EPS), Post Script (PS), Portable Document Format (PDF) and Scalable Vector Graphics (SVG) being a few common examples for handling vectors.
I’m using Adobe Illustrator in this example, but the whole process can be applied to other applications (such as the open source Inkscape).
Firstly, pay attention to your artboard. We’re effectively designing a font glyph, which under TrueType circumstances would be a square of 512, 1024 or 2048 pixels. This is a convention, not a requirement, but we’ll opt for 1024px to give us a solid grid of 64×16; ideal for designing typefaces around a default size of 16px.
Our glyph will be outputted with this whole artboard square around it, effectively defining our “EM” measurement.
When designing whole fonts it’s important to position all characters relative to each other on this canvas, so that they all sit neatly along the same baseline.
I digress..
With our logo positioned correctly on the artboard, we’ll save the file as SVG. There’s no great difference (as far as our purposes are concerned) in the various SVG settings, just go for the defaults and hit “save”.
Step 2: Upload to IcoMoon
Fire up the IcoMoon.io web app. IcoMoon (developed by the very clever @Keyamoon) allows you to pick’n'mix icon glyphs, map them to characters of your choice, then download the @font–face package for use on the web.
It also allows you to upload your own glyphs (as SVG or TTF) to add to your collection. Import the SVG file we’ve just made, then check it looks more or less okay in the thumbnail.
You can reposition the logo and make small changes by pressing the pencil button and clicking the thumbnail. In fact, in the edit screen you can see that there’s an issue with the balls on the end of each handle in the logo.
You see where the shapes intersect? We haven’t combined all our vector objects together properly in Illustrator, so I need to go back and make sure that’s done properly.
With everything in order, let’s build ourselves an icon collection.
Step 3: Build Collection
Select whichever icons you need, including your logo, then click “(Generate) Font”. At this point you’ll be given a preview of each glyph, including the characters or unicode entities they’ll be mapped to.
You can define the characters yourself (if you want) or, as in our case, you can define a whole string of characters to act as a ligature.
Open up the Preferences menu and check the “Enable Ligatures” checkbox. Now we can enter a custom ligature string in the box above the glyph. In our case, “Vectr” (and that’s case sensitive of course).
In the Preferences window you can also opt to download your font as Base64, embedded within the CSS itself instead of sitting on the server as separate font files. I’m opting for Base64 encoding, as it saves us even more HTTP requests.
Step 4: Download
Now when you hit download, you’ll be adorned with a fully functional demo; an HTML file, all the font files and the accompanying CSS.
The default CSS gives you the choice of selecting all elements with a [data-icon] attribute, or just directly using a class of your choice on elements you want to apply the font file to. We’re also provided with a whole load of interesting typographic CSS rules; some of which are browser-specific, but all of which are worth taking a look at:
speak: none; /* 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"; text-rendering:optimizeLegibility; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased;
There are some fairly experimental rules to make sure ligaments are used where possible, then some other (more standard) rules which reset our text display for elements in question. Before all that you’ll see speak: none; which prevents the contents from being “spoken” by relevant devices (perhaps not necessary in our logo’s case). Then you’ll notice the optimizeLegibility and webkit’s font-smoothing, all good practice for ensuring our typography is optimally displayed in various browsers.
Step 5: Our CSS
Anyway, ignoring those styles for now, all we have to do is make sure our logo element has the new font–family applied to it:
<h1 class="logo"><a href="#">Vectr</a></h1>
.logo {
font-family: 'vectr';
}That’s it! Whenever our browser encounters an element with the class “logo”, with the contents “Vectr”, our logo will be displayed. Now, through CSS alone, we can alter the size, color, various other CSS effects and all 100% resolution independent.
My Big Fat Greek Caveat
Brace yourself: ligatures aren’t supported by IE9 and earlier. Opera has also removed support since version 10 (though as Opera is moving to Webkit that will likely change soon-ish). All other modern browsers, including mobile platforms, play ball pretty well, but you’ll need to make sure you have a fallback solution for older versions of Internet Explorer.
One way of doing this would be to use conditional classes on your HTML tag:
<!--[if lt IE 7 ]> <html class="ie6 lt-ie10 lt-ie9 lt-ie8 lt-ie7"> <![endif]--><!--[if IE 7 ]> <html class="ie7 lt-ie10 lt-ie9 lt-ie8"> <![endif]--><!--[if IE 8 ]> <html class="ie8 lt-ie10 lt-ie9"> <![endif]--><!--[if IE 9 ]> <html class="ie9 lt-ie10"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
These enable you to identify all versions of IE; everything earlier than IE10 here is given the class lt-ie10. You can then overrule your logo styles in earlier browsers, defining some alternative to the webfont ligature:
html.lt-ie10 .logo {
background: something-or-other-change-the-font-family-and-so-on;
}Additional Resources
- Glyphs OS X font editing application
- IcoMoon Custom built and crisp icon fonts done right
- Your logo is an image, not a <h1> by Harry Roberts
- More logo markup tips by Harry Roberts (again)
- relogo: a proposed standard for serving and maintaining up-to-date logos for use in various media
- The fine flourish of the ligature by Elliot Jay Stocks
- Cross-browser kerning-pairs & ligatures by Anthony Kolber