Hand Lettering for the Web

Have a comment?

Your email address will not be published.

You might have left one of the fields blank or be posting too quickly.

Thanks for your comment. We appreciate your response. Reload the page to see your comment.

Please wait a while before posting your next comment.

What is on your heart?

With the rise of small brands, start-ups, handmade, locally bought, organic, vegan, and all those back-to-the-roots movements, the demand for hand lettering has gone up radically. There was a time when everything was supposed to be square and digitally perfect, but now these two styles live side by side in a beautiful synergy.

Digitalizing hand lettering and using it on the web, while still keeping those little imperfections present in the designs has a way of making your website seem a bit more relatable—the way it merges the real gritty world with the neatly organized digital world.

Maybe a piece of hand lettering is exactly what your brand needs.

There is a level of personality that enters into your brand once you do hand lettering. You could of course take time to perfect all the lines of the hand writing, thereby making a digital-looking, but truly unique piece of design for your brand. But many choose to keep that rough handmade feel when converting it into a digital piece of art, just to highlight that it is truly handmade.

There are pros and cons to each approach, and it all comes down to what fits your brand and simply what you like to look at.

Hand lettering used in marketing.

A smile, excitement, and a hand lettered overlaying text. You can download this word for free at the Wrds project.

One thing that makes the hand lettered style grow on me over time, is the fact that nobody else can copy that piece of design by using the same font. It is yours all the way through.

The big brands are using hand lettering

I am sure you have noticed it—otherwise you will from now on. I can barely ride the metro one stop here in Stockholm without noticing an ad campaign featuring hand lettering. I can barely go down the escalator on my way there before I’ve spotted something hand written.

McDonalds in Sweden and Norway is an interesting case study in hand lettering. I have noticed a huge change in their use of imagery and typography over time. Images of farms, farmers and fields, paired with handwritten style text has really changed how I view the quality of their meat. Now, I am well aware that I might be deceived by the imagery, but I also know that Scandinavian McDonalds’ puts a whole different demand on their raw material than say, America.

How do I know this? I have been brainwashed by the smooth hand lettering used in their campaigns. It is almost inevitable that the hand written style makes you feel closer to the brands using it, and make the brands feel closer to nature.

Hand lettering in a frame of convention

I always say that there is room for a lot of creativity in branding, but it should always be done within certain borders. Keep your base colors, fonts and your logo consistent, and then experiment on top of it. Innovate within the context of your brand.

Innovate within the context of your brand.

Your entire brand don’t need to be reworked into a hand written style—you should keep your logo year after year to create memorability—but your related side projects, your campaigns, or specific products could have it’s very own trademarked typography, or feature a style that deviates from the brand foundation, but don’t oppose it.

Also, many—like McDonalds have often done in these campaigns I am referring to—draw their brand to the edges, and innovate in the middle. A frame in the brand colors? Logo in a neutral color in the edge? Logo and brand at the end of the video in a separate segment?

The video I have included in this post takes the burger back to the farm in an attempt to make the user see how wholesome their process is. In the video, a Norwegian man orders a burger at a farm, then they go through the entire process, from the fields, until the burger is handed to him in a McDonals joint. Then the video ends with a line of text in a hand written style to underline the natural process of fast food burger making. Then it is finally signed off by the classic, incredibly recognizable McDonalds logo, tying it all together in the good old brand.

You can say whatever you want about McDonalds, but this kind of marketing changes our perception of the brand, and the hand lettering plays a huge role in that process.

Digitalizing hand lettering

There are different ways to utilize hand lettering after it is drawn. You could go the way of photography, where most of the work is finished off-screen by hand, then you photograph the work as it is, and retouch it in Photoshop, before you use it in the campaigns of your choice.

This process leaves your hand lettering with an incredible hand made look—which is kind of obvious—and that is the strength of that process. It fits you well if you have pre-planned your entire marketing campaign, and know exactly where to use it. The downside to this digitalization process though, is that the usability is somewhat limited. The size is limited to the size of your photo,  it is hard to use as a overlay to a video, and it is not fit to use as a logo.

