Attention type nerds, did you know there are online games just for you? It’s true, Shape Type is a new HTML5 typography game where you have to drag curve-adjustment tools to perfect letterforms in various font faces. The closer you get to the actual letter the higher your score.

Shape Type is the brainchild of web developer Mark MacKay, who also created Kern Type (you guessed it, a competitive game of type kerning) and the nostalgia-inducing memela, a lite-brite inspired drawing app.

Shape Type uses the Raphaël JS library for its vector graphics. In order to play you’ll need to be using a modern browser, but so long as you’ve got the latest release, all the major browsers will work.

See Also:

• Play Pac-Man in HTML5
• Conway’s Game of Life in JavaScript
• URL Hunter: a Cool Game, but not HTML5

The web is awash with CSS frameworks. But, while frameworks can be great for prototyping and quick mockups, they’re often overkill for most projects. It’s also pretty rare to find a framework that meets all of your design needs.

If you’re just looking for a way to get some great typography on your site, but don’t need a grid or other tools that often come with a full-blown framework, check out Type-a-File. Type-a-File isn’t exactly a framework, it’s more specific — a set of typography styles that you can adapt into your CSS.

Type-a-File is the work of designer Russ Maschmeyer and currently offers eight different typographic style sheets, designed, in Type-a-File’s words, to “give your web typography a head start.”

The style sheets takes advantage of some of the new features in CSS 3 like column-count and border-radius, as well as services like TypeKit for fancy fonts. Fortunately, the vast majority of the rules aren’t based on the still-nascent CSS 3 spec, so nearly all the effects will work in older browsers as well.

In addition to basic rules for typographic elements — h1-6, p, lists, cite and so on — Type-a-File has a few classes you can apply to pull quotes, create “kickers” or “sidenotes” and change default headings.

Type-a-File is released under a Creative Commons Attribution license, so if you’d like to take one of the eight example style sheets and use it to build something of your own you’re feel to do so. You can even submit it back to Type-a-File for inclusion on the site.

Photo by the four elements/Flickr/CC

See Also:

• Design for Readability First
• CSS: Should You Use a Framework or DIY
• CSS3 Pie Lets You Have Your CSS and IE It, Too

The Web Font Awards are coming soon. It’s a new competition recognizing the most beautiful applications of web fonts in site design and technological achievements in type on the web. There’s no entry deadline or submission guidelines yet, but the contest will involve an actual meatspace awards ceremony and real cash prizes.

From the Web Font Awards site:

The Web Font Awards – the first ceremony to celebrate the newfound typographic freedom empowering Web designers across the globe. The Web Font Awards will be a design competition for websites using Web fonts. Aimed at promoting Web font awareness and adoption, the competition will be open to eligible users of any Web font service or technology.

Sign up at the site to be notified of dates, deadlines, rules and requirements as soon as they are available. Though we’re guessing this site (possibly NSFW) already has the top prize in the bag.

See Also:

• Web Heavies Send a Love Letter to Open Web Fonts
• Typekit Teams Up With Adobe to Offer More Web Fonts
• Test Drive Your Type With Google Font Preview

The nascent Web Open Font Format (WOFF) is getting a boost this week thanks to some new initiatives being kicked off by the W3C, the web’s governing body.

The W3C recently created a working group to build a WOFF into a web standard, and that group will be holding its first face-to-face meeting at the TypeCon 2010 conference taking place this week in Los Angeles.

Representatives from the major browser vendors, several font foundries and web services providers will be in attendance. Also, a dozen or so select individuals will be participating in a series of presentations and panel discussions about WOFF throughout the conference. All the design industry folks in attendance will get a peek at the future of high-quality typography on the web. There are scores of topics on the program, but this year, WOFF is getting top billing.

Things are looking up for web fonts in general. Monday, Typekit announced a partnership with Adobe to include the company’s fonts as part of its licensing service. Last month, Google launched a new tool (tied to its Font API) that makes it dead easy to include any of its open source fonts in website designs.

The Web Fonts working group was formed earlier this year at the W3C, and the group has already released the first working draft of the specification that will eventually lead to WOFF becoming a recommended web standard.

WOFF works just like OpenType and TrueType — you use the @font-face CSS property to drop the fonts in — but the font data is compressed, so the files download faster, and you can include more fonts in your designs without worrying as much about payload bloat.

The W3C adds this bit: “The WOFF format is not expected to replace other formats such as TrueType/OpenType/Open Font Format or SVG fonts, but provides an alternative solution for use cases where these formats may be less performant, or where licensing considerations make their use less acceptable.”

Support for WOFF is already strong — Google, Mozilla, Apple, Opera and Microsoft browsers either ship with or are building support, and the fast-moving foundries are releasing WOFF fonts — so why is the W3C’s involvement a big deal when the open source format is enjoying such success?

Standardization by the W3C is the best path to true interoperability. It will keep all the parties on the same page when it comes to things like accessibility, cross-browser compatibility, internationalization and search engine indexing. How much metadata to include and how it is handled are also big issues. Plus, fonts have taken an astonishingly long time to arrive on the web because of red tape around licensing, and a collaborative process for developing licensing infrastructures will go a long way toward convincing some of the more conservative type designers to make web-friendly versions of their creations.

The standard will take years to complete (the process is very slow — we’re guessing 2012 or so), and until then, we’ll see designers, developers and innovative service providers like Typekit and Google continue to feed the interest in fancy web fonts. Those not on the bleeding edge may be stuck in the boring world of “web safe” fonts for a while, but at least the future is bright.

TypeCon 2010 runs from August 17 through 20.

Photo by Leo Reynolds/Flickr/CC

See Also:

• Typekit Teams Up With Adobe to Offer More Web Fonts
• Dealing With the Dreaded ‘Flash of Unstyled Text’
• Test Drive Your Type With Google Font Preview

Typekit, the web service that helps designers use elaborate typefaces in their page designs, is celebrating its one year anniversary with a big announcement: the company has added 16 of Adobe’s popular font families to Typekit’s ever-growing stable of options.

With the addition of Adobe’s fonts to TypeKit’s already large library, designers now have access to popular workhorse fonts like Adobe Garamond, News Gothic, Myriad and Minion, as well as slightly funkier options like Rosewood or Trajan, the “movie font.” These typefaces are heavily used in the print publishing world.

The new Adobe fonts are the original cuts of the typefaces, not reproductions or downgraded web versions of the designs. This means it’s now possible to use them just like you would in print work with the same rendering accuracy and technical detail you’d see on paper. Monday’s development should have a positive impact on the use of fancier fonts on the websites of old-school institutions and larger corporations — companies that have been using Adobe products to build their print materials for years. Now that they have the same level of control over details like kerning pairs and line height on the web, they’ll have an easier time making the jump.

Adobe is a little late to the party — the company is one of the last major font foundries to partner with Typekit — but Typekit President and co-founder Bryan Mason tells Webmonkey that the reason for the delay is a heavy attention to detail.

“Adobe has been working on the hinting and screen rendering of these (and others to follow) for months,” says Mason, “[that] means a character-by-character, weight-by-weight review of each font family.”

Typekit is like a YouTube for fonts. The service lets web developers pick a font from its library, pay a licensing fee to the font creator (though some fonts are free), then use that font across their website. Unlike many fancy type solutions on the web, TypeKit isn’t using any sort of image replacement for rendering fonts, just the standard CSS @font-face declaration with a minimal amount of JavaScript to simplify the process and account for various browser versions. The service is one of the easiest ways for web designers to use creative fonts without sacrificing web standards or violating font licenses — most of the time, it’s just a matter of copying and pasting some code snippets. There are also options specifically designed for easy integration with popular publishing platforms like WordPress. The company also released an API last month, allowing third parties to integrate Typekit font selection into their apps.

If you’d like to try the new fonts on your site, head over to Typekit and log in to your account. The fonts are available for all paid Typekit accounts. If you’re using the limited, free option, you’ll have to settle for Adobe Garamond, the only family that Typekit is giving away.

See Also:

• Typekit Gets an API
• Typekit Now Offering Custom Fonts For WordPress Blogs
• Review: Typekit Delivers Custom Web Fonts to the Masses
• Google, Typekit Join Up to Improve Web Fonts

Google launched a new web-based tool Wednesday that helps you configure, test and easily embed one of the company’s free fonts into your web pages.

