The next web design revolution will be typographic. But as Craig Grannell discovers, all is not plain sailing as we transition to real fonts

The number of blogs increases daily, and web design currently favours type-led minimalism over elaborate Flash-based interfaces – outside of websites for videogames and movies, anyway. However, online typography remains a sore point with many designers, who are increasingly irked by restrictions. “We’ve been limited to choosing fonts users already have installed, or embedding custom type by using images, which isn’t practical,” complains Yahoo front-end engineer Jonathan Snook.

He adds that sIFR (scalable Inman Flash Replacement) offers greater flexibility, but that it comes at the expense of performance and usability. The appearance of Cufón (a JavaScript font generator that converts font files to vector objects for use in any browser)as a successor brought its own problems, which Snook notes are mostly “down to it not being native HTML and CSS”.

However, Snook and others reckon change is on the way. 2010 could see the web become a place where type shines, but only if important technical hurdles are overcome and web designers are au fait with the fundamentals of typography.
The need for change

With the browser landscape relatively stable at present, some might argue for the status quo rather than more upheaval, but that would limit the web’s creative reach. “Since the dawn of web design, we’ve wanted to use any typeface we like. We can in print, so why not online?” asks designer Elliot Jay Stocks.

Font restriction has already led to major problems as well. Font Bureau partner Roger Black thinks there’s a real danger of websites starting to look alike: “Take screen grabs of story pages on news websites, cover the headers and see if you can tell the source.” He then suggests trying the same with printed newspapers. “These retain their branding,” says Black. “I think of this as the personality of typography, and so why should all newspaper stories online look alike?”

Clearleft production director and Fontdeck co-founder Richard Rutter also thinks web typography isn’t taken as seriously as it should be: “Designers may take typography seriously, but attention to detail doesn’t necessarily get carried through to the final website. I’m not even talking about typefaces, but typesetting and using the right characters for the job – dashes, not hyphens; real quote marks; an ellipsis rather than three full stops.”

He thinks that by taking more care over typography – ensuring suitable line lengths for reading; preventing widows and orphans in headings; being judicious in the number of typefaces and font sizes used – you enhance the reading experience for users and thereby improve your websites overall.

Rutter’s concerns therefore echo our initial points – many web designers lack the knowledge to create strong type, and technical limitations abound that prevent them from properly getting to grips with typography. The latter is as much to blame as the former, according to Rutter: “Good typography online has been hampered by a lack of support for font weights, and the situation for choosing different widths, such as condensed or extended fonts, is even worse.”

Despite these insights, Rutter admits Clearleft mostly uses fonts that are likely to be installed on users’ machines at the moment. “With serious attention to typesetting detail, this is always a viable solution, not least because the likes of Verdana, Georgia and Arial were designed for screen use.” He adds that the company also makes use of Microsoft’s ClearType fonts and relevant fall-backs in CSS font stacks (backing up Calibri with Trebuchet MS and Gill Sans, for example), and avoids sIFR due to performance issues and development headaches.

But Rutter hints at a near future where font linking will become important and hugely increase the scope for web typography, and he’s not alone.
The path to @font-face

Every designer we spoke with said they’d experimented with font linking, which enables real fonts to be displayed within a user’s browser. Even Simo Kinnunen, the creator of the aforementioned Cufón, recommends @font-face. “Most font replacement techniques, including my own, were meant as stepping stones to @font-face. 2010 is going to be the year of @font-face,” he says.

Snook adds: “No replacement technique matches the capabilities, usability and flexibility of native type within a browser. @font-face was established to enable real fonts to be embedded within a web page without requiring the font to be permanently installed on the visitor’s machine.”

Although few designers currently use font linking for body copy, it’s popular for display text. Elliot Jay Stocks uses @font-face for headings, using free fonts that allow linking or those provided by Typekit (a subscription-based service that only requires a line of JavaScript and for you to inform the service of the font you require in order to get a typeface-enriched web page). Phase2 Technology senior designer Samantha Warren also advocates Typekit, which she uses on her blog, badassideas.com: “It makes it easy to implement a real font on a site and it’s a cinch to change your font choice.” However, Warren also sees value in font services for commercial projects: “They will be great for clients who have a long relationship with a specific typeface in print and want to continue that relationship online. As more fonts become available through web-font services, I expect newspapers and magazines to really take advantage of them.”

Warren adds that services also deal with a major challenge when considering real fonts for a website. “The web world and type industry are getting creative and examining how they can do business together, so both parties feel they’re getting what they want. The web industry wants to be able to embed a wider variety of fonts in web pages, and the type industry wants fair compensation for typeface designs without widespread illegal distribution. Dialogues are developing between people in both industries and a level of mutual respect is spreading.”

However, Snook warns that while @fontface is available in the current versions of all major browsers, web designers are suddenly discovering where its implementations fall down: “This is pushing browser developers to establish consistency and fix bugs, and I suspect within a few years the hurdles we face will be solved. As of now, though, @font-face is replete with pitfalls. It’s not a smooth and simple process to create a consistent cross-browser or cross-platform experience with custom fonts.”

Should you nonetheless decide to use real fonts, Snook explains you have two options: embed type locally or use a third-party service. “Your decision mostly lies with the font you wish to use and the licensing that goes along with it,” he says, mirroring Warren in noting that foundries have been reluctant to allow fonts to be embedded online, due to the potential for copying. “Third-party services like Typekit provide obfuscation that’s helped set the foundries at ease. For commercial fonts, you’ll therefore likely have to go through a third-party service, but for free or shareware fonts, you’ll need to serve fonts from your own server.”
Font services

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 thirdparty 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 trade-offs, 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!” 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,” Black concludes. “Mark my words: 2010 is the year of web type!”


0 Responses to “”

  1. Leave a Comment

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s


%d bloggers like this: