Việtjazz Sample

While driving and listening to Donny Trương Presents Việtjazz, I came up with a sample for Vietnamese Typography. I picked out my 10 favorite pieces from my collection. Each song gets a typographic treatment. I also paired each song with a painting from the late great Đinh Cường. Link to each song is included on the artwork for your enjoyment. Take a look.

Macan Speaks Vietnamese

A versatile Neo-Grotesque type family, Macan, TIGHTYPE, balances utility and vivacity. While Macan focuses on functionality, Macan Stencil brings quirky quality to the family. Both solid and stencil versions support Vietnamese. Its acute, grave, and hook above stack to the right of its circumflex. I had the pleasure of reviewing Vietnamese diacritics for Macan. Check out the Macan Vietnamese specimen.

Revising Visualgui Wordmark

As you can see, the Visualgui wordmark gets a bit of an update. If you are reading this post in an RSS reader, make sure you visit my website. I still use David Jonathan Ross’s Megazoid as a starting point, but I modified the letters quite a bit. I was experimenting with connecting two letters together—like ligatures. Because of Megazoid’s geometric shapes, the letters fit together in an interesting way.

What is Visualgui anyway? Almost twenty years ago, I came up with the name because I loved the sound of the word “visual”. I was also starting out with visual design. GUI obviously stands for graphical user interface. It also means “gui” with the short i instead of the long y because I am short gui.

I must confess, I find Visualgui to be silly and sometimes embarrassing even to this day. I have thought of changing it, but it has stuck with me for so long, I might as well embrace it. Ever since I got the name, I struggled with creating my own wordmark. I was never satisfied with what I came up with. The previous version, which was set in Fit, also designed by David Jonathan Ross, was the longest I had used.

After five years, however, I wanted to make a change. The earlier version of the new wordmark was straightforward. The only modification was creating the lower a from the uppercase G. With the revision, I modified every letter.

I am loving the new wordmark. I hope you like it too. If you have any feedback, please drop me an email. I also sincerely hope that David doesn’t mind me modifying his typeface to make a somewhat unique brand for myself.

Visualgui 2023: Change & Aneto

The new design for 2023 is here. Unlike previous years, in which I came up with the new design a couple of weeks before the new year, Visualgui 2023 comes a bit late. I was catching the Designer’s Disease: “most of us catch it at one point or another but evolve & find a new formula—one that takes everything in you to make.” Yes, I stole that one from Nas’ King’s Disease 3. I didn’t know what to design for a while and then I overcame the disease.

As you can see, I have a new logo. After using the previous logo for five years, I just wanted to come up with a new one, which set in Megazoid, designed by David Jonathan Ross. I love this quirky typeface. Megazoid is chunky, raw, weird, and anything but boring.

For typography, I selected the two typefaces that I had the pleasure of contributing to the Vietnamese diacritics. The main body copy is set in Aneto, designed by Veronika Burian, José Scaglione, Azza Alameddine, and Roxane Gataud. I love the readability of Aneto. To accompany Aneto, I chose Change, designed by Alessio Leonardi, for large headings as well as secondary texts. The two complement each other nicely. For coding, I kept Input Mono, designed by David Jonathan Ross.

For the huge text on the homepage, I chose Aneto Skyline, which is part of the Aneto family. I will also use Change in the future. I hope you’ll like this new design.

Recent Projects at Scalia Law

I made a major MODX upgrade from version 2.8.4 to 3.0.2. It took me several months to test to make sure everything works as expected. When I attempted to upgrade from 2.8.3 to 3.0, most of the dynamic pages broke. I am glad that I made the exact copy of the production site and made the test upgrade first. If I did a live upgrade, it would have been a disaster. Fortunately, version 3.0.2 fixed all of the issues.

I work with the alumni staff to update the alumni landing page. The featured stories are dynamically pulled in from our spotlights. When we want a spotlight to appear on the alumni page, we simply check the alumni box under news categories in the template variables.

We launched a new blog, Voices for Liberty, for the Liberty & Law Center using WordPress.

I have been cleaning up Google Analytics and moving from UA to GA4.

We have lots of tracking on our site. Google Tag Manager alone has 27 tracking codes ranging from Google Ads to Google Conversions to LinkedIn. In addition, we have a few pixel trackings. Since I don’t have access to Google Ads or Linkedin Ads accounts, I can’t tell which tracks are still active and what types of data are being tracked. Should we put together a privacy statement to be more transparent with the users?

