Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
For this installment of the First Look series, James Williamson reviews the current implementation and future direction of web fonts: downloadable font resources that can be retrieved with the CSS @font-face declaration. The course begins with the evolution of online typography and current CSS font capabilities, and then dives into the W3C CSS Fonts Module specification, showing how to utilize web fonts, ensure cross-browser consistency, and how to use CSS3 to enhance the styling of web fonts. Font hosting services and tools such as TypeKit and the Google Fonts API are demonstrated. Exercise files accompany the course.
In the past, web designers have given very little thought to font rendering. Now for the most part, when using standard system fonts, we haven't had to. However using web fonts means that we now have the access to thousands of font families of varying quality as well as dealing with multiple font formats. While this certainly gives us more choice that we've ever had, it also means that we need to be aware of how systems, browsers, and fonts all work together to control the quality of font rendering and why this can cause the same font to look very different depending upon which OS and which browser it's viewed in.
Understanding how font rendering works in the variables that affect it will help your designs look more consistent across multiple devices and can help guide you when selecting fonts for your sites. Most of the time when designers see their fonts rendering differently in multiple browsers, there is a tendency to just blame the browser. The reality of it however is that it's a lot more complicated than that. First off, the vast majority of our fonts aren't designed for the screen. They're designed to be printed out at very high resolution. Now because of this, most letterforms are stored as outlines, which can be scaled to a desired size and still print cleanly at the target resolution.
When these glyphs are displayed on screen, the outlines must be rasterized and fit into a pixel grid, usually at very small sizes. The operating system's type rendering engine usually performs this rasterisation process using one of three methods. No anti-aliasing, grayscale anti- aliasing, and subpixel rendering. Here is how they work. No anti-aliasing simply turns a pixel on or off and the letterform is forced to fit into a specific pixel grid.
Grayscale anti-aliasing mixes shades of gray with the edge pixels to blur the edge. This helps smooth curves and makes the letterforms look a little bit more natural. The greatest level of control is achieved with subpixel rendering. In modern display devices like LCDs, pixels are actually made up of multiple color elements such as red, green, and blue. Using subpixel rendering, you can gain a finer amount of control over font outlines by affecting the intensity of these individual elements, resulting in smoother shapes, but with a slight color fringe around the letter shapes as you can see here.
As you can imagine, each of these basic methods produces very different results. The font itself can also dramatically affect how its letterforms are rasterized. When a font is created, the designer has the option of creating font hints to go along with it. Now font hinting is basically the process of redesigning each of the glyphs for various sizes. As you can see here we have very different glyphs for 9 pixels per em versus 12 pixels per em versus 16 pixels per em, but at the proper shape and size it would all look exactly the same.
So when these get rasterized, they are going to fit cleanly within a pixel grid at that size. As you can imagine, it takes a tremendous amount of effort to add hinting to a font, which is why the majority of the fonts that you are going to be using won't contain any hinting at all. It's worth noting, however, that unlike Postcript fonts, TrueType fonts have at least some level of hinting built-in as a general rule, due to the way that TrueType fonts are processed. This is one of the reasons that TrueType fonts are often seen as more readable on-screen and are frequently used as a source for both EOT and WOFF fonts.
In fact, many of the font generator tools we will be discussing later possess auto hinting features that you can enable to help optimize a font for on-screen viewing. Okay so now that we know the basics of how text is rendered on screen, we need to discuss the variables that can affect these rendering based on platforms and browsers and we are going to do that in our next movie.
Find answers to the most frequently asked questions about Web Fonts First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.