How Web Fonts Are Created

The Fontography Series is supported by join.me, the easiest way to have an online meeting. join.me lets you instantly share your screen with anyone, for free. Use it to collaborate, demo, show off — the possibilities are endless. Try it today.

Creating a font is no small undertaking. In fact, it is possibly one of the most complex design tasks out there. Careful attention must be paid to detail and consistency at all times and often hundreds, even thousands of characters (glyphs) must be created. While there are a variety of tools out there to manage and simplify this process, there’s no doubt that font design is a serious business.

But what happens when you want to use that font on the web?

Typography for the web has come a long way in recent years. Not so long ago, displaying a custom font on your webpage meant using an image, a Flash component like sIFR, or simply crossing your fingers and hoping that the user would have the font installed on his system. However, with all modern browsers now supporting the @font-face CSS property and JavaScript tools such as kerning.js (giving designers greater flexibility for displaying type), the days of limited typography on the web are quickly being relegated to the history books.

SEE ALSO: 7 Free Tools for Creating Your Own Fonts

Tools such as Font Squirrel’s @font-face Generator give you limited, but often serviceable automated conversion of user-supplied fonts. Font foundries are making more and more typefaces available for the web all the time, through services like Type Kit, Fonts.com, or their own retail solutions.

However, for those fontographers looking to build their own web fonts, or who want more refinement than automated converters offer, a more detailed approach may be in order. We’ve outlined a few important considerations for web fonts below.

Font Formats

For starters, to achieve as much browser compatibility as possible, you’ll need to convert your font to at least four formats; the original TrueType (or OpenType) format, the Embedded Open Type format, the Open Web Font Format and a Scalable Vector Graphic format.

Many font creation tools support these formats natively, or allow you to export to them, but if yours doesn’t, you can still use online conversion tools like the @font-face generator, and then open each format individually and clean it up as needed. While this can present its own set of problems, it does allow for some additional control over the look of the finished product.

Unicode Character Support

The web often creates completely different use cases than print, so you may need to extend your font’s glyph library in order to support more unicode characters. If you’re designing your font for general purpose use and widespread distribution, this can sometimes mean adding hundreds or even thousands of new glyphs.

Your Kerning Data Will be Lost

Any data your font contains with regard to character kerning will be lost (or ignored by the browser) once your font is converted to web formats. This means all those hours you spent carefully calculating many of your font metrics will no longer be of use. To compensate, you may have to modify existing glyphs to ensure proper scaling and spacing, and you may need to create or remove ligature glyphs.

Font Outlining

If you’ve created your font with PostScript outlines (which many fonts use), you may find that you need to convert your font outlines to TrueType, in order to achieve more precise and clean font rendering, particularly at smaller sizes. Since fonts are created in a vector format, converting those vectors from PostScript to TrueType may mean adding additional nodes to a glyph’s outline, or that some control data is lost. Many times, this may mean that your font requires a round of manual clean-up to remove superfluous nodes on your glyph, or to refine the outlines, as they may have changed subtly during conversion. Poor outline conversion can mean jagged fonts and larger file size.

Keep It Small

Since you’ll be serving up a number of font formats over sometimes-slow internet connections, you should do everything in your power to keep the font’s file size down to a respectable value. There are a number of ways you can optimize your font for a small footprint. For example, take the time to manually delete font metrics that don’t convert from the original TrueType (or OpenType) format, keep font outlines as simple and efficiently drawn as possible, use TrueType components to build accented characters from non-accented glyphs and try to keep meta data to a minimum.

These are just some of the many considerations to take into account when converting a font for wide-spread use on the web. However, as you can see, while many auto-conversion utilities and generators can simplify the process for specific use-cases, optimizing a font for full web support is no small task. Fortunately, many font foundries are now jumping on the bandwagon.

Series supported by join.me

The Fontography Series is supported by join.me, the easiest way to have an online meeting. Named one of Time magazine’s best websites of 2011, join.me lets you share your screen so you can instantly get together, collaborate, demo, show off, and more. Plus, it’s totally free. How will you use it? Check it out today.

More About: contributor, features, Fontography Series, mashable, text generators, typography, web fonts

For more Dev & Design coverage: