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.
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.
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.
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.
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.
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 when the project or brand calls for it. Projects that revolve around creativity and flair, or need to feel familiar and inviting, are probably a more likely match than conservative or instructional ones.
Websites featured (from left to right): Zooba, Exlibris Berlin, and Papamusic.
Recommended handwriting fonts
What makes for a great handwriting font?
It has to be versatile, readable, technically sound, and render perfectly when your website loads. And that can be a tall order. The following typefaces are developer-friendly and load pretty much any- and everywhere:
Blankenhorn by Linteo – This handwritten font has a marker style that’s fine and full of personality. With multiple weights and curved lines, it is a sophisticated take on this style.
Mazius Display by collletttivo – With a strong, classic feel, this handwritten font has an old-world feel that exudes strength.
Line by Letters from Sweden – The strokes here look like they were drawn by hand with an extra-fine tip hand. The faux-penmanship is somewhat geometric and structurally solid and readable.
Betina Script by Paratype – Rougher strokes make this font a suitable display option. It renders particularly well at larger sizes.
Brenner Script by Typotheque – With smooth shapes that transition well from one to the other, this typeface is especially versatile. Multiple weights add to its intrigue.
Odesta by Urtd – Designed in a style that’s appropriate for the most formal black tie event, this font features exquisite shapes and a nice slant without feeling overly one-sided.
And four reasons not to use handwritten fonts
While a handwritten font can add much value to a design project, it’s not for everyone. For this style to be successful, it has to match the rest of the project.
Certain industries and types of content almost always avoid this style because it isn’t a solid match. Financial institutions, for example, tend to play it straight with website typography. That works, too. More straightforward styles are associated with formality and trust.
Reasons to rethink the use of a handwritten font include:
It doesn’t match the mood or content of the design.
For lengthy texts or heavy blocks of text, avoid handwritten styles. These fonts are best used in moderation.
If there are technical problems with font loading or rendering on devices or screens, opt for something else.
Legibility concerns: Some fonts don’t work well with some letter combinations. Test your font and your actual copy to make sure it’s clear and readable.
Conclusion
Incorporating handwritten fonts can add emotional meaning, create visual disruption, and offer just the right visual tone for all kinds of design projects.
While many web designers tend to shy away from them, this is the time to explore a little more personality into our typography. Contrary to common belief, most handwritten styles don’t pose technical or loading difficulties online. With many foundries creating quality, web-optimized typefaces, using a handwritten style is equitable to any other.
The number one thing to remember when designing with a handwritten font is that as a strong visual element, it requires plenty of room to do its magic. When using a handwritten font, the rest of the design should probably be a little simpler and more subdued.
Put aside the prejudice and treat handwritten fonts just like you would any other special visual element.
.jpg)
.jpg)
.jpg)
