On Digital Design and Web Typography

Back in February, Jim Van Meer interviewed me for his MFA thesis in graphic design. In his opening statement, Jim writes:

I am interviewing subject matter experts in a variety of fields that either touch upon design or that design touches upon. The premise of my thesis is that the graphic design profession has changed drastically over the past 30 years, and that modern day (and future) graphic designers no longer concentrate solely on combining typography, images, and composition to produce a result. My argument is that graphic design is a misnomer for what a designer accomplishes, what they must know, and how they need to be considered by society and the business community. I contend that huge waves of technological and social change around the world have changed the way we must approach the design profession, and that New Design (the term I have concocted for what I am seeing) is the pathway for multi-disciplined individuals to pursue. My thesis is not an argument for or against new media or new methodologies. Rather, it is a multi-pronged question I seek to prove or disprove—if the New Designer is a hybrid of multiple avocations and is at the foundation of education, business, and technical and social change, where did the profession evolve from and what changed, where is the profession now, where is it going, and how can it get there successfully?

In the interview, Jim asked me questions about digital design and web typography. Since then his topic has changed, but he has allowed me to post our interview here.

As the web has matured, so has web typography. Do you find that the current state of web typography is lacking in any respects, and if so, what might they be?

Even though the web has been around for almost thirty years, typography on the web only takes off in the past six or seven years. In the current state of web typography, the support for OpenType features such as ligatures, kerning, and contextual alternates has not been fully implemented in all the major browsers. In addition, font files need better optimization to support languages beyond Latin and better mechanism to delivery multiple weights and styles.

Do you believe that web-based typography should emulate print typography? If yes, why? If not, why is that?

Yes and no. The foundation of typography such as legibility, readability, and combining typefaces has been tested and researched for many centuries; therefore, web-based typography should emulate print in those regards. In contrast, the control of typography in print should not emulate on the web. With the increase of digital devices coming into the market, designers have no control of screen sizes; therefore, they need to let go of the notion that their design and typography can be controlled. The need to embrace the fluidity of the web instead.

What are the top ten items web designers and developers need to be aware of in regards to web typography. Please explain each point.

  1. Performance: Designers must make performance their top priority. Only use fonts they need. Start with roman and italic. Add a bold weight, but maybe not a bold italic if they are not going to use it. The fewer fonts they use, the faster the site will load. The challenge is to strike the balance between the number of font styles and performance.
  2. Context: Understanding the context, in which the designers will set the text in, is an important consideration. The type they selected needs to work naturally with their design and content. To provide a consistent reading experience, designers need to choose a typeface that could work well in different contexts and devices.
  3. Comfortable measure for reading: When setting body copy, designers need to consider readability. Long lines of text make scanning more difficult. Readers’ eyes have to travel far to reach the end of the line. As a result, they may have trouble locating the start of the next line.
  4. X-height: Generous x-height tends to read better on screen. The ideal lowercase letters should be just tall enough to be harmonious with their uppercase partners.
  5. Open Apertures: The opening gaps found in certain letters such as c, e, and s, aid readers to decipher the letters. For legibility, designers need to pay attention to the letter’s apertures and counters.
  6. Even Spacing: Well-designed typefaces for the web should have even letter-spacing to establish a steady rhythm for reading. Even spacing speeds up the reading process. Readers can pick out the shapes quicker if the spacing is well balanced.
  7. Clear Terminals: In long-form text, letters with clear terminals (distinguishable shapes of ball, beak, or teardrop) are easier to spot; therefore, they are more readable than letters with lacking terminals.
  8. Distinguishable Ascenders and Descenders: Ascenders refer to the strokes that extend above the mean line and descenders refer to the strokes that extend below the baseline. The more distinguishable the ascenders and descenders are, the more legible the letters.
  9. Contrast: Referring to the thick and thin strokes of a letter, typefaces with high contrast like Didot and Bodoni work well at larger sizes but not for running text. Geometric typefaces like Arial and Helvetica can also result in a similar poor reading experience, as they have very little contrast. The uniform letter shapes in these fonts make long-form reading dull and tiresome. For reading text, choose typefaces with medium to low contrast.
  10. Embrace FOUT: Flash of unstyled text (FOUT) refers to the method of displaying fallback fonts first them switching to custom fonts once the assets are loaded. Although FOUT could be glaring, it allows users to read the text immediately. Designers need to embrace FOUT and make the experience less jarring by matching the fallback fonts with the custom fonts as closely as they can.

What do you think the future holds for web typography in general, and web typography in responsive design specifically? What do designers need to be aware of? Please explain.

Web typography will continue to get better support in browsers. Designers should keep themselves up-to-date with CSS, particular the rules that apply to fonts. Sites like stateofwebtype.com, caniuse.com and the CSS reference on MDN are great resources to stay current with web typography.

What are your views on CSS3 and how much knowledge of it do designers need to function at an acceptable level in the digital design workplace? Please explain.

CSS is a powerful tool for design and it is simple and easy to learn. With enough knowledge of CSS, designers can create and revise their websites quicker than tools like Photoshop and Sketch. Designing a website using HTML and CSS feels much more natural than creating mockups in Photoshop or Sketch, especially with responsive design. Designers need to learn as much CSS as they can to function in the digital design space.

Should designers know how to code, and if so, how much knowledge of code do they need to have? Please explain why.

Yes, designers must know how to code. They must be proficient in HTML and CSS to communicate and collaborate with front-end developers. In addition, knowing possibilities and limitations of what the browsers can do help designers make wise decisions in their design. Without coding knowledge, designers can waste everyone’s time designing something that is not implementable.

There is a school of thought that designers do not need to know how to code, that the coding should be left up to the developers. That same school of thought goes on to posit that designers need to be aware of code and comprehend what it can do so they can build better designs. Do you agree or disagree, and why?

I don’t disagree; however, I am the type of designer who likes to create the entire website from start to finish. When designers work with a team, they can leave the coding to the developer. When they do their own work; however, they should be able to code themselves. Jessica Hische is a good model. She is a killer letterer, but she can also code her own site.

Some organizations have separate design and development functions. Do you believe those separate functions should overlap in any sense, and if so, where do you see the optimal intersection of design and development?

Yes, design and development should overlap. If designers can understand HTML and CSS and developers understand a few things about design and typography, their collaboration would be more integrated and fruitful. They would have a better respect for each other’s expertise and experience.

Some digital designers and developers have offered that every website looks the same, and that creativity has been lost in the process. What are your views on this? Do you blame anyone or anything for this supposed templatization of the web? Please explain.

The rise of frameworks are causing designers and developers to put their designs into templates rather than creating unique experiences. Because of their ease of use, frameworks have become a clutch for designers and developers. Instead of creating a grid system to support their designs, designers and developers use the grids that have already been created for them. As a result, most sites look the same because they all using the same grid system for different projects.

What are your thoughts on HTML/next (HTML6) and CSS4? What new things do you see in web design and development that designers need to prepare for now?

The beauty of HTML and CSS is not where they are heading in the future, but how well they last. For example, the first website created 25 years ago still work today. Once the designers understand the basics of HTML and CSS, they can use them forever.

What do you believe is the next big thing in web design and/or Responsive Design? Why? Where should we be looking for new ideas and solutions? Please explain.

I don’t know the next big thing about web design and responsive design, but I hope that we will be moving away from the templatization of web design and development. We need to create more unique and compelling experiences on the web.

No one knows what the future will bring, but please share your thoughts on what you think will happen in the fields of contextual design and experiential design. Cite examples if you are able.

I think we will see better use of type in web design. With better support for SVG and CSS Shapes, we will see better online editorial design. I also hope that designers and developers will break free from the spell of templatization.

If you’d like to make additional comments please provide them here.

The best way to learn about typography is to read books on the subject. The best way to learn about web typography is to build websites.

Vietnamese Typography: An Interview with Donny Truong

The market for type is growing. But there’s a lot we need to learn about supporting languages outside North America and Europe. TypeThursday with typographer Donny Truong on the lack of support for Vietnamese in typefaces and how we can improve the situation.

TypeThursday: The precision and clarify of your points are really visible on Vietnamese Typography. I get the impression you ran into frustrations in your life that would novitiate you to make such a resource.

Is that a fair assessment?

Donny Truong: Yes, that is a fair assessment. As a designer with a passion for typography and a love for my native language, I am frustrated with the lack of type choices for setting text in Vietnamese. As you already know, Vietnamese is based on the Latin alphabet. I am not 100% certain, but as far as I can tell, Vietnamese probably the only Eastern language that is not written in ideographs. So Vietnamese has been Romanized and most of its letters are the same as the Latin, how come most typefaces do not support its characters? That’s the question that motivated me to make the resource for Vietnamese Typography.

TT: What sparked this interest in typography? Was there a particular moment that you remember?

DT: Wow, your question gives me nostalgia. You know, I started building websites for a living in the early 2000s. At the time, I either set the text in Helvetica or Georgia and then moved to other things like web standards, images, colors, and user interactions. But because I was working at Vassar College at the time, I was fortunate to be surrounded by typographic experts, particularly Tim Brown who is now working at Typekit. Tim used to raved about The Elements of Typographic Style, but the book was way over my head. I was always interested in typography, but I did not delve deep into it until about three years ago when I started my job at the George Mason University School of Law.

I still remember a particular moment when I stood in front of the vast collection of typographic books in the Mason library. It felt like I founded a treasure. I started to read as much as I could and soaked up as I possibly could. Although most of the books I read were for print, I applied many of the principles for the web and they served me well. As for the The Elements of Typographic Style, I think I read it six or seven times now and I always find something intriguing every time I read it.

TT: A lot of people have a hard time with Elements of Typographic Style! Especially at the beginning of their interest in typography. What changed in your typographic knowledge between taking the course with Tim Brown and being at George Mason University?

DT: To clarify: I worked with Tim, but never took a course with him. I wish I did. Reading the rich history of type and its vibrant transformation in the last 500 years completely changed my typographic knowledge. In addition to Robert Bringhurst, I owe my knowledge to writers like Alexander Lawson for his classic Anatomy of a Typeface, Erik Spiekermann for his enlightening Stop Stealing Sheep & Find Out How Type Works, Sofie Beier whose book Reading Letters taught me about legibility and readability, Karen Chang for her amazing details in Designing Type, Jost Hochuli for his concise yet rich Detail in Typography. I could go on and on, but if anyone is interested in typographic books, I have a long list on my web site. Come check them out.

TT: What is the most common mistake made by typeface designers in developing support for Vietnamese?

DT: One of the common mistakes I had seen so far is not making diacritical marks part of the font family. What I mean is that the marks are often way smaller than the base letters, especially the ones with the combined diacritics. For example, when a modified letter is combined with a tone mark, an acute, a grave, or a hook above gets so small that it becomes illegible at small size. The angle of the accents, especially on uppercase letters, get lower to avoid leading issues, but also ended up affecting legibility. There are some design challenges when adding Vietnamese support, but they can be resolved.

I have tremendous respect for Robert Slimbach and the Adobe Type Team for always making Vietnamese support part of their priorities. Most of the typefaces from Adobe are equipped with Vietnamese right from the start.

TT: Unicode support of Vietnamese has existed since 2001. Now in 2015, you’ve written in Vietnamese Typography, a dearth of typefaces that cover the needed character sets. Why the delay? Do you hope your site will help advocate more support for Vietnamese?

DT: I had this project in my mind for a while, but I thought that there has to be some kind of resources out there on Vietnamese typography. To my dismay, I could not find anything. So when it was time to do research for my thesis for my MA in Graphic Design at George Mason University School of Art, I knew I had to tackle this challenge.

For the second part of your question, it is my goal to help advocate more support for Vietnamese. If you look at Typekit, there’s only about 20 out of thousands of typefaces have support for Vietnamese. Google Fonts has only a handful out of hundreds. Last year I attended the Typographics conference in New York and asked Jonathan Hoefler if any of his typefaces support Vietnamese and his answer was none.

Since the day I launched vietnamesetypography.com, a few type designers had reached to me and they had shown interest in making Vietnamese support for their existing typefaces. I am more than happy to help out or review their fonts.

TT: Would it be fair to summarize your dismay about the lack of support of Vietnamese is because of the limited range of typographic expression currently possible?

DT: Yes, that is correct. If you look at online publications written in Vietnamese, most of the texts are still set in default system fonts. Last year, I noticed some Vietnamese articles posted on Medium. At that time, Medium didn’t even have support for Vietnamese characters; therefore, the text looked pretty funky. Their custom typefaces didn’t have the proper Vietnamese subsetting. As a result, the browsers just picked up whatever system fonts that have diacritical marks and combined the two. Imagine the base letters set in Goudy, but all the critical marks set in Georgia or Times New Roman.

As far as the limited range of typographic expression in Vietnamese, it also has to do with the lack of awareness from the Vietnamese people. I don’t think they pay much attention to typography. As long as they can read the text, they are not concerned if the type is good or the diacritics are legible. In my research, I found inconsistencies in the position of the tone marks when combined with the modified letters, but they don’t seem to bother Vietnamese readers. Furthermore, it might be a cultural thing. You can find tons of Vietnamese doctors and engineers, but not much in the creative profession. I could only track down one type designer for my book. So, in addition to reach out to type designers with my project, I want to raise awareness of typography in the Vietnamese community. On one hand, I want to help type designers make typefaces with Vietnamese support. On the other hand, I hope to get the conversation started on Vietnamese typography.

TT: That’s an ambitious mission! I love it. How can TypeThursday readers help you with Vietnamese Typography’s mission?

DT: Yes, it is an ambitious mission, and this is just the beginning. I have been receiving valuable feedback from type designers; therefore, I am planning on expanding it in the future. My goal is to get it out there and see if people are interested in it. They have responded.

TypeThursday readers can help me out by reading it, sending me their thoughts on how I can improve it, and sharing it to type designers. And thank you, Thomas, for giving me the opportunity to talk about Vietnamese Typography. It will definitely help getting the word out.

Want to help Vietnamese Typography’s mission? Check out the site and share it on social media.

This interview is originally posted on Medium.

Jazzy vs. Donny

Below is an informal conversation with Jazzy Da Lam by yours truly. At first, I wanted to do a formal Q&A, but Jazzy is such an easygoing individual that I decided to throw all that out the window, and just have a normal interaction with her. As you can see, I have never done this before, but (thankfully) Jazzy has made it painless and enjoyable for me. Since this site gears toward English readers, I have translated the dialogue into English with Jazzy’s help. Hope you enjoy this special exchange that can only be found at Visualgui.com.

