Skip navigation
Help

TrueType

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.

  

The Web font revolution that started around two years ago has brought up a topic that many of us had merrily ignored for many years: font rendering. The newfound freedom Web fonts are giving us brings along new challenges. Choosing and using a font is not merely a stylistic issue, and it’s worth having a look at how the technology comes into play.

While we cannot change which browser and OS our website visitors use, understanding why fonts look the way they do helps us make websites that are successful and comfortable to read in every scenario. Until recently, there were only a small handful of “Web safe” fonts we could use. While offering little variety (or means of expression), these fonts were very well-crafted and specifically adjusted—or even developed—for the screen, so there was little to worry about in terms of display quality.

Now that we have a great choice of fonts that can be used on websites, it becomes clear that the translation of a design into pixels is not something that happens naturally or consistently. OS makers apply different strategies to render how typefaces are displayed, and these have evolved greatly over time (and still continue to do so). As we now look closer at fonts on screen more than ever before, we realize that the rendering of these glyphs can differ significantly between systems and font formats. What’s more, it has become clear that even well-designed fonts may not look right on Windows if they are missing one crucial added ingredient: hinting.

This article presents the mechanisms of type rendering, how they were developed, and how and why they are applied by the various operating systems and browsers—so that when it comes time to choose a font for your next project, you know what to look out for to ensure the quality of the typography is consistently high.

Rendering Strategies

Ideal shape, black-and-white and grayscale rendering
Ideal shape, black-and-white and grayscale rendering

Rasterization

In digital type, characters are designed as abstract drawings. When a text is displayed on screen, this very precise, ideal shape needs to be expressed with a more or less coarse grid of pixels. As screens turned from mere preview devices for printing output into the actual medium we read in, more and more sophisticated rendering methods were developed in order to make type on the screen easy and pleasant to read.

Black And White Rendering

The earliest method of expressing letter shapes was using black and white pixels, sometimes referred to as bi-level rendering. Printers are still based on this principle, and thanks to their high-resolution, the result is a very good representation of the design. On screen, however, the small number of available pixels does not transport the subtleties of the drawn shapes very well. And although we might not be able to see the individual pixels, the steps found in round contours are noticeable.

Grayscale Rendering

In the mid-1990′s, operating systems started employing a very smart idea. Although screens have a rather low resolution, they can control the brightness of each pixel. This allows more information to be brought into the rasterized image.

In grayscale rendering, a pixel that is on the border of the original shape becomes gray, its brightness depending on how much it is covered by the ideal black shape. As a result, the contour appears much smoother, and design details are represented. The type on screen is no longer merely about being legible—it has its own character and style.

This principle—also called antialiasing—is the same that is used when photos are resampled to a lower resolution. Our eyes and brain interpret the information contained within the gray pixels and translate it back into sharp contours, so what we perceive is fairly close to the original shape. A similar effect is at work when a relatively coarse newspaper image that can appear nicely shaded if we hold it far enough away (or similarly, in the art of Chuck Close). Recently, Gary Andrew Clarke took this to the extremes with his “Art Remixed” Series.

Subpixel Rendering

Apparently colored pixels increase the resolution
Apparently colored pixels increase the resolution.

The third generation of rendering technology is characterized by apparently colored pixels. If we take a screenshot and the edges appear red and blue when enlarged, then we know that we are looking at subpixel rendering.

On LCD screens, the red, green and blue subpixels that control the color and brightness of the pixel are located side-by-side. Since they are so small, we don’t perceive them as individual colored dots. Having a closer look at the “red” pixel marked by the white dot reveals the strategy: all subpixels are switched on or off individually, and if the rightmost subpixel of the “whitespace” happens to be a red one, then the corresponding full pixel is technically red.

Subpixel rendering on an LCD screen
Subpixel rendering on an LCD screen.

The benefits of this technique become clear if we desaturate the image. Compared to plain grayscale rendering, the resolution has tripled in horizontal direction. The position and the weight of vertical stems can be reflected even more precisely, and the text becomes crisper.

Current Implementations

