AtoZ CSS Quick Tip: Using OpenType for Text

T is for Text and OpenType

This week's CSS tips are all about text and typography. In the original screencast video we looked at all sorts of different CSS properties to do with text styling. But what we've yet to cover in depth on AtoZ CSS is OpenType features.

This family of properties adds all sorts of typographic goodness to your text and, as long as you have access to fonts that offer these features, they really give the reading experience a boost for your users.

Let's start with where you might find these fancy fonts.

Use a premium font service

With the @font-face directive in CSS, we can load up any custom font into our projects. This may come from a service like Google Fonts or you may create a webfont of your own using a generator like Font Squirel. Both these services offer a load of great, free fonts but sometimes you may want some more professional, premium typefaces from a paid service like Adobe Typekit, Fonts.com or one of the may others.

Not only do these premium services provide top quality fonts, they do a lot of magic behind the scenes to improve the legibility, the delivery, and performance of loading the fonts themselves. I'd love to go into depth on this at some point in the future but it kinda goes over my head at the moment!

I currently use Adobe Typekit for delivering fonts for client projects and have been pretty happy with the service so far. My only complaint is that I can't download all their fonts for local usage which is a bit of a pain when needing to design with these fonts in Sketch or Adobe Photoshop.

But one of the major benefits is that they offer a number of fonts with OpenType features. Having a font that supports OpenType features is the first step in being able to work through the following handful of tips.

Continue reading %AtoZ CSS Quick Tip: Using OpenType for Text%

by Guy Routledge via SitePoint