Get started with web fonts: 15 expert tips

Thousands of web fonts are available to use on your websites, bringing the aesthetics of print design to the web. Here's how to make best use of them.

Over the last few years, the possibilities for using type on the web have expanded enormously. In the bad old days of the web, designers were restricted to a few 'web safe' fonts, which meant everything looked pretty much the same, or using images to replace the type - a clunky solution that caused problems for the reader and technical problems in the browser. Nowadays, though, you can access an astonishing array of professional typefaces for use on your sites, bringing the aesthetics of print design to the web.
Since around 2010, widespread support of @font-face in all the major browsers, plus a new web open font format, WOFF, has led to a technical revolution and the rise of a number of web font hosting services. These companies allow users to pay a subscription to host an enormous range of web fonts on their website. Popular services include Typekit, Fontdeck, WebINK and Fonts.com.
Tim Brown is the type manager at Typekit. Here are his tips for getting started with web fonts:

1. Be selective

Typekit fonts rock out in these digital posters from Voltage Fashion. Left: Hellenic Wide, League Gothic and Bello Caps; right: Vinyl

Pick a typeface that is appropriate for your content (read it, and know your font through and through); appropriate for its context (use text faces for body copy, and so on); and web-ready (both properly licensed, and optimised for the medium).

2. Put type first

Once free from traditional 'web safe' fonts like Verdana and Georgia, make design choices based on the typefaces you use. Building a composition outward from the type produces very different results to swapping fonts into an existing design. The principles of 'Typography First' are explored in this article by type guru Elliot Jay Stocks.

3. Take your time

The web may move at lightning speed, but quality typesetting requires lots of patience. If you don't stick up for the time it takes to do a job with precision and diligence, who will?

4. Know what's out there

At Typekit, we do several things to help point out typefaces that are worth a look. For example, Jason Santa Maria spearheads a column called About Face, in which we profile specific fonts. While Lists are used for finding alternatives to common fonts, and grouping web fonts in ways metadata can't.

5. Look for specific suggestions

Part of the Elementar family, created exclusively for electronic displays

Typekit also recommends web fonts for Paragraph or Heading use within its font-browsing interface. When you've found fonts you like, you can mark them as favourites, or add them to kits and get right to work on your website.
With around 100,000 fonts available, 99.9% of them are created for high-resolution print outputs. So, what now for web designers? Peter Bil'ak, founder of Typotheque adds five more tips to help you create the best web font designs for your online needs:

6. Be mindful of file size

Typotheque fonts can support as many as 200 languages, which results in fairly large files. A single style of Fedra Sans can be as large as 400K. While this may not appear large, serve it thousands of millions of times and it starts making sense to optimise it.
One approach is to strip out unnecessary characters from the web font version. Most web browsers can access only a small fraction of those characters anyway.

7. Stay across browser updates

Bear in mind that browsers are constantly changing. For instance, the latest version of Firefox can now display advanced OpenType substitutions such as small caps, ligatures, swashes and different numerals. This means some options that are usually stripped out can now be included if required.

8. Design for the medium

The Lost World’s Fairs site was praised for the personality afforded by its use of web fonts

Consider what kinds of web fonts will function best on screen. Sturdy sans serifs usually work well. But they also need to have proportions that are suited for reading in small sizes, which generally means having larger x-height and omitting finer details that can't render well on screen.

9. Explore new scripts

There are over 400 languages in India. While in the West we have plenty of fonts for the Latin script, I've encountered writing scripts that have limited or no digital fonts at all.
My company, Indian Type Foundry, is one of the first to do so, and the country is becoming increasingly design-conscious - so the opportunities there will grow.

10. Test, test and test again

As a designer using web fonts, be sure to test their appearance across different platforms and different browsers. It sounds an obvious thing to do. But it's all too common to design a page on a Mac when most readers use Windows and will see something quite different from how it was originally designed.

• These tips were originally published in Computer Arts Collection: Typography. Now here are five more tips from us...

11. Try before you buy

New service Skyfonts let you trial more than 8,000 fonts, and rent rather than buying them

Worried about committing to a web font you're not sure will work on your site? Font specialists Monotype has recently launched a new service that lets you trial any of 8,000 fonts for free. With Skyfonts, you can also rent fonts for as long as they’re needed.

12. Consider free web fonts

In the world of web fonts, as in most creative arenas, you usually get what you pay for. Yet if you search hard enough amongst the free web fonts offered online, you'll find some diamonds in the rough. That takes a lot of time and effort, though, so we've put together a list of the best free web fonts to save you the trouble - check it out!

13. Don't go overboard

Just because thousands of web fonts are available to you, don't use them just for the sake of it. Always remember you're designing for readers, not to impress other designers. If a tried and tested combination of two traditional web-safe fonts is what works best for the reader, then stick with that.

14. Brush up on the basics

Learning about the fundamental rules of typography for print remains an essential grounding for using web fonts. Check out our article What is Typography? to get to grips with the basics.

15. Further reading

Anyone serious about developing their understanding of typography - for both print and web - should read at least one of these classic books:

• Inside Paragraphs: Typographic Fundamentals by Cyrus Highsmith.
• Stop Stealing Sheep & Find Out How Type Works by Erik Spiekermann and E.M. Ginger
• The Elements of Typographic Style by Robert Bringhurst

link source:http://www.creativebloq.com/web-design-tips/web-fonts-tips-1233034