Profile picture of Carrie Cousins

7 min read

An argument for using handwritten fonts in web design

Handwritten fonts are often looked down upon in the world of sleek interfaces. But is it time to reassess these old biases?

The letter A in different handwritten fonts by Vered Bloch

Illustrations by {name}

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

With so much focus on readability, there’s a reason why websites are packed with sans serif fonts. But what if I told you to throw that idea out the window and try a handwritten font?

There’s so much “vanilla” typography out there; it’s time to try more handwritten and novelty display styles. Injecting some personality into your design projects can actually be in your favor, as long as you don’t go overboard.

While it isn’t the most conventional opinion, there’s a strong case to be made for using more handwritten typefaces. Let’s explore how to do it while creating better, more beautiful website experiences.

Handwritten fonts have more personality

Maybe the best argument for using handwritten fonts is that they can emphasize the unique character of your project or design.

Think of how a ragged font, for example, can take the formality out of words and provide a rough edge.

A long tail or beautiful swash can contribute to the graceful tone of wording.

The right script can feel like a personalized signature or action.

It’s much harder to form these distinct emotional ties with a geometrical sans serif. The individuality and sense of honesty that comes with a specialty or experimental typeface is almost incomparable.

In regards to personality, a handwritten typeface can do for a design what great wine does for a meal. It sets a mood, a tone, and a feel for everything that is to come with the presentation.

Shoelaces: Handwritten fonts in web design

Interesting typefaces are disruptive

Have you ever stopped to look at something just because it was different? That’s what handwritten fonts can do. It’s a disruptive visual element that helps draw attention to the design as a whole.

It stands out because so many websites use sans serif font palettes. It’s a font style that’s become so dominant, that you are almost shocked to see anything else. And that’s precisely what makes users stop to look and read.

The website visitor might first notice the typeface, but will soon after start to take in the surrounding content. A choice as simple (or complex) as typography creates a distinct first impression, fostering that initial engagement. Every second that you can keep a new visitor engaged increases the likelihood of a conversion.

Mama Mermaid: Handwritten fonts in web design

It’s much harder to form distinct emotional ties with a geometrical sans serif. The individuality and sense of honesty that comes with a specialty typeface is almost incomparable.

Handwritten fonts are a time-tested option

The use of handwritten styles in website design is often seen as a bit of a controversial topic. Nevertheless, graphic designers have been creating amazing pieces with this style of typography for hundreds of years.

Some of the first fonts were hand-drawn logos and letterforms.

More recently, handwritten styles remain popular in other graphic design areas, such as book and magazine publishing - perfect for drawing attention among a sea of competing titles - as well as poster and other print design.

If handwritten fonts can work for all of these other graphic design applications, what makes web design different?

This comes back to a simple rule that website designers created in the early days of the internet: Sans serif fonts are easier to read on screen. That may have been true back when screen resolutions weren’t the super-sharp and crisp visuals we have today. As technology keeps getting better, it’s time for the sans serif bias to make room for more diverse uses of type online.

Actually I Can: Handwritten fonts in web design

Choose from almost unlimited text options

While the argument here is primarily for using handwritten fonts, it also extends to almost any novelty or display typeface. Combined, these styles provide an almost unlimited smorgasbord of fonts to choose from:

  • Scripts

  • Cursive

  • Outline

  • Block letters

  • Fancy swashes

  • Comic styles

  • Pen or marker styles

  • Dashed or dotted-lined

In addition to types of fonts, there are also plenty of weights and styles.

Thick strokes, for example, add weight variance and visual importance to projects that need extra emphasis.

Rough edges or lines feel casual and rugged. A handwritten font that isn’t cursive or script can add unexpected flair to a project.

Classical handwritten styles that include cursives, long tails, or swashes are elegant and somewhat formal. That’s why this style is often used for wedding lettering, but there’s nothing that says you can’t incorporate that same sophistication on a packaging label or an eCommerce website.

Comic or cartoon styles feel more lighthearted and childlike. They should be used scarcely, and only when the emotional tone matches the content.

Marker styles, as well as mixes of print and cursive lettering, can seem rushed and informal. On the other hand, these font choices can add a personal touch, like a hurried note to the design canvas.

Life is too short to wait: Handwritten fonts in web design

Handwritten fonts generate focused attention

Every design needs a focal point to draw attention and ensure that the message is understood. If you are lacking other strong design elements, such as a stellar photo or video, an amazing font can be the perfect fix.

Use a handwritten font to create a special art element for the design that is equal parts beauty and function. Incorporate color or other design divots to increase impact.

Conversely, the right font can also function as a stand alone element, without resorting to too much secondary ornamentation.

This can make it even more important to design a strong type hierarchy with good use of whitespace, so that the special text area of the design stands out in the best possible way.

Handwritten fonts can generate attention in another way as well. Because these fonts often do require a little more brain power for full comprehension, they force people to look at the design for just a few milliseconds longer.

While it doesn’t sound like a lot, that’s a lightyear in website time-on-site land. Any extra time a user spends with the design provides all the more opportunity for you to get your message or information across.

Check back soon: Handwritten fonts in web design

Handwritten fonts are beautiful and readable

The idea that handwriting fonts aren’t readable is a myth.

When used well, a high-quality handwritten or novelty typeface is readable. That being said, most of these fonts will get cumbersome when used for body copy. As a headline or logo, however, they can be amazing.

To ensure readability, look for a handwritten font that can check these boxes:

  • Is high-quality and sharp. Not any freebie font will do; many lack all the characters you will need, and some are even mildly pixelated, or simply not crafted with enough care.

  • Uses swashes, ligatures, and alternates. These let you control lettering if there are trouble spots.

  • Will render online as a font and you don’t have to embed it as an image. Otherwise, you may run into quality, accessibility and search issues.

  • Pairs well with a font from your current palette. When not done well, matching a handwritten font with a serif or sans serif can be jarring and result in readability concerns.

How to use handwritten typography

As with almost any other design tool, there are right and wrong ways to use handwritten fonts. Let’s focus on some of the best practices.

Incorporating a handwritten font isn’t always easy. Here are a few ways to help ensure success:

  • Pair handwritten styles with super simple fonts everywhere else. Elaborate font styles can easily overpower another typeface, so try to avoid fonts that visually compete.

  • Limit your use of handwritten typefaces. It is seldom that you’ll find a large block of text in this style. Use it in moderation - only a handful of words - and avoid these fonts for repeating elements such as headers (H2 or H3).

  • Employ whitespace. Handwritten fonts may need more space around them in order to create focus and facilitate readability.

  • Consider larger letter sizes. Many handwritten fonts aren’t designed for small letter sizes, and work best when used for display and headline text elements.

  • Tone down all other visual clutter. Anything that demands extra focus will add to the cognitive load, and you don’t want to overwhelm users with too many things to look at all at once.

  • Go beyond cursive. Play with other options.

  • Examine specific use cases. Consider handwritten fonts for branding, logos, or stand alone art elements.

  • Think outside the box. Use handwritten styles when you need something interesting and unexpected, such as a “the,” “and,” or another connecting word in a phrase.

  • Opt for a handwritten font wh