Tools / Web 2

5 Tools to Get Started with Web Fonts

typekit-rotated

Web typography used to be the Cinderella of design until about 2010. Not many websites dared to venture outside the safe area of Georgia and Verdana because the tools available for doing so forced too many major compromises. Times are changing, however, and with the global adoption of CSS @font-face, along came a burst in the tools supporting and diversity of web fonts. Here are some tools you can use to get more expressive with your web presence this year.

Typekit

Some folks call it “font-as-service” (notably Elliot Jay Stocks). Font rendering platform Typekit allows users to choose from a large web font library and embed non-standard fonts into their online documents (you can even import custom corporate fonts here). Typekit uses @font-face and also provides control over fallback fonts and styles for browsers that don’t yet have support for @font-face. Before opting for a font, you can check how fonts look in different weights and against different backgrounds, as well as simulate the behavior of fonts across browsers and operating systems.

Font Squirrel Generator

Have you ever wanted to spice up your work with some newly found fonts just to notice they were not web compliant? Font Squirrel Generator is a free service that helps you convert any font into versatile @font-face web fonts. You can upload TrueType (.ttf) or OpenType (.otf) fonts, plus Windows Postscript files (.pfb). The fonts rendered are compatible with any web browser that has the native ability to display @font-face web fonts. Font Squirrel also provides a range of pre-made web fonts for download.

Kernest

A delicate task for designers is combining several fonts on the same website in order to obtain an effect that is both readable and aesthetically pleasing. Kernest delivers harmonious assemblies of 3-5 fonts from a library of more than 1500. All fonts are optimized and licensed for any public use.

FontForge

FontForge is a font editor that lets you create your own fonts of almost any type, including all the majors: PostScript, TrueType, OpenType, SVG and Bitmap. You can also use this service to edit existing fonts and add some customizations, or to convert one format to another. FontForge is free, open source and works across all major desktop platforms.

Google Font Directory

Last but not least is the Google Font Directory, a free directory of fonts optimized for the web and ready to go — all served, for your convenience, from Google’s CDN. Just browse through the gallery and make your pick. Once you’ve decided on a font, the next step is to choose the styles and character sets. After that you are given a line of code to add to your website header and the CSS details, and you are set.

And before you go, have a look over the major trends in web typography for this year. While companies’ websites may be more conservative, the blogosphere is a source of endless experimentation with fonts. You will surely come upon the following trends:

  • Augmented sizes. For titles, a font of 60 pt or over is common these days. It helps create contrast with the main content and highlights the message using space.
  • Unique fonts used as images or flash.

unique-typeface

If you feel your creativity is restrained by the boundaries of ready-made fonts, you can always customize your own typeface. Most designers who create unique fonts opt for hand written ones.

  • A narrow combination of fonts for all purposes. The average practice is to use maximum 3 fonts to cover all elements of the website (titles, menus, contact form). The best choice is contrast, so pick a font with more obvious personality and several neutral ones.
  • Slab serif fonts.

slab-serif

Visibility is always a key concern and the tendency these days is to achieve it by using rectangular Egyptian typefaces such as Courier and Rockwell.

  • Clouds of mixed font weights, sizes and colors. The tag cloud in Blogger seems to have inspired a trend. All kinds of menus can be organized into clouds, where the qualities of the font are essential to the cleanliness of the overall appearance.

tag-cloud

Laura Moisei is a web design enthusiast and writer for 123ContactFrom. This online form and survey builder helps users create beautiful forms with custom CSS.

 

If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote