VISUALGUI

Web Typography: A Brief History

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.

The First Web Site

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.

Type on Screen

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.

Image as Text

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.

Image Replacement Techniques

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.

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.

Web Fonts

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.

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.

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.

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.

Evaluating Types

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.

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)

Bibliography

  • Brown, Tim. “Universal Typography.” Lecture presented at the SmashingConf, New York, New York, June 18, 2014.
  • CERN. 1990. “World Wide Web.” Accessed October 27, 2014.
  • Franz, Laura. 2012. Typographic Web Design: How to Think Like a Typographer in HTML and CSS. West Sussex: John Wiley & Sons.
  • Hochuli, Jost. 2008. Detail in Typography. London: Hyphen.
  • Lupton, Ellen, edit. 2014. Type on Screen: A Critical Guide for Designers, Writers, Developers, and Students. New York: Princeton Architectural.
  • Santa Maria, Jason. 2014. On Web Typography. New York: A Book Apart.
  • Spiekermann, Erik. 2013. Stop Stealing Sheep and Find Out How Type Works, Third Edition. San Francisco: Adobe.
  • Typekit. 2010. “Bring Your Own Fonts to Typekit.” Accessed October 27, 2014.

Written for Graphic Design History class at George Mason University School of Art.

Designing With Miles

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.

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.

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.”

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.

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.

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.

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.”

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.

Written for Advanced Web Design class at George Mason University School of Art.

Sketches of Electric Miles

Miles in the Sky entered the brave new world of fusion. When Miles Davis went electric, he once again turned the jazz world up side down. He picked up new followers, but also alienated his old fans, especially those who loved the Acoustic Miles. I am a fan of Acoustic Miles, but a freak of Electric Miles. I simply can’t get enough of In a Silent Way‘s funk groove that seemed to go nowhere. Why would I want it to? Without chords, the mysterious melody revealed itself in a silent yet stimulating way.

I am not an alcoholic, but Bitches Brew is my go-to album after a few shots of Hennessy. I just kick back and let the surrealist, spacious rhythm takes me to another planet that is similar to James Cameron’s Avatar. When Miles solo, his soulful, spiritual sound brings me back to earth. The brilliant contrast makes Bitches Brew so far out, yet at the same time so close to your heart. What makes me come to Bitches Brew again and again is Miles’s ingenious use of space. The notes he left off were as essential as the notes he played. It is also true in A Tribute To Jack Johnson, in which Miles blew like a boxing champ (who only throws punches that would land on the right spots) over the hard, funk grooves.

In addition to studio, Miles also recorded live. Black Beauty, which taped at the Fillmore West, epitomized the aesthetics of electric Miles. Along with the live set at Isle of Wight, Black Beauty covered pieces from Bitches Brew such as the title track, “Miles Runs the Voodoo Down,” “Sanctuary” and “Spanish key,” but with much more intensity and ferocity that were attractive to rock fans.

Back in the studio, Miles recorded the challenging, fearless and most misunderstood masterpiece: On the Corner. At this point, Miles already hated the word jazz and referred to work as “social” music. On the Corner captured the street social sound through chopped-up rhythm, screeching saxophone and his own harsh trumpet. It is not an easy-to-digest work of art. As Philip Freeman puts it:

On the Corner is Miles Davis’s most difficult album. It’s like a tangle of thorns, coated in chrome and with 10,000 volts running through it. No matter how you approach it, you’re going to get a shock.

While Dark Magus funked-up groove runs like double doses of adrenaline rush, the funereal tempo on Get Up With It shows how madly Miles loved Duke and according to Greg Tate, “Beyond mourning Duke, the piece seems to suffer more from wanting to join him in the afterlife.”

By the time Miles recorded the phenomenal Agharta and Pangaea, his health problem caught up to him. As a result, he left it to the band and what we experienced from these two live set is the world’s wickest acid-funk ensemble at work. Again Greg Tate said it best:

The band’s cohesion amidst sonic chaos knows no parallel in fusion, funk, rock, or either the black or white avant garde. And while others may have achieved similar ends since, these furthermuckers (sic) were making it up night after night on the road, making new music every time they hit like they’d been possessed by whatever god or demon demands that black musicians push themselves all the way out there and then some.

After the music stopped, Miles succumbed. For five years, he didn’t pick up his horn and he substituted music with drug and women. He confessed:

Mostly during those four or five years that I was out of music, I just took a lot of cocaine (about $500 a day at one point) and fucked all the women I could get into my house…. Sex and drugs took the place that music had occupied in my life until then and I did both of them around the clock.

