Web Typography: New Cloud Fonts Enable Cool Type Features in Web Design

If you’re a graphic designer worth your mouse pad, it’s a pretty safe bet that you know about the OpenType font technology and rich typographic feature support it provides. The automatic insertion of ligatures, contextual alternate characters, enhanced small cap and fraction capabilities, etc., have not only given graphic designers tremendous typographic latitude—but have also provided for improved graphic communication on the printed page. OpenType desktop fonts are, indeed, a wonderful thing.

Standard Ligatures

OpenType features have also been made available to web designers, which is a great step forward for typography on the web—again, a wonderful thing.

Unfortunately, the support for OpenType substitution features is not yet widely available in web browsers. While nearly all of the most recent browser releases offer some level of support for OpenType features—or are expected to add support soon—older versions of commonly used web browsers lack that rich support for OpenType. And it will be years before these legacy browsers fade entirely from use. This lack of universality has meant that web designers haven’t widely adopted OpenType—until now.

Dscretionary Ligatures2

Monotype has built a new cloud font technology into its Fonts.com Web Fonts service that makes it possible to immediately use OpenType features in any browser that supports web fonts. The technology was developed, and is being refined, by Sampo Kaasila, who can without exaggeration could be called the creator of TrueType. During the two years he was at Apple, Kaasila and his team designed and developed the initial TrueType rasterizer. “The idea for this technology came from a desire to speed up the evolution of typography on the Web,” said Kaasila, who’s now research and development director for Monotype. “This cloud technology now enables the creation of beautiful cross-browser typographical content using OpenType substitution features.”

Discretionary Ligatures

Want to go further with fonts? Check out the HOW Design University Web Type course!

HOWU Web Typography

And don’t forget about MyDesignShop.com, where books, webinars and other materials live to scratch your interactive (font) itch.


Here’s how it works: For browsers that don’t have solid support for OpenType substitution features, the cloud takes the information from the Glyph Substitution (GSUB) table in the font and compiles it into compact JavaScript code that browsers can handle. The JavaScript code automatically transforms the glyph shapes into new, beautiful, typographically correct designs.

Web designers can now use standard CSS techniques for controlling these OpenType features, while relying on the Fonts.com service to ensure the page renders as intended, no matter what browser (or version) the visitor is using.

Simple on/off buttons allow web designers to preview text with and without OpenType features, helping to illustrate the impact they can make.

As you’re working on a website design project, if the font you choose contains OpenType features, the OpenType Feature control appears on the Add & Edit Fonts utility. The tools for taking advantage of the features have been placed on a basic tab and can be activated for a particular CSS selector. The first of Monotype’s enhancements to the technology can be found on an Advanced tab. This tab can be used to specify which portions of text will take advantage OpenType features, instead of turning them on or off for all text associated with a particular CSS selector. The Advanced tab also features a simple online text editor to streamline the creation of web content using the features.

OpenType Feature Advanced Tab

The editor shows what the text will look like as it is being edited, and it helps you see what features are available in the selected font and what features are available in the selected text. And since it works inside the browser nothing needs to be installed.

u2184Monotype considers this OpenType functionality an experimental feature in its Fonts.com service, and the company hopes that designers provide feedback to help improve it. “This technology was inspired by our customers’ interest in advanced typography, says Johnathan Zsittnik, director of e-commerce marketing for Monotype. “We believe that web designers should have access to the same typographic capabilities that print designers enjoy and hope this technology helps them to create better sites and to beautify the web.”