Creating a Typographic System With Variable Fonts

I was asked to put together a last-minute fact sheet for the Scalia Law fall 2022 entering class. The goal was to showcase the numbers, such as 2114 applicants, 415 admitted, and 53% women. Because of the time constraint, I decided on a typographic direction.

Based on the provided content, I created a nine-column grid system to organize all the numbers and the corresponding texts. For typesetting, I chose Acumin, designed by Robert Slimbach, for its variable fonts, which provided a wide range of weights and widths. Once the grid system was in place, I filled in the columns with the numbers. While experimenting with variable fonts, I discovered that I could keep the weights constant, but change the widths based on the digits of the numbers. The longer the digits the narrower the glyphs and vice versa.

I ended up creating a typographic system, in which the numbers stayed balanced but dynamic. The result was simple on the surface, but sophisticated underneath with a solid grid and typographic foundation. This was one of the reasons I loved working with variable fonts. They offered limitless flexibility and precise control at the same time. Take a look at the high-resolution version of the fact sheet.

Ten Poems on Homeland Trees for the Young Souls

While browsing through the Vietnamese section in Fairfax County Public Library, I came across a children poetry book titled Cây cối quê hương (Homeland Trees). The book has ten poems selected among the best in the treasury of Vietnamese literature for children. The poems were compiled by Lê Phương Liên and translated by Hiếu Trần.

After reading a few poems on the spot, I have to include them in my samples for Vietnamese Typography. The beautiful, innocent, and poetic words lit up my soul and brought me back many childhood memories. For the kids, these poems will bring them closer to nature and help with their language development in Vietnamese and English.

I spent my rainy Saturday being stuck inside and whipping up a simple webpage. For typesetting, I combined Lang, designed by Stephen Nixon, and Gimlet Sans, designed by David Jonathan Ross. For visual presentations, I got the photos from Unsplash.

Enjoy!

Update:

Rob Blake tweets:

This is beautiful and inspiring. Amazing to see the web mature as a medium for both poetry and typography.

I really appreciate that.

Change Speaks Vietnamese

Alessio Leonardi and Fontwerk make a huge Change with variable fonts and Vietnamese diacritics. A humanist, lively sans family, Change lends clarity with characteristics and familiarity with peculiarity. From hardness to subtlety, Change’s contrast covers both texts and displays. For Vietnamese support, its acute, grave, and hook above stack to the right of its circumflex. I am glad to have played a small part in making Change.

GT Pressura Speaks Vietnamese

Back in April 2020, I had the pleasure of reviewing the Vietnamese diacritical marks for GT Pressura, designed by Marc Kappeler and Dominik Huber. I am so glad to see the type family being refreshed and expanded, according to the release note:

The Extended subfamily gives GT Pressura room to breathe, embracing a more organic rhythm with a variety of character widths. In its departure from GT Pressura’s strict beginnings, the type becomes more elegant and “more Swiss Style,” according to Moiré. Extended has the approachable proportions of a modernist grotesque typeface with completely mechanical design details.

The mini-site is just lovely. Take a look!

Hoàng Thùy Linh Gets Typographic Treatment

After listening to Link, Hoàng Thùy Linh’s latest release, I wrote down hilarious lines just to amuse myself. I also revisited her previous album, Hoàng, released in 2019, which I like a bit more. Then I had the idea of creating a sample page for Vietnamese Typography based on these two albums.

My initial concept was to create a three-column grid layout for each song with image, lyrics, and pull-out quote in each column. I abandoned the concept because I didn’t want to spend too much time on it. Then I simplified it to just pull quotes and lyrics. I created the first song right in the browser and didn’t like the result. I cut out the lyrics and just put all the quotes together in one running text.

For typography, I selected Canicule Display, design by Kostas Bartsokas. Even though Culicule is still a work in progress, it comes nine weights and supports Vietnamese, which makes it usable for this project.

For photography, I went with a screen captured from her “Tứ phủ” video. I like the simplicity of this photo as well as the shades of pink, which is great to use as a background. To add a twist to the design, I flipped Hoàng Thùy Linh upside down as if she was hanging off from the top of the screen. Then I laid the quotes from each song over her.

The result was quite striking and different from what I had done before. I head toward a typographical exploration rather than a readable presentation. Even though this tiny project ate up more of my sleep time than I had anticipated, I found it gratifying. I want to experiment with more playful typography for the web. Take a look at the final design.