If you choose the other path—the one that I am mostly using—there are different pros and cons. No way is right or wrong, it all depends on your purpose.

The process of digitalizing hand made art, and vectorizing it along its lines, leaves your with a very versatile piece of design that you can use as a logo, print on all kinds of merch, and use as an overlay over pictures and videos, to mention a few ways. With this process you separate black and white and then turn the white into transparent. The single-color print you are left with could of course be split up, colorized and worked however you want.

MacLaren Barbers is one of our customers using a hand lettered beautiful logo. We got the scanned artwork from a contact in the U. S. and we digitalized it.

The best thing with this approach is that it is vectorized — which means you can use it in any size possible and it always looks crisp on a retina screen when used in its SVG format on the site. (The typography on the pictures on this blogpost is not in SVG, it is integrated in regular JPEG pictures.) In short, vectorized pieces don’t use pixels, but mathematical equations, to present its shape — that means, if you scale it up, the math recalculates the shape it in a larger format, and it does not loose any quality.

Hand lettering vectorized.

Vectorized hand lettering, part of the coffee series that starts coming out in the end of January 2018.

These vectorized pieces of hand lettering could also be used to create a font, if you are ready to put down a bunch of time. It is also a future proof piece of design—if you want to keep using it until we have 10k screens, it’s not a problem.

The possibilities are endless, and this makes hand lettering and digitalization one of my favorite parts of my craft.

Free hand lettering to the people!

With this trend and demand in mind, I am working on a free hand lettering resource for brands to use in their marketing.

It is called Wrds, and contain just that—free words that aim to fit your branding needs (though I have made a lot of nonsense words too.) You can download PNG, JPEG, SVG and AI files for free and use them however you want for commercial or personal purposes.

With Wrds, I explore different styles, and have committed to two words a week, so that I can develop my hand lettering skills, and also refine my process of importing and digitalizing the hand made product. It is a journey that already yields results, in where I can see my skills having grown since I set out.

Bold rounded digital hand lettering for the web.

Bold rounded digital hand lettering. It is a journey in learning. Download the word for free here.

I hope the Wrds project is catering to your needs. And if it is not, please leave a comment below, and I might make it some time in the future.

Otherwise. Comment your city or country below, and I will make that! I really enjoy the community part of this project. Also, follow Wrds on Facebook, so you can see if a word you need comes out in the future.

Simple straight lines of hand lettering for the web.

Comment your city, and I’ll make that next! Download the word for free here.

Good luck with developing your brand! And do comment your city or country!

This one was written by Benjamin Antoni

Reaching about 10 years experience developing for the web, and have been doing various forms of graphic design since he discovered a copy of Photoshop in his brother's room a long long time ago. Mail him if you want work done.

Mail him


Update 2.5, Old Newspaper WordPress Theme is Out!

In the most visual update for a very long time, Old Newspaper is expanded into eight distinct style options, and the option for using handwritten typefaces. Along with all these style options comes Boxed Mode, an optional function that allows you to add a small margin to the theme on desktop. This makes the newspaper…


Sticky Situation: Old Newspaper WordPress Theme v2.4 is Out

At the end of last year I found myself in a sticky situation. I set 10 patrons as a goal for releasing the next Old Newspaper WordPress Theme update. Then we got to 9. I was all excited, and then people started dropping off. At the same time, we were going through low season for new sales (Christmas, into the…

Tips & Tricks

How to turn on Dark Mode on Facebook Messenger

Hello darkness my old friend. I'm here to flick your switch again. Short Answer In the Messenger app, click your own profile photo, then flick the "Dark Mode" switch directly. In the Facebook app or on the web, it is not currently available, but it seems to be in development. How to turn on Dark…


One Backer Left Until The Next Old Newspaper WordPress Theme Releases

A new update is coming to the Old Newspaper WordPress Theme, and this time it’ll change more than ever before.

Tips & Tricks

How to Increase Instagram Engagement in 2019

Let me break it to you at once. The keyword is engagement. We are not looking for just likes or comments. We are on the search for genuine human interaction. Just like in real life. A lot of the problem with Instagram engagement in 2019, is that people are so tired of spam. Tired of…