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.

If you are reading this on an RSS reader, go ahead and type visualgui.com on your browser. I made further changes to the site in the past weeks. The logo is now blown up and rotated on the homepage. I just wanted something dynamic and impactful. I am also considering bringing back the masking effect on the logo. I just don’t know what to promote yet.

For the body text, I am switching from Halyard, designed by Joshua Darden, to Minion 3, designed by Robert Slimbach. I am so old school that I prefer serif type for reading over sans. I knew that a sans serif body copy wouldn’t last too long. In addition, I have been wanting to use Minion 3 since it has been updated and expanded. I still dig Halyard, especially for display. I am going for the extra big and bold on the title of each blog. The bigger the screen, the bigger the headline. It is quite extreme, but I love it. It’s my damn blog after all.

I must admit that I am quite narcissistic when it comes to my blog. I look at it more than I look myself in the mirror. It is getting compulsive. The more I look, the more I want to change. I have gone through small iterations throughout the year rather than a big change once a year because I keep wanting to experiment.

This blog has become such an integral part of my life both personal and professional. It gives me the space not just to write, but to practice my web design skills. I work with PHP, HTML, CSS, and, of course, fonts almost everyday.

Blogging and blog design might have die for most people, but for me, it is still a fantastic space to put all of my life and my passion into one place. I do not trust Medium, which shut down the ability to have a custom domain, with my content. Although Alex Jones and his Infowars empire deserved to be kicked off social media platforms for spreading hates, I do not trust social media with my content either. Just without a few weeks, the only place on the Internet Jones has left is his own website.

I am now investing more and more on my site rather than elsewhere. It is my own thing. I don’t know who reads what I write anymore, but that doesn’t stop me. My goal is still to make money off blogging one day. For almost 20 years, I have not figured out how because I have no business skill whatsoever, but I still want to think about it. Maybe one day when I no longer have a full-time job. For now, I just keep working on that goal.

In less than five months, I am already itching for a new design. Iteration 5 is all about sans serif. I often go with a serif face for body text, but I am switching it up a bit this time. Halyard, designed by Joshua Darden, has been on my mind for a while so here’s a chance to use it. The wordmark remains the same. As for the layout, I am going for four columns on large screen. CSS Grid makes layout design a joy. I hope you’ll like the new direction.

The typography on Scalia Law School website has been swapped from Myriad Pro to Pelago. The primary reason is readability.

Myriad Pro is a classic workhorse typeface designed by Carol Twombly and Robert Slimbach. Pelago is a newer typeface designed by Robert Slimbach. Although Pelago has a much smaller family than Myriad Pro, its open counter makes better readability for online text. Its letterforms are less geometric and more natural for reading than Myriad Pro. Its numbers are also more legible.

We still keep Myriad Pro for big headlines, but the body text is Pelago. Because the typefaces are so similar, we made the swap without changing anything in the CSS. I am not sure if casual readers would notice the change, but it looks refreshing.