VISUALGUI

Brushing Up My Résumé

Last night I spent two hours editing and redesigning my résumé. I wanted to detach it from the ON Designs look and feel. I wanted my résumé to stand alone rather than being part of my portfolio.

In addition, I wanted to move away from creating two separate print and web versions. They are a bit of a pain to update. I eliminated the Illustrator version by generating a PDF from the webpage.

I wanted my résumé to be clean, simple, legible, and readable. I went back to a two-column design with a 960-grid layout. The types are set in Mr and Mrs Eaves, designed by Zuzana Licko. Take a look.

Advising Service for Vietnamese Typography

Are you designing a new typeface or subsetting your existing fonts to support Vietnamese? I would love to help. I am offering advising Vietnamese typography as a service. For a small, one-time fee, I will review your Vietnamese characters to make sure they are properly positioned, legible, and readable. I will also provide suggestions on how to make your typeface feels natural to Vietnamese readers. Learn more.

ON Designs Principles

Came up with 10 principles for ON Designs.

  1. Simplify without sacrifice
  2. Eliminate distractions
  3. Optimize for fast performance
  4. Deliver unobtrusive experiences
  5. Focus on core values
  6. Enforce accessibility
  7. Establish trust
  8. Design for inclusion
  9. Build for resilience
  10. Enhance with care

Inspired by Jeremy Keith’s collection of Design Principles.

New Vietnamese Type Specimen

The chapter on Type Recommendations has been revised and updated. I replaced a small illustration with a full type specimen for each typeface. Because of my limited access to typefaces online I only create specimen for fonts that I can access. I have to leave out typefaces that I don’t have license. On the other hand, I always wanted to add new typefaces to the list including Alda, Skolar, and Alegreya. With the addition of type specimen, I wanted to provide type designers more details about Vietnamese typography. If you would like to see something more added to the specimen, let me know. I also made some updates to the Samples.

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.

The 10K Apart Contest

My entry for the 10K Apart is now in the gallery. I entered the contest to solve a technical problem for myself rather than to win the contest. After I made my submission and changed my website, I changed my mind. Without a custom for this site, it does not feel inspiring. I wanted to withdraw my entry, but they have already spun up the server for it. According to the rule, I can submit up to three entries; therefore, I am in the process of working on another project that is more inspiring. So stay tuned. I’ll release it in the next couple of days or so.

Updated Again

So I went from Hypatia Sans to using system fonts to Alda and Acumin in one week. The system font is simply not cutting it. I am keeping the minimal WordPress theme, but pulled out of the 10K Apart contest. Again this is my personal site so I get to play with it as much as I want to, but I think this is it for the moment. I’ll do a major redesign in early 2017. Richard Fink’s “Webfonts on the Prairie” resonates with me and brings me back to using webfonts again even though the file size is tremendous. Then again, typography is the only design element on this site so I am OK with making the investment in fonts.

Re-typesetting Thơ Mưa

Thơ Mưa gets new fonts. The text face is Cormorant Garamond and the title is set in Cormorant Upright. Both typefaces designed by Christian Thalmann for Google Fonts. They look great for literary work.

Scalia Law Identity

Added a new portfolio page showcasing the branding for Antonin Scalia Law School. Take a look.

Do Designers Create Their Own Site Anymore?

I was listening to a design podcast on the topic of creating a portfolio. The two hosts spent about forty minutes discussing typical-but-helpful tips such as what makes a great portfolio, what projects to include, and how to display the works. 

In the last few minutes of the episode, they recommended designers to invest in an online portfolio. They plugged their own sites as examples. Unfortunately, they both use a third-party service like Squarespace and Adobe Portfolio.

One of the two hosts stated that designers don’t need to design and code their portfolio because it is a waste of time.  Services like Squarespace already have well-designed templates with homogenized elements.

No wonder sites, particularly web portfolios, look so much the same these days. With these services available at their finger tips, have designers given up creating and coding their own site these days? If that’s the case than it is a shame. 

When designers code their own site they have total control. Because they only use the markups and CSS properties they need, they can easily optimize their site for fast performance. Furthermore, they can demonstrate their coding skills to potential employers. I encourage designers to create their own site because  HTML and CSS aren’t hard to learn and they give them tremendous power.