Hand Lettering: How to Stylize Your Letters

Hand Lettering: How to Stylize Your Letters

What You'll Be Creating

We're nearing the end of this lettering series! In this tutorial, I'm going to provide you with some more technical methods to create different types of letter styles.

Here you'll learn about different letter styles. But if you'd like to find the best layered fonts for your digital projects, scroll down after this tutorial. We've got a selection of premium hand-lettering fonts from Envato Elements.

Create stunning designs like this with the Sequents Layered Font from Envato Elements.

What You Will Learn in This Hand-Lettering Tutorial

• What types of letter styles are there
• How to style a letter
• How to add depth to letters

Now, you obviously know there are endless types of letter styles. I still have yet to attempt everything, but for this tutorial, we will be focusing on nine of the more common types of letter styles that I use within my work:

1. Split Style
2. Ornamental Details
3. Closed Drop Shadow
4. Chisel or Embossed
5. Inline Style
6. Cutout
7. Open Drop Shade
8. Texture in Illustrator
9. Double Stroke

I'll explain the process of these all individually, but feel free to combine multiple styles to create a unique character.

Note: This tutorial requires an intermediate/advanced level of knowledge of Adobe Illustrator. I'll be using terminology that you may not understand if this is your first time opening up Illustrator. Regardless, the step-by-step process should be simple enough to follow along and allow nearly anyone to complete. Just be prepared to learn a thing or two! As always, if you get stuck or have questions along the way, leave a comment below and I'll get back to you ASAP!

Preparing the Tools You Will Need

1. Computer
2. Adobe Illustrator
3. H Matrix: Download Attachment

Throughout this hand-lettering practice, I'll be using some custom "H"s that I created. Even though these "H"s might not be "hand-lettered", they can very easily demonstrate the styles I'll be creating. So you can still use the below techniques for nearly any piece of lettering or typography you create. You could even use them to customize a typeface. It's all about choosing the right technique for the right project. Use them sparingly as well, because multiple styles could be quite overwhelming. 

Lastly, within each section, I've included an example of some "real-world" applications of the different letter styles we will be tackling. Hopefully those examples can show you exactly how they can be applied elsewhere and not just on the "H"s we will be working with in this tutorial. Let's get started!

1. Split Style

I call this the "split style" because of the nature of the letterforms after they're "divided". The letterforms are almost divided in two—hence the "split" effect it creates. 

Step 1

In the "H Matrix" vector file I provided, we will begin in the top left and later end in the bottom right, working left to right. 

So, to begin, the first "H" we will style is the above bracketed "H" (top-left corner of the matrix). During this step, feel free to color the "H" any hue or value you'd like. For me personally, I'm keeping it a gray value.

Step 2 

To "split" the lettering, use the Line Segment Tool in Illustrator and form two lines on top of the "H". Give those lines a white stroke to create the split effect.

Step 3

To finish it off, create one more horizontal line segment on top of the crossbar. But I would make your stroke weight a hairline thinner than your vertical strokes to optically balance everything.

Rule of thumb when it comes to type: horizontal strokes (especially when they connect to vertical strokes) appear thicker optically.

The above GIF is the process we just went through. I hope it gives you more insight into how it all came together.

The above lettering piece I completed a few months ago used the "split-style" throughout. Hopefully this demonstrates a good usage of the stylization.

2. Ornamental Details

During this part of the tutorial, you can pretty much create anything your heart desires. Ornamental details could be nearly anything. Shapes, lines, texture, flourishes, etc.—feel free to go wild!

Step 1

To begin the next style, I'm using the "H" that's second from the top left. Remember, we're working left to right. Feel free to color the "H" if you please. We'll now begin to create some ornamental details. Now, this is a great opportunity for you to do whatever you please. The details in this "H" could be whatever you want! As always, you're welcome to create what I came up with as well.

Step 2

I wanted to create "spur" cutouts in the vertical strokes. To do that, form a triangle with the Pen Tool (give it a white fill) or however you please. There are a million ways to do one thing in Illustrator! You can see the shape I made in the image above. Once that initial shape is created, you can just copy and paste it across the vertical stems. 

