Brownstone Blog

WOFF! The future of web typography.

In the digital era with its emphasis on banners, pop-ups, flash animation and viral videos it’s easy to forget the power of the written word and the creative bang that can still be gleaned from the use of typography.

There are literally thousands of fonts out there with more being created every year. But using typefaces and more importantly, WORDS effectively to get your message across is more than just using a great typeface. And despite the fact we are all increasingly bombarded with visual images both static and moving – while a picture is worth a thousand words let us never forget that it took words to say that.  Without an intriguing or engaging headline or positioning statement and pertinent and punchy copy your visuals no matter how well crafted can end up as verbiage without the write (pun intended) stuff to drive your message home.

But don’t take our word (sorry, pun unintended), for it. This fabulous video makes the point in both visuals and words:

Of course, what designers and advertisers are mainly concerned about nowadays are web fonts. We’ve finally reached the stage where the world of web fonts and the art of web typography is exploding due to the fact we have reached a point where using real fonts on the web is a viable option. Web designers now have a greater control over how content is displayed and for the end user this translates into a richer web experience. For advertisers, this also means that branding and corporate design guidelines can be easily adhered to resulting in no dilution of messaging no matter the medium.

Of course, nowadays it’s not sufficient for fonts to just look good on the desktop, as more and more web usage shifts to smartphones. So, having readable, legible and properly spaced typography on mobile devices is rapidly becoming critical for both web and app design. Already companies like Monotype and Typekit are working to make sure that fonts display at their best on a number of different screen types and sizes.

For designers, Web Open Font Format, or WOFF, is the revolution that is fast is becoming the de facto standardized format for using fonts on the web. Backed by Mozilla, Opera and Microsoft, WOFF allows TrueType, OpenType or Open Font Format fonts to be embedded into web pages. Right now, WOFF support is built into Firefox 3.6 and above, Google Chrome version 5 and above, Internet Explorer 9, and will be supported in upcoming versions of Safari.

Jason Santa Maria and his Friends of Mighty built Lost World’s Fairs as a way to showcase IE 9 and its support of WOFF. This fantastic piece of typographic web art really shows just how great type can be made to look on the web.

While creating this project, the Friends of Mighty realised they needed a better way to control individual letters and words to offer proper spacing and better kerning for complex typographical designs.

Thus, Lettering.js was born. Lettering.js is a JavaScript plug in that allows developers and designers to better control individual letters without having tons of messy mark up.

As Dan Rubin recently remarked on Twitter, Lettering.js may just end up having a bigger impact on typography on the web than anyone is expecting.

Want to experiment even if you’re not a designer? Then point your browser to

Wordle is a toy that allows you to create word clouds from passages you type into the site – allowing you to experiment with different fonts, layouts and colour schemes to produce typographical works of art – and you don’t need to be a designer to do it. It’s very, very cool – try it and see!

Words work. In the era of digital communications and with an increased emphasis on the visual it’s easy to forget how well, and how effective they can be.


One response to “WOFF! The future of web typography.

  1. Angelic May 8, 2012 at 7:16 am

    Nice post, many thanks for publishing this post. I liked it a whole lot 🙂 definitely i will book mark this page

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: