Thelonious Monk: The Life and Times of an American Original

A thorough and compelling biography of Thelonious Monk, a genius of modern jazz. Monk’s music, is often misunderstood, has always been a fascinating matter. Fortunately Kelly knows his music well and brilliantly sheds the light on Monk’s signature styles such as his beautiful melodies, dissonant chords, and complex rhythms. For Monk’s life, which often seemed eccentric and erratic to the public, Kelly provides the charming and passionate side of the man through detailed research and interviews with the people who were closed to Monk, including his family members. For the man who used very few words and whose entire life dedicated to music, this book does do him justice.


Responsible Responsive Design

A companion to Ethan Marcotte’s Responsive Web Design, Scott Jehl’s Responsible Responsive Design is a required read for front-end developers who want to make the web more accessible and faster. Because of his expertise on web performance and his experience in working in places with limited access, Jehl explains clearly the important of delivering images, CSS and JavaScript without blocking the contents. Even though this one is brief, as with all the books from A Book Apart, Jehl was able to pack all the technical details you need to know to make a better, smoother user experience across networks and devices.


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)


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

Danh Việt – Chẳng Có Tình Ca

With Danh Việt’s debut, Chẳng Có Tình Ca, composer-producer Quốc Bảo gives the Vietnamese pop scene the middle finger. The title of the album is a hint that he’s fed the fuck up with the current trend: covering old standards to death or making reprehensible pop hits. I don’t blame him.

Make no mistakes. Quốc Bảo is a pop artist at heart. The different is that he makes pop records, not pop hits. The latter goes viral then swiftly disappears. He is not interested in making hits; therefore, he has carved out his own path and it’s working out well for him.

Chẳng Có Tình Ca features seven tracks. They are dead simple, melodic, but not too catchy or heady. Unlike most hits in the pop territory, which grab your attention immediately, they slowly but surely find their ways into your heart and soul the more you listen. Quốc Bảo has mastered the art of simplicity and he understands less is more. Although Danh Việt has a charming baritone and he could easily pour his heart out to ballads, Quốc Bảo demanded that he holds back his delivery for this record. Even on the darkest song, “B’s Blue,” he sings with effortlessness and leaves room for the intoxicating blues guitar solo. In “Đối Thoại Nửa Đêm,” a duet with Dạ Ngân, he kicks off the poignant lines: “Thu nối sang đông để gió / Xin mũi kim may vào lòng.” The conversation between the two sound like the relationship has turned sour rather than painful (like the needle poking through his soul).

Even on the more brighter numbers like “An” and “Em Mở Ra Tình Mới,” Danh Việt never sounded joyful. The former comes off lazy and the latter comes across appreciative. Opposite to “B’s Blue,” which is the longest and most painful track, “Em Mở Ra Tình Mới,” which is the shortest (only 1:41 minutes) and the most cheerful number, indicates that happiness could just be a brief moment. Despite its brevity, the tune reveals Quốc Bảo’s lyricism. His description of a woman is quite unorthodox and yet so beautiful: “Mùa hoa em nở giữa đông / rét thu vai buồn lắm thân / mà vẫn đẹp sao nàng hương u trầm.”

Going against the grain might be a lonesome direction, but Quốc Bảo has proved that he could make it work. His simple musical approach combined with his slightly eccentric lyricism make him one of the very few standout modern musicians in the overcrowded pop market. He deserves the recognitions as well as the paychecks.

Simplexpression Refreshed

I am pleased to introduce the new Simplexpression just in time for the holidays. The major change is the new workmark. The previous version set in all lowercase Goudy. While Goudy was an elegant choice, I opted for Raleway, which is a sans serif, for a clean, modern design. The sans serif is also a better choice to convey simplicity.

Although the previous layout was responsive, it was not a smooth transition from mobile to desktop. I was still learning responsive design at the time. The new design is much smoother. For the user experience, I want to make it as simple and pleasurable as possible. Check it out.


Spiekermann On Screen Type