For the display of text, almost all browsers rely on system rasterizers. When looking at Web font rendering, the key distinction we have to make is the operating system. However, there are differences between the browsers in terms of the support given to kerning and ligatures, as well as the application of underline position and thickness, so we cannot expect perfectly identical rendering in all browsers (even on one platform). What’s more, on Windows, the browser can have the font rendered by either of the system technologies—GDI or DirectWrite.

Before we look at these in detail, lets first get an overview of where each one is to be used:

Rendering modes used by Windows browsers
Rendering modes used by Windows browsers.

Windows

On Windows, the font format has a significant impact on the rendering. The crucial difference is between PostScript-based and TrueType-based fonts, and not the way these are brought into the browser—JavaScript vs. pure CSS, raw fonts vs. “real” Web fonts, etc. We will see identical rendering as long as the underlying font is the same.

File formats can give us a clue as to what underlying rendering technology is being used, although it’s best that one doesn’t completely rely on the naming conventions. For example, EOT and .ttf files will always contain TrueType, whereas .otf fonts are typically PostScript-based. But then there’s the wrapped format WOFF, which can contain either “flavor” of font format. So we don’t know which one it contains (and therefore, what kind of rendering may be used), just by looking at the file name. Unless you’re using EOT or .ttf files, and can be sure it’s a TrueType, more investigation when purchasing fonts is always recommended.

TrueType and PostScript fonts differ in the mathematics used to describe curves—something that rasterizers don’t care about too much—it only makes a difference for the type designer when editing the glyph shapes. What is more relevant is the different approach to hinting. PostScript fonts only contain abstract information on the location of various elements of each letter (and rely on a smart rasterizer to make sense of this), whereas TrueType fonts include very specific low-level instructions that directly control the rendering process. Curiously, however, the effective differences in rendering are not due to these differences in concept, but rather stem from Microsoft initially deciding to apply their new rendering engine only to TrueType fonts.

Windows: TrueType Fonts

TrueType font rendering with Windows grayscale
TrueType font rendering with Windows grayscale
TrueType font rendering with Windows grayscale.

On Windows XP, text is rendered as grayscale by many browsers. Although not as crisp as the subpixel rendering used by Mac OS, the letters are nicely smoothed and look great in large sizes.

TrueType font rendering with Windows GDI ClearType
TrueType font rendering with Windows GDI ClearType
TrueType font rendering with Windows GDI ClearType.

ClearType is Microsoft’s take on subpixel rendering. It was first made available for GDI, the classic Windows API. Although available in Windows XP, it is not used by all browsers. In Windows 7 and Vista, ClearType is the default, which makes it the most widely used rendering technology (if we were to consider all internet users). However, it is important to note that this applies only to TrueType-based Web fonts—GDI-ClearType is not applied to PostScript-based fonts.

One curious property of this rendering technology is that along with adopting the advantages of subpixel rendering in horizontal direction, Microsoft gave up smoothing in vertical direction entirely. So ClearType is effectively a hybrid of subpixel and black-and-white rendering. This results in steps within the contour, which is particularly noticeable in large sizes. These jaggies at the top and bottom of the curves are unpleasant, but unavoidable—even the best hinting cannot make them disappear.

For type in large sizes, ClearType is a step backwards in rendering quality. The gains in horizontal precision are not significant, while the rough contours spoil the overall result.

TrueType font rendering with DirectWrite
TrueType font rendering with DirectWrite
TrueType font rendering with DirectWrite.

The future is bright, at least in terms of Windows font rendering. In DirectWrite (the successor of GDI), Microsoft added vertical smoothing to ClearType. This new rendering mode (so far used by Internet Explorer 9), gives us smooth and precise rendering in all sizes. The main difference to Mac OS that remains is that it still tries to align contours to full pixel heights, which leads to even better rendering given that the font is well-hinted. What’s more, DirectWrite allows for subpixel positioning, which gives the characters exactly the spacing that they have been designed with, improving the overall rhythm and evenness of the texture.

Windows: PostScript Fonts

PostScript font rendering with GDI grayscale
PostScript font rendering with GDI grayscale
PostScript font rendering with GDI grayscale.

