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.
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.
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.
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.