Designers have been bemoaning the state of typography in the browser since the dawn of the web. However, CSS 3 and the @font-face rule go a long way toward improving your font options. Throw in tools like lettering.js and easy-to-use font services like TypeKit and it’s not hard to turn your site into something from a typography nerd’s fantasies.
The days of only six font choices on the web are, thankfully, well behind us. Now you can choose from hundreds of fonts, whether you embed your own or use a service like Typekit. We see gorgeous typography on different sites everyday and sometimes we’re left wondering, what is that cool font?
That’s why we’re loving the What Font bookmarklet from developer Chengyin Liu. What Font is a little JavaScript bookmarklet you can add to your favorite browser and then, when you want to know which font a site is using, just click the bookmark and hover the text in question. What Font will hover a small transparent overlay with the typeface name (see screenshot above).
To try it out, head on over to Liu’s site and drag the bookmarklet to your browser’s bookmarks bar.
It’s worth noting that you can get the same information from Firebug or the WebKit Inspector, but What Font doesn’t have the interface overhead of Firebug or WebKit’s developer tools — it just does one thing and does it well. Couple the What Font bookmarklet with FontFonter and you can preview your website in your favorite new font in no time.
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.
Typography on the web has improved by leaps and bounds since the dark days of the blink tag, but it’s still a long way from ideal.
Sure there are great ways to serve custom fonts, and you can even use JavaScript libraries like Lettering.js for even more control over your layout. But when it comes to the flow of text around images, pull quotes and other block level elements, well, web typography falls apart.
The demo movie above from Adobe shows off some WebKit-based experiments that seek to change that. Adobe Engineering VP Paul Gubbay narrates and the demo, and he shows how his team is extending the WebKit browser to do some new typographic tricks. WebKit is the open source engine behind Safari and Google Chrome, and it powers the most popular mobile browsers like the ones on the iPhone, iPad, iPod and all the Android phones. The demo certainly shows some impressive results.
However, we’re a bit suspicious of the methodology behind the results. Gubbay talks about extending WebKit’s CSS support via vendor prefixes, but neglects to mention what those prefixes are built against — in other words, there’s no mention of submitting a standard that other browsers could work from.
In fact, while the demo is pretty cool, the whole overview is too vague to say much about other than, “that would be nice.”
Also, note to Adobe, you don’t need to work with Google to work on WebKit. It’s an open source project. You can just submit your patches (instructions are here).
CSS 3 adds some awesome new tools to web designers’ toolkit — the ability to rotate, transform and tweak elements means complex layouts can be done with nothing more than some style sheet rules.
Combine that with some of the fancy new fonts available through web services like Typekit and Fonts.com and you’re well on your way to replicating the kind of fine-tuned typography control print designers have long enjoyed. However, targeting individual letters and words can still be tricky.
That’s where Lettering.js comes in. The JQuery plugin can wrap your text with span tags, allowing you to target CSS rules to individual letters, words or sentences.
If you wondered how the designers behind the Lost World’s FairsCSS experiment did it, well, look no further than Lettering.js. The other showcase examples on the Lettering.js website are no less impressive.
The library, which requires JQuery, can be downloaded from Github. Using it is as simple as selecting the element you want to target and applying the appropriate function — basically, whether to wrap the letters, words or lines of your target element.
One thing to note, the developers recommend putting Lettering.js in your head tags to avoid the unsightly flash of unstyled content that can occur if you include it at the bottom of your page.
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.
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.
Font startup Typekit introduced 
Google has announced 
Browse Our Tutorials
Cheat Sheets
Color Charts
Cut & Paste Code
