• The original typeface for Safari and Firefox 3.5
• A WOFF font for Firefox 3.6+
• An SVG font for Opera, Chrome, and iPhone
• An EOT font for Internet Explorer
• A sample HTML page
• A sample CSS stylesheet

The generator also features options to reduce file size by subsetting the font, cleanup font outlines, and auto-hint glyphs to improve rendering.

Sweet!

The trouble is that digital fonts have no provision for DRM, and pirating a copy of an embedded web font is a trivial exercise for anyone with the mind to do so. That’s obviously not a prospect type foundries are too keen on, and consequently no major foundry offers a licensing option for embedding their fonts in a web page. If you link to a commercial font from your CSS stylesheet the chances are that you are breaking your license agreement. Even the number of free fonts with an EULA that condones @font-face embedding is pitifully small.

That’s where Typekit comes into the picture. Typekit is a new font delivery service devised by Jeffrey Veen that promises to take the pain out of licensing fonts for web embedding. In their own words:

We’ve been working with foundries to develop a consistent web-only font linking license. We’ve built a technology platform that lets us to host both free and commercial fonts in a way that is incredibly fast, smoothes out differences in how browsers handle type, and offers the level of protection that type designers need without resorting to annoying and ineffective DRM.

Here’s how it works:

• Typekit strike up agreements with type foundries allowing fonts to be licensed for CSS linking.
• Web designers subscribe to Typekit, and pay a monthly fee to embed typefaces on their websites using an @font-face declaration.
• Would-be font pirates are deterred from stealing embedded Typekit’s fonts by security measures including: allowing only authorised domains to link to their fonts; source code obfuscation; and splitting fonts into multiple files.

Problem solved, right? Well, perhaps.

Typekit’s font-as-a-service model navigates a clever path through the legal minefield of web font licensing, but I am not convinced that it is a perfect solution. In particular there are two aspects of Typekit’s approach that strike me as problematic: the fact that their pricing model is based around renting fonts rather than owning them, and the need to rely on remote servers for the delivery of fonts.

Renting vs buying

Because Typekit is still in beta details of its pricing are sketchy, but it is clear that customers will pay a monthly or annual subscription fee to access Typekit’s font library. This pricing model is significantly different to the traditional one-off payment required to license fonts for offline applications.

Will website owners be prepared to continue paying for a font month after month, year after year? Over time Typekit subscription fees could conceivably exceed the cost of a standard font license, despite the fact that Typekit’s fonts cannot be reused in any other medium, or potentially even on another website. And if you ever cancel your Typekit subscription, the fonts vanish into thin air. This is a radical departure from the current font licensing model, which grants customers the right to perpetually reuse any fonts they purchase.

Purchasing fonts twice

In addition to the fact that font subscription models require designers to pay for fonts they can’t reuse, in most cases it will also be necessary to purchase a regular installable version of each typeface.

To produce mockups and work on a production version of a website, a web designer needs to work with the same typefaces that will feature in the final live site. Typekit only offer web embedding of fonts, so to install a typeface on their local computer a web designer would have to purchase a separate font from another vendor. It’s not going to cut the mustard to produce mockups set in Arial and tell the client to “imagine that the headings are actually Avant Garde”!

When you also consider that many websites have multiple domain aliases (mysite.com, mysite.com.au, etc), and Typekit uses a per-domain pricing model, it is clear that the potential exists to pay many times over for the same font.

Network reliability

Another potential problem with Typekit is network downtime.

I can’t imagine many designers would trust their CSS files to a remote delivery network, and I think we need to accord fonts a similar importance. If major players like Google and Amazon suffer network interruption from time to time, then it is reasonable to assume that Typekit will too.

Admittedly, occasional network outages may not be a deal breaker, what happens if Typekit goes out of business, or a foundry retracts the right for Typekit to distribute their fonts? In either of these scenarios it seems probable that Typekit subscribers would have the fonts rudely stripped from their websites. In a best case scenario subscribers could turn to a Typekit competitor such as Fontdeck to revive their font links, but what if no competitor offered the same typefaces? The design of countless websites could be irrevocably ruined due to their dependence on remotely hosted fonts.

The future of font embedding

Despite the reservations I have outlined above, I have to agree with Andy Clarke when he predicts that Typekit will change everything.

By coming up with a practical answer to the problem of @font-face licensing, Typekit has paved the way for alternative font embedding approaches. Clearleft and OmniTI have joined forces to create Fontdeck, and at least one foundry, Typotheque, has a web font service under development.

