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.

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

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.

Wrote a new chapter for Professional Web Typography on “Styling OpenType Fonts.” This chapter unlocks the hidden power in OpenType features. I hope you’ll enjoy reading it. I also would like to thank readers who paid for the book. You allow me to continue to make updates on this book.

With a bit of cheating, I completed my Typographically Trịnh in 77 instead of 100 days. My patience has ran out, but I do not like leaving a project incomplete. As a result, I just wanted to get it done and out of my system.

In retrospect, it was much more challenging than I had expected. The biggest hurdle is the lack of typefaces for the Vietnamese language. I ended up reusing lots of typefaces and with different combinations. There is 21 usable typefaces in Typekit directory. Because Google Fonts has display issue in Safari, I had to abandon it. As much as I did not want to self-host the fonts, I had to in order to use some of the types in Google Fonts.

As for the content, I still have tremendous love for Trịnh’s lyrics. I am sure I could do 100 more if I wanted to. I intentionally left out all of his anti-war songs. Although he was such a great ballad songwriter, I only chose a handful of his romantic lyricism. My main interest were lyrics that has to do with life and death. I’ll definitely use this site again and again to read his words.

I need to take a break from the site, but I will come back again to tweak some of the designs. I might add in more quotes or change out quotes if I come across something inspiring. I hope you enjoy reading them as much as I had creating them. Now that the project is complete. I am now turning my attention back to this blog. It will be politic as usual.

With 10 new quotes added, Typographically Trịnh is now up to day 40. The project started 33 days ago, which means I am seven days ahead of schedule. After many sleepless hours devoted to making and remaking the pieces, I am feeling the burn; therefore, I am taking a break from it.

A bigger reason to walk away from the project for a bit is that I have exhausted my type options. Typekit has 16 typefaces that have Vietnamese characters. Even though I had mixed them up to create different combinations, I am running out of choices to work with. I even cheated a bit by using non-Vietnamese-supported typefaces for words that do not required diacritical marks. For example, “cho nhau,” “say,” and “em” do not required any Vietnamese character. Although “Bé,” “từ bi” and “và” need an acute and grave, they already built into the Latin alphabet.

My hope is that Typekit will add more Vietnamese typefaces in the near future. On the other hand, I am extremely disappointed with Google Fonts. They still haven’t fixed issue on iOS Safari. Other type designers pointed out this issue 18 days ago. I noticed this issue many months ago and they still have not fixed the problem. If this issue happened at Typekit, they would have jumped on it already. Google Fonts offers a handful of new typefaces for Vietnamese language, but the display issue make them useless on the web. Google, please fix the problem.

Over the long weekend, I reworked Typographically Trịnh to take out typefaces served via Google Fonts. As much as I wanted to use some new faces from Google directory, its issue in Safari—missing Vietnamese fonts—makes the service unusable. I knew the issue way before I started Typographically Trịnh, but I wanted them to see the problem so they can resolve it. Sadly they still have not done anything.

Now I am forced to use only Typekit, which limits my choices for setting type in Vietnamese, but I know for sure that know for sure that it will display correctly everywhere. In addition, Typekit service is outstanding. I reported similar  issue a while ago and fixed it within a few days. Google Fonts, on the other hand, has done nothing for many months.

It’s a shame that they have a decent selection of Vietnamese typefaces, but they are not usable on the web. I really do hope they will resolve the issue soon. 

Vietnamese Typography is one of the two sites Typekit likes this week to highlight some advanced web typography. Sally Kerrigan writes:

Donny Truong’s site gets deep into the history and current implementations of Vietnamese typography, and is itself a great example of our character subsets in use. It’s also a great design. Body text is set in Garamond Premier Pro, and the headings and navigation are set in Acumin. (The display heading is Acumin Extra Condensed.)

Thank you, Sally.

I just launched a new section on Vietnamese Typography called samples, in which I create individual pages to showoff Vietnamese typesetting.

So far I had created a sample of a short story, article, restaurant menu , and recipe page. I also featured Thơ Mưa to demonstrate poetry.

One of the reasons I created the sample page is to replace the literary example section. Although no one pointed out to me, I was not sure if the literary examples were useful to type designers. As a result, I retired the section.

I am planning on adding more samples. If you have any suggestion, please let me know.

For a design exercise, I took on the challenge of redesigning the edX’s homepage and the course page. The goal was to create a working (HTML, CSS, and JavaScript) prototype in 10 hours. Because of the limitation, I needed to set my priorities. What can I accomplish with the time that I had?

For user research, I relied on myself as a student who wanted to take an online course at edX. While browsing through the site I kept the following questions in mind:

1. What am I looking for?
2. Can I find the courses I want to take? Why not?
3. How quickly and easily can I find the courses?
4. What does the current site do well?
5. What does the current site do poorly?
6. What is the most important goal needed to be considered in the redesign?
7. How does the user interface need changing?
8. What areas can I improve in the new redesign?
9. What features can I eliminate in the redesign?
10. What features can I highlight in the redesign?

After spending an hour using the site on my laptop and mobile phone, I concluded that my priorities are speed and simplicity.

Eliminate Distractions

On the homepage, my first priority is to eliminate distractions. For new students who just want to see what edX has to offer, they don’t need to see all the navigational items until they logged in; therefore, I eliminated all the menu items, except for the “sign in” button.

For the main hero image, I wanted to move away from stock photography of students using their laptops to a simpler illustration. The image of the figure carrying the entire world on his head, illustrated by Jim Frazier, indicates knowledge and worldwide education. I also removed popular courses to feature various programs student can take at edX. Below that is a list of some of the schools that partnered with edX.

For the footer, I had detailed navigation to allow students get answers and information they have about edX as fast as possible.

Take a look at the current edX homepage and my redesign.

For the search page, I displayed the large heading to showcase how many courses EDX has and the search box appeared immediately underneath. If students don’t know what they are searching for, they can check out some of the popular courses below.

One of the key differences between the old and the new design is the remove of the images. On the current site, the thumbnail images don’t help much because most of them are simply stock photography. Removing the thumbnails make the courses load faster and allow more room for the course description. Furthermore, it forces me to make good use of typography.

Take a look at the current course page, the redesigned search page, and the redesigned result page.

Process

I knew that I don’t have much time to mockup the pages in Photoshop; therefore, I went straight into HTML, CSS, and JavaScript. I also knew that if I use a framework like Bootstrap or Foundation, I would have spend much more time customizing the design; therefore, I just do it from scratch. SASS helped tremendously in speeding up my time.

For responsive design, I started with the mobile first approach and take advantage of the screen space on desktop without breaking the layout or making the text harder to read—thanks to CSS Flexbox.

The edX redesign prototype is on GitHub. Feel free to play with it.