Step 3

Next, I decided to add a diamond shape in the center with strokes extending from top to bottom. Again, whatever your heart desires. The "ornaments" you add to your typography can be literally anything. Just use your design sense to make sure it looks good!

To create the above additions, I formed a diamond with the Rectangle Tool. Form a square by holding Shift, and then rotate the square 45 degrees, and extend the top and bottom anchor points.

Lastly, draw line segments to extend above and below—similar to how we did in the "split style".

Step 4

To finish, I created a few more additional shapes to extend outward from the letterform. Also, I utilized another diamond shape to branch off the crossbar. You can see in the above image that I formed the shapes, and duplicated those shapes to the other vertical stem. 

Once it's all put together, the process should appear something like the above GIF.

It's crazy how some simple shapes added or subtracted from the letter can change the entire feel instantaneously! The possibilities are endless.

There's no right or wrong answer to forming ornamental details. It's whatever the design calls for really. Use your judgement, understand the look/feel, and make additions accordingly. 

In this example, the ornamental details I added were the "spurs" and the bordering around the letterform. Additionally, I used some other techniques that I will be showing you later in this tutorial.

3. Closed Drop Shadow

Here we'll learn how to add depth to letters. The process for the drop shadow below is the process I find easiest and simplest to create the effect we're going for. There are many, many ways to do the same thing, so if this process doesn't seem logical to you, feel free to complete the task in any way you see fit!

Step 1

We're going to begin with the top-right bracketed "H" in the matrix. At this point, as always, feel free to change the hue and get prepared to tackle the next step.

Step 2

Time to begin forming the drop shadow. To begin, while holding Option on a Mac or Alt on a PC, begin to click and drag your "H" downward and to the right (or left) about three pixels. No need to be exact—just try to copy the image above. If you look closely in the above image, you can see what we will be forming. It'll look as if we have two "H"s layered on top of each other. Feel free to change the hue or value of the "H" so you can see the layering going on.

Step 3

Next, after you've completed Step 2, all you have to do is press Command-D, which is the shortcut for Duplicate. Keep pressing Command-D until you have about four to seven duplicates of your H. It should end up looking like the above image. It's just a bunch of "H"s stacked on top of one another. Notice that the first, lighter gray valued "H" is still on the bottom. 

Step 4

Next, bring that lighter valued gray "H" back to the front so the darker valued "shading" is on the bottom. I'm sure this looks a bit weird, but I promise it'll look better by the next step! At this point, I would Merge all of those duplicate darker valued "H"s so you have a single shape. It should look similar to the above image, although the direction and angle of your shadow may appear a bit different, and that's okay!

Step 5

The last step to finish off this shadow is to remove all of the unnecessary anchor points that were created once you merged your "H"s. Begin deleting the extra anchor points that formed those ridgy sections to make a smooth connection. Once you're finished, it should look like the above image! You've now completed a simple drop shadow.

Here's a process GIF to show the start and end of the drop shadow. It may be a couple of steps, but when done correctly, it only takes two or three minutes to create one! 

The drop shadow in the example above was completed with the same process. As you can see with this example compared to the "H", it works for any kind of lettering! The reason I use the above process instead of the "Extrude & Bevel" option, for example, is because of the unnecessary shapes, anchor points, and groups it creates. It gets a bit too complicated in my opinion. The method above is simple and to the point.

4. Chiseled or Embossed

This process below may be my personal favorite. The look is always clean and produces some great depth as well. People refer to this process as both a chiseled and an embossed look. Either name is correct in my book! Let's get started.

Step 1

We're now beginning to work on the second row of the "H" matrix. Starting with the leftmost "H", change the hue and value to your liking, and prepare to use the Pen Tool! 

Step 2

Now we're forming line segments that we will later "Divide" using the Pathfinder tool to create our chiseled effect. So begin to divide out your "H" similar to the image above. Essentially, what we're looking for this "H" to have is a light value, medium value, and dark value. These divisions will ensure your "H" has the proper shading.

Again, the line segments above were created with the Pen Tool and have a 1 pt stroke. The key to making this work is making sure your line segments all touch one another. They don't need to cross paths, just touch to allow the division process to work properly.

