All posts tagged ‘typography’

File Under: Fonts

FontFonter: Test Web Fonts on Any Website

Want to start using web fonts, but you’re not really sold on the benefits? Head over to FontFonter, a neat little tool that lets you try web fonts on any website out there. I did the deed on Webmonkey in the screenshot — as you can see, the headline and the post body text are now styled in beautiful Meta.

It was created by Tim Ahrens and the folks at FontShop, a font foundry and storefront that’s also providing simple fonts optimized for use on the web, plus the tools to implement them. Check out their collection of Web FontFonts you can include in your designs.

File Under: CSS, Fonts

Dealing With the Dreaded ‘Flash of Unstyled Text’

That's a fancy-lookin' T you got there.

That's a fancy-lookin' T you got there.

The use of custom fonts on the web is finally a viable option for designers.

Browser support for CSS’s @font-face rule is pretty solid — even IE 5 can be wrangled into displaying custom fonts loaded from your server. Services like Typekit, which licenses fonts from well-known font foundries, and free services like Font Squirrel are helping to smooth the licensing issues surrounding custom fonts on the web.

However, while browser support and licensing is getting sorted quickly, there’s still one big problem with web fonts — the dreaded “Flash of Unstyled Text,” or FOUT.

The problem (despite the name, it has nothing to do with Adobe Flash) stems from how browsers render a page: progressively, prioritizing the raw content, then grabbing the stylesheet and then grabbing any external font files. The actual FOUT effect can be seen in the wild, but it varies by browser.

Internet Explorer will load the font file as soon as it encounters the @font-face in your CSS, which minimizes FOUT. However, make sure to put your @font-face declaration above any script tags, otherwise IE will hold the entire page until the font loads.

Safari and Chrome (and other WebKit browsers) hide any text styled with @font-face until the font is fully loaded. This means your styled text content is invisible at first, and then pops onto the screen later, after the font file loads.

Firefox loads all your text normally and displays it using a fallback font. Then, a half-second or so later, that text is “upgraded” when the custom font data is loaded. The result is a jarring font change, much like older, Flash-based font solutions. Mozilla is currently treating this behavior as a bug in Firefox. Mozilla plans to adopt the WebKit-style rendering in the future.

Obviously none of these cases is ideal, and the little loading hiccup, no matter what form it manifests itself in, is noticeable even to the most oblivious of web users.

FOUT sucks. So, what do you do? There are a variety of techniques that can be used to minimize — and even eliminate — the FOUT.

Continue Reading “Dealing With the Dreaded ‘Flash of Unstyled Text’” »

Typekit Now Offering Custom Fonts For WordPress Blogs

Typekit, a web service that helps designers use elaborate typefaces in their web projects, has announced an easy way to use custom fonts on WordPress.com blogs. That means your WordPress.com hosted blogs can now take advantage of Typekit’s font library in just a few clicks.

Typekit is like a YouTube for fonts. Browse through Typekit’s library of available fonts, pick one you like and cut and paste some code into your site. As we noted when we first looked at Typekit earlier this year, the service is one of the easiest ways for web designers to use creative fonts without sacrificing web standards or violating font licenses.

With the new WordPress.com features, you don’t even need to know HTML or mess with any code to take advantage of Typekit.

To use the new Typekit features, just log in to your WordPress.com dashboard and click on the Appearance menu in the left-hand navigation menu. On the Appearance page you’ll find a new option, “Typekit Fonts,” with a place to add your Kit ID.

To get your Kit ID, you’ll need to create an account at Typekit.com and select the free option. From there, you can paste over the code and chose from any of Typekit’s fonts.

Not using WordPress.com? No problem, there are already two plugins that make it easy to integrate Typekit into a self-hosted WordPress blog. If you’re on another blogging platform or custom site you can still use Typekit — see our earlier hands-on review of Typekit for details on how to use Typekit on your site.

See Also:

File Under: CSS, Fonts, Web Services

Review: Typekit Delivers Custom Web Fonts to the Masses

A new service called Typekit is now offering a legal, cloud-based method of using more elaborate typefaces on the web. The service has come out of beta and is serving up its fonts to web designers.

Despite some inconsistencies between browsers (not Typekit’s fault) and a few other quirks, we found Typekit to be a viable option for web designers looking to incorporate custom fonts into their designs.

Typekit is like a YouTube for fonts. Browse through Typekit’s library of available fonts, pick one you like and cut and paste some code into your site. As we noted when we first looked at Typekit earlier this year, the service is one of the easiest ways for web designers to use creative fonts without sacrificing web standards or violating font licenses.

Of course, that ease and convenience doesn’t come without a price. There is a free trial option for Typekit, which allows you to test out the service. But if you’re serious about custom fonts, you’ll want to go with one of the paid options which range from $25 to $250 per year. The more you spend, the more font choices, domains and bandwidth you’ll get.

Typekit arrives at a time when type on the web is at a crossroads. For years, designers have been limited to using only a set of five or six common fonts on web pages. But thanks to new font-rendering tools within the emerging HTML5 and CSS3 standards, web designers now have the ability to use newer, more visually interesting typefaces — and make that type appear more consistently across browsers, operating systems and screen resolutions. Even with these new abilities, intervening forces like DRM, licensing restrictions and varying levels of support from the browser makers have stalled progress, forcing the modern designer to resort to a variety of workarounds and hacks if they want to use these new fonts.

