51 top typography tutorials

23. 4 steps to using variable fonts

Typography tutorials: variable fonts

(Image credit: Future)

Variable fonts are the latest and greatest thing in web typography, enabling you to define all manner of type variations within a single font and saving you the performance hit of having to load multiple fonts. This tutorial takes you through the four steps to using variable fonts online.

24. Make interactive 3D typography effects

Typography tutorials: laptop screen

Here we'll create a type effect that uses the shapes of letters as a mask to some fast, free-flowing particles trails that will dynamically swirl and move through the letters. Not only will there be this beautiful animation, but as this will be rendered onto the HTML5 canvas element, this will be transformed in 3D to rotate towards the mouse as it moves around the screen. This is perfect for site headers or just when you need to grab the user’s attention for a call to action.

25. Better web typography in 13 simple steps

Typography tutorials: text

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.

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

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

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

Typography tutorials: type, the letters 't' and 'b'

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.

29. The rules of responsive web typography

Typography tutorials: 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.

30. Master accessible web typography

Typography tutorials: 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. 

31. Fluid responsive typography with CSS poly fluid sizing

Typography tutorials: fluid layouts in type

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.

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

Typography tutorials: type on different screen sizes

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.

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

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Tom May

Tom May is an award-winning journalist and editor specialising in design, photography and technology. Author of the Amazon #1 bestseller Great TED Talks: Creativity, published by Pavilion Books, Tom was previously editor of Professional Photography magazine, associate editor at Creative Bloq, and deputy editor at net magazine. Today, he is a regular contributor to Creative Bloq and its sister sites Digital Camera World, T3.com and Tech Radar. He also writes for Creative Boom and works on content marketing projects.