Jazzy: Hi Donny
Donny: Hi Jazzy, I have not prepared anything.
Jazzy: We can wait till you’re ready… then we can chat. [Giggles]
Donny: Let me listen to your album [Moon & You] more carefully first.
Jazzy: Uh oh… Listen carefully for more criticisms, hihihi…
Donny: Hahaha… Are you mocking me?
Jazzy: Mocking, no. Shaking, yes.
Donny: You’re living in Germany?
Jazzy: Yea.. Munich, Germany.
Donny: You know German?
Jazzy: Yes! But not that good.
Jazzy: Would you like me to sing in German for you? [Laugh]
Donny: I would love to hear it, but wouldn’t understand a thing.
Donny: How about English? You sing English pretty good.
Jazzy: Many said that I sing English not too clear, but some like it and very supportive (they probably trying to make me feel good… by encouraging me), but I did my best… There are always two sides of things, praises and criticisms… I understand the ones that praise me are encouraging me, and the ones that criticize would like me to work harder; therefore, I appreciate both positive and negative feedbacks.
Donny: You sound pretty clear to me.
Jazzy: oh… thanks Donny.
Donny: I have listened to quite a few Vietnamese singers sing in English, but their pronunciations are way off. Did someone train you in English or you’ve trained yourself?
Jazzy: Oh I have asked several friends both Viet and American to hear how I sound. Overall the reaction is good. They said I have an accent, but that’s not important because sometimes the accent makes the song more exotic (That’s what they said).
Donny: Yes! Definitely.
Jazzy: American friends don’t expect me to sing like an American; therefore, they love it [when I sing in English]. And so… I don’t learn anything from them… I have to listen to CDs to learn on my own.
Donny: Your accent sounds really cute. I am not saying that to make you feel good either.
Jazzy: Ok ok… No more shy… I can now lift my nose up, huh? [laugh]
Donny: How did you come up with “Jazzy?”
Jazzy: Online friends came up with that name for me.
Donny: Although your name suggests jazz, your debut is consisted of jazz, blues, funk, pop and classic. Which one is your style?
Jazzy: That’s my style, everything. A little pop mixed into jazz, funk, blues…
Donny: Then you need to change your name to Jazzymixy? [Laugh]
Jazzy: hahahaha… yea
Jazzy: As a child I learned classic piano. Love Chopin, Bach and Debusy… Therefore, they influence my music.
Donny: And now, piano jazz?
Jazzy: Yes.
Donny: Who is your favorite jazz pianist?
Jazzy: Oh, many. At the beginning, I listened to Oscar Peterson. Then Bill Evans and Keith Karrett were my heros. And now I have paid more attention to Michel Camilo & Rubalcaba Gonzales.
Donny: How about Thelonious Monk?
Jazzy: I like to listen to him, but can’t play like him.
Donny: Why not? Too choppy?
Jazzy: My hands are too small. Playing like him is impossible. [Laugh]
Donny: I love him and Duke too.
Jazzy: I have a live DVD concert of Monk… just amazing!
Jazzy: Duke’s arrangements are wicked too.
Donny: How is your album doing in Vietnam?
Jazzy: It sold more than 1,000 copies in the first two weeks.
Donny: Congrats!
Jazzy: thx
Donny: I think my review has something to do with it. [Sniff Sniff]
Jazzy: hihihi… sure.
Donny: Just kidding. I am not that arrogant. [Laugh]
Jazzy: We have something in common [Giggles]
Donny: Absolutely [Giggles]
Donny: Speaking of my review, I did mention the scats at the end of “Khuc Dem.” Have you thought of scats for the whole song like Ella Fitzgerald?
Jazzy: Ohh, I used to perform “Shadow of Your Smile” with bossa feeling, and I have to scat 2-3 choruses. But this CD is for Vietnamese listeners, and it’s also my debut… I would like to keep it calm and quiet.
Donny: You mean not to make too much impression?
Jazzy: Yes. Something like that.
Donny: Hmm… Very humble!
Jazzy: Hehehe… humble?… Yeah! I am being “humbled” just to trick you. [Laugh]
Donny: Speaking of calmness, you’re a mellow person huh?
Jazzy: I think I am, but the person opposite from me might not think so.
Donny: Oh yeah, who is that “opposite” person?
Jazzy: You…[Laugh]
Donny: Yeah…sure [Laugh]
Donny: I am a mellow guy too. That’s why I appreciate “Vat Trang.”
Jazzy: You like “Vat Trang?” Can you give me a reason?
Donny: I didn’t get it at first, but once I am on the road at night, “Vat Trang” comes to life. It’s like Serenade.
Jazzy: Serenade is a form of Nocturne (a night song), and “Vat Trang” is like that. Or “Mau Dem,” “Dao Khuc,” Vong Dem,” Khuc Dem, “Trang & Em.” They all pitch black. [Laugh]
Jazzy: You like “Mau Dem” the best right? Why?
Donny: Didn’t I give a reason in my review? Just kidding. I like the tranquility, the quietness, the calmness, the urge to sooth, and your nightingale-like voice near the end.
Jazzy: [Blushing]
Donny: Are you touring now?
Jazzy: Yes. I am on the road with my funk band in Austria and Italy. In Munich, I am in a group called The Tulips – an Acapella Gospel Choir.
Donny: When will you be in the US to show us some love? [Wink]
Jazzy: I would love to have an opportunity to perform for the US audience, but my schedule is not working out this year. Hopefully next year.
Donny: What are your plans in the future?
Jazzy: I have many upcoming projects. One of them is an album in which I will perform my favorite jazz standards and another one with new materials including instrumental compositions I have written.
Donny: Sound very exciting. I am looking forward to both. Thanks for your time and good luck.

