Hand Lettering for Responsive Web Design

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:

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

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.


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


  • 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.


  • completely custom
  • easy to animate
  • infinitely scalable


  • 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.


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


  • 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.


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:

  1. Will it be legible and responsive?
  2. How will it be implemented?



A designer writing about design and maybe some other things. Senior Growth Designer at Parabol

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alicia Cressall

Alicia Cressall

A designer writing about design and maybe some other things. Senior Growth Designer at Parabol