Using @font-face for resolution independent graphics

In our recent feature about JP74’s website, we noted in passing a neat trick they employed in rendering their logo and a couple of graphic artifacts using a custom font. We asked JP74 director and chief front-ender, Jake Smith, to talk us through it.

 

The hot topic in web design circles right now is finding the best way to dynamically deliver the right resolution image for a user’s particular screen. As far as we know, that debate hasn’t been settled yet, but we can recommend a different approach for displaying logos and vector graphics that will look great on a Retina or similarly pixel-dense display, will have a tiny file size, will only require one media source, can be colored on the fly... and that is, convert your vector graphics into a webfont. Here’s how.

Creating the font

Having already created the character shapes in Adobe Illustrator (any vector-generating software will do, so long as it can export .eps files) we used the free 30-day trial of FontLab Studio to import the .eps vectors and map them to glyphs in a font. FontForge is a decent open source alternative for anyone planning to do this type of lightweight font creation on a regular basis.

Having exported our new custom font, we used Font Squirrel’s online webfont kit generator to make the web-ready font files.

Writing the CSS

Within the CSS, we used pseudo classes on <span> elements to show the characters. For example, the markup for the JP74 logo in the header looks like this:

<h1><span>JP74</span></h1>

the corresponding CSS is as follows:

body>header h1 span {
display: block;
height: 0;
padding-top: 140px;
overflow: hidden;
line-height: 1em; }

body>header h1:before {
content: "a";
font-family: ’jaypeeRegular’;
color: #2c2c2c;
z-index: 100;
margin-bottom: 40px; }

We use overflow: hidden on the first bit to hide the JP74 copy, but it sets the height for the element, then the :before adds the character ‘a’, which maps to the JP74 logo in the jaypeeRegular font.

It’s a simple, easy technique to render graphic assets that will look great on any device and scale beautifully.