The stub-ends left when paragraphs end on the first line of a page are called widows. They have a past but not a future, and they look foreshortened and forlorn. It is the custom—in most, if not all, the world’s typographic cultures—to give them one additional line for company. This rule is applied in close conjunction with the next.
In most roman faces the letter f reaches into the space beyond it. In most italics, the f reaches into the space on both sides. Typographers call these overlap kerns. Only a few kerns, like those in the arm of the f and the tail of the j, are implicit in a normal typefont, while others, like the overlap in the combination To, are optional refinements, dependent of the letterforms.
55 |
Reaching into the space in front of it, the arm of the f will collide with certain letters—b, f, h, i, j, k, l—and with question marks or parentheses, if these are in its way.
Inconsistencies in letterfit are inescapable, given the forms of the Latin alphabet, and small irregularities are after all essential to the legibility of roman type. Kerning—altering the space between selected pairs of letters—can increase consistency of spacing in a word like Washington or Toronto, where the combinations of Wa and To are kerned.
57 |
58 |
59 |
60 |
61 |
Genuine small caps are not simply shrunken versions of the full caps. They differ from large caps in stroke weight, letterfit and internal proportions as well as in height. Any good set of small caps is designed as such from the ground up. Thickening, shrinking and squashing the full caps with digital modification routines will only produce a parody.
56 |
57 |
58 |
59 |
60 |
61 |
Example
62 |
Thus: 3:00 am, 3:00 pm, the ninth century ce, 450 bc to ad 450, the oas and nato; World War ii or wwii; but JFK and Fr J.A.S. O’Brien, omi; hmsHypothesis and ussTiconderoga; Washington, DC, and Mexico, DF; J.S.Bach’s Prelude and Fugue in B♭ minor, bwv 867.
63 |
64 |
65 |
66 |
67 |
Vietjazz is a recording company I created for a branding class. The concept was to connect Vietnamese ballad with jazz. I designed the logo, stationery and applications. I also developed a responsive web site for the brand guidelines.
This site is designed and hand-coded by Donny Truong. The typeface is Raleway. The fonts are served through Google Fonts. The site, which might render goofy in outdated browser, is built with modern HTML and CSS.
Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple-column work, a better average is 40 to 50 characters.
59 |
60 |
61 |
62 |
63 |
Examples
64 |
65 |
Use CSS’s ch unit (the advance measure of the glyph ‘0’) to determine the comfortable reading measure
66 |
67 |
68 |
Line length of the 47-character zero
69 |
70 |
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
71 |
72 |
p {max-width: 47ch;}
73 |
74 |
75 |
Line length of the 67-character zero
76 |
77 |
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
A list is an inherently spacial and numerical arrangement. Speakers reciting lists often enumerate on their fingers, and lists set in type often call for equivalent typography gestures. This means that the list should be clarified as much as possible through spatial positioning and pointing, usually done with bullets, dashes or numerals. If the numbers are made visible either through prominence (e.g., by setting them in a contrasting face), additional punctuation—extra periods, parentheses or the like—should rarely be required.
76 |
77 |
78 |
79 |
80 |
Recommended Reading
81 |
82 |
Detail In Typography by Jost Hochuli
83 |
Inside Paragraphs: Typographic Fundamentals by Cyrus Highsmith
84 |
Shaping Text: Type, Typography and the Reader by Jan Middendrop
85 |
86 |
87 |
88 |
Jan Tschichold’s New Typographic Rules
89 |
90 |
Fewest possible typefaces
91 |
Fewest possible type sizes
92 |
No letterspacing of lowercase (which was then still used for emphasis in German-speaking countries)
93 |
Emphasis by using italic or bold of the same face
94 |
Use of capitals only as an exception, then carefully letterspaced
Another excellent method of making the start of the text, inherited from ancient scribal practice, is a large initial capital: a versal or lettrine. Versals can be treated in many ways. Indented or centered, they can stick up from the text. Flush left, they can be nested into text (typographers call these drop caps, as oppose to elevated or stick-up caps.) If there is room, they can hang in left margin. They can be set in the same face as the text or something outlandishly different. In scribal and typographic tradition alike, where the budget permits, versals too are generally red or another color in preference to black.
70 |
71 |
72 |
73 |
74 |
75 |
Another excellent method of making the start of the text, inherited from ancient scribal practice, is a large initial capital: a versal or lettrine. Versals can be treated in many ways. Indented or centered, they can stick up from the text. Flush left, they can be nested into text (typographers call these drop caps, as oppose to elevated or stick-up caps.) If there is room, they can hang in left margin. They can be set in the same face as the text or something outlandishly different. In scribal and typographic tradition alike, where the budget permits, versals too are generally red or another color in preference to black.
104 |
105 |
106 |
107 |
108 |
109 |
110 |
Miles Davis opened up my ears and introduced me to the world of jazz and fusion, but beyond that he changed the way I do my professional work. While Davis who reinvented jazz at least five times was constantly changing his musical direction, he was also refining and redefining his sound. His choices of notes were thoughtful and his phrasings were meaningful. The notes he left out were as essentials as the notes he played.
91 |
92 |
As I listened to Davis’s music, particularly his quintessential Kind of Blue, I began to change my design approach. Davis’s improvisations in “So What,” “Freddie Freeloader” and “All Blues” were complete opposite from John Coltrane’s and Cannonball Adderley’s. Whereas Coltrane and Adderley played swift, blazing solos, Davis played only the most telling notes. In a similar way, I began to see the important elements emerge in my design as I stripped away decorative ones. I came to realize that design is not only what I put in, but also what I left out.
93 |
94 |
While the process sounds easy, it took me tremendous amount of time and decision to accomplish. In many occasions, I keep turning on and off layers in Photoshop, Illustrator or even Cascading Style Sheet (CSS) to figure out whether I should leave in or take out a certain elements without over-simplifying the design. Coltrane had similar problem in his early career. He was having a hard time finding the right place to end his solo; therefore, he sought Davis for advice. Davis suggested, “Take the horn out of your mouth.”
95 |
96 |
97 |
98 |
In addition to being one of the world greatest trumpet players, Davis was also a master of communication. The recording of “Autumn Leaves” (with Adderley as the leader) is a brilliant example of Davis’s power of precision and command. After a brief intro from the quintet, which includes Hank Jones on piano, Art Blakey on drums and Sam Jones on bass, Davis cut straight to the melodic core. Each note he played on his muted trumpet struck the emotional cord: brooding, melancholy and hauntingly clear. In my own work, I explore emotional design through the practice of selection and the art of reduction. Whether working with colors, types or images, I would choose the ones that give the most emotional value to my design. I have also learned to cut out the non-essential parts and applied more detail to essence.
99 |
100 |
Using space, another design-related element, was one of the techniques Davis had acquired in his early career. With the rise of bebop in the 1950s, every jazz musician at the time wanted to play like Charlie Parker and Dizzy Gillespie. They filled in as many notes as they could into their improvisation. In contrast, Davis left plenty of space in his phrasing. As a result, he let his melodic lines breathe and gave listeners a chance to absorb his music.
101 |
102 |
When I first started doing creative work, I crammed as much elements as I could into my design. My first web page was filled with at least four different typefaces, animated GIFs (Graphical Interchangeable Format) and unrelated colors. Later on, I learned the concept of using space to make the key message stronger through one of Davis’s fusion albums titled Bitches Brew. In exploring the jazz-rock territory, Davis gave his rhythm section, which was made up of four drummers, three electric keyboardists and two bassists, the freedom to work out its chaotic, organic groove. He only came in to play when he had something to say. Every time he blew his horn, however, he created the order out of the disorder. Likewise, my responsibility as a designer is to take the client contents and organize them into a logical sense. While Davis had demonstrated that space in music creates harmony and balance, white space in web design can also create harmonious layouts and free the eye from clutter. The correct use of white space not only brings out the content, but also enhances readability.
103 |
104 |
105 |
In his late career, Davis experimented with funk, rock, electric, pre-recorded orchestration and even hip-hop backbeat. The way he played opened my ears once again on the art of adaptation. Because he was such a versatile and flexible trumpeter, Davis was able to response and adapt to any musical backdrop. For instance, he was skillfully maneuvered his way around the pre-recorded arrangements in Tutu. In the hand of another musician, Tutu might sound like lightweight background music, but Davis made it into, as critic Kevin Le Gendre puts it: “a work of engrossingly fraught atmospheres.”
106 |
107 |
With the rise of smartphones, tablets and various digital devices, a designer must embrace the fluidity of the web. I learned to let go of the fixed design and abandon making mockups in Photoshop. I took on the challenge of designing web site where it actually lives. Designing in the browser feels much more natural once I get past the technicality. Davis once said, “The way you change and help music is by tryin’ to invent new ways to play.” I keep his words in mind whenever I need to learn and adapt to new technologies in the fast-changing paste of web design and development.
108 |
109 |
110 |
111 |
Written for Advanced Web Design class at George Mason University School of Art.
Miles Davis opened up my ears and introduced me to the world of jazz and fusion, but beyond that he changed the way I do my professional work. While Davis who reinvented jazz at least five times was constantly changing his musical direction, he was also refining and redefining his sound. His choices of notes were thoughtful and his phrasings were meaningful. The notes he left out were as essentials as the notes he played.
111 |
112 |
As I listened to Davis’s music, particularly his quintessential Kind of Blue, I began to change my design approach. Davis’s improvisations in “So What,” “Freddie Freeloader” and “All Blues” were complete opposite from John Coltrane’s and Cannonball Adderley’s. Whereas Coltrane and Adderley played swift, blazing solos, Davis played only the most telling notes. In a similar way, I began to see the important elements emerge in my design as I stripped away decorative ones. I came to realize that design is not only what I put in, but also what I left out.
113 |
114 |
While the process sounds easy, it took me tremendous amount of time and decision to accomplish. In many occasions, I keep turning on and off layers in Photoshop, Illustrator or even Cascading Style Sheet (CSS) to figure out whether I should leave in or take out a certain elements without over-simplifying the design. Coltrane had similar problem in his early career. He was having a hard time finding the right place to end his solo; therefore, he sought Davis for advice. Davis suggested, “Take the horn out of your mouth.”
115 |
116 |
117 |
In addition to being one of the world greatest trumpet players, Davis was also a master of communication. The recording of “Autumn Leaves” (with Adderley as the leader) is a brilliant example of Davis’s power of precision and command. After a brief intro from the quintet, which includes Hank Jones on piano, Art Blakey on drums and Sam Jones on bass, Davis cut straight to the melodic core. Each note he played on his muted trumpet struck the emotional cord: brooding, melancholy and hauntingly clear. In my own work, I explore emotional design through the practice of selection and the art of reduction. Whether working with colors, types or images, I would choose the ones that give the most emotional value to my design. I have also learned to cut out the non-essential parts and applied more detail to essence.
118 |
119 |
120 |
121 |
Using space, another design-related element, was one of the techniques Davis had acquired in his early career. With the rise of bebop in the 1950s, every jazz musician at the time wanted to play like Charlie Parker and Dizzy Gillespie. They filled in as many notes as they could into their improvisation. In contrast, Davis left plenty of space in his phrasing. As a result, he let his melodic lines breathe and gave listeners a chance to absorb his music.
122 |
123 |
124 |
125 |
126 |
When I first started doing creative work, I crammed as much elements as I could into my design. My first web page was filled with at least four different typefaces, animated GIFs (Graphical Interchangeable Format) and unrelated colors. Later on, I learned the concept of using space to make the key message stronger through one of Davis’s fusion albums titled Bitches Brew. In exploring the jazz-rock territory, Davis gave his rhythm section, which was made up of four drummers, three electric keyboardists and two bassists, the freedom to work out its chaotic, organic groove. He only came in to play when he had something to say. Every time he blew his horn, however, he created the order out of the disorder. Likewise, my responsibility as a designer is to take the client contents and organize them into a logical sense. While Davis had demonstrated that space in music creates harmony and balance, white space in web design can also create harmonious layouts and free the eye from clutter. The correct use of white space not only brings out the content, but also enhances readability.
127 |
128 |
129 |
130 |
131 |
132 |
In his late career, Davis experimented with funk, rock, electric, pre-recorded orchestration and even hip-hop backbeat. The way he played opened my ears once again on the art of adaptation. Because he was such a versatile and flexible trumpeter, Davis was able to response and adapt to any musical backdrop. For instance, he was skillfully maneuvered his way around the pre-recorded arrangements in Tutu. In the hand of another musician, Tutu might sound like lightweight background music, but Davis made it into, as critic Kevin Le Gendre puts it: “a work of engrossingly fraught atmospheres.”
133 |
134 |
With the rise of smartphones, tablets and various digital devices, a designer must embrace the fluidity of the web. I learned to let go of the fixed design and abandon making mockups in Photoshop. I took on the challenge of designing web site where it actually lives. Designing in the browser feels much more natural once I get past the technicality. Davis once said, “The way you change and help music is by tryin’ to invent new ways to play.” I keep his words in mind whenever I need to learn and adapt to new technologies in the fast-changing paste of web design and development.
The ampersand is a mark that represents and or et in Latin. Because the ampersand is often used as a decorative element, the more flourished its design the better. Choosing a custom ampersand is a fun typographic activity. Finding an italic font with a gorgeous ampersand is like discovering a rare gem.
In his presentation titled “Universal Typography,” Adobe Typekit manager Tim Brown stated: “The web is the best place for text. Unlike a printed artifact, text at a URL can be searched, copied, translated, linked to other documents. It can be printed. It’s convenient. It’s accessible.” (Brown 2014) Since the invention of the Internet, text has always played a major role on the web. In its two and a half decades of existence—the web celebrated its twenty-fifth anniversary in March of this year—the web has revolutionized our daily communication, interaction and business transaction, but the true transformation of typography to the web only took off in the last few years. For the first twenty years, the web had gone through many changes such as adopting web standards, using CSS for layouts instead of tables, and focusing on content strategy and user-centered design. Even though the web embraced text from the beginning, they were not well integrated together for quite some time.
40 |
41 |
42 |
On December 12, 1990, web inventor Tim Berners-Lee published the first web site ever on the Internet after he figured out the basic concept of the web including Uniform Resource Locator (URL), Hypertext Transfer Protocol (HTTP), and Hypertext Markup Language (HTML). He also created the browser and wrote the software to run the web server. The project Berners-Lee launched was about the World Wide Web, in which he defined, “a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents.” (Berners-Lee 1990) The site has nothing but texts and links to other documents. As a result, the site still works today as it did when the project was first published twenty-five years ago, which is impressive, despite the changes and advancement in web technologies.
43 |
44 |
45 |
In the mid-1990s, type designer Matthew Carter gave birth to Georgia and Verdana, two widely used typefaces for screen-based media. Commissioned by Microsoft specifically for texts on web pages, both of these typefaces were designed first in bitmaps (to match the pixels of the screen resolutions at the time) and then translated into outline fonts. To make texts legible and readable on screen, Carter had meticulously designed these fonts with large x-height, open aperture and generous space. In addition to Georgia and Verdana, the web could only display system fonts such as Arial, Helvetica and Times New Roman, which are available on all computers.
46 |
47 |
48 |
As graphic design was making the transition to the web from mid-1990s to mid-2000s, designers wanted to use more typefaces than just the handful that come with the system fonts. The simplest alternative was to use image as text. One of the advantages of using this method is that designers didn’t have deal with font licensing. Designers could use any typefaces available on their computer, but the downside was that each piece of text had to be sliced up individually in tools like Photoshop or Fireworks. One popular site that used images as texts was the New Yorker. To be consistent with its printed publication, each headline on the New Yorker web site served up images as texts in order to use NY Vogue Goat as its branded typeface. Until November 2010 when the publication started using Typekit to serve its custom fonts, someone’s job at the New Yorker was simply to slice up those images all day long.
49 |
50 |
51 |
52 |
53 |
54 |
A major issue of using image as type was that text was not searchable, selectable, or translatable. To get around that problem, web practitioners came up with various image replacement techniques to fill the void. In April 2004, web designer and developer Shaun Inman developed a technique called Scalable Inman Flash Replacement (sIFR) to embed custom fonts in a small Flash movie. He also used JavaScript and CSS to make the text selectable.
55 |
56 |
While sIFR solved the issue of image slicing, its main drawback was relying on Flash, an Adobe’s proprietary software program for delivering rich contents on the web. Furthermore, setting up sIFR required some web knowledge. In April 2009, system engineer Simo Kinnunen created a new and improved technique called Cufón (Scalable Vector Graphics, SVG). Cufón used JavaScript to render generated fonts (SVG format) to the browser. This technique was easier to set up and did not rely on Flash. Although many image replacement techniques have continued to be developed and advanced over the years—CSS image replacement is still in use today for logo on web sites—they are not genuine web typography.
57 |
58 |
59 |
60 |
Web typography is not a new concept. In 1998, the Cascading Style Sheet (CSS) Working Group proposed the support of the @font-face rule to allow any typeface to be displayed on web pages. Internet Explorer 4 was the first browser to implement it, but with no success. The proposal had no piracy protection or licensing agreement in place. As a result, @font-face was stalled for almost a decade.
61 |
62 |
In 2008, @font-face made a comeback when Apple Safari and Mozilla Firefox implemented the rule. In May 2009, Jeffrey Veen introduced Typekit, a type hosting service that let designers use high-quality fonts on web sites with the ease of implementation and the worry-free of licensing and cross-browser compatibility. In just two years, Adobe acquired Typekit bringing more classic types such as Garamond Pro, Minion Pro, and Myriad Pro to the web.
63 |
64 |
65 |
In 2010, Google launched its own library of fonts for the world to use for free. As a result, Google only hosts open-source fonts. With its ease of use API (application programming interface), Google has succeeded in making the web more accessible, readable, beautiful and open.
66 |
67 |
The @font-face rule is now supported on all modern browsers (Internet Explorer, Firefox, Chrome, Safari, and Opera) and mobile browsers (iOS Safari, Android, and Chrome, except for Opera Mini). In addition to Typekit and Google Fonts, many foundries, including Font Bureau, Fontdeck, FontShop, Hoefler & Co., and Webtype, began to offer web-font services. In just a few years, web fonts have swept the world of design. With the rise of responsive web design, typography is going through a new transformation like never before. Unlike a printed publication, the flexibility of the web gives designers no control of their work. Whether through smartphones, tablets, laptops or game consoles, they have no idea how their work will be viewed on a user’s device. In order to accommodate the growing number of devices coming to the market continuously, they have to embrace the fluidity of the web and let go of the notion of pixel perfect control. Designing for the unknown could be intimidating, but that also makes web design challenging and exciting. Brown is right in his statement. The web is the best place for accessing text.
68 |
69 |
70 |
71 |
When we read, our eyes move along the lines in a series of brief moments called saccades. As our eyes jump back and forth, we absorb information in between those hops known as fixed periods. The better the reader, the larger the saccades, and the shorter the fixed periods. We read faster if the subject is familiar to us. As we read, we recognize the shapes of the words rather than individual letters; therefore, the strokes and the spaces play a key role in legibility and readability. Particularly with screen resolution, strokes and spaces might disappear at small sizes on devices with low pixel density.
72 |
73 |
74 |
When choosing text typefaces to be read on screens, designers need to consider the following elements: a generous x-height, even spacing, open counters and apertures, prominent ascenders and descenders, and clear stroke joints. Also keep Erik Spiekermann’s advice in mind: “Don’t sacrifice esthetics for practicality. Pick a typeface that has character and strength. Basically, the models which survived 500 years will look good on screens today.” (Spiekermann 2013, 179)
In his presentation titled “Universal Typography,” Adobe Typekit manager Tim Brown stated: “The web is the best place for text. Unlike a printed artifact, text at a URL can be searched, copied, translated, linked to other documents. It can be printed. It’s convenient. It’s accessible.” (Brown 2014) Since the invention of the Internet, text has always played a major role on the web. In its two and a half decades of existence—the web celebrated its twenty-fifth anniversary in March of this year—the web has revolutionized our daily communication, interaction and business transaction, but the true transformation of typography to the web only took off in the last few years. For the first twenty years, the web had gone through many changes such as adopting web standards, using CSS for layouts instead of tables, and focusing on content strategy and user-centered design. Even though the web embraced text from the beginning, they were not well integrated together for quite some time.
61 |
62 |
63 |
The First Web Site
64 |
On December 12, 1990, web inventor Tim Berners-Lee published the first web site ever on the Internet after he figured out the basic concept of the web including Uniform Resource Locator (URL), Hypertext Transfer Protocol (HTTP), and Hypertext Markup Language (HTML). He also created the browser and wrote the software to run the web server. The project Berners-Lee launched was about the World Wide Web, in which he defined, “a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents.” (Berners-Lee 1990) The site has nothing but texts and links to other documents. As a result, the site still works today as it did when the project was first published twenty-five years ago, which is impressive, despite the changes and advancement in web technologies.
65 |
66 |
67 |
Types for Screen
68 |
In the mid-1990s, type designer Matthew Carter gave birth to Georgia and Verdana, two widely used typefaces for screen-based media. Commissioned by Microsoft specifically for texts on web pages, both of these typefaces were designed first in bitmaps (to match the pixels of the screen resolutions at the time) and then translated into outline fonts. To make texts legible and readable on screen, Carter had meticulously designed these fonts with large x-height, open aperture and generous space. In addition to Georgia and Verdana, the web could only display system fonts such as Arial, Helvetica and Times New Roman, which are available on all computers.
69 |
70 |
71 |
Image Replacement Techniques
72 |
73 |
As graphic design was making the transition to the web from mid-1990s to mid-2000s, designers wanted to use more typefaces than just the handful that come with the system fonts. The simplest alternative was to use image as text. One of the advantages of using this method is that designers didn’t have deal with font licensing. Designers could use any typefaces available on their computer, but the downside was that each piece of text had to be sliced up individually in tools like Photoshop or Fireworks. One popular site that used images as texts was the New Yorker. To be consistent with its printed publication, each headline on the New Yorker web site served up images as texts in order to use NY Vogue Goat as its branded typeface. Until November 2010 when the publication started using Typekit to serve its custom fonts, someone’s job at the New Yorker was simply to slice up those images all day long.
74 |
75 |
76 |
A major issue of using image as type was that text was not searchable, selectable, or translatable. To get around that problem, web practitioners came up with various image replacement techniques to fill the void. In April 2004, web designer and developer Shaun Inman developed a technique called Scalable Inman Flash Replacement (sIFR) to embed custom fonts in a small Flash movie. He also used JavaScript and CSS to make the text selectable.
77 |
78 |
While sIFR solved the issue of image slicing, its main drawback was relying on Flash, an Adobe’s proprietary software program for delivering rich contents on the web. Furthermore, setting up sIFR required some web knowledge. In April 2009, system engineer Simo Kinnunen created a new and improved technique called Cufón (Scalable Vector Graphics, SVG). Cufón used JavaScript to render generated fonts (SVG format) to the browser. This technique was easier to set up and did not rely on Flash. Although many image replacement techniques have continued to be developed and advanced over the years—CSS image replacement is still in use today for logo on web sites—they are not genuine web typography.
79 |
80 |
81 |
The @font-face Rule
82 |
Web typography is not a new concept. In 1998, the Cascading Style Sheet (CSS) Working Group proposed the support of the @font-face rule to allow any typeface to be displayed on web pages. Internet Explorer 4 was the first browser to implement it, but with no success. The proposal had no piracy protection or licensing agreement in place. As a result, @font-face was stalled for almost a decade.
83 |
84 |
In 2008, @font-face made a comeback when Apple Safari and Mozilla Firefox implemented the rule. In May 2009, Jeffrey Veen introduced Typekit, a type hosting service that let designers use high-quality fonts on web sites with the ease of implementation and the worry-free of licensing and cross-browser compatibility. In just two years, Adobe acquired Typekit bringing more classic types such as Garamond Pro, Minion Pro, and Myriad Pro to the web.
85 |
86 |
87 |
In 2010, Google launched its own library of fonts for the world to use for free. As a result, Google only hosts open-source fonts. With its ease of use API (application programming interface), Google has succeeded in making the web more accessible, readable, beautiful and open.
88 |
89 |
The @font-face rule is now supported on all modern browsers (Internet Explorer, Firefox, Chrome, Safari, and Opera) and mobile browsers (iOS Safari, Android, and Chrome, except for Opera Mini). In addition to Typekit and Google Fonts, many foundries, including Font Bureau, Fontdeck, FontShop, Hoefler & Co., and Webtype, began to offer web-font services. In just a few years, web fonts have swept the world of design. With the rise of responsive web design, typography is going through a new transformation like never before. Unlike a printed publication, the flexibility of the web gives designers no control of their work. Whether through smartphones, tablets, laptops or game consoles, they have no idea how their work will be viewed on a user’s device. In order to accommodate the growing number of devices coming to the market continuously, they have to embrace the fluidity of the web and let go of the notion of pixel perfect control. Designing for the unknown could be intimidating, but that also makes web design challenging and exciting. Brown is right in his statement. The web is the best place for accessing text.
90 |
91 |
92 |
How We Read
93 |
When we read, our eyes move along the lines in a series of brief moments called saccades. As our eyes jump back and forth, we absorb information in between those hops known as fixed periods. The better the reader, the larger the saccades, and the shorter the fixed periods. We read faster if the subject is familiar to us. As we read, we recognize the shapes of the words rather than individual letters; therefore, the strokes and the spaces play a key role in legibility and readability. Particularly with screen resolution, strokes and spaces might disappear at small sizes on devices with low pixel density.
94 |
95 |
96 |
When choosing text typefaces to be read on screens, designers need to consider the following elements: a generous x-height, even spacing, open counters and apertures, prominent ascenders and descenders, and clear stroke joints. Also keep Erik Spiekermann’s advice in mind: “Don’t sacrifice esthetics for practicality. Pick a typeface that has character and strength. Basically, the models which survived 500 years will look good on screens today.” (Spiekermann 2013, 179)
In his presentation titled “Universal Typography,” Adobe Typekit manager Tim Brown stated: “The web is the best place for text. Unlike a printed artifact, text at a URL can be searched, copied, translated, linked to other documents. It can be printed. It’s convenient. It’s accessible.” (Brown 2014) Since the invention of the Internet, text has always played a major role on the web. In its two and a half decades of existence—the web celebrated its twenty-fifth anniversary in March of this year—the web has revolutionized our daily communication, interaction and business transaction, but the true transformation of typography to the web only took off in the last few years. For the first twenty years, the web had gone through many changes such as adopting web standards, using CSS for layouts instead of tables, and focusing on content strategy and user-centered design. Even though the web embraced text from the beginning, they were not well integrated together for quite some time.
115 |
116 |
117 |
118 |
119 |
120 |
121 |
The First Web Site
122 |
123 |
129 |
On December 12, 1990, web inventor Tim Berners-Lee published the first web site ever on the Internet after he figured out the basic concept of the web including Uniform Resource Locator (URL), Hypertext Transfer Protocol (HTTP), and Hypertext Markup Language (HTML). He also created the browser and wrote the software to run the web server. The project Berners-Lee launched was about the World Wide Web, in which he defined, “a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents.” (Berners-Lee 1990) The site has nothing but texts and links to other documents. As a result, the site still works today as it did when the project was first published twenty-five years ago, which is impressive, despite the changes and advancement in web technologies.
130 |
131 |
Type on Screen
132 |
133 |
134 |
135 | FIG 2: The lowercase g in pixels with
136 | vector outlines. Design: Young Sun
137 | Compton, 2013.
138 |
139 |
140 |
In the mid-1990s, type designer Matthew Carter gave birth to Georgia and Verdana, two widely used typefaces for screen-based media. Commissioned by Microsoft specifically for texts on web pages, both of these typefaces were designed first in bitmaps (to match the pixels of the screen resolutions at the time) and then translated into outline fonts. To make texts legible and readable on screen, Carter had meticulously designed these fonts with large x-height, open aperture and generous space. In addition to Georgia and Verdana, the web could only display system fonts such as Arial, Helvetica and Times New Roman, which are available on all computers.
141 |
142 |
Image as Text
143 |
144 |
145 |
146 |
147 | FIG 3: New Yorker’s old page using images as texts.
148 |
149 |
150 |
151 |
152 |
As graphic design was making the transition to the web from mid-1990s to mid-2000s, designers wanted to use more typefaces than just the handful that come with the system fonts. The simplest alternative was to use image as text. One of the advantages of using this method is that designers didn’t have deal with font licensing. Designers could use any typefaces available on their computer, but the downside was that each piece of text had to be sliced up individually in tools like Photoshop or Fireworks. One popular site that used images as texts was the New Yorker. To be consistent with its printed publication, each headline on the New Yorker web site served up images as texts in order to use NY Vogue Goat as its branded typeface. Until November 2010 when the publication started using Typekit to serve its custom fonts, someone’s job at the New Yorker was simply to slice up those images all day long.
153 |
154 |
155 |
156 |
157 |
158 |
Image Replacement Techniques
159 |
160 |
A major issue of using image as type was that text was not searchable, selectable, or translatable. To get around that problem, web practitioners came up with various image replacement techniques to fill the void. In April 2004, web designer and developer Shaun Inman developed a technique called Scalable Inman Flash Replacement (sIFR) to embed custom fonts in a small Flash movie. He also used JavaScript and CSS to make the text selectable.
161 |
162 |
While sIFR solved the issue of image slicing, its main drawback was relying on Flash, an Adobe’s proprietary software program for delivering rich contents on the web. Furthermore, setting up sIFR required some web knowledge. In April 2009, system engineer Simo Kinnunen created a new and improved technique called Cufón (Scalable Vector Graphics, SVG). Cufón used JavaScript to render generated fonts (SVG format) to the browser. This technique was easier to set up and did not rely on Flash. Although many image replacement techniques have continued to be developed and advanced over the years—CSS image replacement is still in use today for logo on web sites—they are not genuine web typography.
163 |
164 |
Web Fonts
165 |
166 |
Web typography is not a new concept. In 1998, the Cascading Style Sheet (CSS) Working Group proposed the support of the @font-face rule to allow any typeface to be displayed on web pages. Internet Explorer 4 was the first browser to implement it, but with no success. The proposal had no piracy protection or licensing agreement in place. As a result, @font-face was stalled for almost a decade.
167 |
168 |
In 2008, @font-face made a comeback when Apple Safari and Mozilla Firefox implemented the rule. In May 2009, Jeffrey Veen introduced Typekit, a type hosting service that let designers use high-quality fonts on web sites with the ease of implementation and the worry-free of licensing and cross-browser compatibility. In just two years, Adobe acquired Typekit bringing more classic types such as Garamond Pro, Minion Pro, and Myriad Pro to the web.
169 |
170 |
171 |
In 2010, Google launched its own library of fonts for the world to use for free. As a result, Google only hosts open-source fonts. With its ease of use API (application programming interface), Google has succeeded in making the web more accessible, readable, beautiful and open.
172 |
173 |
The @font-face rule is now supported on all modern browsers (Internet Explorer, Firefox, Chrome, Safari, and Opera) and mobile browsers (iOS Safari, Android, and Chrome, except for Opera Mini). In addition to Typekit and Google Fonts, many foundries, including Font Bureau, Fontdeck, FontShop, Hoefler & Co., and Webtype, began to offer web-font services. In just a few years, web fonts have swept the world of design. With the rise of responsive web design, typography is going through a new transformation like never before. Unlike a printed publication, the flexibility of the web gives designers no control of their work. Whether through smartphones, tablets, laptops or game consoles, they have no idea how their work will be viewed on a user’s device. In order to accommodate the growing number of devices coming to the market continuously, they have to embrace the fluidity of the web and let go of the notion of pixel perfect control. Designing for the unknown could be intimidating, but that also makes web design challenging and exciting. Brown is right in his statement. The web is the best place for accessing text.
174 |
175 |
Evaluating Types
176 |
177 |
178 |
179 | FIG 4: Series of saccades. Designed by Jost Hochuli, 2008.
180 |
181 |
182 |
When we read, our eyes move along the lines in a series of brief moments called saccades. As our eyes jump back and forth, we absorb information in between those hops known as fixed periods. The better the reader, the larger the saccades, and the shorter the fixed periods. We read faster if the subject is familiar to us. As we read, we recognize the shapes of the words rather than individual letters; therefore, the strokes and the spaces play a key role in legibility and readability. Particularly with screen resolution, strokes and spaces might disappear at small sizes on devices with low pixel density.
183 |
184 |
185 |
When choosing text typefaces to be read on screens, designers need to consider the following elements: a generous x-height, even spacing, open counters and apertures, prominent ascenders and descenders, and clear stroke joints. Also keep Erik Spiekermann’s advice in mind: “Don’t sacrifice esthetics for practicality. Pick a typeface that has character and strength. Basically, the models which survived 500 years will look good on screens today.” (Spiekermann 2013, 179)
186 |
187 |
188 |
189 | FIG 5: Elements of web typography. Designed by Donny Truong, 2014.
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
Bibliography
199 |
200 |
201 |
Brown, Tim. “Universal Typography.” Lecture presented at the SmashingConf, New York, New York, June 18, 2014.
202 |
203 |
204 |
CERN. 1990. “World Wide Web.” Accessed October 27, 2014.
205 |
206 |
207 |
Franz, Laura. 2012. Typographic Web Design: How to Think Like a Typographer in HTML and CSS. West Sussex: John Wiley & Sons.
208 |
209 |
210 |
Hochuli, Jost. 2008. Detail in Typography. London: Hyphen.
211 |
212 |
213 |
Lupton, Ellen, edit. 2014. Type on Screen: A Critical Guide for Designers, Writers, Developers, and Students. New York: Princeton Architectural.
214 |
215 |
216 |
Santa Maria, Jason. 2014. On Web Typography. New York: A Book Apart.
217 |
218 |
219 |
Spiekermann, Erik. 2013. Stop Stealing Sheep and Find Out How Type Works, Third Edition. San Francisco: Adobe.
61 | 
69 | 
76 | 
84 | 
88 | 
96 | 
103 | 
124 |
125 |
126 | 
135 | 
147 | 
179 | 
189 |