Along with Typekit’s arrival, we’ve seen other promising developments recently, like the move by some browser makers towards adopting a new font format called WOFF which would allow better control over layouts and designs.

To see how Typekit performed in the wild, we opted to try out the free option and see if Typekit was good enough to warrant the expense. The short answer is yes, but with some drawbacks.

Before you dive in to Typekit, it’s important to remember the one very large caveat — Typekit only works in browsers that support the CSS @font-face rule. That means Firefox 3.5 and higher, Safari 3.4 and higher, and Internet Explorer 6 and higher.

While that’s not ideal, the good news is that browsers that don’t understand Typekit’s fonts can simply fall back on a default you’ve defined.

There is another slight problem, though. In some cases, fonts rendered in browsers on Windows XP can look jagged and difficult to read. The problems is that Windows XP often doesn’t have anti-aliasing turned on by default. Of course it’s worth noting that even if you don’t use @font-face, standard fonts will also be jagged on such systems. The difference is that most of the standard fonts are still readable, while in some cases custom fonts become a total disaster.

To get started with Typekit, just create an account and tell Typekit the domain where you’ll be serving the fonts. We were happy to see that Typekit will support the localhost domain for testing purposes, something many online services and APIs overlook.

After your account has been created and your domain set up, Typekit will then give a snippet of HTML to include on your site. The code simply loads Typekit’s JavaScript library; all you need to do is paste the HTML in the <head> of your site.

Now it’s time to pick some fonts. Typekit’s range of fonts depends on the amount of money you want to spend. For a trial account, you’ll have just under 70 fonts to choose from. The “personal” library ($25/year) has roughly 230 fonts and the full library ($50/year) nearly 300.

The Typekit font-browsing interface is very well designed and offers some nice tools for choosing a good font — like a live preview of the font and numerous size previews for judging readability.

Typekit’s live preview tool with custom text. Click the image for a larger view.

Once you’ve selected a font, you’ll need to configure it for your site. The Typekit editor lets you control which CSS selectors your custom fonts will be applied to, which weights and styles to use, and what font to fall back on for browsers that don’t understand @font-face.

If you’d rather apply a font to all elements on your site, you can define your own custom font-family rules in your CSS file, for example h1 {font-family: "tenby-seven-1"} would apply the Tenby Seven font to all headlines on the site.

Typekit’s editor tool for customizing fonts. Click the image for a larger view.

The next step is to publish your font, which then makes it available on your domain.

The results looked great in our testing, especially in Safari 4, which seems to render type a bit thinner than Firefox on the Mac. On the Windows side, the results were roughly the same between browsers that supported Typekit.

One thing that seems unavoidable with @font-face, whether it’s through Typekit or otherwise, is a brief flash of unstyled text. It’s annoying, but for now there doesn’t seem to be anything you can do about.

There are some other drawbacks — the need for JavaScript and the additional data that increases page load times — but so long as you’ve already accepted @font-face‘s shortcomings, Typekit makes the process of using it simple and easy. Other possibilities for broadening your type selection include Typotheque and a new service Kernest.

See Also:

File Under: CSS, Fonts

Typotheque’s Web Fonts Rock, But Old Machines Can’t Learn New Type Tricks

Font foundry Typotheque has introduced a new web font system that gives web authors a new set of font embedding options for their website designs. However, as cool as Typotheque’s new tools are, they can’t overcome some larger problems with the @font-face rule in CSS and the state of type on the web in general.

Typotheque, a Netherlands-based font foundry, recently unveiled a set of web licenses and an easy cut-and-paste solution for web developers looking to take advantage of the CSS3 @font-face support in modern web browsers. The solution is particular nice because it doesn’t require the overhead of loading JavaScript libraries like some other proposed solutions we’ve covered, such as TypeKit. Typotheque’s system requires only a CSS file and a simple @font-face stylesheet rule.

Also working in Typotheque’s favor is a web-only license, which is issued and controlled by the company, that’s considerably cheaper than licensing the actual font files.

Unfortunately, in the real world, @font-face’s results aren’t always what you expect. As BoingBoing recently discovered when it tried a redesign using @font-face to embed custom fonts, CSS3′s @font-face rule doesn’t always render correctly on older PCs.

While it’s nice to see font foundries like Typotheque embracing both web licenses and simple embedding tools, the results are decidedly mixed. So long as your site’s users are running a modern OS like Mac OS X, Windows Vista or most Linux distros; and they have modern browsers like Firefox or most of WebKit-based browsers, the @font-face and Typotheque’s new embedding system work wonderfully. The only minor issue is a quick flash of unstyled text appearing when the page loads in Firefox, but that can be addressed with a simple JavaScript workaround.

However, for those users still using Windows XP, embedded fonts are not, by default, anti-aliased and results in jagged, ugly fonts that aren’t going to make you or your visitors happy.

To see how things looked in various browsers, we loaded Typotheque’s Fedra Sans font up in a test page at 72 pixels and then looked at it in various browser/OS combos:

Fedra Sans in various browsers. Click the image for a larger view.

As the image above demonstrates, the results are just fine in Firefox on Mac OS X and Linux, acceptable in IE7 in Windows XP and downright ugly in IE6 on XP. Given the considerable percentage of web users still browsing with IE6 in Windows XP, @font-face clearly isn’t going to work for every site.

Still, for those that just want to experiment with @font-face, Typotheque’s new system is the simplest, cheapest system we’ve tested. There’s even a free month-long trial available for testing purposes. For more details, head over to the Typotheque website.

See Also: