Use Typecast to design for the reader by putting type first. Try it now

« Back to Blog

Fancify Your Typography with Ligatures and More

By Shelly Wilson on Monday 23rd of July 2012

OpenType features are a great way to give your typography extra umph. And now you can design with them in Typecast!

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:
Proper fractions with Opentype

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:
Design with six opentype features in Typecast

Dress up more than 30 faces

So far we’ve unleashed the OpenType awesomeness of 35 beautiful typefaces:
Apply opentype features from 35 typefaces in Typecast

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 .(JavaScript must be enabled to view this email address) 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.
When Opentype features are available in the font, but aren't supported in your browser, we display the buttons deactivated

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:
Table showing the browser support available for Typecast's OpenType features

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.

Type on Screen

Get more web type tips, interviews and design gems by email

Hook me up!

Comments

blog comments powered by Disqus