OpenType features are bonus styles that introduce new shapes and positions to a typeface’s characters. They’re really useful when you want to add a few flourishes and inject a little finesse to your typography.
For example, old-style numerals can add a sense of history or heritage and often look nicer in body copy than default numerals, which are sized as caps. And ligatures can add personality or informality to display text by joining up letters much the way we do when we blend our print handwriting with touches of cursive midway through.
These bonus styles can also help you produce more-accurate typography, for example proper fractions:
An easier way to apply styles
Until now, if you wanted an OpenType feature to display on your site in web font form, you had to know the correct code and syntax. To turn on common ligatures, for example, you needed to know that the value code for them is ‘liga’ and then code the correct instructions with it, like this:
-moz-font-feature-settings: 'liga=1';
-ms-font-feature-settings: 'liga' 1;
-webkit-font-feature-settings: 'liga' 1;
-o-font-feature-settings: 'liga' 1;
font-feature-settings: 'liga' 1;
We’ve made this easier by replacing tag recall and complex code with simple button activation. Choose your font, click the button for the feature you want to apply, and Typecast will update your text with that style and insert the code for you behind the scenes. But if you want to double check we got the code right, go ahead. It’s right there in the CSS.
Right now you can pick from six of the most commonly used OpenType features, but we’ll be adding more in the future:
Dress up more than 30 faces
So far we’ve unleashed the OpenType awesomeness of 35 beautiful typefaces:
However, manually tagging each typeface with its corresponding bonus styles means it may take us a while to work through the 26,000+ other fonts in our database. So if you have a favourite face that we haven’t added features to yet, just hello@typecastapp.com or tweet us to let us know, and we’ll add it as soon as we can.
Browser support issues
Sometimes you may select a typeface and see a number of OpenType buttons that are not clickable, like this.
This means that the additional styles are available for that typeface in Typecast, but that the browser you are working in doesn’t yet support them. So in our example above, which we captured while in Chrome for Mac OSX, you can see that Typecast offers six bonus styles for Bello Pro, but in that operating system Chrome only supports common ligatures.
Browser support for OpenType features is still patchy, but it’s getting better fast, which is great for web design. Here’s a table showing which of our OpenType features are supported by the most current versions Chrome and Safari:
Login now to try opentype features in your project.
Also, check out this great post by Elliot Jay Stocks on ligatures and see a variety of OpenType features in use on The New Web Typography.