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?

My Conversation With Jim Van Meer

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.

Offline

The network connection appears to be not working right now, but you can still access the homepage offline.

On Reading

A couple of weeks ago, Đạo asked me to give him something advanced to read. Without hesitation, I handed him the beautiful illustrated version of William Strunk Jr. and E.B. White’s The Elements of Style. Why not giving him an early start? It took me way to long to appreciate the rules of grammar, and I still am struggling.

A couple nights ago, he cracked open the book, read the first page, and stopped. I asked him why did he stopped and he responded, “Reading doesn’t help me in life.” I replied, “Of course, it would. Whether you want to be a doctor, lawyer, or president, you have to read.” Then I paused and thought to myself: that’s not quite true because the President-elect of the United States has not read a book in decades. In fact, he might be illiterate.

Đạo’s response struck me that I had the same thoughts for many years. I didn’t read much in the first twenty years of my life because I didn’t understand what I was reading. The English barrier distracted me; therefore, it made me bored quickly. In high school, I had to take a literature class that required reading. The book was Stephen Crane’s The Red Badge of Courage. I tried to read, but I could not understand. Fortunately I had a friend, who took the same class, read the chapters and summarized them for me. She did me a favor in the short term, but hurt me in the long term. I am not blaming her. I blamed myself. She was just being a helpful friend and I was just being an idiot.

In college, the only books I would read were technology-related instructions. I gave up on everything else. I took an English course on hypertext and cyberspace. When the professor assigned William Gibson’s Neuromancer, I couldn’t read it. I sat in silent during class discussions. In an intriguing philosophy course on aesthetic experience, I loved the professor’s lecture and the class discussion, but I could not read the textbook. I almost failed literature, history, and biology because I could not read.

I had so much time on my hand when I was young and single, and yet I did not dedicate any of my time to reading. When I started this blog, I also started to read. When I really got into it, I could not stop. Now I always have at least four or five books in my book bag. I wake up early to read before the kids get up. I read at night after the kids fell asleep. I read whenever I get a moment. People stand in line with their phone, me with my book. It has become my obsession.

It took me more than twenty years to figure out the value of reading because I simply didn’t enjoy what I read. I never liked fiction unless the content had something erotic. I prefer non-fiction because if I am going to invest time into reading I might as well learn something. My topics revolve around technology, typography, grammar, and music. I occasionally branch out to politics, biography, or whatever subjects pique my curiosity.

From my personal experience, I can tell the kids why they should read, but they need to discover it themselves. I will always remind them to read, but I hope they will find the joy in reading sooner rather than later.

Kids’ Logic

Last night’s bedtime conversation:

Đán: Daddy, do you know that your penis connected to your butt.
Dad: What? Where did you learn that?
Đạo: Your penis connected to your butt because the juice goes to your penis and the food goes to your butt.
Dad: OK guys, that is way too much information. Let’s just go to sleep.

Last week at Sweet Berries, a frozen yogurt place:

Đạo: (Read the sign) “This restroom is only for Sweet Berries customers.”
Đạo: Daddy, does that mean the employees can’t use it? What if they have to pee?
Dad: That’s a really good point. I am glad you’ve caught it. I guess the employees just have to hold it.

I love having these conversations with the kids. The way they think are hilarious yet logical and imaginative. I need to jot them down before they escape me.

Xếp Hiền Như Ma Soeur

Tôi mai mắn được bà xếp hiền và dễ dãi. Làm việc dưới bà hơn năm năm nhưng bà chưa hề một câu phàn nàn những khi tôi cần lấy ngày nghỉ khẩn cấp như những con bệnh hay có việc tư phải làm. Thậm chí mỗi ngày đi làm không đúng và đủ giờ bà không hề thắc mắc.

Bà tin tưởng tôi nên công việc tự tôi sắp xếp. Khi đổi ông Dean mới bà không báo cáo thẳng đến ổng mà phải qua một ông mới dưới tay ông Dean. Vì tôi dưới tay bà nên tôi có thêm một ông xếp lớn nữa. Ông ấy và ông Dean cần gì thì qua thẳng tôi. Vợ ông Dean cũng qua thẳng tôi. Rồi càng ngày ai cần thiết kế hay trang web cũng email thẳng đến tôi. Nên công việc càng lúc càng nhiều. Không cần báo cáo bà xếp cũng hiểu được công việc hằng ngày của tôi nên cũng không cản trở mà chỉ ủng hộ tôi.

Cái tốt là tôi có được cái trọn quyền quyết định. Đôi lúc phải tự mình đối phó với những người nhân vật khó tính hoặc khó phục vụ, nhất là các ông thầy dạy luật. Nhiều lúc cũng căn thẳng lắm nhưng biết làm sao đây. Công việc là thế có cái này mất cái kia. Tóm lại có được một người xếp như bà ấy là cái phước của tôi. Vì niềm tin và tình thân bà ấy dành cho tôi, tôi lúc nào cũng cố gắng để không làm bà thất vọng hoặc mất mặt. Lúc nào tôi cũng nghĩ thế nhưng chưa bao giờ tâm sự với bà ta. Tôi không thích mang tiếng nịnh bợ. Có lẽ hiểu nhau là đủ rồi không cần nói ra.

Sưng Mắt

Không biết nhìn bậy bạ gì mà mắt bị sưng to khó chịu. Ngẩm nghỉ lại chắc tại nhìn phải hình lõa thân của vợ tổng thống Trump trên báo chí.

