Curious about making a negative space font? Or maybe you'd like to experiment with negative space lettering. In this tutorial, we'll walk through how to make a negative space font, as well as how to design negative space lettering—whether you want to design your own font or experiment with a cut-out text effect.
What You'll Learn
- What is a negative space font?
- How to make a negative space font
- How to make negative space lettering in Adobe Photoshop
We're going to experiment with several techniques here. You can start entirely from scratch and design your own ideas, or you can create some negative space lettering using any font of your choice.
What You'll Need
- The sans serif font George from Envato Elements, or a font of your choice
- This pastel abstract texture from Envato Elements, or a texture of your choice
These are the assets we'll use in this walkthrough. However, you could follow along with any assets of your choice—including ones that you make yourself!
What Is a Negative Space Font?
What is a negative space font? Negative space is a term used to describe the "empty" space in a design. So, for example, the space occupied by art or design elements would be the positive space, and the opposite would be the negative space. A good balance of positive and negative space is essential when building a composition.
For example, check out this negative space lettering. The font is actually the white lettering, while the letters themselves are cut out.
1. How to Make a Negative Space Font
Step 1
Perhaps you're curious about how to make a negative space font of your own. If you've never made a font before, you'll likely want to start with the font basics. You'll need to know, for example, things like different font file types. It's also a good idea to know about some typography basics, like the baseline, x-height, ascenders, and descenders.
If you're completely new to font design, you may want to take a look at this free primer. It will offer some extra help and insight.
Step 2
Once you've got an introduction to some of the basics, it's a good idea to start thinking about the aesthetic you're going for—and this applies to any font. When it comes to negative space fonts and lettering, the idea is that it's occupying the opposite space that you would typically expect.
Consider taking a look at some design inspiration, like this stylish use of negative space letters.
Step 3
Again, if you're brand new to font design, here are some essentials you'll need to keep in mind:
- You can really begin your font design in any way you prefer. Pencil and paper? Go for it. Prefer to draw digitally? That's fine too.
- However, in the end, you will need your work in a digital format. I personally recommend working in either Adobe Photoshop and/or Adobe Illustrator.
- Then, you'll need a font creation tool. This creates the font files from your artwork. I personally recommend FontSelf Maker, but there are a host of other tools out there, such as FontLab, a professional font development tool, or FontForge, a free font creation tool.
We won't dig too deep into the technical side in this tutorial, but this free guide outlines a lot of helpful essentials for font design:
2. How to Design a Negative Space Font
Step 1
Next, let's look at how you can design a negative space font. This could apply whether you'd like to make your own negative space font or you'd like to try turning any font into negative space lettering.
To get started, I created a New Document in Adobe Photoshop—mine is 7 inches tall by 11 inches wide, but you could work with any size you prefer. I also added a background texture (this abstract pastel texture from Envato Elements), so we have some contrasting content to show off our negative space lettering. This won't be part of the font itself—it's just a visual extra.
You'll also notice that I have the Layers panel open in this demonstration. You can open this panel up by going to Window > Layers.
Step 2
Next, let's add some text to our document. You can do this via the Type Tool, located in the Tools panel. It's highlighted in the screenshot, below.
We'll use the sans serif font George from Envato Elements in this example, but you could use any font you prefer. Don't worry if you'd prefer to draw something original—this process will open up in a way you can expand upon in any way you like! You'll notice that when we create some text, Photoshop automatically puts it on a new layer for us.
To change the font and size, turn to the Options at the top of the software (highlighted below) and/or the Character panel (also highlighted). You can open the Character panel by going to Window > Character.
Step 3
Next, I changed the font color to red—purely so it would be easier to see. This is also something we can change in the Options or the Character panel, as shown below. You're welcome to make it any color you prefer.
Step 4
Since the letters are rather close together, I opted to increase the Tracking to 200. You can find this in the Character panel, as highlighted below. This is optional but will be helpful if you'd like to experiment with negative space lettering that isn't connected.
Step 5
Next, let's add a New Layer under our type layer. You can add a new layer via the Layers panel—again, you can open this panel up by going to Window > Layers. The Create a New Layer icon is highlighted below. Simply click it to easily create a new layer.
It's important that this layer is underneath our Type Layer. You can move layers around by clicking and holding, then dragging them to reposition their order in the Layers panel.
Step 6
Next, let's turn to the Rectangle Tool. The Shape Tools are located in the Tools panel—and, in many cases, they are nested. If you click and hold on any of the Shape Tools, it will expand and reveal the other shapes you can choose from, as shown below.
Step 7
Make sure you have your newly created layer selected and active in the Layers panel.
With the Rectangle Tool selected, make sure your Fill Color is set to Black. You can choose this in the Options, as highlighted below. Then, click and drag to draw your first rectangle. I drew mine around the first letter in my example. It can be any size you prefer—and don't worry if it's not perfect. We can adjust this later.
Step 8
Next, with the Rectangle Tool still selected, hold down Shift and click and drag to draw another rectangle. However, let go of Shift once you've started dragging. If you keep Shift held down, it will draw a perfect square.
Why did we do this? By initially holding down Shift, we've added our second rectangle to the same shape layer, instead of creating a new one.
Step 9
Repeat this process, adding as many shapes as you like. In this demonstration, I created a rectangle for each letter. You could use any shape and any size you prefer, as the concepts will work the same way.
Step 10
But what if you'd like to change your shapes? Photoshop makes this simple. Select the Direct Selection Tool in the Tools panel, as highlighted below.
Now, we can select any of our rectangles and easily edit them. Simply select a point in any of the shapes we've drawn—click to select a point, and then drag to edit its placement.
Step 11
Here's an example of how you could potentially adjust your shapes. There's no right or wrong answer here, so experiment with it! Your shapes could also connect, if you'd like them to.
Step 12
Now that I'm happy with the placement of my shapes, it's time to experiment with the letters.
Begin by selecting the Type Layer in your Layers panel. It needs to be your active layer before you proceed.
Next, with the Magic Wand Tool selected (located in the Tools panel), click outside of the text. It should look like the example below—with the selection all around the copy.
Step 13
Before we proceed, you'll want to make sure any leftovers are also selected. This would apply to things like the counter we see in the letter "A"—this is the little enclosed area in the letter's shape.
With the Magic Wand Tool still active, hold down Shift and click on any extra spaces like this to add them to your selection.
Step 14
Next, select our Shape Layer—the layer where we drew all of our rectangular shapes.
With this layer selected, click on Add Layer Mask in the Layers panel. It's highlighted in the example below.
Step 15
Here's what the result looks like in your Layers panel. You'll notice there's a second thumbnail next to the layer thumbnail, as shown in the example below. This is our layer mask.
But wait a second... nothing looks different! Don't worry; we'll get to that next.
Step 16
Return to our Text Layer and toggle visibility off. To do this, click on the eye icon to the left of the layer. You'll notice, in the example below, that it's been turned off in my Text Layer, but all the other layers are still visible—they still have that eye icon showing. This makes our red text no longer visible.
Check out the results! The text is cut out of our shapes.
Step 17
What was the point of doing it this way? Well, we can still go back and edit or adjust our work—nothing was deleted! Looking at our Shape Layer, we can still go in and edit our rectangles. Move and adjust the points using the Direct Selection Tool, just as we did earlier.
Step 18
In addition, we can also select our Layer Mask, as shown below. To do so, click on the Layer Mask thumbnail on the applicable layer. This toggles between editing the layer contents and the layer mask contents.
This means we can go in and edit our letters in any way we want. In this case, I used the Brush Tool and started painting in white to remove part of a letter. If you create content in white, it will remove it from your Layer Mask. Likewise, any additions in black will be visible.
This opens up a world of opportunity to experiment!
Step 19
Let's expand on this with an example. I took my Layer Mask and made the contents entirely white—removing the letters that I masked. Then, using the Brush Tool, I started drawing in black—this new letter has been drawn freehand in this space.
Step 20
Here's an example of some negative space lettering concepts. Using Layer Masks makes it easier to experiment with these shapes without deleting and remaking content over and over again. You can also copy and duplicate your layers to try different variations.
Now You Know How to Make a Negative Space Font
Experimenting with negative space letters is a lot of fun—and there are so many possibilities. Once you have a concept, make sure to check out those other font resources. You can prepare your negative space lettering in a similar way to other fonts. Decide if you'd like the letters connected or disconnected—it can result in very different looks.
Download These Negative Space Fonts and Text Effects Today
Love negative space fonts and a general cut-out look? Check out these fonts and text effects from Envato Elements. One low price gets you unlimited access to fonts, text effects, graphics, and more.
1. Vendendo Negative Space Font (OTF, TTF, WOFF)
This font has such a strong cut-out look. It works great as a solid font and as a negative space font, particularly because of its rough edges. This could also have a strong association with classic retro type like we'd see in a Saul Bass poster. It's such a cool look.
2. Block Space Negative Space Font (OTF, TTF, WOFF)
Here's a stylish, blocky negative space font. It's an awesome one because the letters all run together so seamlessly. Use this bold display type for titles, logos, headlines, and other points of emphasis. It would look amazing on posters, T-shirts, and much more.
3. Paper Cut Out Text Effect (PSD)
Why not try out a more three-dimensional approach to negative space lettering? This text effect takes any lettering of your choice and applies a cool cut-out paper effect. There are so many ways you could use this Photoshop text effect too. Download it today and give it a try.
4. Chunk Cut Out Negative Space Font (OTF, TTF, WOFF)
Here's another negative space font to try out. Use this bold, blocky font to command attention—it looks great in high-contrast design situations or could be a fun choice for a texture or photo overlay, as we see in this example.
5. Negative Space Cut Out Mockup (PSD)
This 3D mockup is another example of how striking working with a cut-out or negative space concept can be. In this case, you can use this Photoshop mockup to add any copy or graphical element you'd like. Download the PSD file today and give it a try with your own content.
Looking for Even More Font Inspiration?
Want to learn even more about typography and font design? Check out these free tutorials, right here at Envato Tuts+.
By
