Hand Lettering for the Web

Have a comment?

Your email address will not be published. Required fields are marked *

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

Tips & Tricks

Branding FOMO

We live in the Information Age, and have more options than ever. More options also means more hard choices, and the risk of being afflicted by FOMO is ever existent—even sometimes seeping into our branding work. FOMO—an abbreviation for Fear Of Missing Out—is a feeling most of us have felt on some level. In short…

News

MacLaren Barbers’ Webshop & New Brand Colors

We are proud to release the MacLaren Barbers webshop, together with an upgraded and refined overall site design, and a new color scheme that will mark out the future of the company. Hours and hours have been spent in the offices of MacLaren Barbers, downtown Stockholm, discussing color schemes, consuming radical amounts of coffee and…

News

A Mother Brand

Our customer New Room Interior comes from first being a home interior webshop, called Mias Interiør, then developing into an online service providing interior consultation across the wide web. After having used the Mias Interiør brand on the New Room Interior site for a while—in order to create familiarity for old customer—the brand Mias Interiør…

Tips & Tricks

Simple Branding Tips for You That Already Have a Brand

I want to give some practical tips for how to stick with your company's brand wherever you are working in your organization and whatever your task is. Always Return to the Palette That's too simple of a tip, you say. But no! It is incredible how often we don't pay any mind to it. And remember I am talking to…

Tips & Tricks

How to Think When Choosing Between a WordPress Solution or a Handcoded Website

We have two web design services, Hand Coded Websites and WordPress Website Solutions. Here I will attempt to explain the difference a little more in detail. Let us say you currently have no website or want a complete redesign from scratch. The first question you want to ask yourself before choosing a service is: "Do I…

Tips & Tricks

How to Make Hand Drawn Logos in Illustrator

One of my personal favorite approaches to making logos in Illustrator, is where you hand draw it first, then scan or photograph it and pull it into Illustrator to vectorize it and refine it. Using this approach you have the opportunity to either straighten up your lines and turn your simple sketch into a perfectly symmetrical…