Soon there will be a number of services vying with Typekit to win the hearts (and wallets) of web designers, however I suspect the deciding vote will ultimately be cast by large font foundries such as Linotype and Adobe.

The type industry’s major players will need to decide where they stand on the issue of font embedding, or they risk being left behind while smaller type foundries reap the benefits of web font licensing. If they follow the lead of their counterparts in the music industry it might be years before our @font-face woes are sorted out. On the other hand they might choose to take the bull the horns and launch their own font hosting services to compete with Typekit.

Whatever the response of large type foundries and vendors turns out to be, it will very likely determine the future of typography on the web. Hopefully we end up with a solution that is fair to web designers, website owners and font foundries alike.

Further reading

Introducing Typekit

Jeffrey Veen announces the arrival of Typekit, and explains the basics of how the service will work.

Ubiquitous web font embedding just got a step closer

John Allsopp argues the case for more liberal font licensing. Recommended reading.

First impressions of Typekit

A step-by-step tour of the Typekit beta.

On Typekit

David Yeiser shares some of my reservations about Typekit.

The Font-as-Service

Jay Elliot Stocks gives an overview of Typekit and its competitors.

Testing Typotheque @font-face embedding

Andy Clarke takes Typotheque’s new web license for a spin. It is interesting to note that Typotheque requires a one-off payment rather than a subscription like Typekit.

Hinting

The reason Arial looks good at small point sizes is because Microsoft pay a lot of attention to the hinting of their web fonts so that they render well on screen.

To quote Wikipedia’s article on Font Hinting:

Font hinting is the use of mathematical instructions to adjust the display of an outline font so that it lines up with a rasterized grid. At small screen sizes, with or without antialiasing, hinting is critical for producing a clear, legible text for human readers.

Fonts that have not undergone a rigorous hinting process tend to look fuzzy or poorly spaced when forced to align to a computer monitor’s pixel grid. Helvetica is a case in point: it renders very well on Mac systems even at small point sizes, but on Windows systems it looks, frankly, crappy.

Arial vs Helvetica

To demonstrate, here is a comparison between Arial and Helvetica on a Windows system. You will notice that Arial’s anti-aliasing is much crisper than Helvetica’s at larger sizes, and that Helvetica’s kerning falls to pieces at sizes smaller than 12px. These defects are especially evident when viewing an entire webpage set in Helvetica.

I performed the test above in Firefox 3.5 and Internet Explorer 8 on Windows Vista, using both Adobe’s OpenType Helvetica LT Std and a Linotype PostScript version of Helvetica, with identical results.

Arial on the Mac

On a Mac the story is quite different. Arial and Helvetica look virtually identical (as they should), and both remain perfectly legible at 8px. This might be because Apple’s font rendering engine is superior to Microsoft’s ClearType, or perhaps the version of Helvetica that ships with Mac OSX has been hinted to retain legibility at low resolutions.

Whatever the case, the fact remains that Arial looks better on Windows than Helvetica does. Does this make Arial a superior font than Helvetica? Not by a long shot. But it does serve to illustrate Arial’s suitability for the Windows environment, which still accounts for over 90% of all web traffic.

Does Arial deserve reconsideration?

So what do you think – does Arial’s superior hinting on Windows systems elevate it beyond the status of a substandard Helvetica clone, or is it beyond redemption?

A note about Win/Safari

If you use Safari on a PC you may have noticed that Arial renders differently than than in the screenshot I provided. In fact, it renders exactly as it would on a Mac. That is because Safari offers the option to use Apple’s font rendering engine rather than Microsoft’s ClearType. Sadly I couldn’t test whether Helvetica’s rendering was similarly improved in Win/Safari, because Safari refuses to recognise any of my non-system fonts. If anyone can shed light on this issue, please leave a comment below. I’m very curious to know if Helvetica’s substandard appearance on Windows can be attributed to a deficiency in ClearType rather than a deficiency in the font (I suspect the former).

Here is a recreation of the original design – I have changed the text copy and the colors for the purpose of this article, but kept the intent of the content the same:

See if you can guess which bits of text are the links. My original assumption was that everything blue is a link. After waving my mouse around like a hyperactive monkey I discovered my assumption to be wrong. In fact these are the links:

Dang, why didn’t I guess that to begin with…!

I’m not opposed to the idea of headings and links sharing the same color – it can help to create unity between the various design elements on the page – however it’s clear that some sort of visual differentiation needs to be made between links, headings, and other text on the page. A quick rethink of the text styling might result in something like this:

Headings now assume more prominence, links are easily distinguishable from other text on the page, and the words that require added emphasis bear no resemblance to links. For the average user, text styled in this manner ought to be easy to navigate and absorb.

So next time you’re styling a page, take a moment to consider your user, and make the links look like links!

They say pictures speak loader that words. If that’s the case then typeworkshop.com must speak volumes, because its practical lessons in type design utilize both.

Originating from type workshops given by dutch type foundry Underware, the website offers excellent insights into the finer points of typeface design and typographic problem solving. Each workshop is documented by giving background information on the project, the participants and the assignment, and is illustrated with photographs of the typographic work produced by students.

typeworkshop.com also provides an excellent series of practical sketches illustrating type basics such as ligatures, kerning, spacing and readability. Each sketch is accompanied by a few paragraphs explaining the principles behind the lesson. The sketches are gorgeous, and provide an accessible way to introduce readers to the finer points of type design.

For anyone with even a passing interest in type design and typography a visit to typeworkshop.com is an absolute must.

A few days later the “visual elements” addition had been removed after a vote by wikipedians. The objection, I suppose, is that no set of visual criteria can accurately define something as being characteristic of Web 2.0 – if Web 2.0 can be understood as an approach to generating and distributing content, then it needn’t be tied to a particular visual style.

Nevertheless, it’s true that many Web 2.0 sites do share a distinctive aesthetic. Wikipedia’s editors may not think it’s a worthy part of the Web 2.0 discussion, but I say bring it on! Let’s take a look at the some of the communication issues facing a Web 2.0 site, and see how the “Web 2.0 look” can help to solve them.

Trust me, I’m Web 2.0

Integral to Web 2.0 is harnessing the input of website visitors. Users can generate content for a web service, promote it in a “viral” peer-to-peer fashion, and improve it’s data quality through their opinions and preferences.

But to convince a visitor to contribute their time – and data – to a web application, you need to get them to trust you first. Most Web 2.0 sites come across as friendly, approachable and small-scale, using subtle design decisions to gain our trust.

Green is the new grey

Bright, cheerful colors dominate Web 2.0 sites. Green is the unofficial color of web 2.0, but saturated blues, oranges and pinks are also favourites. Bold primary colors suggest a playful, fun attitude and also help to draw attention to important page elements.

Rounded everything

New CSS techniques for achieving rounded corners have helped make this style hot again. The friendliness of rounded corners is in keeping with the comfortable, informal tone of many web 2.0 sites.

In a great FontShop article analysing the logos of Web 2.0, it was clear that rounded typefaces are all the rage. This smooth approach to type lends a modern playfulness to a company’s visual identity.

Free, as in beer

If you’ve got to convince visitors to sign up for your killer app, giving away FREE accounts surely can’t hurt. Most Web 2.0 sites devote prime real estate to the message that they offer a free service. If that message can appear inside of the ubiquitous ’starburst’, all the better.

No (stock) photos please

You won’t find any stock photography of smiling support staff on a Web 2.0 site – that’s a tactic favored by small companies trying to mimic large corporations. Simple icons and screenshots are the order of the day when it comes to imagery on Web 2.0 sites. 3D and beveled icons can lend elegance and polish to a page design that is otherwise fairly stark.

Keep it simple stupid

Most Web 2.0 applications add an additional technological or organizational layer to the user’s web experience. Be it managing links with del.icio.us, sharing photos with flickr, or organizing tasks with Backpack, we have to familiarize ourselves with a new technological process and devote time to managing our content. A good Web 2.0 app ought to be lightweight and easy for users to grasp, and clever visual design and copywriting can help remove barriers to entry.

Smart use of layout, color, type and copy can go a long way towards easing the pain.

Big is beautiful

As far as Web 2.0 is concerned, bigger is definitely better. Bigger text, that is. Large text is easy on the eye, and coupled with snappy copywriting makes information easy to absorb. And now that accessibility is cool, it’s possible to be a hotshot web designer and use enormous type. Admittedly this craze for giant text strays too far into Jacob Nielsen territory for my taste – when a web page’s body text is set at larger than 13 point it looks like a “learning to read” book to me!

Breathing space

