I’ve just launched the second edition of Professional Web Typography. In addition to updating, revising, reorganizing the materials, I redesigned the website and reworked all the demos.

The second edition is still available for free online and relying on readers’ support. When they make a $10 contribution, they will get to download the source code to all the demos used in the book. The source code is just a little bonus to show my appreciation. I set the price this time because I don’t want to receive anymore penny donations. Ten bucks seems like a fair price for the book considering the time and efforts went into revising the content and creating the demos.

As I was rewriting and redesigning this book, I considered putting the second edition on Amazon Kindle to see how well it will do. I downloaded Kindle Create and started to play with it. Unfortunately, I found it to be too restrictive. I can only use three typefaces and JPG image format. It is probably fine for a novel or a nonfiction, but not at all for a book on web typography. I gave up and went back to the web where I have much more choices and control of my typography.

For the website, I used all typefaces designed by David Jonathan Ross. The main text is Turnip. Big heading is Forma DJR Chiaroscuro. UI element and small text are Input Sans. Code excerpt is Input Mono.

I hope you will enjoy reading it.

My portfolio site gets a redesign again. The focus is still on simplicity and typography. The main typeface is Exchange, by Frere-Jones Type. Even though Exchange is an excellent text face, it also looks gorgeous at large size. Headers are set in Bild by DJR. I dig the latest version David sent out last May to the Font of the Month Club members. The new version of Bild comes with variable font.

For the design, I wanted to keep it as simple as possible. The homepage is just text leading into my professional projects. The about information now has its own page. I also added a about and book page to highlight my books.

In the past, I wanted to keep my résumé independent of the site, but with the redesign, I brought it into the layout as well. I also got tired of maintain a print and an online version; therefore, my résumé is now designed in HTML and CSS first then exported out as a PDF for print.

I hope this latest redesign will last for a while before I feel the itch to change it again.

After launching the third iteration of Visualgui 2019 a couple weeks ago, I already switched out to different font. As much as I liked IBM Plex Sans Variable, it quickly became too much like IBM; therefore, I switched to Literata. Then I added Halyard for small text. Then changed up the headlines with Gimlet Banner. Then ended up switched the main text to Pliego. I like to play around with more typefaces than just using one; therefore, variable font might not necessary work for me. Since this is my personal blog, I get to experiment with it quite a bit.

Speaking of personal blog, I am glad to see designers leaving Medium and starting their own blog again. Hylia seems like a promising starter kit to get blogging. Unfortunately I have no idea how to use it. I am still running on the good ole solid WordPress. I trying to keep it as simple as possible. No comments. No Webmentions. No trackbacks. No photos. No tracking. No JavaScript. None. I don’t care if people are linking back here anymore. My subject matters are highly personal. There’s no added value for no one else but myself. Let’s keep it that way.

Off topic a bit, but I added three typefaces from TypeTogether to Vietnamese Typography. Check out Adelle Sans, Bree, and Ebony.

Even though I am on vacation with my family this week, I felt the urge to redesign this blog. Despite all-day activities including biking, arcading, babysitting, and swimming, I stayed up into the wee hours to work on this blog after the kids passed out.

For this version, I wanted to experiment with variable font using one typeface for everything. I also would like to return to a modern design with type and grid. I started off with Adapter Variable by Rosetta Type. AV is an excellent type system that can handle expressive heading to readable text within one file. I highly recommend AV for commercial sites, but I can’t afford 690 € ($780) for my personal blog. As a result, I had to find an alternative variable font with Vietnamese support. I chose IBM Plex Sans Variable, designed by Mike Abbink and in collaboration with Bold Monday, because I had already used its sibling Plex Mono for code highlighting in the previous version of this site.

After some readjustments from Adapter to Plex, I loved the new typesetting just as much. The only minor drawback is that Plex Sans Variable has a separate file for roman and italics instead of combining into one. On the plus side, Plex Sans works out well with Plex Mono. For the mobile version, I set the width of the text narrower to accommodate more words. For large screens, I set the width a bit wider. For headers, I narrow the width and the bold the weight.

I also kept the dark mode from the previous version. If you are reading this post through an RSS reader, please visit the site to see the new design.

It is no secret that I am a huge fan of Trịnh Công Sơn’s music. Every time I listened to any of his song, I would find a line or two that spoke to me. For a long time, I wanted to collect all of his songs with inspirational quotes on love, life, and death. In the past couple of weeks, I made that my side project.

I went through 244 songs and picked out 158. I left out songs with war-related lyrics. I put all 158 songs into one HTML file and pulled out quotes that I loved. After that I designed the page with HTML and CSS. My challenge was to pack as much text into a page. My goal was to create a newspaper design for the web.

At first I used CSS grid, but I could not get the songs to stack up against each other like the Masonry layout. Then I switched to CSS Flexbox so that I could fill as many columns as I could on big screen monitors. Still Flexbox didn’t solve the issue of blank spaces between the rows. My last resort was CSS Multi-column. Although Multi-column solved the gap-row issue, it would break up the text in the middle of each song. Fortunately, break-inside: avoid; did the trick.

My intention for this project was that readers would skim the big pull quotes. Once they find something that they like, they can stop and read the entire lyrics.

To make the design more exciting, I dialed up the typography quite a bit. As a member of the Font of the Month Club, I have access to all the playful fonts designed by David Jonathan Ross; therefore, I might as well put them to use. The body text is anchored in Fern, one of my favorite reading text faces. The title of each song is set in Dattilo DJR. The quotes are set in various fun faces. They are loaded in random with a jQuery script written by Ngô Thiên Bảo. I also added in a dark mode switcher and the ability to turn off the pull quotes to make the layout less busy.

Initially this project was created for myself, but it also showcases Vietnamese fonts. As a result, I put it on Vietnamese Typography. Even if you don’t understand Vietnamese, you still can enjoy the beautiful typography. Take a look.

With the birth of my three older sons, I created a short slideshow dedicated to each of them. I used Flash to put together a short clip that had photos within the first three months of their lives. Although Flash player was no longer in used, I converted the clip to video. Here are clips for Đạo’s, Đan’s, and Xuân’s.

By the time Vương was born, Flash had already gone. Now that I use Creative Cloud, I no longer have access to Flash. I was not planning on creating one for Vương, but his mom said it wouldn’t be fair for him. So I needed to create one for him as well. My next choice was After Effects since I now have access to it. I experimented with AE for a bit and it seemed that I could do the Ken Burn effects similar to Flash, but it will take me so much time to get around AE. I would love to learn AE in the near future, but not for this project.

My next choice is CSS animation. I was not sure if it could be done, but I would love to create a slideshow using the web. After a few googling, I came across a CSS Gallery by Ana Travas. The animations Ana is using to create the Ken Burn effects is from Animista, which I really loved.

With the basic demo, I put together a web-based slideshow for our youngest Vương. All I needed to do was added music to it. I selected Nat King Cole’s “Smile” because Vương smiles a lot. The tune, which performed by Halie Loren, is not about happy smiling, but more like smiling even through sadness. I wanted Vương to continue to smile even when life is hard. I am very pleased with the final product. Take a look.

This blog gets a slight design update. I am getting rid of the multiple colors for each post. I also changed the typeface to Pliego, by Juanjo López. I really love this beautiful text face with lovely OpenType features. Pliego is one of my recent font purchases. I had the pleasure of reviewing Vietnamese diacritics for it.

With the end of Typekit’s standalone plans, I am changing the way I am using fonts. I no longer trust the subscription model if I have projects that I want to stay online for a long time like Vietnamese Typography and Professional Web Typography. Although Google Fonts seems to be doing well, I never know when Google will shut it down given the history of projects Google had abandoned. I also don’t want Google to track you. I respect your privacy.

I am now hosting the fonts myself as much as I can. As a result, I having buying fonts and it could be addictive. Like getting tattoos, you’ll want more typefaces once you started buying one. I never understood why people buying so many expensive handbags until I started buying fonts. Just to have the font files on your hand is such a pleasure.

David Jonathan Ross’s Font of the Month Club has been a good resource for experimenting with new typefaces. David also has a handful quality typefaces with affordable prices. If his typeface doesn’t have Vietnamese support yet, I can make a request to have it drawn. For me, I can’t purchase fonts that do not have Vietnamese diacritics. It’s a deal-breaker for me.

In addition to David’s fonts, I also purchase typefaces Juanjo López and Tobias Frere-Jones because their fonts have Vietnamese support from the get-go. If you are a type designer and need help with Vietnamese diacritics, please read my book. If you need further advise, please get in touch.

With the ending of standalone Typekit plans, I am beginning to move my sites off Adobe Fonts. Professional Web Typography is now set in the Source family, which includes Source Serif, by Frank Grießhammer, as well as Source Sans and Source Code by Paul D. Hunt. I am also using variable fonts for the serif and the sans.

Here’s a colorful design for 2019. Each blog post is now separated by a vibrant color to spice up the layout. I wanted to move away from black text and red link on white background.

Of course the typography is completely changed. Body text is now set in Fern, by David Jonathan Ross. The big headlines are set in Dattilo, a stylish revival of the classic Italian slab by David Jonathan Ross with Roger Black. Dattilo is fresh off Font of the Month Club last night. Small text is set in Frequenz, by Sebastian Losch.

My personal goal is to give this blog at least one redesign a each. For 2018, however, I had gone through six different iterations. I am sure I will do the same for 2019.

As for WordPress, I am not sure how the release of version 5.0 and Gutenberg will change the way I have been theming this blog. I am still using the minimal requirements (index.php and style.css); therefore, the new editor, which allows users to create rich experience, does not fit my need. The minimal theming allows me to hone into the text and make the redesign quickly. I don’t have to comb through 100 files. My focus is still typography rather than image-driven design.

I hope you enjoy the new design.

I have created a new page for my boys called “Tứ Quý” (Four of a Kind). I am using DJR’s Bradley for the header and Source Sans and Serif family for the text. The page is created simply for me to remember their birthdays when I take them to the doctor.

I also redesigned Donny Trương homepage with a photo of Xuân and me. Although it’s my professional website, I wanted to add a personal touch to it. Xuân definitely steals the picture, but it is the best photo of me that I have found.

That’s it. Have a good weekend. I can’t believe Thanksgiving is coming up.