The Font Previewer lets you pick one of the open source fonts from Google’s Font Library, then tweak the size, spacing and decorations using simple sliders and buttons. Once you have the type the way you like it, just copy the provided code and paste it into the CSS.

It’s so ridiculously easy, even I was able to use it to change the h1 style on my personal site in about 2 minutes. I chose Pablo Impallari’s Lobster.

Google first took the web font plunge back in May by releasing the Google Font API and publishing a collection of free, open source fonts anyone can use in their designs for free. It also joined up with Typekit (who released an API today) to put together a JavaScript library for designers to control how and when their fonts are loaded.

The fonts in the Font Previewer are the same ones available through the Google Font API. They are quite nice, with a range of script, serif, sans-serif and monospace typefaces. The various typefaces used on the Android devices (Droid), and the old-timey one from Mark Pilgrim’s Dive Into HTML5 site (IM Fell) are part of the package.

Here’s Google’s announcement with some more info.

See also:

• Google, Typekit Join Up to Improve Web Fonts
• Typekit Gets an API
• Google Chrome to Support the Web Open Font Format

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.

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.

First, limit your pages to only one or two external fonts. While the golden age of custom fonts has indeed arrived, try not to abuse the machinery.

Another obvious solution is to minimize the size of your included font file. This starts with choosing fonts with smaller payloads when possible. Not all font packages are equal — when it comes to the web, stick to fonts in the kilobyte range rather than some of the bigger, multi-megabyte files out there.

If your server supports it, be sure to serve your font files using gzip compression. Read developer Stoyan Stefanov’s great article on gzipping font files. His tests show a 45-to-70 percent reduction in file size when using gzip to serve font files. If you’re using WOFF-formatted fonts, you can skip this step, because WOFF already includes compression.

So you’ve selected small font files and only a couple of varieties, and you’re serving them with gzip compression. But you’ve still got a FOUT. What to do?

Start with heavy caching. Set your expires header to something in the very far future, which will cause the browser to cache your font files almost indefinitely. It won’t help for the initial page load, but subsequent loads will happen faster.

Then you can get even trickier — but caution, for here be dragons. None of these techniques is 100 percent effective, and all have drawbacks like slower page-load times and incomplete browser support.

One way to trick the browser into downloading the font file sooner is to use the font declaration to style the <html> tag. For example, say you have an @font-face declaration in your stylesheet and a class “myfont” that uses it. Apply that class to the HTML element like so:

<html class="myfont">

As per the CSS spec, @font-face does not cascade, so the whole page won’t inherit the font. But both Firefox and Opera will load the font file much sooner. Unfortunately, WebKit browsers will not.

You can trick WebKit browsers into loading the font sooner by adding an element to the head of your page. Developer Paul Irish has an example of this in a post on @font-face. Irish points out that adding a tag to your header will cause WebKit to download the font file:

download please

The problem is that obviously this is not valid HTML, and most browsers will render the element in the document body when the page loads, so you need to remove or hide it. Although it may work, we don’t suggest using this technique unless absolutely necessary.

Another possibility is to hide the entire page until the font file loads. This is one the solutions TypeKit has started to use, adding a new class to the page body tag when the font files have been loaded. Just hide the body tag, then set the loaded class to “visible,” and you’ll avoid the FOUT.

Of course, this method avoids the FOUT by holding up the entire page, which may not be the best solution.

The final — and perhaps most useful — solution to FOUT is to simply learn to live with it. Browsers load fonts in roughly the same way they load images. Slow internet connections have always meant progressive page loads, with elements staggering in as the browser draws the page.

With more and more sites adopting @font-face, services like Typekit and other custom web-font solutions in spite of the Flash of Unstyled Content, more users will become accustomed to the hiccups. This will make your own site stand out less.

These solutions aren’t perfect, but when has the web ever been a source of perfection?

See Also:

• Use @font-face Today With Free, Legal Fonts
• Google Chrome to Support the Web Open Font Format
• Boing Boing’s Redesign Uncovers the Dark Side of Web Fonts
• Review: Typekit Delivers Custom Web Fonts to the Masses
• Mozilla Throws Its Weight Behind Improving Web Type, Adopts WOFF for Firefox