Menu

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.

JP74 logo

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.

More…

Back...