Whether you're a creative director, illustrator or web developer – whatever your discipline, typography is an essential part of design. There are hundreds of paid-for and free fonts available these days, but when it comes to the art of type, you can never stop learning about it or improving your typography skills.
To help you out, we've gathered together the most amazing typography tutorials from around the web, which are bound to help you raise your type skills to the next level.
In this post, you'll find typography tutorials in the following areas:
The basics and advanced typography skills (1-11)Web typography skills (12-16)Typography in Illustrator (17-23)Adding colour to your type (24-28)Learn type through games (29-31)3D text effects (32-38)Fire up your type (39-41)Snow and ice effects (42-44)Make your type metallic (45-49)Eye-catching type effects (50-58)Design your own type (59-65)Make a typography poster (66-68)Illustrative typography (69-82)
Let's get started!
The basics01. First things first-master the basics
It's probably wise to get back to basics before you go running off into the typography sunset. Here, Cameron Chapman gives you the lowdown on everything from fonts to displays.
02. Designing headers and titles may be more artistic, but the set body text is just as important
In this typography tutorial, Cameron Chapman tells you that yes, designing headers and titles may be more artistic but the set body text is just as important. Discover why with this step-by-step guide.
03. A crash course in typography: principles for combining typefaces
Combining typefaces can be dangerous business, especially if you mix two that certainly don't belong together. Avoid any upset with this typography tutorial that shows you the importance of contrast and mood.
04. Typography rules and terms that every designer must know
This article features a detailed glossary of its main terms
This article introduces the fundamental concepts of typography, followed by a detailed glossary of its main terms.
Advanced typography skills06. Make use of grids for strong typographical layouts
Typography tutorials: see why a well-planned grid is essential
Find out why a well-planned grid is key to creating a good typographical layout that is clean, consistent and easy to navigate.
07. Type classification, while helpful, is often convoluted, confusing and even controversial
Type classification, while helpful, is often convoluted, confusing and even controversial. Joseph Alessio gets to the bottom of what commonly used type terminology actually means.
08. Creating exciting and unusual visual hierarchies
In this typography tutorial, C Knight and J Glaser look at how frequently type needs to be broken down into different levels, such as topic, importance and tone of voice, and explore how this can be achieved visually.
09. How to create web fonts using code
Generative typography has become a popular field for graphic experiments. Here Andreas Koller explains how to use algorithms to manipulate glyph shapes for text visualisation and abstract font faces.
13. This tutorial demonstrates how to use simple Illustrator tools to create a trendy logo
This tutorial demonstrates how to use simple Illustrator tools to create a trendy logo. The process is quite simple and can be applied to all sorts of logos and illustrations for your future projects.
18. Cool typography with the Blend tool in Illustrator
This tutorial shows you how to create a text effect using the Blend Tool in Illustrator and then se Photoshop for some final retouches to make the effect more subtle. The technique is very simple and it shouldn't take more than 30 minutes to achieve the same effect.
19. Learn how to use various shapes and gradient effects to create an airport timetable text effect
Typographic elements are ideal to create in vector form as you can scale and copy them as you like and change the colors to suit your designs. In this tutorial you'll learn how to use various shapes and gradient effects to create an airport timetable text effect that's perfect for websites, poster designs or even logos.
20. Create an editable stitched label type treatment
This tutorial demonstrates how to create a stitched label, as well as editing the text and apply the treatment to other fonts and vector elements.
21. Use Photoshop and Illustrator tools to create this eye-catching effect
You'll start in Illustrator in this tutorial to modifying the original font, then switch to Photoshop in order to play with textures and layer styles. You'll also deal with selection tools and simple methods to create 3D illusions in Photoshop.
22. Create a bending 3D text effect in Adobe Illustrator
In this Illustrator tutorial, you'll learn how to create a bending 3D text effect that will make any design stand out. In addition to using the 3D tools, you'll layer letter shapes to create color shifts with gradients and highlights. You'll also work in subtle patterns controlled with Opacity Masks.
23. How to make your type stand out
Alex Gill shows you how to combine Illustrator's 3D capabilities with Photoshop work. This tutorial also covers the best way to manage your layers and how to add subtle lighting techniques to your type.
Add some colour to your typography24. Create a design from multiple reference images, a simple sketch, and your own ingenuity
In this tutorial, you'll learn how to mix vector elements and watercolour effects with text to create a stunning design. It's a quick process that depends heavily on good choices of images and colours.
25. How to treat your type with neon colours
The best typography tutorials push the envelope and challenge the way you view design. Mateusz Sypien explains how to mix 3D and 2D for some simple, yet stunning text effects.
26. Take a break with this Serif game
Learn typography through gaming! The aim of this awesome game from To The Point is to shoot only the serif fonts in the available time. Complete all the stages at 'Director Level' to beat the game. Good luck!
30. I love typography: The rather difficult font game
This game takes you through a series of various fonts which you have to name from a choice of four. It may sound easy but it's not!
31. Are you a font nerd?
Do you know your Arial from your Helvetica? Test your type knowledge with this challenging game sponsored by Colorful gradients, lens flares, and textures are essential elements to any 1980′s inspired artwork
Colorful gradients, lens flares, and textures are essential elements to any 1980′s inspired artwork. In this tutorial you'll learn how to use Photoshop's 3D tools to create a 1980s inspired text effect.
33. 3D ribbon wrapped text effect
Celebrate with ribbons and confetti!
This tutorial will explain how to use the Opacity texture map to create a ribbon-wrapped 3D text effect in Photoshop CS5 environment. Then, it will explain how to create the confetti brush and its layer styles.
34. Typography tutorials: Get your sweet fix with this 3D type
Mark Mayers indulges his sweet tooth, in this cute typography tutorial. Here, he'll show you how to use Photoshop CS6 Extended's new 3D tools to create your desired effect. You'll be using lots of free stock imagery and other Photoshop features.
35. How to create isometric grid-based 3D lettering
Isometric-based letters are the perfect way to reflect structure in a display typeface, as Steven Bonner discovered with a commission for a magazine feature on contemporary architecture.
36. Typography tutorials: An eye-catching cityscape with 3D and typographical elements
Alex Varanese builds a deconstructed urban environment composed of 3D and typography. Like many of the typography tutorials here, the results can be stunning. Armed with this knowledge, what will you be able to create?
37. Use PS action to create awesome 3D type
This tutorial will show you how to create 3D type in Photoshop, using a PS action in one of the steps, just to simplify the process. Let us know if it actually does!
38. Create this eye-catching design with Illustrator, Photoshop and Cinema 4D
Great-looking 3D typography often involves the use of several applications. In this tutorial, find out how to create a vintage lightbulb sign using Adobe Illustrator to create and export the basic paths, Cinema 4D to create the 3D render, and Photoshop for post-production.
Fire up your typography39. Nail the particle flame text effect
Try a different approach to firey fonts
Here's a different approach to creating a firey text effect. This is an intermediate level tutorial so some steps can be tricky!
40. Use layer styles and a simple brush to create this frosty text
This tutorial explains how to create a frosting-ice text effect, using a couple of Layer Styles and a simple brush. It will also show you how to modify some settings to adjust the final outcome.
43. Ice text effects
Here you'll practise a dozen methods of how to archive a frozen look on a desired text in Photoshop. One of the most helpful icy typography tutorials we've come across!
44. Start early on your Christmas card fonts
Perfect for Christmas cards and winter themes, this snow globe effect will certainly make you stand out. This tutorial explains how to create it using a couple of brushes and layer styles.
Make your type metallic45. How to make metallic text
Create attention-grabbing text with this Blender tutorial
3D software offers great opportunities to create some truly unique typography. In this tutorial, discover how to create a big, bold, attention-grabbing title.
46. Typography tutorials: Get that metal feeling with this eroded effect
Get an effect close to real thing with this eroded metal text tutorial. Throughout this tutorial you'll make use of various drawing techniques, channels, and patterns.
47. Create high quality metal 3D text in Photoshop
If you don't have a particular programme for 3D typography, never fear! This handy tutorial creates 3D effects using Photoshop and a splash of creativity.
48. Typography tutorials: Use Photoshop and Illustrator for this splash effect
This typography tutorial is brought to you by design blog Abduzeedo. Here, they'll show you how to use Photoshop and Illustrator to create a milky splash effect.
51. Suspend your text
In this tutorial, you'll discover how to give your typography a suspended effect, with a few simple steps. A quirky way to improve your text creativity!
52. How to make your own font
Jamie Clarke shares his process behind diving in and and make your own font.
60. Typography tutorials: Sorin Bechira uses the Liquify tool to great effect
Sorin Bechira shows you how to create an illustration from type. See how he uses the Liquify tool to do this and how you can combine stock imagery with custom marks for some eye-catching results.
63. Creating a custom font
Typography tutorials: Use the blender tool for custom made typography
You may think that the blend tool is only reserved for very special occasions. The reality is, is that it can be used on a regular basis to create striking typography. Find out how with this typography tutorial.
64. How to create roundhand lettering
Typographers and fans of creative fonts will be familiar with the work of self-taught, master pinstriper Learn how to make a classic serif poster
From choosing the perfect font to bespoke glyphs and ligatures, Emiliano Surez reveals how to manipulate serif type in your design work.
67. How to create an impactful slab-serif poster
In this typography poster tutorial, Vilaz's Pedro Vilas-Boas and Ctia Oliveira reveal some cool techniques for blending type and illustration in Adobe InDesign.
68. Get that extra dimension without the extra software
Want 3D effects but can't afford the software? Radim Malinic shares a shortcut for creating eye-popping headline typography without the need for plugins or 3D software.
70. Three ways to make elegant headers
This tutorial will explain three different ways to create very simple yet elegant header-style text effects, using only two Layer Styles.
71. Get the equalizer effect
After trawling the larger tutorial sites, independent Romanian graphic artist Alex Roman noticed a gap when it came to an effect such as this. He took it upon himself to create this awesome equalizer effect using Photoshop.
74. Add leaves to your text
This tutorial will take you less than an hour to complete in Adobe Photoshop CS5. The teacher claims the tutorial is pretty simple, so this is definitely one to try out.
75. Create a furry calligram in Illustrator
Sharon Milne has previously created the Meow Calligram and now she's back – instead, channeling her creative energy from her dog Poppy. In this typography tutorial, she'll show you how to manipulate a typeface through to rendering fur and adding those essential doggy features.
77. Have your typeface dripping with style with this tutorial
Create a buzz with this typography tutorial. Using Photoshop, you'll have your typeface dripping with style following this simple step-by-step guide to creating a honey-kissed typeface.
78. 3D lighted text effect
Create a great 3D effect in Photoshop
If you love to indulge in 3D, take a look at this typography tutorial from Tranfuchsian – a blog for designers, offering plenty of free vector resources and articles. Here, they'll show you how to light up your 3D typeface.
79. Build a dreamy font
Here, you'll create a 3D Typography based design. All the elements will revolve around the centerpiece and theme: dreaming. The word will dictate the entire layout, with trees growing out of the letters, mountains and a glowing moon.
81. Craft cool typography using paths in Photoshop
In this tutorial you'll learn how to create some 'cool' custom typography, using the Path option in Photoshop.
82. Learn to fold your retro typography
Using Photoshop, you're going to create retro-looking text that seems like it's constructed using folded strips of paper. Prepare yourself to heavily rely on Photoshop's Lasso Tool, as well as some other basic tools and simple techniques.
This is an updated version of an article previously published on Creative Bloq.