In GDI-based browsers, PostScript-based Web fonts are displayed in grayscale. Unlike the prevalent GDI-ClearType, this gives smooth contours. And unlike TrueType hints, PostScript hinting is easier to create, even automatically.

PostScript font rendering with DirectWrite
PostScript font rendering with DirectWrite
PostScript font rendering with DirectWrite.

DirectWrite not only gives smoother outlines, it also applies subpixel rendering to PostScript fonts. Unlike TrueType rendering, however, it allows for more gray pixels in order to reflect stroke weights more realistically. That makes it well-balanced, and similar to Mac OS rendering.

At some point in the future—browser makers and users will not switch as quickly as we wish—DirectWrite will succeed the older Windows rendering methods, and we will indeed be spoilt for choice between TrueType- and PostScript-based Web fonts.

Windows: Unhinted Fonts

Unhinted font rendered with grayscale
Unhinted font rendered with grayscale
Unhinted font rendered with grayscale.

In the old Windows grayscale mode, completely unhinted fonts look surprisingly good. Since the font does not “align itself” to full pixels via hinting, and the rasterizer does not enforce this either, we have a rendering that is similar to that of iOS. Unfortunately, unhinted fonts are currently not an option, as the next example shows:

Unhinted TrueType font in GDI-ClearType rendering
Unhinted TrueType font in GDI-ClearType rendering
Unhinted TrueType font in GDI-ClearType rendering.

As noted in many discussions on Web font rendering quality, GDI-ClearType is extremely dependent on good hinting. Horizontal strokes have to be precisely defined by means of hinting, otherwise they might be rendered in an inappropriate thickness. Even in larger sizes, hinting is crucial. Unhinted fonts will show “warts” sticking out where contours are not correctly aligned to the pixel grid, like in the example above.

Unhinted font rendered with DirectWrite
Unhinted font rendered with DirectWrite
Unhinted font rendered with DirectWrite.

In DirectWrite, unhinted PostScript and TrueType-based Web fonts show virtually the same rendering. Text fonts of either flavor will still need good hinting in order to keep the strokes crisp and consistent. Display fonts may even get away with sloppy or no hinting, since this does not show much in large sizes.

Mac OS X

Font rendering in Mac OS X
Font rendering in Mac OS X
Font rendering in Mac OS X.

On Mac OS, all browsers use the Quartz rendering engine. TrueType and PostScript fonts are rendered in exactly the same way, since hinting—the biggest conceptual difference between the two formats—is ignored. The subpixel rendering on Mac OS is very robust, so this platform is typically the one we need to worry about the least. The rasterizer doesn’t try to understand the strokes and features that make up a font, as everything is represented by more or less dark pixels. Since the letter shapes are not interpreted, they cannot be misinterpreted. Quartz rendering is reliable because it doesn’t try to be smart. As a side note, Apple does seem to apply some subtle automagic to enhance the rendering, but this is entirely undocumented and beyond our control.

In some cases, however, this leads to less-than-ideal results. In the above example, the large size “T” has a fuzzy gray row of pixels on top because the theoretical height is not a full pixel value, and Mac OS does not force its alignment. Unfortunately this cannot be controlled by the font maker. However, the blurriness occurs only in certain type sizes. So typically, choosing a slightly different font size fixes the problem. With a bit of trial-and-error, one can find a type size that looks comfortable and crisp.

Another difficult-to-control phenomenon is that on the Mac, type tends to be rendered too heavy. This difference is most noticeable in text sizes, where the same font can look a bit “sticky” on Mac OS while appearing almost underweight on Windows.

iOS

Font rendering in iOS
Font rendering in iOS
Font rendering in iOS.

The rendering on iOS follows the same principles as on Mac OS—the main difference is that it currently does not employ subpixel rendering. The reason might be that when the device is rotated, the system would have to re-think and update the rendering because the subpixels are physically oriented in a different way, and the makers wanted to minimize CPU use.

Conclusions

Website visitors use a great variety of systems and browsers. Some are not up-to-date, and sometimes it’s not even the user’s fault, but rather a company’s policy to stick with a certain setup. My personal opinion is that we should try and give them the best rendering we can, instead of blaming OS makers, or demanding users to switch to better systems.

