Lettering for the web

— An article about: , - Process

Though they’re probably what comes to mind most easily, lettering is not limited to analog supports (prints, signs, murals…). It can be used in website designs too. This medium brings new challenges, but also offers rewarding possibilities. A few of my latest projects have required me to draw letters that would later be embedded on a website. Here are a couple of things I’ve learnt along the way.

Pick what will be turned into lettering

Offline, you’d probably wouldn’t consider to hand-letter the whole content of a book or magazine. It’s much simpler and cost effective to only use lettering for headings and illustrations, and leave the bulk of the copy to be set with fonts.

This also applies on the web, but another constraint gets thrown in when picking which parts are good candidates for being lettered. Websites are live and their content gets updated regularly. It’s easy to change a message set with a font, but for text that has been hand-lettered not so much: a new artwork has to get drawn with the updated message.

This means lettering should be reserved for parts that are foreseen to remain the same throughout the whole life of the website. Or that will at least allow enough time for a new lettering to be produced before the update. Good candidates would be headings of the main sections, or supporting illustrations for example.

Art direction will have a big impact here. Choosing simpler styles, limiting decorations around the lettering will allow quicker production times. This could help to give some lettering love to parts of the design that will just get updated every now and then.

And maybe it’ll only be part of the design that will need regular editing. Lettering the static part while setting the editable bit with a font gives you the best of both worlds. An original rendering of the message and the ability to update what’s needed when the time comes.

Paired font and lettering for TEDxBristol branding

Then be even pickier

Once they’ve got that magazine in their hand, or they’re in front of a mural, viewers can enjoy the lettering instantly. Online, their device needs to download the content of the website before it can be shown to them.

Adding more images (which is what lettering is in the end), will add to the loading time, and slow loading time drives users away. So when planning a design that includes lettering, you’ll need to keep this loading time in mind to pick which parts get lettered. Especially as not everybody will be seeing the website with the comfort of a fast broadband.

But this quest for performance doesn’t just impact what will get the lettering treatment. It also impacts the assets that will be created: the lighter the files the better.

Picking the right file format will be really important. For artworks with clean lines, vector formats will shine, especially as SVG is perfectly understood by the browsers. That said, if the artwork has rougher lines or some texture, rendering it to a JPEG or PNG might yield smaller files (and faster websites). This is for example what happened with the headings of this website.

And of course, you’ll want to keep the resolution of these artworks in check. No need to download an HD artwork if it’ll just be displayed in a 200px wide area.

Get things moving

So far, the web seems to be mostly adding more constraints to the work. It also allows things that would just not be possible with printed/painted media.

Like adding animations and interactions to the lettering pieces. Inside a browser, the parts of the artworks can move around, fade in or out and react to user interactions.

Producing artworks for animation requires a bit more planning than a static image. Each part that will be animated need to be on its own so it can move independently from the other. And there’s of the course the design of the animation itself to do. But these animations can make the experience smoother and more engaging for users.

Embrace responsiveness

Websites also get viewed through a wide variety of screens: from small but tall phone in your palms to large and wide TVs in your living room. Depending on the design, this means the space allowed for the lettering might vary from one screen to another.

At best, it would be a simple change of resolution. But it can also mean different screen display different images entirely. Fortunately, lettering is about is adapting the message to the space available. So with a little effort and planning, it is entirely possible to create artworks that will adapt to the space given by the screen.

It’s actually an exciting challenge to create something that will have to morph according to the space that it is given.

In the end one of the strengths of lettering is adapting the form of the message to its support. The web is just another one of them. For the new constraints it gives, it also opens the door to create animated and interactive pieces, helping to make your message even more memorable. Have you encountered beautiful lettering pieces nicely integrated in the design of a site? I’d be happy to hear about them!