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.
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.
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:
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.
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.
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.
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.
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.
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.
Below are a few websites I have come across that use hand lettering appropriately.
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 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.
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.
As you are planning your web project, there are three questions you should be asking when hand lettering is a consideration:
Reviewing these questions both before and during your workflow will allow your lettering to be more effective and efficient.