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.
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.
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.
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.
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.
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.
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.
Font startup Typekit introduced an API Thursday that lets web programmers generate kits from the Typekit library behind the scenes.
The company has previously only offered the option of picking fonts and generating kits using the web-based tool on its site. But by releasing an API, it’s giving people the option of building Typekit into their own apps or simply extending the way they use the service.
Writing on the Typekit blog, Paul Hammond says: “The Typekit API gives you the ability to programmatically create, modify and publish kits. It also allows them to fetch metadata about all the fonts in the Typekit library.”
Here are the documentation pages. As you can see, the Typekit API returns data in a few different flavors (JSON, XML and YAML)
There’s an example page set up on Github, and while there isn’t much there yet (just a kit generator for Ruby) we can expect more soon.
If you haven’t yet explored Typekit’s service for including fancy fonts in your site designs, you should. Especially handy is the WebFont Loader, an open source library of scripts that Typekit developed to help eliminate the “flash of unstyled text” that happens when a page loads. The WebFont Loader offers a number of JavaScript events which allow developers more control over when and how their fonts are loaded onto the page.
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.
Google has announced a new Font API and a collection of free, open source fonts anyone can use in their site designs for free. The Google Font API allows you to embed any of the new Google fonts on your website using CSS.
The fonts themselves are quite nice, with a range of script, serif, sans-serif and monospace typefaces. They can all be used to style text via @font-face. There are only eighteen fonts available — so there’s probably no need for Typekit to worry that Google is muscling in on its territory.
In fact, Typekit has partnered with Google to announce WebFont Loader, a JavaScript library for improving the web font experience. Typekit will also be adding Google’s new free fonts to its collection, so there’s clearly still a lot of love there.
The WebFont Loader is an open source library of scripts that Typekit developed to help eliminate the “flash of unstyled text” page load hiccup that we’ve mentioned before. The WebFont Loader offers a number of JavaScript events which allow developers more control over when their fonts load.
Even though things have been progressing quickly in the world of type on the web, with advancements in CSS, HTML5 and the rise of services like Typekit, inconsistencies in browser support and implementation have stopped some from making the move to web fonts. The new WebFont Loader gives hope to those still on the fence by providing a consistent way to handle what the browser does while the fonts are being loaded.
“The WebFont Loader does for @font-face what jQuery has done for JavaScript,” says Typekit co-founder Jeffrey Veen in an e-mail to Webmonkey. “For people who really care about about the speed and user experience of their web pages, the WebFont Library gives them much more control. It essentially moves us a big step forward in the evolution of fonts on the web.”
Veen also praises Google’s decision to keep its work open source and free.
“Getting fonts technically ready for web use is a lot of work, and using the open source model allows anyone to contribute their expertise to a core set of fonts.” he says.
You can use WebFont Loader with fonts on your own server, with links to the just-announced Google Webfont API, or with your Typekit account.
As for Google’s new Font API, well, it’s so simple its hardly an API. You just need to add a link to Google’s stylesheet in the head tags of your page and then apply that font to some element in your page.
The syntax looks like this:
Then, in your stylesheet, you can apply that font to any body element. For example:
h1 {
font-family: 'Font Name', serif;
}
Google’s new Font API will work in any browser that supports @font-face (which is pretty much all of them). If the Google fonts happen to strike your fancy, the API is certainly easy to use. If you’re looking for a broader selection, check out Typekit.
Typekit offers Google’s new open source fonts, Veen says, but Typekit also offers access to a library of over 4,000 commercial fonts of professional quality. Typekit is currently the only source offering these high-quality typefaces for legal use on the web.
Disclosure: Jeff Veen is a former Webmonkey editor and a former Wired.com employee.
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.
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.
Font startup Typekit introduced 
Google has announced 
Browse Our Tutorials
Cheat Sheets
Color Charts
Cut & Paste Code
