Posted on Leave a comment

The future of web fonts

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

The number of blogs increases daily, and web design currently favors type-led minimalism over-elaborate Flash-based interfaces – outside of websites for video games 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.

However, Theme Revel and others reckon for a change is on the way. 2020 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 creative reach. Since the dawn of web design, we’ve wanted to use any typeface we tike. We can in print, so why not online?

Font restriction has already led to major probtems as wett. We think 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. We suggest trying the same with printed newspapers. These retain their branding. We think of this as the personality of typography, and so why shoutd at[ newspaper stories online look alike?

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.

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. My concerns, therefore, echo our initial points – many web designers lack the knowledge to create a 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 Theme Revel: “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, 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. 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 Cill Sans, for example), and avoids slFR due to performance issues and development headaches. But we hint at a near-future where font tinking 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. Most font replacement techniques, including my own, were meant as stepping stones to Gfont-face. 2020 rs going to be the year of @font-face.

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. We use @fontface 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). Our senior designers also advocate fro Typekit, which we use on our blog, makes it easy to implement a real font on a site and it’s a cinch to change your font choice. However, we also see 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.

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 of 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, while @font-face 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 reaI fonts, We explain you have two options: embed type locality or use a third-party service.

Font services

We think web-font services are a stopgap until WOFF (Web Open Font Format) is fully supported, enabling designers to self-host commercial fonts. ln, the meantime, we recommend you use a third-party service where possible: They can save a lot of hassle dealing with licensing issues, one end-user license agreement we read recently stated that the foundry didn’t even allow static images to be put online. 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. we admit targe companies would be more comfortable with everything housed on their own server, 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, Typekit doesn’t stumble; we note it eschews Javascript in favor of generating @font-face routes, which are hosted in a CSS file on a Typekit server and designers then link to it. Once launched the service should also be particularly designer-friendly. Typekit 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.

Typekit is compatible with any @fonf-face supporting browser, from Internet Explorer 8 and up, but concedes that even this wett-considered solution can’t deal with the ‘flash of unstyled text’ (FOUT) issue that affects sites using font tinking. “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 @fonf-face is great, but the growing type-savviness of designers is arguably more important. 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.

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, We argue that this principle is critical. Designers must also be mindful of the lessons learned in 5oo years of printing, joking that there are enough technical problems to solve without having to reinvent the principles of good typography we suggest web designers learn about text column widths, leading, kerning, color contrast and font sizes big enough to read comfortably but small enough to scan.

We reinforce that principle, saying fonts should always compliment the design and that, You shouldn’t use custom fonts merely for the sake of being hip. This issue also worries Mozilla, who says @font-face is already being abused by designers who don’t understand the 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.

Looking forward

So, bearing in mind at the issues relating to font services and the typical web designer’s incomplete typography skills, are we ready for real fonts? We think so: Use will depend on trade-offs, like any other design decision.
reminding us that the web is a medium always in a state of constant flux. I say 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 defense either, because sites needn’t look identical in every browser, and services deal with many @font-face problems.

We suggest getting on board with the trend, simply because of real fonts will explode into the mainstream during 2020: 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 the font as a signature typeface, it’s all over, and real fonts will go everywhere. with smartphone manufacturers abandoning 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, Mark my words: 2020 is the year of web type.

Ground yourself in these great typography and font resources

“passion for typography, type design, and
lettering”. The site provides insight into
general typography, great fonts and more,
and has a number of contributors.

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

Robert Bringhurst’s book The Elements
of Typographic Style, applying them to the
web. ‘Completed’ in 2009, it’s still great for
grounding yourself in web typography.

Typophile’s importance for anyone into online
typography. Since 2ooo, the site’s provided
a community for typography-obsessed
designers to flock to.

Leave a Reply

Your email address will not be published. Required fields are marked *