Hand Lettering for Responsive Web Design

Nicole Dean

We’ve talked about how important typography is. We touched base a little on lettering and the unique ways it can be used in design. Today, I want to talk about hand lettering for responsive design! Hand lettering has been a HUGE trend on Instagram and Pinterest and it’s no surprise why! Lettering is an art and a skill just like drawing and coding a website. The expanding range of different lettering styles allows the technique to be incredibly versatile. Popping up in enormous amounts of logos and page headings, hand lettering has proven its relevance to digital mediums. Though it appears to be simple, it’s a very complex thing to do, even more so when applying it to responsive web design.

Considerations for Hand Lettering

Good hand lettering looks effortless and fun but before you just use it in your website because it looks nice, you want to ask yourself some questions. These are questions you MUST address and answer before you jump into it.

Does it fit in your brand?
Will the lettering scale, or will 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?

Does it fit in your brand?

When you’re starting your project, you should make a list of keywords that represent your brand and message you’re trying to convey. You should do the same thing with hand lettering to see if the technique overlaps with the brand. Some examples of keywords include:

Unique
Genuine
Personal
Trendy
Vintage
Playful
Elegant
Natural

Not all of these terms will apply with all of these types of hand lettering but if some of them describe your brand, you can move on to the next question.

Will it scale or change orientation?

Assuming you want your text to be responsive in your website, you need to choose whether you want the text to be scalable or change 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?

Having a hand written font looks great but is utterly pointless if you can’t read it. You want to save the more challenging to read styles for big, page headings and save the easier to read styles for paragraph headings. A good rule of thumb is if you can’t read the word in three seconds or less, you need to adjust it or choose a different font. Take a step back from your site and squint your eyes. Can you still read it? One thing to look out for is if there’s a high contrast between your letters and background. More importantly, is there enough contrast between the inside shapes of the letters?

Implementation Options

There are a few ways you can implement hand lettering on the web. You will need to decide between using bitmap images, SVGs, or web fonts. Which suit yours or your clients needs better? Here are the pros and cons of each option.

Bitmap Images

If you’ve created customer 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 ready them. If you are going to go with an image, make sure the text is less important and unnecessary for SEO purposes.
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.
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 growing amount of web fonts that are available, there is a wide selection of decorative fonts that give the appearance of hand lettering. If you’re looking for a quick solution, or want something that is simply easier to put together, web fonts are the way to go.
Pros: