Cloud.typography User Guide

Best Practices

How to build efficient, attractive, and cost-effective web font projects.

Select fonts by size

To ensure that text is always clear and headlines always handsome, always use ScreenSmart fonts for small sizes. ScreenSmart and Multipurpose fonts are not only engineered differently, they have visibly different proportions — they differ in stroke weight, x-height, and fit — so choose the correct fonts early in your design process.

Move to Production early

Use Development mode only for building and testing, moving each project to Production as soon as you’ve finalized its palette. Because they draw on the ample number of pageviews included with your Cloud.typography subscription, Production projects are much more economical to serve, and more affordable to scale as your traffic grows.

Build a browser test suite

Cloud.typography fonts deliver outstanding results across all browsers, but each environment renders type slightly differently. A reliable test suite for web fonts includes at least three browsers, each using a different rasterizer to turn fonts into pixels. On Windows, Internet Explorer 9 and above use the current DirectWrite rasterizer, while Google Chrome continues to use its predecessor, ClearType. All Macintosh browsers use Apple’s Quartz renderer.

Monitor your activity

You can use your Cloud.typography dashboard to see traffic to each of your Development and Production projects, and your Cloud Subscription page to see the bandwidth and pageviews you’ve used this month. We’ll send you an e-mail if you’re approaching your monthly limits, so make sure to allow e-mails from notices@typography.com.

Economize font payloads

Using Cloud.typography’s Font Features to eliminate unused styles and characters can dramatically reduce file sizes and load times. A design that uses the Sentinel Book font for the three headings brunch, lunch and dinner doesn’t require Sentinel’s default payload of 149k: deactivating unwanted styles reduces this size to 36k, eliminating its lowercase drops it to 25k, and restricting the character set to just these three headlines reduces the file size to 9k.

Your project exceeds the 1,000k limit, so your changes have not been saved.

Try adding fewer fonts, fewer styles, or configuring the fonts with fewer features.