50 top typography tutorials

[Rss Bot 1]

The web is brimming with typography tutorials, but many are low quality and others are very out of date. So we’ve trawled the internet to uncover the diamonds in the rough, in the form of 50 top-quality typography tutorials, to bring your knowledge and skills up to speed.

• Get Creative Cloud

Perhaps you’re looking for a good introduction to the fundamentals of typography? Or perhaps you want to develop and push your type abilities further? Either way, you’re sure to find just what you’re looking for on this list, which includes typography lessons in the form of traditional text-and-image tutorials, animations and video, and even games.

We’ll be adding to this list as time moves on, so make sure you bookmark this fantastic resource, and come back from time to time to see what’s new in the world of typography tutorials.

We'll start by looking at tutorials to help you with mastering the fundamentals of typography – skip through to another page if you're after something more advanced.

01. Typography basics explained

Not sure exactly what typography terms mean? This video gives you a short and snappy overview of the six most important terms, namely typography, body copy, display type, hierarchy, kerning and leading. 

Six further terms (tracking, widows and orphans, serif fonts, sans-serif fonts and script & cursive fonts) are explained in part two, which you can watch here.

02. Beginning graphic design: typography 

This quick cartoon video from Learn.org, complete with a jaunty elevator-music soundtrack, runs through the basics of typography including the different types of fonts and common typography terms. You’ll find the text version of tutorial on its website here.

03. Everything you need to learn typography basics

This introduction to typography starts from the point of view of a marketing professional, who recognises its importance in strengthening a brand and highlighting the central message of a campaign. 

Author Brittany Leaning went on a typography course at the Massachusetts College of Art and Design, and here she explains the fundamentals of what she learned, including a detailed look at the anatomy of type.

04. Lecture 110: Introduction to typography

This video provides an academically rigorous overview of typography, including both a definition of terms and a practical guide to how to place text and create character and paragraph styles within Adobe InDesign. 

It’s actually a straight recording of a university lecture (by Grant Adams at Diablo Valley College in Pleasant Hill, California). So you’re best off skipping the first three minutes, where the remarks are purely focused on the students about to take the course.

05. A crash course in typography: The basics of type

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.

06. Paragraphs and special characters

In this typography tutorial, Cameron Chapman is back to tell 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.

07. 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.

08. Pulling it together

Now you've got the basics down and you've dabbled in paragraphs and combining typefaces, take a look at how to pull it all together. In this typography tutorial, Cameron Chapman rounds it all up and shows you how to finish in style.

09. Typography terms every designer must know

Our article introduces the fundamental concepts and rules of typography, followed by a detailed illustrated glossary of its main terms. Learn about choosing a font, sizing, leading, tracking and kerning, measure, hierarchy and scale, and more.

10. How to work with type in InDesign

Art editor Jo Gulliver on T3 (and formerly on Computer Arts) shows you some of her most valuable typographic tools in Adobe's publishing software. Focusing mainly on the Character Formatting control panel, she explains how these options can be used on a day-to-day basis to help speed up your workflow in InDesign.

Next page: more advanced typography tutorials

11. 10 rules to help you rule type

This three-and-a-half minute typography tutorial video introduces 10 golden rules to help you improve your type skills and improve your graphic design layouts. Yes, the same text could have just been written as a standard tutorial, but hey, this is just a little more fun.

12. How to format text in InDesign

Part one of this crash course looks at what typography is and how you can format your type using the Controls panel in InDesign. In part two, you can delve further into the world of typography with a look at four special typographic effects that can help your InDesign layouts stand out.

13. Match fonts from an image in Photoshop CC

One of the standout features of Photoshop CC is that it can automatically analyse, identify and match fonts pictured within a photo. It then gives you a list of similar fonts installed on your machine, as well as others to download on Typekit. This quick video shows you how it all works.

14. Best practices of combining typefaces

Combining different typefaces within your design is part art, part science. This Smashing Magazine tutorial by Douglas Bonneville explains some of the most important best practices to follow when mixing two or more fonts, as well as some common mistakes.

15. Typography manual critique 

One of the best ways to improve your typography is to follow an in-depth critique of what other designers have done when it comes to their use of type. This analysis of the Futur Typography Manual with Molly Drill is full of amazing insights about what to do (and not to do) when it comes to print typography.