Thứ Tư này là ngày hơi quan trọng không biết mắt sẽ hết sưng không. Nhưng chỉ là chuyện nhỏ. Mặt mủi sao thì như vậy. Họ không chấp nhận thì cũng chịu thôi.

Bác sĩ khám và cho biết tôi bị Chalazion. Cho thuốc nhỏ và dặn ngăm nước nóng hy vọng sẽ khỏi trong vòng vài tuần. Hy vọng rằng không phải đi mổ.

Sống Trong Thế Giới Nhỏ Bé

Những ngày qua tôi không đọc báo, không xem tin tức, và không tham gia vào thế giới social media. Cuối tuần tôi dọn dẹp nhà cửa, xếp quần áo, nghe nhạc, và vui chơi cùng đám nhóc, nhất là thằng Xuân. Ở chín tháng tuổi nó bò cùng nhà. Thấy gì lạ là bóc bỏ ngay vào mồm. Hai thằng anh lớn thì đam mê iPad và thích làm súng bằng Lego rồi đi bắn giặt Đức.

Tôi không còn hứng thú gì với chính trị. Đúng ra ông Trump và đảng Cộng Hoà thắng là có lợi cho cá nhân tôi. Nơi tôi làm việc đa số là dân conservative. Ông Dean của trường có quan hệ đến ông Koch. Một ông giáo viên làm việc với tôi là một trong những người đã viết những bài luận văn cho ông Trump. Hơn hết cái tên Scalia cho biết rõ trường luật nầy theo phía nào.

Tuy làm việc cho Cộng Hoà nhưng trong đời tư thì tôi thấy Dân Chủ thích hợp với lối suy nghỉ của mình hơn. Nên tôi thường cảm thấy rất mâu thuẫn giữ hai thế giới. Biết làm sao đây khi tôi mang trách nhiệm nuôi sống gia đình. Chẳng lẽ để vợ con đói để theo ý tưởng riêng của mình.

Thôi thì chuyện tương lai để ngày mai lo. Hôm nay thì sống cho hôm nay. Sống thoả mãng và với cuộc sống hiện tại. Sống thoải mái với những người xung quanh. Sống nhẹ nhàng và êm ấm với gia đình. Được như vậy là mai mắn và hạnh rồi.

Jane Straus, Lester Kaufman, and Tom Stern: The Blue Book of Grammar and Punctuation

A breezy and practical guide to grammar and punctuation. Clear examples and practical quizzes make it a useful tool for self-assessment. I could see why an instructor in a business grammar workshop recommended The Blue Book to us.

A Message From a Scalia Law Professor

Dear Colleagues

Some of us have spent time at colleges or universities where people are sometimes punished for expressing a particular thought or having a particular identity—institutions where everyone knows that it is not safe to say something or be someone that some professor (or professors) or some administrator (or a whole administration) does not approve of. In those environments we have learned fear—fear of the price of being who we are and of saying what we believe. It is a tragic thing to have to live that way. I am confident that I speak for the people who lead this law school—the professors and the administrators—when I say that our law school is *not* such a place. There is no need for fear here. Be who you are, say what you think, and welcome everyone else in our community (and all of our guests) to be and do the same. But it can be difficult to unlearn fear. And so it is entirely understandable that you might worry about such things even at our school, until you gain confidence that we are who we say we are: a constantly changing and growing, yet consistently honorable and civil, community of inquisitive and energetic students and practitioners of one of the essential components of any decent society: the law. I cannot guarantee you that everyone will always be a perfect manifestation of all that good stuff (indeed, I suspect none of us ever will be), but I am quite sure that we try in good faith. Nor, I am sure, will this note be enough by itself to fully reassure anyone who has known the kind of fear I mentioned at the top of this message. But I do hope it helps.

This is a school where we work together to make the most of a great educational environment, to elevate each other, and to make the world a better place. To the extent we can show the rest of the world how to do those things, all the better!

Sincerely,

A Letter From Mason’s President

Ángel Cabrera:

Dear Patriot,

Our mission defines us as an innovative and inclusive academic community committed to creating a more just, free, and prosperous world.

This was our mission the day before the election and it remains our mission today. If anything, the bitter campaign that just ended and the divisions in our society it highlighted suggest that our mission has never been more important and necessary.

Today, more than ever, we must keep working hard to help students of all backgrounds learn and grow. We must double down on our scholarship to deepen our understanding of the world we live in and to find new solutions to the complex issues that we face.

We must reaffirm our commitment to embracing a multitude of people and ideas in everything that we do, to respecting differences, and to protecting the freedom of all members of our community to seek truth and express their views.

We must continue to hold ourselves to the highest ethical standards as educators, scholars, students, and professionals, and we must continue to nurture a positive and collaborative environment that contributes to the well-being and success of every member of our community.

Since the results of the election were announced, I have heard too many stories of students and faculty feeling fearful about their place in society and in our university.

Let me be clear:

If you are Muslim or Jewish or Christian, you belong at Mason.
If you grew up in Mexico City, Islamabad, or Roanoke, you belong at Mason.
If you are part of the LGBT community, you belong at Mason.
If you are Black or Brown or White, you belong at Mason.
If you voted for Clinton or for Trump or anyone else, you belong at Mason.

Whatever your background is, your uniqueness represents the very essence and incredible strength of our university. You make Mason, Mason.

I feel fortunate to work for an institution that strives to create opportunity for all, to make our world more educated, more civil, more understanding, and more inclusive. I am proud to work with you. Let’s keep at it. The world needs us.

Contact