On Mac OS and iOS, we hardly have any control over the rendering, which is acceptable (since it’s generally very reliable). One problem is that fonts generally render too heavy. Maybe some day, Web font services can improve the consistency by serving slightly heavier or lighter fonts depending on the platform.

On Windows, hinting matters—especially for TrueType-based fonts (the only Web fonts Internet Explorer 6–8 will accept). Apart from that, one significant control we have over the rendering is the choice between TrueType and PostScript. Except for very well-hinted fonts in smaller sizes, the latter is equal or superior in rendering, and easier to produce. Even though DirectWrite is making Windows rendering more pleasant, it will not remove the necessity to provide well-hinted fonts.

Practical Application: Improving Display Font Rendering

Some Web font providers (such as Typekit or Just Another Foundry), have started serving display fonts in PostScript-based formats.

JAF Domus Titling Web rendered with GDI ClearType
JAF Domus Titling Web rendered with DirectWrite
JAF Domus Titling Web rendered with Windows grayscale
JAF Domus Titling Web in Mac OS X
JAF Domus Titling in different rendering environments.

While the GDI ClearType jaggies are unavoidable for IE 6–8, all other scenarios produce nice, smooth results. This also means that we will still need fonts that have decent TT-hinting—the browser share of IE6–8 is still too big to deliver fonts that don’t at least render in a clean fashion.

Bello by Underware on Typekit
Bello—by Underware on Typekit—served as PostScript-based Web fonts (right), which gives smoother rendering than TrueType (left).

Typekit has also started to implement a hybrid strategy by serving display fonts as PostScript in order to trigger smoother rendering in Windows GDI. This requires some decisions to be made on the basis of visual judgement.

“How do you define a display font?”, you may ask, and it is indeed difficult to draw the line. Some of the foundries offer high-quality, manually hinted TrueType fonts that look great in text sizes (and it would be a pity to lose this sophistication by converting them to PostScript). Some text fonts may well be used in very large sizes. So ideally, we would have to offer them in two different formats. However, increased complexity of the UI (as well as back-end handling) have so far kept us from doing this.

Future Developments

More and more type designers are becoming aware of the technical issues that arise when fonts are used on the Web, particularly TrueType hinting. As the Web font business grows, they are willing to put some effort into screen-optimizing their fonts. In the near future, we will hopefully see a number of well-crafted new releases (or at least updates to existing fonts).

With increasing display resolutions— and more importantly, improving rasterizers—we will slowly have to worry less about the technical aspects of font rendering. GDI-based browsers will certainly be the boat anchor in this respect, so we won’t be able to use TrueType fonts that aren’t carefully hinted for yet another few years. Once this portion of Web users has become small enough, the process of TrueType hinting (which is time-consuming and requires considerable technical skills), becomes less crucial. While most Web fonts currently on the market are TrueType-flavored, I am expecting that the industry will largely switch to PostScript, which is the native format nearly all type designers work in (the fonts that are easier to produce).

Other Resources

(jvb) (ac) (il)

Note: A big thank you to our fabulous Typography editor, Alexander Charchar, for preparing this article.

© Tim Ahrens for Smashing Magazine, 2012.

0
Your rating: None

  

Every now and then, we look around, select fresh free high-quality fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually time you should be investing in your projects. We search for them and find them so that you don’t have to.

In this selection, we’re pleased to present Homestead, Bree Serif, Levanderia, Valencia, Nomed Font, Carton and other quality fonts. Please note that while most fonts are available for commercial projects, some are for personal use only and are clearly marked as such in their descriptions. Also, please read the licensing agreements carefully before using the fonts; they may change from time to time.

Free Fonts

Homestead
Homestead is a very distinctive Slab Serif typeface that leaves a lasting impression with its geometric forms and a modern, progressive look. The family is available in 6 weights: Regular, Inline Display, One, Two and Three. Released by the Lost Type foundry with the “name-your-price” pricing scheme. Homestead can be used freely for any personal or commercial use.

Homestead

Homestead

Bree Serif Regular
This typeface is the serif cousin of the playful, charming and versatile type family Bree which was designed by Veronika Burian and José Scaglione back in 2008. Actually, Bree is also the typeface used in the Smashing Cartoons. An italic font weight of Bree Serif should be available very soon. Released under the liberal OFL license (via Typografie.info).

Bree Serif

Lavanderia
Lavanderia is a script font based on lettering found on Laundromat windows of San Francisco’s Mission District. It features numerous OpenType features such as swashes, titling alternates, figures, stylistic alternates, ligatures. It is available in three weights, with Uppercase, Lowercase, Numerals and Punctuation sets. Designed by the talented type designer James T. Edmondson and released by the Lost Type Co-Op foundry. Free for personal and commercial use.

Lavanderia

Lavanderia

RBNo2
This new gothic sans serif font was inspired by the late 19th century industrial fonts that contained german roots regarding straightness and geometry. Combined with other sans serifs, slab serifs and serif fonts, it catches the eye when used in headlines and short copy texts. Alternate versions turn the font into a perfect partner for modern, technical and contemporary impressions as well as high-quality, luxury and timeless environments. Free to use in commercial and non-commercial projects. Designed by Rene Bieder.

RBNo2

RBNo2

RBNo2

Cassannet
Cassannet is a geometrical art deco typeface available in Regular, Bold and Outline weights, based on lettering seen on Cassandre posters. This typeface contains ligatures, capitals, numbers, small capitals and also titling alternates. You can pay a random amount of money or alternatively send out a tweet or a Facebook post to download the fonts for free.

Cassannet

Valencia
Valencia is a condensed, art-deco inspired typeface that includes five weights, ranging from hairline to black, with matching obliques for each weight. The typeface has a nice corporate vintage look which makes it a great fit for large headlines and prints as well as any collateral or stationery. Valencia’s distinctive appearance stems from its low horizontal crossbars and its full-circle curves. Released by the Lost-Type Co-Op foundry with the “name-your-price” pricing scheme and hence freely available for personal and commercial use.

Valencia

Jura
Jura is an elegant serif typeface with narrow proportions and distinguishing details. The rounded, wedge-shaped serifs offer a contemporary feel and also achieve to maintain legibility even with its range of small sizes. This typeface is available in four weights: Regular, Italic, Bold and Bold Italic and is available for free download and use.

Jura

Nomed Font
Nomed Font is a free typeface that can help you achieve a modern and sophisticated look in your designs. The triangular geometric shapes may be a bit hard to read but that’s exactly the highlight of this particular style, and it makes the typography unique and original.

Nomed Font

Nomed Font

Carton
This typeface, designed by Nick McCosker, is a strong yet sensitive slab-serif inspired by letterpress. Its sturdy appearance makes it a perfect fit for posters, headings and taglines, in both classic and contemporary contexts. Released by the Lost Type Co-Op under the “name-your-price” pricing scheme.

Carton

Carton

Novecento (Registration on MyFonts is required!)
This typeface is an uppercase-only font family with some pretty impressive geometric forms that have been inspired by historical European typographic tendencies. It was designed to be used mostly for headlines, visual identities or short sentences — both in big and small sizes. The family contains 471 glyphs and 32 font weights whereas six of the font weights of the wide-version (Light, Book, Normal, Medium, Demibold and Bold) are available for free download and use.

Novescento

Novescento

Novescento

Fjord
Fjord is serif typeface that has specifically been designed for book publications. It is intended to be used in long texts and in relatively small print size. Fjord features sturdy construction, prominent serifs, low-contrast modulation and long elegant ascenders as well as descenders relative to the ‘x’ height. Fjord performs well in sizes starting from 12px and higher; nevertheless, it can also be a distinctive font choice for larger text headlines and in corporate design. This serif typeface include Cyrillic and Greek characters and is available at Google Web Fonts. It has been released under the SIL Open Font License, 1.1. Feel free to take a look at the designer’s free font Armata as well.

Fjord

Hero
Hero is a crisp geometrical typeface applicable for any type of use: print, Web, logos, posters, booklets. This typeface contains 162 characters and is free for personal and commercial use. Available in the OpenType format for PC and Mac.

