23. 4 steps to using variable fonts
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
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
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
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
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
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
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
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