Miles strongest comeback was the electroacoustical, orchestral Aura. The classic materials were so miles ahead of their time that Columbia didn’t know how to market the album. Aura was not released until four years after it was recorded. By that time, Miles had left Columbia and moved on to Warner Bros. Tutu, debuted at the new label also marked the rebirth of the muted, mysterious and melancholy Miles.

Tutu was produced by bassist Marcus Miller. The tracks were pre-recorded. Miles just had to do his part. Unlike the Miles-Evans collaboration, in which Evans wrapped his orchestration around Miles’s trumpet, the Miles-Miller collaboration required Miles to work his way around the programmed production. The result was that Miles proved that he was the virtuoso of flow. He knew when to fall behind the beat and when to stayed on top. He knew when to cut through the melody and when to stay out of the way. Just the way he flows makes this album a must listen. And that concluded my Sketches of Miles.

Sketches of Acoustic Miles

Miles Davis hooked me into jazz and then pushed me beyond jazz. Miles’s ever-changing direction disoriented me when I first learned about his music. At the time, I was not paying attention to the release date of his albums. I just listened to whatever records I could get my hand on. I love Kind of Blue and admire the Spanish tone on Sketches of Spain. I like the spacious sound on Bitches Brew even though I didn’t get it. Then the Indian flavor of On the Corner and the dated programming on Tutu lost me. As a hip-hop fan, I couldn’t take the lyrics on Doo-Bop seriously. At that point, Miles was all over the map for me, but I always loved the way he played no matter where he was heading. His choices of notes and phrasings were thoughtful and meaningful. He understood that the notes he left out were as essential as the notes he played.

My appreciation for Miles escalated after I bought The Complete Columbia Album Collection. The day the box set arrived on my front door, I ate, worked, drived and slept with Miles’s music for two months straight. My goal was to get through at least one album a day. I even started the Sketches of Miles project to experiment with web design techniques and to jot down my thoughts on the albums I love. For each album I selected, I reuse its cover art and play with typography to convey my message. Listen to his albums in chronological order allow to me see both the progression he made as well as the road he took to refine and reinvent his music.

From the start, Miles was determined to take music on his own path. At eighteen, Miles had the opportunity to play with Charlie Parker, the father of bebop and the alto saxophone virtuoso, but the high and fast style of playing didn’t impressed him. Burnt out by the hot temper of bebop, Miles Davis gave birth to the cool. By slowing down the tempo, Miles could focus more on the lyricism in his phrasings.

Miles made a breakthrough and signed onto the Columbia roster after The Prince of Darkness cast his haunted, muted spell ’Round About Midnight. At Columbia Miles met and collaborated with the master of orchestration, Gil Evans, on three classics: Miles Ahead, Porgy and Bess and Sketches of Spain.

Milestones entered the world of modal jazz and prepared for the laid-back and relaxing Kind of Blue that eases its way into the heart and soul of millions. I can listen to Kind of Blue in whatever mood I am in. The power of the album is in its ability to blend itself into whatever state of mind I was in at the time. Kind of Blue also featured one of the finest sextets in the world with John Coltrane and Cannonball Adderley on saxophones, Bill Evans on piano, Paul Chambers on bass and Jimmy Cobb on drums.

The group fell apart not too long after Kind of Blue. Miles missed Coltrane because the saxophonist’s sheets of sound was a perfect complement to Mile’s economical trumpet. Someday My Prince Will Come is a great illustration. In contrast to Mile’s slow-burning, trapped tone, Coltrane blazed lines of fire. In trying to rebuild his band with not much success, Miles went into depression. He expressed, “[T]he music wasn’t happening and that was fucking me up.”

Indeed Miles remained unproductive until he formed his new quintet. When the young drummers Tony Williams, bassist Ron Carter and pianist Herbie Hancock joined him in the studio to record Seven Steps to Heaven, Miles was excited again because he “knew right away that this was going to be a motherfucker of a group.” When Wayne Shorter came on board, Miles headed toward a new direction starting with E.S.P.. Miles Smiles made a strong case for the post bop movement, but then Nefertiti marked the last great acoustic Miles.

The Duke of Jazz

The name Duke Ellington is ubiquitous in the jazz world. He was a great bandleader, skillful composer, meticulous arranger, and extraordinary pianist. Throughout his career, which expanded over fifty years, he constantly pushed his music to a higher level. Although he never changed his styles to fit in with the new trends, Ellington had always experimented and adapted new techniques to enrich his art. From his mastery of applying the twelve-bar blues into big band, his ability to get the sounds he wants from his musicians, his inventive “Ellington effect,” his creative call-and-response method, to his interest in mood and tonality, Ellington’s compositions are not only rich in sound, but also broad in range.

