Typography Resources for Web Designers

9 Mar

Typography on the web has been a trend which has been building slowly and steadily but it is set to take centre stage in 2011 as the technology and resources are finally here to support it. With the battle of @font-face finally settled and the advent of web typography finally upon us, web designers now have the opportunity to embrace typography in a way that was previously both difficult and neglected. Although there is now a wealth of web fonts available to use in web design, there is also now more than ever a responsibility on web designers to carefully consider typography in their work.

There’s no shortage of typography resources on the web, but sometimes it’s difficult to find what you need. In this post, we’re offering you an index of articles that that will teach you the basics, offer advice for appropriate typographic uses, resources on where to find good quality web fonts and some showcases to inspire you to experiment with typography in your web design work. We hope you find them useful as you explore all the possibilities for typography on the web.

The Basics

Read a few of these articles and you should be getting the hang of the terms you need to know and how to apply them. Web Typography is more than picking a typeface.

10 Web Typography Rules Every Designer Should Know
A Quick Guide to Typography: Learn and Be Inspired
Resources for Learning Typography from 1stWebDesigner (includes several Web Typography Articles)
10 Iconic fonts and Why you should never use them
Improve Typography through Space

Font Stacks

Once you have the basics of typography you can experiment with how you use it on the web. An important aspect of typography on the web is font stacks – they allow you to control the fonts that feature in your design. These articles and resources should help with the fine tuning.

Smashing: Guide to CSS font stacks
Compare 3 fonts (Tool)
Revised font stacks
Font survey results

Living with Web Fonts

Now that most of the issues with web fonts have been worked out (file formats, licensing, @font-face support), a wide array of typefaces have suddenly become available and usable for web designers. Before we get over excited though, there are several things to keep in mind when using web fonts. The following considerations and tips should help you keep your web fonts under control:

Controlling Web Typography
Web Fonts: Always Specify a Line Height
More Control with Typekits Font Events
The Little-Known Font-Size-Adjust CSS3 Property
Font Face Gotchas compiled by Paul Irish
CSS properties that affect type rendering
Fighting the @Font-Face FOUT (Flash of Unstyled Text in FireFox)

Web fonts resources

Font Squirrel: Hundreds of Free @Font-Face Kits
Google’s Web Font Directory

See typography in action on the web

Showcase of Beautiful Typography in Web Design on Noupe
Beautiful Type: Typographic Inspiration
10 Examples of Beautiful CSS Typography and how they did it
101 Examples of Text Treatments on the Web

Want to know even more?

Further reading:
7 Free Typography eBooks
WebTypography.net

Bonus Articles & Resources

If you’ve made it this far, you must be a Web Typography Geek by now, so you might enjoy some of these…

Daily Drop Cap
Typography-themed Desktop Wallpapers
Typographic Marks Unknown
Typographic Sins
Periodic Table of Typefaces
Beautiful Type

Bitka works as Web Design Manager at Dragnet Systems & has a number of her own projects on the go. As a web designer, her specialties include HTML, CSS & Photoshop with healthy helpings of Javascript (jQuery for preference), WordPress and PHP. She was raised on Mac OS and when she's not web designing you'll find her designing jewellery over at Jou Jou Jewels. Follow @bitka on Twitter.

Trackbacks and Pingbacks

  1. How to use font-size-adjust | Stuff 4 Designers - March 15, 2011

    [...] you don’t know what a font stack is, check out our post on typography resources from last week for resources to learn all about them!Back to our case study: because I don’t [...]