The layout of Web 2.0 sites might be described as minimal. With a focus on legibility and ease of use, good use is made of white space. White space allows important information to stand apart, provides rest for the eye, and imparts a sense of calm and order. Generous leading also makes text copy easier for the eye to follow. Some Web 2.0 layouts are so minimal that they verge on boring, but designed well, an uncluttered page can be incredibly tasteful.

Clever copy

Friendly, informal copywriting allows a more personal relationship with website visitors. A List Apart singled out Flickr and Photojojo for an honorable mention in this department, and it’s a lesson that many Web 2.0 sites put into practice. WebTango isn’t just free, it’s “free of additives, cholesterol, ozone-depleting CFCs, and most importantly, free to use”. Tioti doesn’t just have tagging and RSS, it has “tagging and RSS up the yazoo”. FAQQLY founder David Liu isn’t a isn’t a faceless entity, Dave is “your first friend once you register”. And the toolbar on eSnips isn’t just flexible, it’s “a toolbar you can use in a bunch of cool ways”. You get the idea.

Odds and ends

There are a couple of visual tendencies amongst Web 2.0 sites that don’t seem to answer a particular design problem, but deserve a mention nonetheless. The ‘wet table’ look, ’starbursts’ (also known as ‘flashes’ or ‘violators’), and ‘glass’ buttons, provide a lot of Web 2.0’s eye candy. Apple’s marketing department sure has a lot to answer for.

Conclusion

So that’s my quick tour of the visual design of Web 2.0. Who knows, the “Web 2.0 look” may be out of vogue a year from now, but I think it offers good lessons about effective design for the web that deserve to have a much longer lifespan.

Further reading

What is Web 2.0?

Straight from the horse’s mouth.

The Logos of Web 2.0

Examines trends in Web 2.0 logo design, and identifies the most popular typefaces.

Current style in web design

The inspiration for this article. Sums up the current trends in website design.

The Web 2.0 Awards

Discover a gazillion Web 2.0 sites you never knew existed.

Translations

This article has translated by readers into the the following languages:

Chinese
Russian

But before we get stuck into it, you may be wondering “what’s so bad about pixel sizing?”

When it comes to modern web browsers like Firefox – nothing. Firefox will happily bump up the size of your 10px text when a visitor to your site increases their browser’s default text size. But Internet Explorer is another story – even IE7 will not allow resizing of text that has been sized using pixel measurements. And sooner or later one of your visitors will complain to you about it. With the rollout of high resolution LCD monitors, it is increasingly important to give your visitors the ability to increase the size of text size on a web page to suit their viewing preferences.

There is a simple method that gives you the best of both worlds – pixel level precision, coupled with user control of font size.

To start with you need to add the following to your CSS stylesheet:

html {
font-size: 100%;
}

This rule is a sort of “be nice to IE” rule that stops older versions of Internet Explorer from going wacko on us.

Next, add the following to your CSS stylesheet:

body {
font-size: 75%;
}

What we’ve done is specify that the font size for all elements on our page should be 75%, but “75% of what?”, I hear you ask. The default font size for all modern web browsers is 16px, when text is set to ‘medium’ size. That’s a bit chunky for my tastes, and I personally find 12px a little more pleasant to read. To calculate 12px as a percentage of 16px we can use the equation:

(16/12)*100 = 75%

Now whenever you specify your font-size in ems, 1em will be equivalent to 12px. Of course you can make 1em equivalent to whatever pixel equivalent you like:

font-size: 100%; /* equivalent to 16px */
font-size: 87.5%; /* equivalent to 14px */
font-size: 75%; /* equivalent to 12px */
font-size: 69%; /* equivalent to 11px */
font-size: 62.5%; /* equivalent to 10px */

Assuming that we’ve set font size for our document to 76% (12px), it’s now a simple task to use ems to calculate desired text sizes, using the calculation:

target px size / 12px = target ems

• 0.8em = 10px;
• 0.92em = 11px;
• 1em = 12px;
• 1.2em = 14px;
• 1.5em = 18px;
• 2em = 24px;

For instance, to specify all text in a #footer element to be 10px, just add the following rule to your CSS stylesheet:

#footer {
font-size: 0.8em;
}

With this technique under your belt it’s fairly painless to let go of pixel measurements and embrace ems as a unit of type measurement. The only thing to keep in mind is that you always need to test how your layout is going to look if the user resizes the text. While most people leave their browsers font size at it’s default setting, users with poor eyesight may opt for a larger setting.

External resources

Clagnut has a detailed article about this method of font sizing.