Step 3

After you think your paths are all good to go, remove the stroke weight from your line segments, leaving just a path with no stroke whatsoever. It should look like the above photo. You can only see the path because I've highlighted it with my mouse.

Step 4

With your "H" and all the line segments selected, navigate over to your Pathfinder tool and select the Divide option. Once divided, your "H" should appear like the image above. Essentially, all parts of the "H" are now divided into separate shapes for you to color accordingly.

Step 5

Lastly, to finish off the divided-up "H", it's time to color each individual shape. But first, you need to determine where your light source will be. For me, I've determined it'll be in the top left. Therefore, the top shapes are going to be the lightest value, side shapes will be your medium value, and bottom shapes will be your dark value. Make it consistent throughout and use proper judgement—you know what looks good and what doesn't! The image above is what it could look like. Obviously, your values and hues may differ.

Another process GIF to show the beginning and end. The Pathfinder tool is your best friend!

In the example above, I've used the same process to divide up my "Z". The texture and other effects were created separately. For this particular example, I've applied the texture in Photoshop to decrease the file size because Illustrator files get rather heavy once a ton of texture is applied. I'll describe my texture process later in the tutorial!

5. Inline Style

Here we'll see how to style a letter with inlines. This might not be the proper name for the style we're about to work with—it's just what I call it. This process is incredibly simple and doesn't require much time at all.

Step 1

Time for another favorite style of mine, the "inline". We'll be using the center slab serif "H" within the matrix. Prepare that Pen Tool again. This process will be very fast—don't you worry!

Step 2

To begin, either use the Pen Tool or the Line Segment Tool to form a line from the top slab serif to the bottom slab serif. Once you've drawn that one line, copy and paste it over to the right-hand vertical stroke. If your "H" looks like the image above, you're on the right path. That was the hard part!

Step 3

Next, with those stroked line segments selected, navigate your cursor upwards towards the stroke "profile" selector. This can also be found within the Stroke window. Anyway, once you're inside the profile selector, choose the very first option, which looks like a squished eyeball. We want the profile that will taper either end of our strokes. Feel free to play around with other profiles. Some of them create some cool effects.

Step 4

There you have it! The stroke tapers from one end to the other, creating a nice fluid and pointed stroke in a simple click of a button.

As always, the process GIF is above for you to see the beginning and end stages. Not much to the process to create this style!

As you can see above, I put the inline style to use for my deck design for Girl Skateboards. I felt my letterforms were a bit too heavy. To reduce that heaviness, I added the inline styling to not only even the color, but also to add a nice texture.

6. Cutout

The cutout style we're about to begin is very similar to the inline style because we'll be using the profile selector again for our strokes. It's a very quick process.

Step 1

Now, working with the far right "H" in the middle row, let's begin the cutout technique. At this point, change the colors, scale, etc. to your liking, and then prepare the Pen Tool again!

Step 2

Next, draw a line that's about a third of the length of the vertical stem. Only draw one line because you can then copy and paste it across the rest of the letterform. It should end up looking like the above image after all of your copying and pasting is completed.

Step 3

Lastly, just as we did in Step 3 of the "Inline Style" section, navigate your cursor upwards to the profile selector. With your strokes selected, instead of selecting the first tapering option, we're going to select the triangular-looking shape, just like the image above. That profile will make the base of your stroke flat, while the rest of it tapers. It'll essentially create a triangle shape that'll cut out your stems.

Here is the very quick process above. Only about eight clicks of the mouse required to create this effect. Not too bad!

The cutout effect is another favorite of mine. I've included the cutout styling in this hand-drawn piece for State Bicycle Co. However, I didn't use Illustrator for this one. I created the cutout effect the good old-fashioned way—by hand, with a pencil.

7. Open Drop Shade

This style is another way to learn how to add depth to letters. The open drop shade is nearly identical to the "drop shadow" process we completed earlier. The only difference is the negative space between the letterform and the shadow we will create. Your drop shade or shadow can fall to the bottom-left or the bottom-right. One thing I'll mention is that a bottom-left shade is considered a "sign-painter's shade", while the bottom-right shade is a "printer's shade". 

A sign-painter's shade requires fewer strokes, and thus, less paint. It's all about efficiency when painting shades. Therefore, shades going towards the bottom-right require more strokes of the brush. In this case, we're using Illustrator, so it doesn't really matter to us since it's vector. Just thought I'd share that bit of info in case you decide to paint a shade/shadow!

Step 1

We're nearing the end! Let's now begin with the bottom left-hand sans serif "H". Do your thing with this "H"—color it, scale it, anything else your heart desires, and prepare yourself for a very similar process to the "Drop Shadow" section.

Step 2

Next, similar to Step 2 in the "Drop Shadow" section, hold down Option and click and drag one "H" downward about 5 px. Then, press Command-D about five to seven more times to create your shadow. It'll end up looking like the above image. Lastly, Merge all of those copied shapes to form a single shape.

Step 3

The next thing to do is to move that "shadow" to the back so that it's behind your original "H". Next, change the color/value of the first copied "H". This will allow you to see what we're doing in the next couple of steps. After all is said and done, it should look similar to the image above.

Step 4

Continuing further, we're now going to Subtract our different valued "H" from the rest of the shadow we just created. This subtraction will create the open negative space between the letterform and the shade.

Step 5

Again, just as we did before in Step 5 of the "Drop Shadow" section, begin removing all of the unnecessary anchor points. After you remove them all, it should be looking nearly finished! Just one last thing to do.

Step 6

Take the shade one step further and make it appear more as if it's extending from the "H". In the image in Step 5, the shade squares off in the corners. To fix that, delete those extra anchor points and then shift the sole anchor point to the right. It doesn't matter which anchor point you delete, since you'll be moving the remaining anchor point anyway. Compare and contrast the image from Step 5 and Step 6. You'll see what I mean.

Use this process GIF above to help you, if needed! The process can get a little confusing if this is your first time attempting something like this.

In my real-world example above, I actually created a two-shade open drop shade: one lighter-valued blue shade on top of a darker-valued blue shade. I used the exact process I described above.

8. Texture

For this portion of the tutorial, we're going to utilize Nick Slater's wood texture since he's graciously giving it away free. Head over to his Dribbble page, download the texture, and prepare to begin the process! (Note: the original texture used in the tutorial is no longer available; try this alternative.)

This technique can work the same for any kind of texture. Whether that's concrete, wood, fiber, fur, etc., it'll be possible using the steps below. Let's begin.

Step 1

We're now working with the middle sans-serif H in the bottom row. Change the hue, value, and whatever else you'd like. Next, open up that texture that I linked to above in Illustrator.

Step 2

Now, with the wood grain texture open, copy the texture. Navigate over to your "H" and paste the wood grain texture on top. It should end up looking like the above. At this point, select the texture and Expand it to ensure it's a solid shape and not a stroke.

Step 3

The last step is to select both the texture and the "H". With them both selected, navigate your mouse over to the Pathfinder panel and use the Minus Front option. This will take the texture and "subtract" it from whatever is behind it. In this case, our "H" will have the texture removed from it, leaving a wood-grained "H".

I used the same process in this piece. My "Follow Your Bliss" piece was screen-printed, and instead of using a "yellow" hue on top of the lettering, I "subtracted" the texture from the lettering to allow the yellow paper to show through. This removal process is perfect for screen-printing or letterpress printing when you'd like to utilize the paper color in your design.

9. Double Stroke

Step 1

The last "H" in the matrix! This technique will require you to understand the Appearance panel as well as the Stroke panel. Let's get started.

Step 2

Let's begin to add the first stroke to our letterform. This is the easy part. Select your "H" and navigate over to your Stroke panel to add a 2 pt stroke. Any color will do, as long as we can see the stroke. I always end up using a really obnoxious or crazy color to begin, just to see what I'm doing.

Step 3

The next step is to add the second stroke. To do that, open up your Appearance panel. With your "H" selected, click the stroked square icon in the bottom left of the panel. It appears a little highlighted in the above image. Make this a 4 pt stroke. Now we have two strokes... but our first stroke isn't visible just yet. We'll take care of that in the next step. 

Step 4

The Appearance panel acts just like layers would. So reorder your 4 pt stroke to the bottom while your 2 pt stroke remains on top, as in the image above. That should allow both strokes to be visible. If not, make sure you head over to the Stroke panel and align your stroke to the outside. This will push the stroke outwards instead of having the stroke consume your "H" shape.

Step 5

At this point, we're done! Feel free to alter those colors back to something more subtle and consistent. Also, feel free to change the stroke corners to get a rounded or angled effect.

The example above was an experiment for me. I never utilized the double-stroke effect until I was working on the Girl Skateboards project. When combined with other styles, the double-stroke effect looks pretty sweet if you ask me!

5 Top Hand-Lettering Fonts From Envato Elements

You've learned about the different types of letter styles and how to style a letter in this hand-lettering practice tutorial.

Next up, let's check out some top hand-lettering fonts from Envato Elements. With these premium layered fonts, you can save hours of work and achieve professional results in your designs. 

If you're a digital creator, you'll love our subscription-based marketplace. For a low monthly fee, enjoy unlimited downloads of the best hand-lettering fonts. You can also get unlimited premium fonts, graphic templates, actions and presets, and more.

Let's review some cool layered fonts from Envato Elements:

1. Arlington Layered Fonts & Ornaments (OTF, TTF)

Layered fonts with ornaments are one of the different types of letter styles. Arlington is one of our coolest hand-lettering fonts with ornaments. 

This layered font is inspired by vintage lettering and features beautiful decorative ornaments that are ready to use.

2. Sequents Layered Font (OTF, TTF)

This is another cool layered font. This one features close drop shadows, one of the different types of letter styles we reviewed.

Sequents features six different letter styles, which makes it unique. You'll be able to easily create 3D vintage signs with close drop shadows. 

3. Chivels: Chiseled Layered Font (OTF, TTF)

Chivels lets you create one of the different types of letter styles we looked at in this tutorial. This layered font features an awesome chisel effect, one of the types of letter styles we practiced.

Chivels also features six different letter styles in one, making it a cool layered font. You can combine them as you wish and achieve different looks!

4. Burford Inline Layered Font (OTF, TTF, WOFF)

The inline effect is another of the different letter styles we saw.  Burford is a complete layered font. This hand-lettering font comes with 18 layering fonts: 5 base layers, 3 top layers, 5 bottom layers, and 2 sets of graphic elements. You've got to try it!

5. The Brewski: Textured Typeface (OTF, TTF, WOFF)

The Brewski is a cool, vintage textured font. This hand-lettering font is inspired by vintage brewery packaging and comes with many alternate characters and ornaments.

Discover More Hand-Lettering Fonts and Tutorials

I hope you've enjoyed this hand-lettering practice and the selection of the best layered fonts.

If you're hungry for more awesome hand-lettering fonts and tutorials, check out these resources:

• 
  Fonts
  35 Best Calligraphy Fonts
  Melody Nieves
• 
  Fonts
  25+ Best Free Hand-Lettering Style Fonts (Designs for 2021)
  Melody Nieves
• 
  Fonts
  How to Choose the Best Wedding Fonts for Invitations and More
  Grace Fussell
• 
  Hand Lettering
  Hand Lettering: A Project From Start to Finish
  Scott Biersack
• 
  Hand Lettering
  Hand Lettering: Mastering Brush Script
  Scott Biersack
• 
  Hand Lettering
  New Course: Hand Lettering for Beginners
  Andrew Blackman
• 
  Typography
  The Difference Between Typography & Hand Lettering: Typography in 60 Seconds
  Melody Nieves
• 
  Hand Lettering
  Hand Lettering: Scripts, Swirls, & Flourishes
  Scott Biersack

Conclusion

There are so many ways to add stylization to your letterforms. To find great textures, characteristics, color schemes, depth, etc. to add to your letters, take an adventure somewhere far or near where you live, and grab inspiration from your everyday experiences. Maybe it's playing with tools that you wouldn't normally use to create lettering, such as a sponge, a fork, fabric—the possibilities are endless. Experiment endlessly!