Create your own 3D typeface

[Rss Bot 1]

Creating any type of 3D art is tricky, but throw typography into the mix too and it can become all kinds of daunting. To get you started, I will talk you through how I created 3D type family Rig Shaded.

• The 70 best free fonts

Perfect for eye-popping headlines and logotypes, Rig Shaded is a layered or ‘chromatic’ typeface, which means that you can choose your own style and colour combinations. Its geometric letterforms are picked out with a distinctive halftone shading style and its four weights include a unique ‘zero’ weight. 

The process of creating Rig Shaded was as elaborate and unusual as the typeface itself, involving several tools and collaborations. Here's how I did it...

01. Hunt for inspiration

Clockwise from top left: Bobby Evans; Justin Thomas Kay’s logo for Zoo York; Jeff Rogers; 18th century building signage; Gary Stranger; Ged Palmer

I can’t get enough of 3D signwriting and tactile lettering. I wanted to capture that magic in a typeface. My previous chromatic typeface, Brim Narrow, was a serif design inspired by antique woodtype from the 1800s, and this time I wanted to design something that was thoroughly modern. I had lots of ideas and sketches, but before I opened my font software there was much to figure out.  

First, I made a Pinterest board with dozens of 3D lettering examples. I collected sign painting by Ged Palmer, graffiti by Gary Stranger and bold building signage. I gathered gorgeous digital lettering, including some by Jeff Rogers and Bobby Evans, both of whom I contacted to ask about their processes. Jeff has a very painterly approach to letter shading, while Bobby favours a textured, screen-printed style. 

02. Collect shaping ideas 

Calypso by Roger Excoffon (left) and Umbra by R. Hunter Middleton (right)

When I was exploring the other chromatic fonts available, I couldn’t find a geometric sans serif option. Of the sans serif typefaces, many struggled with how the angles of their drop shade, or extrude, were affected by their diagonal shapes.

For example, if you apply a 45º extrude to an X that falls from the bottom right, the result will look very uneven. The stroke of the X running from top left to bottom right will show almost no extrude but the extrude on the opposite stroke will be overly deep. These need to be equalised while tricking the eye so the viewer does not notice. 

R. Hunter Middleton’s Umbra typeface does an outstanding job of this, however its proportions are those of Roman capitals rather than geometric. The same goes for the angles at the ends of the characters (the terminals). 

03. More research and development 

Early halftone shading experiments

I applied a rough, mechanical extrude to a variety existing sans serif fonts, using a simple Adobe Illustrator blend (If you’d like to know more about making 3D lettering I‘d recommend Jeff Rogers’ excellent 3D Skillshare tutorial). 

I studied characters like the N, S and X to figure out the best character shapes and what issues to look out for.  I began to wonder: what if I designed a typeface that 'allowed the tail to wag the dog’ and adjusted each the letter shapes specifically to suit an extrude style? Could a geometric typeface work in harmony with 3D effects while maintaining its geometric principles and proportions? This question eventually led to Rig’s distinctive design.  

To accentuate Rig’s solid appearance I wanted to add some shading to its extrudes, which would also make the letters feel more like custom lettering. I played around with halftones using traditional circles, but the amount of data required to plot thousands of circles across the entire font would result in enormous file sizes and slow software rendering. 

A square however, requires a third of the data required to render a circle, so I found a way to make halftones with squares by using Astute Graphics’ Phantasm filter in Adobe Illustrator. 

A square can be described with four nodes, while a circle needs 12

04. Write yourself a brief 

Rig Shaded’s Layer styles and their eventual names

Typefaces take a long time to produce so it’s important to establish a brief for yourself to follow. Months into production, neck-deep in detail, you’ll undoubtedly have a critical decision to make about your design direction; without a firm guide to keep you on track it’s easy to go astray. I also kept a detailed Evernote document recording technical details and decisions in case I wanted to reconsider an option.

There seemed to be room in the market for my idea. So the brief to myself was: 

