Hand Lettering for Responsive Web Design

The re-emergence of hand lettering has taken over Instagram and has made it a sought-after skill again. The vast array of different styles allow the technique to be incredibly versatile and a worthwhile design consideration. Popping up in an enormous amount of logos (Pinterest, Montage) and page headings (The Boxtrolls, World Baking Day) hand lettering has proven its relevance to digital mediums.

Although it often appears simple, hand lettering can be a complex endeavour, even more so when applying it to responsive web design. With this in mind, I have put together a few considerations to help you decide when hand lettering is appropriate, and how to use it to its highest potential.

Considerations for Hand Lettering

Good hand lettering looks effortless and fun, but before you commit to including it in your web project ask yourself these questions: Does it fit the brand? Will the lettering scale, or the orientation change? Will the legibility be maintained? Is there enough contrast between light/dark, positive/negative space so the characters are distinguishable at a smaller scale? Each of these questions should be considered throughout your design process.

Does it Fit the Brand?

Before I start a project, I like to list keywords that represent the brand and messaging I am trying to convey. We can do the same with hand lettering to see if the technique overlaps with the brand. Here is my list of lettering keywords:

• unique
• genuine
• personal
• trendy
• vintage
• playful
• elegant
• natural

Since there are many different styles of hand lettering, not all of those terms will apply, but if some of them describe your brand, then you can move onto the next stage in your process.

Will it Scale or Change Orientation?

Assuming you want your text to be responsive, you will need to choose between making your text scalable, or to change the orientation to suit different screen sizes. Scalability can create smooth transitions between varying screen sizes, but depending on the complexity and weight of your lettering, a change of orientation may better benefit a smaller screen for the sake of legibility.

Is it Legible?

Unless you are using illegibility to make a point, you should always ensure your audience can read your hand lettering or decorative font. A word that takes longer than three seconds to read should probably be adjusted to make it clearer. Take a step back from your work and squint your eyes. Can you still read it? One of the easiest elements to watch for is contrast. Is there contrast in the shade of colours used? Should there be? More importantly, is there contrast between and inside the shapes of the letters? A quick way to improve legibility is by adjusting the weight and kerning between the letters.

Implementation Options

There are a few different ways you can implement hand lettering on the web. You will need to decide between using bitmap images, SVGs, or web fonts, and which will best suit you and your client’s needs. To help you choose, check out the pros and cons of each below.

Bitmap Images

If you have created custom hand lettering, an image is a simple option, particularly if you are a beginner. One of the main issues with images is that robots can’t read them. If you are going to go with an image, make sure the text is less important and unnecessary for SEO.

Pros:

• completely custom
• easily scalable
• easy to animate
• simple to implement

Cons:

• limited scaling
• robots can’t read them
• slower load times

SVG Images

SVGs are rapidly becoming industry standard for vector graphics on the web. Aside from being fantastic for responsiveness, SVGs can be further customized through CSS and JavaScript, both in appearance and animation. Read about SVG Files for further information.

Pros:

• completely custom
• easy to animate
• infinitely scalable

Cons:

• slow load times when animated
• robots can’t read them
• unsupported by IE8 and lower

Web Fonts

With the ever growing number of web fonts available, there is a wide selection of decorative fonts that give the illusion of hand lettering. If you’re looking for a quick solution, or something that is simply easier to put together, web fonts are the way to go.

Pros:

• easily implemented
• quick to load
• robots can read it
• scalable

Cons:

• complex layouts more difficult
• difficult to customize

In Practice

Below are a few websites I have come across that use hand lettering appropriately.

Market Street Catch

On this website, both the logo and the illustrative word “perfect” create a nice contrast to the dark, intense photos. The photos show off the high quality of food the restaurant uses and creates, while the hand lettering informs us of their more casual atmosphere. The heavier weight of “perfect” allows it to scale well and maintain legibility. This example uses an image for their hand lettering.

Winshape Camps

Winshape Camps imitates the style of hand lettering with a font (dear Joe Hannes) for impact statements. The imperfections of the font (notice how each ‘f’ is different depending on the ligature?) is what makes it most effective–human and messy, just like camp.

Pane

Another food related website, you can see that hand lettering is commonly used in this industry. The essence of “homemade” is captured through words that appear to be written by a human, rather than machine. Reminiscent of a handwritten recipe card, you can barely tell that a font (Art) was used rather than custom lettering.

Conclusion

As you are planning your web project, there are three questions you should be asking when hand lettering is a consideration:

1. Does it fit the brand?
2. Will it be legible and responsive?
3. How will it be implemented?

Reviewing these questions both before and during your workflow will allow your lettering to be more effective and efficient.

Originally published at webdesign.tutsplus.com.