16. How to kern type

Kerning is the process of adjusting the spacing between letters to achieve a visually pleasing result. One of the most important typography skills you need to learn, here Meryem Meg and Brian Hoff offer some pro advice about how to get it right.

17. Typography design & art direction

This video tutorial investigates a little-discussed but very important topic: how to approach art directing another designer when it comes to typography. The critique focuses around the launch of a new newspaper magazine focused on the business of design, and includes some fascinating insights into its layouts.

18. Art direction & typography part 2

The above video continues the lesson in typography and art direction begun previously, in discussion with graphic designer Minhye Cho.

19. Design a typographical poster in InDesign

This tutorial from Future Publishing art editor Jo Gulliver walks you through the process of creating a typographical poster using InDesign. She demonstrates how to apply a document grid, and how to create and edit the typography within it.

20. Photoshop tutorial: Create a text portrait poster

This Photoshop CC tutorial from Blue Lightning TV shows how to design and create a powerful text portrait poster. This 11-minute typography tutorial takes you through each operation simply and clearly.

Next page: web typography tutorials

21. Better web typography in 13 simple steps

Web typography means getting acquainted (or re-acquainted) with the rules of classic typesetting, but there’s more. With the web being a fluid and malleable medium, designers have to be able to predict the end result across different browsers and end users. This tutorial examines the basic dos and don’ts of typography, specifically applied to the web.

22. How web typography is just typography, sort of

Typography is often taught as a completely separate discipline from web design, but Amy Papaelias feels that’s a mistake. In this talk, part of TypeCooper West's Letterform Lecture Series, she demystifies web typography and argues it should be seen as an integral to learning web design.

23. Improve web and mobile app typography

The short video lists five essential principles to improve the typographic quality of your web and mobile app. Paulo Stanley offers this practical guide to start you on the road to creating typography for screen design.


24. Improve web type with CSS font-size-adjust

Font-size-adjust in CSS lets you specify your font size based on the height of lowercase letters, and its use can make a big different to the legibility of your web text. This tutorial explains the thinking behind this property and how to use it in your projects.

25. The rules of responsive web typography

Responsive web typography is tricky, but it’s become the cornerstone of good web design, so you need to get it right. This tutorial provides the foundation from which to begin, and covers both the design principles behind responsive typography and practical solutions for it.

26. Master accessible web typography

The rise of responsive web design has made accessible type selection more important than ever if your web content is to be readability by the maximum number of people. Here, Fontsmith presents the results of its work with Mencap on accessible typefaces, and the new best practices that have emerged from it. 

27. Fluid responsive typography with CSS poly fluid sizing

Fluid layouts are now an established part of web design practice, but fluid typography is still relatively new. This tutorial examines how to use established browser features, Sass and some simple algebra to create scalable, fluid type that works across multiple breakpoints and predefined font sizes.

28. Responsive font size and fluid typography with vh and vw units

Another tutorial on how to create fluid typography, this one is almost exactly one year older than the one above, but it’s still worth a read to help you get your head around this discipline within web typography.

29. Performance and web typography

One of the many things you have to consider when selecting and implementing your web fonts is the effect your choice will have on the performance of your site. This conference talk by Helen Holmes explains the best ways to can optimise your font files for the web.

Next page: How to design your own font, and games to test your type knowledge

30. How to create your own font

In this tutorial, Yulia Sokolova explains how she created her first font, from drawing the initial design to digitising it and then turning it into a useable font.

31. How to create your own font: 18 top tips

After many years as a graphic designer and type enthusiast, Jamie Clarke decided to try his hand at designing a typeface. In our tutorial he shares some of the insights and practical methods he learned to help you to make your own font. 

32. Create your own 3D typeface

In another of our tutorials, Jamie Clarke talks through how he created 3D type family Rig Shaded; a layered or ‘chromatic’ typeface that allows you to choose your own style and colour combinations. He explains how he went about it, and shares a number of insights to help get you started making your own 3D type.

33. I shot the Serif

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.

34. The rather difficult font game

This game takes you through a series of various fonts that you have to name from a choice of four. It may sound easy but it's not. Play it on the desktop or on your iPhone.

35. Are you a font nerd?

Do you know your Arial from your Helvetica? Test your type knowledge with this challenging game sponsored by MyFonts.com, which will probably show you that you don't know half as much about typography as you thought you did.

Next page: Text effects

36. Create a long shadow text effect in Photoshop

Photoshop CC includes the ability to add multiple instances of the same layer style to a single layer. This is especially helpful when it comes to create text effects. This tutorial shows you a quick way to add long shadows to your text while still retaining the ability to edit it quickly.

37. Create an editable retro text style in Illustrator

In this tutorial, Chris Spooner shows you how to create retro typography using the fills and strokes within Illustrator’s Appearance panel. These trendy letters have a faux 3D appearance and are fully editable.

38. Create a quick duotone text effect in Photoshop

This short, step-based Photoshop tutorial will teach you how to generate duotone text. Using a texture image, a gradient map, some adjustment layers and filters, you’ll learn how to create this trendy effect in five short steps.

39. Create a vintage film title text effect in Photoshop

This tutorial by Chris Spooner explains how to create typography inspired by the film title styles of old black-and-white movies. Using the 3D capabilities of Photoshop CS6 and Photoshop CC he adds sophisticated lighting and shading to these retro letterforms.

40. Create gold 3D type in Illustrator

If you want to bling up your typography, follow this Adobe Illustrator tutorial by illustrator Karol Gadzala. Step by step, she explains how to extrude type in 3D, apply metallic materials to give it a golden sheen, and add gems, sparkles and gleams. 

41. Create a Chrome text effect in Illustrator

Chrome text effects are the 80s and 90s style that time forgot. But these retro looks are now making a comeback. Follow this tutorial to learn how to produce a similar retro style metallic text effect in Adobe Illustrator.

42. Create custom type designs in Illustrator

This Adobe Illustrator tutorial demonstrates how to create a custom typography design. It looks like it’s been lettered by hand, but it’s actually created by customising ready-made fonts with clever OpenType features.

43. Three ways to add textures to type designs

Photoshop textures are a great way to mimic the aesthetics of old prints and handmade art and give your digital designs more of a tactile appearance. In this tutorial, Chris Spooner explains three ways you can distress your logos and text, each resulting in a slightly different appearance.

44. Create a blueprint text effect in Illustrator

Learn how to create a blueprint text effect in Adobe Illustrator. This tutorial shows you how to combine simple strokes, basic blending mode techniques and a variety of Transform effects to create this impressive look to your lettering.

45. Create editable retro text in Illustrator

Many text effect tutorials for Adobe Illustrator and Adobe Photoshop require the text to be permanently set, so if the wording needs changing, you have to be start again from scratch. In this tutorial, Chris Spooner reveals some useful tricks for creating a graphic style that works with live text. 

46. Create celebration candle text in Illustrator

This tutorial teaches you how to create a celebration candles text effect in Adobe Illustrator. After setting up a simple grid and creating a subtly patterned background, you will learn how to create the main text shapes using a free font and some basic blending and grouping techniques, warp effects and subtle textures and shading.

47. Create a decorative drop cap in Illustrator

This tutorial walks you through the process of creating a decorative letter in Adobe Illustrator with a range of vector embellishments. The techniques you learn here can then be applied to all sorts of illustration projects in the future.

48. Create vector floral typography in Illustrator

Here Yulia Sokolova explains to create a floral typography composition in Adobe Illustrator. You’ll discover how to create your own custom vectors brushes and use various drawing tools of Adobe Illustrator to create flowers, leaves, and floral elements. 

49. Create a Suicide Squad-inspired 3D text effect in Photoshop

This tutorial is inspired by the vibrant text effect from the trailer for the movie Suicide Squad. As you’re walked through the creation of a similar effect, you’ll discover how to design 3D typography within Photoshop, and make use various lighting effects to illuminate your design with bright colours.

50. Create a text portrait effect in Photoshop 

This tutorial demonstrates how to create cool portrait effect using a long passage of text that bends and deforms around the contours of the face. Known as a Calligram, this supercool effect is created using Photoshop’s Displace filter.

Related articles:

• 7 new typography tools for 2017
• 25 typography freebies to make your life easier
• The 41 greatest free web fonts

View the full article