Erik Spiekermann, Stop Stealing Sheep & Find Out How Type Works, Third Edition, (p.179):

[W]hen you pick a typeface for text in small sizes that is meant to be read on screen, remember Garamond. 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.

Võ Thiện Thanh & Trung Nguyên Lounge Music

With a double-set clocking in at 95 minutes of electronic music, Võ Thiện Thanh really wants you to chill the fuck out. The first album, Hòa Âm Của Đại Ngàn, is not only perfect for Trung Nguyên’s coffee shops, but also fantastic for high-end shopping malls. The exotic instrumental music, which includes drum loops, saxophone, trumpet, Fender Rhodes, electric bass, and several traditional instrumentations, will make the shoppers relax and forget about the price tag. Just shop until they drop. Through sound effects (“Chuông Gió” and “Mưa rừng”), fusion experimentations (“Bình Minh Trên Cao Nguyên”), vocal samplings (“Đêm Hội Cồng Chiêng”), Võ Thiện Thanh proved that he has mastered the art of lounging music. Whether in shopping malls or coffee shops, this album will calm your nerves and melt your soul.

The second album, Rừng Xưa Đã Khép, is much more intriguing. Võ Thiện Thanh takes Trịnh Công Sơn songs out of the intimate settings (thính phòng) and put them into the bars. It’s the impeccable vibe for happy hours, preferably with glasses of Martini. Highlights are the collaboration with Nguyên Thảo. Her sensational alto, accompanied by Võ Thiện Thanh’s serene arrangements, breathes soothing air to familiar songs like “Em Hãy Ngủ Đi,” “Phôi Pha,” “Hạ Trắng,” “Rồi Như Đá Ngây Ngô,” “Hành Hương Trên Đồi Cao,” “Cỏ Xót Xa Đưa,” “Rừng Xưa Đã Khép” and “Tình Xót Xa Vừa.” Although Trịnh’s compositions have been covered to death, Võ Thiện Thanh and Nguyên Thảo have managed to resuscitate them. This album might not be the most inventive reinterpretation of Trinh’s music, but it is definitely the most tranquilizing experimentation of his work yet.

HTML & CSS: Design and Build Websites

An absolute beginner’s book for designers who want to learn HTML & CSS. My design students prefer this book over Thomas Michaud’s Foundation of Web Design, which I recommended. While Jon Duckett’s clear writing and the pleasing visual layout make this book approachable, it lacks the HTML5 goodies and ARIA landmarks. Perhaps a second edition is needed to bring the materials up to date since it released three years ago.


Implementing Responsive Images

I have been avoided implementing responsive images for a while simply because most browsers aren’t support it yet. Furthermore, I am too lazy to cut up various versions of the same image. Nevertheless, I spent a few hours over the weekend reading and researching for the simplest solution to jazz up my portfolio. Since most of the works I am doing are responsive web design, I want to showcase some screenshots of the sites I have done. Wouldn’t it be nice to show visitors the mobile screenshot of they browse through my portfolio on smartphone, tablet screenshot if they use a tablet and desktop if they use a computer? So I cut up three different sizes for each site I want to showcase.

I read through a handful of articles on responsive images including Eric Portis’s “Responsive Images in Practice,” Jason Grigsby’s “Don’t use <picture> (most of the time)” and Yoav Weiss’s “Native Responsive Images.” Looking at Can I Use, SRCSET is only supported in Chrome and Opera. In order to get responsive images to work across browsers, I needed Picturefill. The deal-breaker for me with Picturefill is that it doesn’t work with the fallback SRC.

In the past few days, I have been thinking whether I should use it or not. Today, I decided to go forward with it since it is my personal site. I am now using native support for responsive image with the hope that it will work in the future when more browsers are implementing it. Check out the work.

Mobile HTML5

A solid reference of the latest features in HTML5 and CSS3. Weyl’s clear, approachable writing makes it easy to understand for beginners and practical for more advanced front-end developers. Good to have on hand for mobile web designers and developers.