The future of web fonts

The next web design revolution will be typographic. But all is not plain sailing

Snook thinks web-font services are a stopgap until WOFF (Web Open Font Format) is fully supported, enabling designers to self-host commercial fonts. In the meantime, Kinnunen recommends you use a third-party service where possible:

"They can save a lot of hassle dealing with licensing issues," says Kinnunen, adding that one end-user licence agreement he read recently stated that the foundry didn't even allow static images to be put online. He believes that third-party services "also assist with cross-browser support and optimal server settings, although there's a trade-off in losing a certain amount of control over your site".

Kinnunen admits large companies would be more comfortable with everything housed on their own servers, rather than relying on the uptime of a third-party solution. "Furthermore, many hosted services use JavaScript, and so they won't work for users who've disabled that technology."

On that last point, Fontdeck doesn't stumble; Rutter notes it eschews JavaScript in favour of generating @font-face rules, which are hosted in a CSS file on a Fontdeck server and designers then link to it. Once launched (Fontdeck is in beta at the time of writing), the service should also be particularly designer-friendly.

"Fontdeck enables you to license individual fonts. Designers can use the service for free, try as many fonts as they want, run them by clients, and only pay when the final fonts have been confirmed and the site needs to go live," says Rutter.

He also mentions that Fontdeck is compatible with any @font-face supporting browser, from Internet Explorer 5 and up, but concedes that even this well-considered solution can't deal with the 'flash of unstyled text' (FOUT) issue that affects sites using font linking.

"FOUT's always going to be a side-effect, whichever solution you use, whether it's third-party or self-hosted. But we've spoken to Mozilla about its plans for improving the FOUT issue and they've said it's high on their agenda," he says.

Designer skills

Being armed with a font service isn't enough to ensure a rosy future for web typography. "Widespread adoption of @font-face is great, but the growing type-savviness of designers is arguably more important," says Stocks. "For a long time, most web designers haven't understood what makes good typography online, and only now are we seeing a more considered approach."

Warren says a "strong foundation in the fundamentals of type will become increasingly important," such as "typographic hierarchy – the establishment of visual importance from 'most important' to 'least important', based on proportion, contrast, alignment and location." Since web type is the interface most online users interact with, Warren argues that this principle is critical.

Black adds that designers must also be mindful of "the lessons learned in 500 years of printing," joking that "there are enough technical problems to solve without having to reinvent the principles of good typography". He suggests web designers learn about text column widths, leading, kerning, colour contrast, and font sizes big enough to read comfortably but small enough to scan. Kinnunen reinforces that principle, saying fonts should always complement a design and that, "You shouldn't use custom fonts merely for the sake of being hip."

This issue also worries Stocks, who says @font-face is already being abused by designers who don't understand type, leading to a 'MySpace of typography'. "Being restrained to a few typefaces isn't necessarily a bad thing," he says. "It's what pre-digital print designers had to put up with for years, and they did just fine."

There's also the danger that some designers will expect too much. Art director Tom Kershaw says anyone embracing real fonts must fully understand the limitations of emerging technologies. "Even with the likes of @ font-face, you still have relatively limited control over type. Nothing replaces being able to tweak individual letters just as you want them with Illustrator, for example."

However, Black argues one aspect of print could make its way to the web as designers increasingly embrace real fonts: proofing. "There's a need to proof specified fonts on different browser and operating system combinations," he tells us.

"In the early days of web design, we had labs filled with PCs, but many designers got the idea that since the browsers were displaying standard HTML in much the same way, we didn't have to worry about the differences. But it turns out that the visual layer of Windows is quite different from the Mac visual layer, particularly when it comes to fonts. And there are several generations of PC and font rendering piling up. When you add mobile browsers on smartphones, the designer's job of predicting visual results is getting harder, especially when real fonts and fall-backs are involved."

Looking forward

So, bearing in mind all the issues relating to font services and the typical web designer's incomplete typography skills, are we ready for real fonts? Snook thinks so, saying:

"Use will depend on tradeoffs, like any other design decision." Stocks agrees, reminding us that "the web is a medium always in a state of constant flux". He says we should embrace this, rather than waiting for an imaginary time when support is absolute: "That's not how things happen: standards aren't dictated and followed – they're formed based on what people are already doing. Therefore, use new technology now, because if you don't, you're holding back the web!"

FONT DECK:Font Deck is just one up and coming service that will allow you to use custom fonts on your website

Limited browser support isn't a defence either, because sites needn't look identical in every browser, and services deal with many @font-face problems.

Black suggests getting on board with the trend, simply because real fonts will explode into the mainstream during 2010: "It'll start with desktop browsers, but then real fonts will go into tablets, like the iPad, and web apps outside the browser, and then to smartphones. Soon, they'll hit email clients and once users can select a font as a signature typeface, it's all over, and real fonts will go everywhere."

He compares this to the creep of HTML: "As HTML gets richer, cool sites are moving away from Flash, and advertisers will follow." Until now, Flash was the only way to achieve consistency in high-end graphics, and provided a solution for advanced type (via sIFR), but with smartphone manufacturers cooling to Adobe's technology, a replacement is needed. "With real fonts and HTML5, a designer can get branding across platforms, but without plug-ins and bulky downloads,"

An article on Amrinder Sandhu's blog rather than a full-on typography website, Revised Font Stack is still the best font stack resource we've seen of late. By exploring commonly installed fonts and offering quickfire case studies, the article provides plenty of ideas.

John Boardley's website has been running since August 2007 and exists due to his "passion for typography, type design, and lettering". The site provides insight into general typography, great fonts and more, and has a number of contributors.

Visiting Paul Irish's site might shock non-technical types, since it's full of scripting tips ("Turn on a dirty flag in traversal methods," he merrily quips in a recent article), but the typography section is required reading for anyone interested in working with @font-face.

Richard Rutter's site aims to step through principles from Robert Bringhurst's book The Elements of Typographic Style, applying them to the web. 'Completed' in 2008, it's still great for grounding yourself in web typography.

The Flash front-end here makes us want to punch a squirrel, but there's no denying Typophile's importance for anyone into online typography. Since 2000, the site's provided a community for typography-obsessed designers to flock to.

Sign up for TechRadar's free Weird Week in Tech newsletterGet the oddest tech stories of the week, plus the most popular news and reviews delivered straight to your inbox. Sign up at http://www.techradar.com/register