Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
7th January 2013

The future of web fonts

Richard Rutter, typography evangelist and Font Deck co-founder reveals the latest and greatest techniques and tools for web font and typography glory

The future of web fonts

The web type revolution began in late 2009, but it is over the last year that the discipline has matured into a far more complete tool.

All web browsers are proudly boasting their typographic capabilities as CSS3 continues to both evolve and stabilise. We’ve seen the arrival of some fantastic typefaces either optimised for, or specifically designed for the screen , and we’ve also seen some pretty good screens arrive on the market. But most of all, we’ve seen a growing confidence and finesse among web designers when it comes to using typography in increasingly striking and effective ways.

As web designers, we do all of our typographic work – our typesetting in particular – in CSS. But CSS is a layer that can be peeled away, in part or in whole. It’s also a layer, not of definitive design directions, but of guidelines, hints and nudges. The web designer then, must be flexible. Your designs must be able to adapt to the environment of the reader, and the reader must be allowed to adapt the design to best fit their needs.
We are now at a point where web browsers are not just less broken than they were (although Internet Explorer 6 continues to nag and linger like a bad summer drain), they are more capable, supporting more and more CSS as the specifications grow and stabilise with the passing of time. One such advancement is the support of media queries, which gives designers a sniff of what medium the reader is using. In particular we can now know whether the reader is using a screen, and what size that screen is. Or to put it more accurately, we can send a different stylesheet to different sized screens. This is what we now know as responsive design.

For example, the following code snippet can be used to send a style sheet to a device with screen no bigger than 480px (such as a mobile phone):

001  < link rel=”stylesheet” media=”screen and (max-device-width: 480px)” href=”mobile.css” type=”text/css” />

And with that, we are able to provide different typesetting guidelines for small devices than for widescreen desktop screens (provided the reader’s software supports media queries, of course). There will always be the need for designs to remain flexible and adaptive.

Until very recently, the typesetting recommendations that we were able to put into CSS were limited to those which might be familiar to a metal type compositor working in the Forties: a very small pool of typefaces, a modest set of alphanumeric characters and punctuation, bold and italic, some line spacing, margins and white space. Font sizes on the web may be infinite in range and granularity, but aside from that, there was little to suggest the web’s digital nature. That has all, thankfully, started to change – particularly over the past year – and with it web designers’ interest and competence in the typographic aspects of their work.

The future of web fonts

The CSS font-weight property takes values from 100 to 900 as shown above

The implementation of web fonts across all major browsers was a game changer in many ways. Most of all, the ability for a web browser to use a font, not on the reader’s machine, but downloaded on demand from a web server, provided solutions to many of the problems browsers have been struggling with.
Among those problems is the font-weight issue. Browsers have found it nigh on impossible to use any weight of a typeface other than regular or bold, despite the requirement to do so being specified since 1996 in CSS1. For example, to set a semibold weight a designer should be able to use font-weight:600 and to set an ultralight weight one would use font-weight:100. The first difficulty is that fonts with extended sets of weights are not widely distributed, but even if their installation could be more or less guaranteed (on a corporate network for example) browsers even now still ignore the CSS rule or choose the wrong weight.

Unless, that is, web fonts are used. With the web font @font-face rule, the semibold and the ultralight fonts are made available on a web server and explicitly labelled with the correct weights by the web designer. A simplified example:

001 @font-face {
002 font-family: Calluna;
003 src: url(Calluna-Semibold.woff);
004 font-weight:600;
005 }

The browser problems are even worse when it comes to choosing different widths of a typeface, such as condensed or expanded styles. In 1998 the font-stretch property was introduced to CSS to handle this. It took nine values from ultra-condensed to ultra-expanded. It’s a sad fact that, 14 years later, it has never been successfully implemented.
Much of the problem lies with identifying which font within a family is designated ultra-condensed when it might actually be named super-narrow. And that’s assuming the font is installed and can be identified as part of a font-family (font metadata can be very inconsistent).

So what is a browser to do when it fails to find the ultra-condensed style installed on a reader’s machine? The answer is that it is supposed to look for the extra-condensed style; then the condensed; and failing those, it must choose the regular width (assuming that itself can be found). Our web designs must therefore be able to adapt to these situations. Fortunately web fonts come to the rescue again as they hugely increase the chances of that ultra-condensed font being used.

This time pragmatism dictates that we completely give up on the font-stretch property and just name the condensed font as such:

001 @font-face {
002 font-family: Proxima Nova Extra Condensed;
003 src: url(ProximaNova-ExCon.woff);
004 }

Something else the early twentieth century hot metal compositor will be familiar with is ligatures, all nicely lined up on his Linotype keyboard.

LAYOUT FUNDAMENTALS

“Good typography is invisible. In typography less is not always more; but it is usually better.”

“You can make an ordinary font look good, and you can certainly make a good font look bad.”

Type Size
When starting your layout, always start by setting body size. Bigger is better, so start with the browser default (usually 16px). This may look too big, but remember we read screens at arm’s length, so relatively the text will be about the same size as this magazine, which you will be holding closer than your monitor.
Try out size scales for the contrast you’ll need. Page hierarchies must be obvious, but don’t always have to be achieved with scale – weight and colour can work equally well. Tim Brown’s modular scale calculator can help here.

Line Length
The optimum width for reading has traditionally been 45-75 characters. This is still true for the web, and works out at about 22-38ems (360 – 600px for 16px text). Ensure that your body text line length falls into this range. Because it is a range you can set your width as a percentage of window size to give more flexibility and allow for a responsive design approach.

Line Height
Line height has a relationship with both measure and type size. The longer the line or the smaller the text, the more line spacing is required. There’s no hard and fast rule, but body text will need a line height of at least 1.3em.

001 body {line-height:1.3em}
002 h1 {line-height:1.1em}

Many people say to use unitless line height. This is wrong (or at least lazy), as bigger text needs a smaller line height relative to the text size. Using EMS as a unit of line-height (as in the above example) forces you to reset the line height for all elements with large text – this is definitely a good thing.

Ligatures help legibility and readability by replacing clashing pairs of letters with a specially designed character. Typically the terminal of an ‘f’ may clash with the dot of an ‘i’, so a ligature is used to prevent this. It has theoretically been possible to insert ligatures into words on web pages for years, but they have never seen the light of day – mostly because the widely distributed fonts on which we had to rely do not include (or need) them. That has changed now as web browsers finally take on technology introduced with Eighties desktop publishing. Welcome automatic ligature insertion.

The first fonts containing ligatures to be globally distributed were Microsoft’s ClearType fonts. Ironically, Microsoft’s current browser is not yet capable of automatic ligature insertion, but that’s Internet Explorer for you. However, Firefox, Safari and Chrome are (as will Internet Explorer 10).
So-called ‘common’ ligatures are shown by default at all text sizes by Firefox running on Mac OS X, and from 20px upwards by Firefox on Windows. These vary by font, but usually include fi, fl, ffl and ffi. For Safari and Chrome, ligatures are off by default for performance reasons – this is especially pertinent to WebKit browsers running on less powerful devices like smartphones and some tablets. For text set at large sizes, where the lack of ligatures (and hence letter clashes) is more noticeable, you can turn ligatures on by using this rule:

001 h1 {
002 text-rendering: optimizeLegibility;
003 }

Technically speaking, text-rendering is an SVG property that is not defined in any CSS standard. However, Gecko and WebKit browsers let you apply this property to HTML.
Automatic ligature insertion is achieved through a font technology called OpenType, something that is very definitely inherently digital. Coincidentally, OpenType was introduced in 1996, the same year that CSS became a standard, however it took until CSS3 for OpenType features, including ligatures and many others, to be available to us for use on the web.

