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.
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.
23. 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.
24. 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.
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.
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.
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.
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.
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.
30. 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