• A typeface with geometric shapes, specifically to complement 3D effects
• Well balanced extrudes that have a visual harmony with the letter shapes and/or spacing
• All terminals angled to suit the connecting extrudes
• Maintain clear, open, legible character
• Create shading styles that emphasise the design’s solid, 3D appearance
• Keep it modular with interchangeable options so the creativity stays with the end designer
• Produce four weights, including include a razor-thin weight (the eventual ‘Zero' weight)

05. Design the face 

Font editing program Glyph was used to design the face of the character

It was now time to start designing the face of the characters. For this I used Glyphs, a font editing program. Glyphs’ vector drawing tools are second to none, allowing for precise control and accuracy. Working within a dedicated type design tool also encourages you to think about the spacing of your type while you draw it. 

I drew my initial A-Z, focusing on the overall shapes and proportions of the letters. I made all terminals end at 90º, with a few exceptions at 45º, to suit the extrude style. I designed the characters a fraction narrower than a strict geometric, which steepens the angles of the diagonals (helping the uniformity of the extrudes) and makes the font more economical with space when it’s used in long headlines.

Initial feedback from Dave Foster

I designed the A-Z in Bold and Light weights and used Glyphs to create the Medium weight by interpolating from my two extremes. When completed, I asked a couple of friends and veteran type designers, Dave Foster of Foster Type and Toshi Omagari of Monotype, for their feedback on my alphabets.   

Next page: five more steps to creating your own 3D typeface...

06. Work on extrudes

It's key to build visual harmony between the stem widths, spacing and extrude depths

During my experimental stage I’d figured out the rough extrude depths for each weight so I could build visual harmonies between the stem widths and/or spacing in each weight. This aids the uniformity and rhythm of the type, which is important as the shapes become more complex.

To create the extrude styles, I used a plugin to do the heavy lifting. This created the extrude shapes mechanically, and I then adjusted or redrew to achieve a consistent weight. I needed to ensure that none of the extrudes clogged up their partner face characters or obscured their details, so I adjusted several of the original face characters to make them more compatible. 

Plugins can do the heavy lifting when it comes to extrude styleshe rough extrude depths for each weight

07. Make Zero weight style

Sketched adjustments on the Zero weight S

I wanted to make a razor-thin, ‘zero’ weight style for the font family. For this to work, the extrude style needed to become the main shape of the type. I redrew each glyph with open paths, as if creating a monoline font. This gave me the skeleton of each character so it could be mechanically extruded and then adjusted or redrawn. The 'S' was particularly tricky as its spine produced almost no extrude naturally due to its diagonal direction. 

08. Adjust spacing and kerning

The original face spacing (top), the final combined spacing (middle) and the main differences (bottom)

I’d spaced my characters throughout the drawing process to ensure they were working well together as words and sentences. However, a shaded font cannot be spaced like a regular black and white typeface. Because the extrude shapes become an integral part of each character, the spacing and kerning needs to be optimised for the overall combined shape. To do this I made both the face and the extrude black, to form one solid block, and spaced and kerned them together. 

09. Prepare for shading

As a rough guide, all glyphs were placed in Autodesk 3ds Max and lit

To guide the halftone shading process, I commissioned a 3D designer to create and light a 3D model of my full character set. This wasn’t meant to produce a realistic shadow but rather a consistent stylistic effect, and show me where the light might fall across more complex shapes. 

In the end however, the final shading diverged even further from the 3D model so that the shadows could be distributed evenly across all the glyphs.   

Two grades of halftone shading provide greater control at various type sizes

After talking with a few designer friends, I decided that it was important to offer two grades of halftone shading to provide greater control at various type sizes. Depending on the colour combinations and sizes chosen, Rig could then produce subtle gradients through to strong graphic effects.   

10. Start shading marathon

One of several crazy Illustrator files for making the halftones

Each separate gradient was made in Adobe Illustrator then brought back into Glyphs to be cleaned up, and often adjusted square by square. There was no way to batch-process the halftone effects and the combined number of glyphs across four weights and two shading styles is approaching 2,000. It was a long, gruelling process.

In Illustrator, I made a black and white gradient at the approximate size of the curve or edge that needed shading. Then, with some manipulation, I would run the Phantasm filter on these gradients to create the vector halftone squares. These were then cropped using the shape of the letter’s extrude. 

Back in Glyphs, at high magnification I went around all the curved edges to correct any stray points. To reduce the overall file size of the font I also removed any redundant curve handles from squares positioned on the edges of curves.   

There were several intricate gradients to build, like in the crotches of K and R

There were several intricate gradients to build, like in crotches of 'K' and 'R', but many of the gradients were shared across multiple shapes, and keyboard shortcuts sped up the process. The last step was to even out the shading to avoid dark areas as much as possible.  

The result

I admit that while producing the shading I cursed myself for deciding to make four weights, but the final result was worth it. The unusual approach to Rig’s design eventually led to its unique appearance. The character shapes, extrude depths and spacing have all been devised to complement each other and produce harmony within each weight. By allowing the tail to wag the dog in this way, Rig’s lively yet assured voice was forged.   

Related articles:

• How to choose the right typeface
• 5 classic fonts that are still on trend (and why)
• The 41 best free web fonts

View the full article