One of Ellington’s special techniques is the incorporating of the twelve-bar blues into his big band’s repertoire. “Creole Love Call” demonstrates his rich compositional style as well as his perfect timing—he needed to stay within the three minutes timeframe in order to fit in one side of the 78rpm record. In the first chorus, Adelaide Hall’s horn-like scat fuses naturally into the sweet sounds of the clarinets. At 0:30 seconds into the song, Bubber Miley’s growl trumpet takes over the second chorus with a big, hypnotizing solo. At 1:00, the third chorus kicks in with Ruby Jackson’s sensuous clarinet, and then the next two choruses (1:30-2:30) take off by the high-register reed section. Hall’s wordless singing comes back at the last chorus closes out the piece.

Another classic piece that structured on the twelve-bar blues is “Happy-Go-Lucky Local,” which takes up both sides of the 87rmp record. The arrangement proves Ellington’s talent as a bandleader who could find the sounds he wanted from his musicians. From the whistle blows to the escaping-steam sounds, his players bring the train’s atmosphere right to our ears. The experience is stunning; especially the way Oscar Pettiford’s bass resembles the motion of the train, and how Cat Anderson makes his trumpet screams to create a fascinating brake sound. Other train-liked composition that is filled with Ellington effects is “Daybreak Express.” The introduction’s crescendo and accelerando warn us that we’re about to enter a fast and powerful ride. Once the train takes off, the up-tempo rhythm captures the speed of the train, which travels about a hundred miles per minute. The best part of “Daybreak Express” is how the various train’s noises come together to produce such a lively harmony. Ellington knows what kind of sounds his men can give him; therefore, he tailors his music to a particular player, and he knows when to leave room for that musician to improvise. As a result, his compositions are affected whenever his personnel changes occurred. As a skillful big bandleader, however, Ellington always finds suitable replacements. For instance, when James “Bubber” Miley was struck by a bullet at a bar, he was replaced by Cootie Williams who is well known for his distinctive muted trumpet sound. His growl technique, which could be heard at the bridge in “Ring Dem Bells,” is breathtaking. Williams is not only a great horn player, but also a wonderful scat singer with a clear and playful timbre. The teasing, which occurs right before Williams’s two-part solos in “Ring Dem Bell” between Johnny Hodges’s alto saxophone and William’s vocals, creates a fantastic musical interaction.

The call-and-response method between the instruments and the voices is one of Ellington’s specializations. In “Hot and Bothered,” James “Bubber” Miley’s trumpet and Baby Cox’s vocals scream musical notes at each other. The alto saxophone also carries on a musical conversation with the reeds in the last chorus. In “It Don’t Mean a Thing (If It Ain’t Got That Swing),” the trumpet phrases like a human voice complementing Ivie Anderson’s vocals. So when she sings, “It don’t mean a thing / if it ain’t got that swing, “the trumpet would finish her sentence with “doo wah, doo wah.” On first listening, I thought the male vocalist was doing the back up, not the horn.

Ellington’s interest in tone color makes him an astonishing composer with an oceanic imagination. In “Mood Indigo,” he paints a quiet picture with calming and soothing melody. The relaxed solos from Barney Bigard’s clarinet and Arthur Whetsol’s trumpet add gorgeous colors to the muted palette. In contrast to the dreamy tempo in “Mood Indigo,” “Harlem Air Shaft” captures the city vibes, in which Ellington describes, “You get the full essence of Harlem of Harlem in an air shaft. You hear fights, you smell dinner, you hear people making love, you hear the intimate gossip floating down… Jitterbugs are jumping up and down, always all over you, never below you. That’s a funny thing about jitterbugs. They’re always above you. I tried to put all that into ‘Harlem Air Shaft…'” (Davies 203). The amazing part is that Ellington and his musicians created this lively scene within three minutes. Ellington lays down the melody in the introduction; Williams’s ingenious trumpet solo takes charge in the second chorus. On third, Bigard’s clarinet bounces off the trombone section creating an engaging tune. The last chorus is even livelier with the whole band joints together to reach the climax and close out the composition. Another exhilarating piece that demonstrates Ellington’s artistic vision is “The Clothed Woman.” His intricate piano playing draws an image of a classy woman. The introduction is beautifully executed with touches of piano’s “shout,” which reflects the ragtime style. This piece showcases not only his composing skills, but also his unorthodox arrangement.

This short essay focuses only a few of his massive masterpieces. There is so much more to Ellington’s work to be studied and absorbed. With half a century of playing, writing, and refining, Ellington continued to excel and pushed his art to the limit. With the number of impressive works under his credit, Duke Ellington was one of the most significant jazz figures in the twentieth century.

Work Cited: Davis, Peter. Hear Me Talkin’ to Ya, ed London: Hentoff and Shapiro, 1955.

(Written for Jazz History Class)