rendering web type modern t ype for a modern web
contents OVER THE L A S T FEW DEC ADES , the computer and internet have completely changed the way we communicate as a species – the typography of the web, however, which contains so much of the information we rely on, has only begun to evolve within the last three years or so. Today, every designer should make sure they are aware of the many intricacies (and complications) of typesetting for the web.
Pg 01
I NTRODUC TI ON
Pg 02
2 FO R MS OF T Y PE
Pg 04
R EN DER I NG
Pg 06
EM B EDDI NG
Rendering Web Fonts | 01
2 forms of type: When discussing screen typography, it is important to know the distinction between the two types of fonts: WEB SAFE FO NT S AN D WEB FO NT S . The first kind, web safe fonts, are fonts that are included by default on every operating system. The second kind, webfonts, are fonts that are not installed on every user’s computer by default and therefore must be loaded from a web server; the technology to do this did not develop until the 21st century, leaving on web safe fonts to be used for the first several decades of the internet.
MATTHEW CARTER (right) was commissioned by Microsoft to design typefaces specifically for screen. The resulting typefaces were Verdana and Georgia, which are still two of the most widely used typefaces on the web.
web safe fonts the first web safe font
image as text
In the mid 1990s, type designer Matthew Carter was commissioned by Microsoft to create GEO RG IA AN D VER DANA , two typefaces designed specifically for screen. They were designed first in bitmaps (to match the pixels of the screen) with a large x-height and open aperture for on-screen legibility and then translated into outline fonts. Since the only fonts that could be used on the web were fonts installed by default on every computer, Georgia and Verdana were two of the very few typefaces available to designers.
As design started to become more web focused in the mid-2000s, DESI G NER S WANTED TO USE M O R E T Y PEFACES than just the defaults that come with all operating systems. The easiest alternative was to use image as text by typing out the words and saving them in a picture that was uploaded on the website. The New Yorker was a popular news site that used images as text in order to use their branded typeface NY Vogue Goat. Although this was inconvenient, it meant that designers could now use any typeface they owned.
webfonts @ font- face
saves the web
In 2008, custom web fonts finally became a reality when Apple Safari and Mozilla Firefox implemented the @FO NT- FACE RULE . The CSS (Cascading Style Sheet) Working Group had proposed this rule 10 years ago in 1998, but Internet Explorer 4 was unsuccessful at using it and stalled the @font-face usage for a decade. A year after the implementation of the @font-face rule, in May 2009, Typekit was introduced by Jeffrey Veen; he described it as a type hosting service that allowed designers to use high-quality fonts on
websites with free-licensing and crossbrowser compatibility. Within two years, Adobe acquired Typekit and introduced classic types such as Garamand Pro, Myriad Pro, and Minion Pro to the web. BY 2010 , Google had launched its own revolutionary library of fonts available to the world to use for free. The CSS @ font-face rule is now supported in all modern and mobile browsers. Additional foundries such as Font Bureau, Webtype, and FontShop now offer web font services.
Rendering Web Fonts | 03
Matthew Carter commissioned by Microsoft to design typefaces specifically for screen. Apple introduces their new bitmap font, Podium Sans, originally promoted as Myriad.
1990
2004
1998 Internet Explorer unsuccessfully atttempts to introduce the @fontface declaration for webfonts.
embedding st yle meets functionalit y WHEN DESI G N I NG FO R THE WEB , professionals have to not only choose a font for its stylistic value, but also for its technological value. Webfonts are made up of a collection of glyphs, which are vector shapes that define the letter or symbol. This means that two variables will determine the size of each font file – the complexity of the vectors paths of the font glyphs and the number of glyphs in the font. For example, Open Sans, which is
Rendering Web Fonts | 04
one of the most popular Google Web Fonts, contains 897 glyphs, which include Latin, Greek, and Cyrillic characters. how the webfont is attached to the website. Although the most popular format is the @font-face declaration, there are multiple font formats that can be attached to the declaration. A DESI G NER AL SO NEEDS TO CO NSI DER
Typekit is introduced by Jeffrey Veen as a type-hosting service for designers on the web. 60% of the Alexa Top 1 Million Sites have implemented the use of webfonts over web safe fonts.
2009
2016
2010 Google acquires Typekit and launches its own free type foundry called Google Fonts.
2008 Custom webfonts become a reality when Apple Safari and Mozilla Firefox implement CSS’s @font-face declaration.
problems caused by embedding
02%
OF WEBSITES IN 2011 WERE USING WEBFONTS
60%
OF WEBSITES IN 2016 WERE USING WEBFONTS
AF TER THE WEB FO NT R EVOLUTI O N , another topic came up that had been ignored for years: font rendering. Web safe fonts may have offered limited creativity for designers, but they were specifically crafted for the screen so that designers had little to worry about when it came to display quality. However, now that any font can simply be converted to a different format and uploaded to a website, lower-quality web fonts are appearing and rendering mistakes appear.
Rendering Web Fonts | 05
rendering technology differences Every browser, operating system, and device renders type differently; and now that any font can simply be converted to a different format and uploaded to a website, lower-quality web fonts are appearing and R EN DER I NG M I S TAK ES O CCUR . As Tim Ahrens of Smashing Magazine writes, “it becomes clear that the translation of a design into pixels is not something that happens naturally or consistently.“
“…the translation of a design into pixels is not something that happens naturally or consistently.”
anti - aliasing Another technique used along with screen rendering is anti-aliasing. THE I DE A OF ANTI - ALIA SI NG is to add semitransparent pixels along the edges of letterforms to give a smooth, “stair step” effect. However, the constraints of hardware, browsers, and operating systems can make a difference in the
actual effectiveness of anti-aliasing. But overall, anti-aliased text usually dramatically R EDUCES E Y E S TR AI N and renders glyphs much closer to their intended design: for designers, it’s more of a question of how, not if, anti-aliasing should be used.
subpixel rendering Every pixel on a standard monitor is MADE UP OF TH R EE COLO R S : red, green, and blue. Each color lay for a pixel is known as a sub-pixel, and the brightness of each subpixel is controlled independently but blend into one solid-colored pixel. Normally, anti-aliasing sets even values for each of the 3 subpixels, causing fully grayscale
pixels. Subpixel rendering, however, renders each colored component differently in order to increase the perceived resolution of the monitor. Pixels can therefore take on a D IFFER ENT VI SUAL WE I G HT from neighboring pixels, meaning they can be smoothed in smaller increments.
Rendering Web Fonts | 07
sar ah riedlinger Intro to Typography Spring 2017 Professor Lisa Cook Problem 3 05/11/17 Type set in 8/10 Avenir Headline set in 30 Abril Fatface