Hero

Otama e.p.
Here’s a quite confident typeface to use for expensive and fashionable designs. Strong steams and thin serifs shows similarities to the well-known traditional Didot typeface. This typeface is free for personal and commercial use.

Otama e.p.

Ribbon
This typeface is a geometric display face which includes OpenType features for an alternate alphabet. The family contains sets for Uppercase, Numerals and Punctuation. Released by the Lost Type Co-Op under the “name-your-price” pricing scheme and designed by Dan Gneiding. If you decide to buy the font for $30 or more, you will get a beautiful Ribbon Specimen Book as well.

Ribbon

Movavi
Movavi is a sans serif font that is available only in the font weights Black and Black Italic. Obviously, the typeface wouldn’t work for body copy, but it might work nicely in short headings or “groovy” art works. Available for free download and use on PC and Mac.

Download free Movavi fonts

Satellite
Satellite is a geometric sans serif font designed by Matt Yow. The typeface can be a great fit for short headlines, short body copy or slogans. Released under the SIL Open Font License.

Satellite

Open Sans
Open Sans is a very clean font family by Ascender Fonts. It includes ten styles (Light, Regular, Italic, Semibold, Bold, Bold Italic, Extrabold) and each one consists of more than 900 glyphs: Latin, Greek, Cyrillic, many of the regular diacrytic letters as well as “hanging” numbers. Also available at Google Web Fonts and released under the Apache License version 2.

Open Sans

Mosaic Leaf
The glyphs of this expressive typeface are built out of leaves of different sizes. Mosaic Leaf also contains numbers, punctuation and currency symbols. The .zip-package contains PDF, OTF and TTF files; the fonts support Western and Central European encoding, and also Baltic, Nordic and Turkish. The typeface is free to use in commercial and non-commercial projects. Designed and prepared by Lukasz Kulakowski and Zbyszek Czapnik.

Mosaic Leaf

Mosaic Leaf

Amaranth
Amaranth is a sans serif font family of four basic styles (regular, italic, bold, bold italic) with individually shaped letter forms that makes typeface more playful. Suitable for both Web and print, longer texts and headings. Available at Google Web Fonts and licensed under the SIT OpenType License. Image credit and source: dersven.

Amaranth

Siruca Pictograms
A pictogram open source font made as a part of Siruca signage system designed by Fabrizio Schiavi. The font contains many picograms related to sport, signage, home, social meetings, free time activities and business.

Siruca Pictograms

Erler Dingbats
For the first time in the entire history of Unicode standard, the full encoding range for dingbats is now covered by a complete, contemporary quality font. FF Dingbats 2.0 features more than 800 glyphs and is mainly a tool for professional designers and has been created for everyday communication purposes. It includes a wide range of popular symbols and pictograms such as arrows, pens, phones, stars, crosses and checkmarks, plus three sets of cameo figures on round backgrounds. Free of charge. (via fontblog)

Erler Dingbats

Further Free Fonts

SD Sansimillia
SD Sansimillia is a playful, yet elegant typeface suitable for many different applications. Originally cut for a local advertising brand, SD Sansimillia is inspired by the Antenna Family built by Cyrus Highsmith in 2007 as well as Erik Spiekermann’s FF Din Family cut in 1994. It is issued in regular, bold and black weights.

Mimic Roman
Mimic Roman is a modern sans serif face with evenly balanced strokes and a counter on a slight angle, giving it a 1950s retro look.

Roboto
Roboto Family is a linear sans serif font, available in 8 different styles of which each includes more than 900 glyphs — Greek and Cyrillic, too. This font was designed by Google for Andorid and is licensed under the Google Android License.

Mate
An elegant serif font designed by Eduardo Tunni. This typeface was primarily designed to be used in longer body copies in printed material. It is simple in structure and has sharp as well as generous counter-shapes which create a medium texture that calls for page color. It can also be used as display typography and is available at Google Web Fonts.

Last Click