Interview with Donny Truong of Visualgui.com

My interview with Michael Nguyễn from Tiếng Magazine.

We are conducting a series of interviews with some of the Vietnamese Americans behind successful websites. First up is Donny Truong of Visualgui.com.

Donny Truong runs the popular Vietnamese American blog – Visualgui.com. We caught up with him to chat about running a website, the design business, and blogs.

TM: Thanks for taking the time to talk with us Donny. Can you tell us a bit about yourself? What is your background?

I was born in My Tho, Vietnam and came to the US 12 years ago. I am currently a web designer at Vassar College in Poughkeepsie, NY. I am also running a personal website (visualgui.com) and a tribute site to a talented Vietnamese singer Ngoc Lan (iLoveNgocLan.com) with a couple of dedicated fans. I love design and it is probably the only thing I am good at.

TM: Your site Visualgui was rated best Vietnamese blog by a couple sites. What do you think goes into creating a successful blog?

Oh really? I am not even aware of it. From a designer perspective, a successful blog must be attractive, accessible, and easy to use. Obviously, content is still the heart and soul of the blog. I write regularly and I choose topics that interested me. For example, Vietnamese food, Vietnamese music, hip hop music, design books, and inspiration.

TM: Has your Vietnamese background influenced the way you design websites?

Good question. I don’t think my background influenced my design but Vietnamese music has inspired my work. For example, the motion piece I created called “Một Chút Quà Cho Quê Hương” was inspired by Việt Dũng’s emotional lyrics and Ngọc Lan’s remarkable performance.

TM: Could you describe the Vietnamese American community (if there is one) over on the east coast? Over here on the west coast the community is quite large – how does it compare over there?

From where I am living now (Poughkeepsie, NY), I can’t even find a Vietnamese person, except for the nails parlor at the mall. I wish there is a Vietnamese Community here.

TM: Did you immigrate here with your family?

Yes! I came here with my mom and older sister.

TM: Has the internet made it possible for you to find a Vietnamese community online?

Yes! The Internet rocks. It made it possible for me to get to know many Ngoc Lan’s fan around the world. Even though we have never met, they are like a big family to me. We even call iLoveNgocLan.com our home on the web.

On my own site, I have met quite a few fine Vietnamese folks who have great taste in music and I learn a lot from them.

TM: Last questions, where do you see the Vietnamese community online heading? Have you noticed a bigger presence online? Whats in the future for you?

Obviously there are tons of Vietnamese organizations on the web but I think we are still behind with technology. I haven’t seen too many sites that use Web Standards and CSS. Fortunately, I see that in Tiếng Magazine, good job! I am glad that you have started on online mag gearing toward young Vietnamese American. I don’t see anything in the future for me as far as the Vietnamese Community.

TM: Thanks for the interview, Donny.