In an intriguing design experiment, Christina Beard set out to study the creative approach from 23 respected designers, thinkers and educators including Steven Heller, Ellen Lupton, Stefan Sagmeister, and Paula Scher. Beard began her journey with a poster design to communicate a simple but important message: “Wash Your Hands.” Then she interviewed each designer to see how the individual would approach the design. She then redesigned the poster based on each critique. I have to give Beard the credits for staying sane after redesigning the poster 25 times in a wide range of art directions. After three iterations, I would used a typographic approach with the message, “Please wash your fucking hands,” and called it the day.

The final project for Web Design & Usability required students to design and code their own portfolio site. The goals were to learn HTML, CSS and responsive design. The final site needed to be fully functional across multiple devices. Minimum deliverables should include a homepage, an about page, and a portfolio section with at least four projects to showcase.

To help students put together their portfolio site, I gathered the following questions:

1. What’s the purpose of your portfolio? (Get hired, showcase your work, get freelance projects, get to know you, gain reputation, communicate)
2. Who is your portfolio for and who is not for?
3. What type of work would you like to focus on?
4. Does your portfolio showcase the type of work you want to do?
5. Does your work present design as a problem-solving methodology?
6. Does your work reflect strategic thinking regarding the chosen subject?
7. Does your work demonstrate high level of typographic execution?
8. Does your work tell a story?

With this project, the concentration is on coding. We zipped through the mockups and jumped right into the coding. I planned out plenty of studio time for students to work on in class. Because I had 19 students, I allowed them to work on their own if they felt comfortable with the codes. That way those students needed help could come to class so I could work one on one with them. In the last few weeks, we stayed until 11pm (an hour over the regular class time) to code. I was glad that they were passionate about the project.

Start simple was the key element that I kept reminding students. They needed to create clean HTML5 markups with ARIA roles and clear CSS. Once they get the basics, they could add JavaScript or more fancy interactivity. Some students started out with frameworks and jQuery. Once they were stuck on something and weren’t able to customize the codes to get what they wanted, they had to start over from scratch. Doing so taught them the important lesson of progressive enhancement.

At the end, many students didn’t get as far as I would like them to be, but they managed to create fully responsive functional web site for their portfolio. My hope is that they could take what they have learned in class and continue to improve their project.

Here are some of the students’ sites available online:

• Carly Peak
• Ogo Batzorgig
• BeBe Ragsdale
• Neha Sohail

Neha’s project was different from the rest of the students. She is more advanced in front-end development. Since she already had a portfolio and didn’t to redo it for the class, I suggested that she put together a site that showcase all of the students’ site. I gave the complete freedom to develop the site. She ended up using way too much JavaScript and jQuery for a simple page, but she was able to apply some nice interactivity.

Final Thought

Teaching this course had been a learning experience for me. There are things that I can improve. Even though I detest quizzes and exams myself, I should have incorporate them into the course to make sure that the students read the book and understand the codes. I could spend more time doing workshops and demos to help them learn. The first two projects, which focused on design and usability, went quite well. The third project, which included coding, were stressful. If given opportunity, I will teach again.

This is not just another biography of Charlie Parker. Stanley Crouch brilliantly weaved the vibrant scene of Kansas City into Bird’s childhood. Spent over three decades and interviewed the people closest to Parker including his first love Rebecca Ruffin, Crouch has meticulously crafted one of the most fascinating and innovating biographical books I have read. I found myself doting almost every sentence on every page. The book, 334-page long, ends when Bird had not even met his partner in crime Dizzy Gillespie. I can’t wait to read what Crouch has to pen (in the second volume) when Bird set the jazz scene on fire.

My little boy turned three last Saturday. Because his birthday falls into the Thanksgiving weekend, we didn’t invite friends or extended family. We just had a low key party for him with both grandmas, his aunt, uncle, cousin and of course the three of us.

The best thing about turning three is that the terrible two is going away. Two was rough. Three is a bit better. We can communicate more. Đán is actually very expressive. He picks up words very fast. Although he doesn’t speak much Vietnamese, he understands everything we say to him.

Despite being strict on him, Đán is still very attach to me. Sometimes I felt horrible for being that way with him repeatedly, but he seems to understand now. I rather be hard on for a short time than letting him spoiled. I have learned that lesson from Đạo. In the past few weeks, Đán’s behavior is getting better. As a result, our time together is much more enjoyable. Let’s improve this aspect.

The number of books I have read each year:

• 2024: 62
• 2023: 92
• 2022: 47
• 2021: 45
• 2020: 57
• 2019: 72
• 2018: 92
• 2017: 90
• 2016: 50
• 2015: 56
• 2014: 70
• 2013: 30
• 2012: 10
• 2011: 21
• 2010: 10
• 2009: 9
• 2008: 8
• 2007: 22
• 2006: 40
• 2005: 22
• 2004: 20

Book Collections

• A Book Apart
• Design
• Fiction
• Music
• Special Interests
• Technical
• Typography
• Việt Ngữ
• Writing
• Wish List

This book gives me a Flash-back. I discovered Flash around 2008 and spent endless amount of time and energy learning all types of animated techniques. I also wasted a tremendous amount of time sitting and waiting for each Flash site to load over my dialup connection. Those were the days. Like many designers, Flash lost me when it became a complex programing language. I shifted my focus on web standards, but I could never imagine Flash would be dead so soon.

Seeing a book writing about the history of Flash, I couldn’t help picking it up. I am a bit disappointed that Anastasia Salter and John Murray focus mostly on Flash games. They didn’t mention early groundbreaking sites like Balthaser, Eye4U, and Once Upon a Forest or new masters of Flash like Joshua Davis, Yugo Nakamura, and Eric Jordan (just to name a few).

Flash under Macromedia was thriving. The community was strong, passionate, and sharing. If Adobe didn’t acquire Macromedia, I wonderful if Flash would have fallen as fast as it has under Adobe. If Adobe got into the browser game like Google, would it able to save Flash? In any rate, Flash definitely had its moment. As the book suggested, Flash’s influence and legacy will live on and I would love to see Flash resurrected, but the future of Flash is not too bright at all.

It’s a no brainer that Jon Duckett follows up his beautiful, successful HTML & CSS with JavaScript & jQuery. As with the previous book, this one is for beginners. Pleasing design, clear writing, and comprehensive coverage make it an excellent reference. A must-have for web designers who want to add interactivity to their site.

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.

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.

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.