Shape Type
If you are passionate about typography and have fun experimenting with glyphs, then you will certainly like the rather unusual type-design game created by the interaction designer Mark MacKay. The idea of this JavaScript-based letter-shaping game is simple: you get 10 modified letters from various classic typefaces, and you have to try to make them right by dragging curves along their axes. It’s an engaging way to explore what makes or breaks a glyph.

Testing your Typography Skills

Font-Bot Project
It is time for your favorite font to stand its ground. The idea is to build robots out of a type face, showcase them and hope others put together a potential opponent. Once there are two font-bots ready to compete against each other, only thing left would be to “let the battle begin!” Participating is not hard, the rules are clear: all robots must be built of type alone (letters A to Z). Let’s see if your font has what it takes to defend its corner. Fight!

The Battle of the Fonts

Further Resources

  • Lost Type Co-Op
    The Lost Type Co-Op is a Pay-What-You-Want Type foundry. Users have the opportunity to pay whatever they like for a font; you can type in ‘$0′ for a free download. 100% of all funds from these sales go directly to the designers of the fonts themselves, respectively.
  • The League of Moveable Type
    The open-source type movement for bringing high-quality tyepfaces to the Web. The creators of the project keep releasing quality fonts every now and then so be sure to stay tuned!
  • Google Web Fonts
    A growing directory of hundreds of free, open-source fonts optimized for the Web. Google also provides ready-to-use snippets for integrating the fonts to your website.
  • Typography and Free Fonts on Smashing Magazine
    An overview of typography-related articles and free font round-ups on Smashing Magazine.

We sincerely appreciate the time and effort of all type designers featured in this post. Please keep in mind that type design is a time-consuming craft which truly deserves reward and support. Please consider supporting type designers who create and release amazing typefaces for all of us to use.

(vf) (il)

© Smashing Editorial Team for Smashing Magazine, 2012.

0
Your rating: None

Steve Souders

Our favorite ex-Yahoo at-Google web performance fast-driving all-around guru Steve Souders took a look at @font-face performance recently:

There have been a number of great posts about @font-face performance issues:

* Paul Irish: Fighting the @font-face FOUT
* Stoyan Stefanov: Gzip your @font-face files
* Zoltan Hawryluk (again): More @font-face fun

This blog post summarizes Paul, Stoyan, and Zoltan’s findings plus some very important discoveries of my own.

Among these discoveries is:

* IE doesn’t render anything in the page until the font file is done downloading.
* In all major browsers, ...no files were blocked [by font downloads].
* Busy indicators... are triggered [differently in each] browser

Steve also found that IE and Chrome didn't time out in their attempts to download a font, meaning in the case of the former that the page never displays while waiting for the font, and in the latter that the text doesn't display.

Steve's conclusions are interesting:

* Only use @font-face is you’re absolutely certain you need it.
* If you have multiple font files, consider sharding them across multiple domains.
* Don’t include unused @font-face declarations - IE will download them whether they’re used or not.
* Gzip the font files and give them a future Expires header.
* Consider lazy loading the font files, at least in IE.

0
Your rating: None

Rad headline font, dudeFor years web developers have bemoaned the state of typography on the web. We don’t have much control and we have to choose between a small handful of fonts. The only real guarantee is whether our text is serif or sans-serif.

A new JavaScript library solves the problem in a way similar to the long popular sIFR, but without requiring Flash. Called typeface.js, the library reproduces truetype fonts by converting glyphs to JSON. It uses canvas, SVG graphics, or VML, depending on the browser.

Like sIFR, it lets you keep your content in your HTML, but replaces the text with the appropriate shapes. That means that screen readers and search spiders can still get at your content.

The download weight appears slightly larger than sIFR, but still a reasonable size considering the information it holds. The main JavaScript file is 16K, with most fonts weighing in at about 50K.

Original sIFR creator Shaun Inman doesn’t appear all that impressed. In his link blog, Inman wrote:

“Dear type vendors, please save us from these convoluted stopgaps.”

Yes, it’s not as perfect a solution as a built-in standard. The library has three fonts available, plus a tool to convert other truetype fonts to JSON, as long as you have the right to embed the font. The tool won’t convert certain fonts it knows are restricted.

See also:


0
Your rating: None