Most OpenType features can be controlled through the font-feature-settings property, which is currently supported by Firefox, Chrome/Win and Internet Explorer 10. The syntax is a bit unfriendly as it maps closely to the OpenType specification. Other easier-to-understand properties have been specified in CSS3, but these have not yet been implemented in current browsers.
This is how you can activate ligatures using font-feature-settings:

001 -moz-font-feature-settings: “liga=1″;
002 -ms-font-feature-settings: “liga” 1;
003 -webkit-font-feature-settings: “liga” 1;
004 font-feature-settings: “liga” 1;

Note the subtle difference between the older Gecko syntax (for Firefox) and the other browsers which are the newer ‘standard’ syntax. Note that if you want to turn common ligatures off, you can replace the 1 with a 0.
You may have come across other ligatures, such as the ‘looped st’ combination. These less common substitutions are called discretionary ligatures and should be used – as the name suggests – with discretion (just in headings for example). You can turn on discretionary ligatures in addition to common ligatures as follows:

001 -moz-font-feature-settings: “liga=1, dlig=1″;
002 font-feature-settings: “liga” 1, “dlig” 1;

(We’ve removed the other vendor prefixes for the sake of brevity).

Specifying discretionary ligatures is definitely a case of progressive enhancement. It won’t matter too much if users of less capable browsers don’t get to see the discretionary ligatures, but modern browsers will be treated to a visual delight. On that note, another kind of variant available in some fonts is the swash alternative, where a more decorative character can be used to replace an ordinary one, often at the end of a word. For example:

001 < p>Spiekermann>
002 .swsh {
003 -moz-font-feature-settings: “swsh=1″;
004 font-feature-settings: “swsh” 1;
005 }

How to choose the right font for the job

Picking which fonts to use in your design can be an art that takes many years to master. There are thousands of web fonts available now, and it takes time to build up a personal library of fonts you know well. But there is some science to it as well.
There are always some objective requirements for text. Deriving these can help you whittle down your shortlist of fonts. Ask yourself what the text will be used for; precisely how and where it will be used, and under what conditions?

Character Set

Firstly consider what character set will be required. Which countries’ languages need to be supported? Some languages such as Slovenian require accents not always found in fonts (such as the diacritics in slovenščina) so make sure your fonts have the right characters for the job. If necessary try pasting accents into the type testers available on all good web font service websites.

Size suitability

Are you picking a font specifically for use at particularly large or small sizes – for example headings or captions? Consider (and test) whether the font sits nicely at those sizes. Will you have particular space constraints? Perhaps you will need to fit eye-catching text into a carousel, in which case you might look towards a font family with regular and condensed styles of the same typeface.

Multiple weights and italics

It may be useful to look at superfamilies that contain fonts at many different weights. If you need to distinguish between many different heading levels, superfamilies can give you a certain amount of flexibility, and ensure consistency across different type sizes and treatments.

Hinting

If a significant proportion of the reading audience will be using versions of Internet Explorer older than 9, you may want your fonts to have been manually hinted. This process helps Windows take the vectors in font files and turn them into readable pixels on a screen. Smartphones and Macs use a different process which doesn’t require hinting.

OpenType features

Consider whether you intend to make use of OpenType features. Check the font has the options you need, such as ligatures, small caps, old-style or tabular lining numerals, and so on.

Suitability for prolonged reading

There are common features of a font’s design which can indicate that a font might be good for body text – the main text of web page – particularly when that font will be used on a screen.

Contrast

Contrast in a font’s design can make for an easier reading experience, but too much contrast and the font will struggle to render well at small sizes. Too low and reading becomes tiring.

5 WEB FONT SERVICES

Fontdeck
fontdeck.com
The future of web fonts

Typekit
typekit.com
The future of web fonts

Webtype
webtype.com
The future of web fonts

Fonts.com
webfonts.fonts.com
The future of web fonts

Typotheque
typotheque.com
The future of web fonts

Optical sizes

Some typefaces include fonts designed for use at large sizes (usually suffixed ‘Display’) and fonts for use at small sizes (often suffixed ‘Text’). A display font will typically have a higher contrast than the text face, and can also be slightly more compressed and more tightly spaced.
Occasionally the fonts can be very different, as with Abril. Abril Display is based the classic high contrast forms of a Didone, whereas Abril Text is more akin to an old-style slab serif. Yet the two work together beautifully when set at appropriate sizes.
X-height
X-height, perhaps more than any other facet, makes a difference to screen legibility. X-height refers to the ratio of the x to the ascenders (of letters like f and l). Generally a taller x-height works better on screen as it makes the font seem bigger. A lower x-height can still work depending on design of font, but a bigger x-height leaves more room for three-storey letters, particularly a and s.

Apertures

An aperture refers to an opening into a letterform, such as in the letters a, c, e and s. A typeface with open apertures will make the text more readable.

Shapes

Matthew Carter (designer of Georgia) is often quoted as saying “Type is a beautiful group of letters, not a group of beautiful letters”, but of course the actual shapes of the glyphs do make a huge difference. Inherently simple shapes like those in geometric sans serifs, and the industrial crudeness of slab serifs, work well on screens. To aid readability and understandability, you should also consider whether a typeface design differentiates between i, 1 and l, as well as 3 and 8, and 0 and O.

So when choosing a font for body text, look for typefaces with low contrast, display and text variants, a tall x-height, open apertures, simple and differentiated shapes.

Overall style

Like all good design, font choice comes down to knowing your client and their audience. Some people prefer curvy swashes, some grungy scripts, and some go for bold and simple. For body text you’ll have to reel in the curves and smooth out the grunge, but there will always be something suitable.
Spend time browsing the web font service websites. Go through their showcases and galleries to see the fonts in action. Use the favouriting functionality on Fontdeck and Typekit to build up a long-list of options. Read the font descriptions – type designers often have a particular use in mind when they designed the font.

Also install the WhatFont bookmarklet. It’s a great tool for finding out which fonts are being used on a website (and quite handy for debugging too).
Above all make sure the typeface doesn’t communicate something you do not want to communicate. (Does a font from the Seventies really say what you want it to?) Remember there is no such thing as a neutral typeface – a typeface transmits neutrality and that’s a message in itself.

Pairing fonts

When it comes to pairing fonts, it’s good to remember that opposites attract. If your fonts are too similar to each other, it seldom works. Consider pairing a flashy, extroverted font (display face) with an understated, introverted font (text face).
If you are considering using more than one typeface, ask yourself why. Lots of typefaces can be like lots of voices – too many and you have a cacophony – all shouting against each other. Can the contrast be achieved with different weights and sizes of the same font? Perhaps you feel really large headings are required, in which case a more condensed font will be required. Maybe you want image captions to be small and unobtrusive, in which case a simple sans serif may be the way to go.

Test, test and test again

For body text in particular, create a specimen page where you can compare different fonts side-by-side and see how they work together. Fontdeck has created a tool which automatically creates this based on your font preferences (see bit.ly/JIBJVP)

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://kk.mercubuana.ac.id/ ululf01

      okay thanks

      I try first

    • Pingback: Check these 10 articles out! |

    • http://www.listofwebdesigners.com/ Joseph12

      You made some decent points there. I looked on the internet for the issue and found most individuals will go along with with your opinion. Thanks!

    • Pingback: Check these 10 articles out! | Ramacciotti Web Design

    • Pingback: Type News: ibid. | Uber Patrol - The Definitive Cool Guide

    • http://uwnfsv.skyrock.com/3167946352-Height-increasing-shoes-Top-Vegetation-for-Container-Gardens.html grow taller quotes

      It’s an amazing piece of writing designed for all the web viewers; they will get benefit from it I am sure.

    • http://vdpcuu.shutterfly.com/ Memory Foam Mattress Getting Used To

      memory foam mattress platform memory foam mattress discounters
      memory foam mattress pad king memory foam mattress xl twin memory foam mattress on
      floor memory foam mattress topper full