Visualgui 2024: The Button

It’s only January and I already cooked up a second iteration for this blog. The design is inspired by my son Đán Trương who created the cool button and asked me to add it to this site. At first, I refused because his button was a bit too flashy for my site (try hover the next and previous buttons). He insisted that I should use it.

To include his button, I had to redesign the entire site. I went with the Bauhaus style. For the header and footer, I added vibrant, colorful, AI-generate illustrations of Bauhaus architecture, created by Eyetronic. I also added a vector set of abstract avant-garde minimal geometric dividers (to separate each blog post), designed by Vitaneo.

To keep the Bauhaus vibe, I had to remove the scripted typeface for the blog titles. The new titles are now set in Neue DIN, designed by Hendrik Weber, Andreas Frohloff, and Olli Meier, which I had already used for large display text and UI elements.

Of course, I have to give a shoutout to Đán, one of my awesome sons, for creating the supercool button using CSS. Keep learning HTML and CSS, kiddo. You’ll be a superstar designer and you’ll create way cooler sites than your dad. I love you!

Grato Marker Speaks Vietnamese

Grato Marker, designed by Teja Smrekar, is a playful hybrid of geometry and informality. Although it has a casual attitude, Grato Marker is serious about supporting Latin, Greek and Cyrillic languages. Reviewed by skilled experts, it supports more than 270 languages including Vietnamese. Yes, I was consulted on Grato Marker’s Vietnamese diacritics. Big props to TypeMates.

Playpen Sans Speaks Vietnamese

As soon as I found out about the release of Playpen Sans, designed by Laura Meseguer, Veronika Burian, and José Scaglione, I typeset the “Cổ tích nhi đồng” sample page again. Playpen Sans has an organic handwriting quality that fits well with the folk tales for children.

When setting the stories in Playpen Sans’s regular weight, I was surprised how well the text can be read. The TypeTogether team had done an exceptional job of keeping the authenticity of the handwriting style without compromising readability. Striking that balance requires research, time, and skills. The final product shows that they had invested in all three.

Playpen Sans comes with Vietnamese diacritics right from the initial release. The combinations, the stacks, and the positions of the marks are spot on. What I love the most is the bottom tail of the hook above, which adds a handwriting touch to the mark. In my type reviews, I always recommend the bottom tail.

While admiring the diacritical marks, it occurred to me that I have seen this typeface before. I went back to my font review archive and there was Playpen Sans, but under a different name. José Scaglione had sent it to me a while ago to review. I almost forgot all about it until now. It is incredible that they made Playpen Sans free for anyone to use.

Neue DIN: German Engineered, Vietnamese Premiered

Neue DIN, made in Berlin by Hendrik Weber, Andreas Frohloff, and Olli Meier, has been German-engineered to take advantage of the variable-font technology. Neue DIN packs 81 styles into one single variable font. The weights span from extra extra thin to black and the widths vary from extra extra condense to extra extra wide.

With the power of variable font, the sky’s the limit. From advertising and packaging, editorial and publishing, film and TV, logo and branding, poster and billboard, software and gaming, sports and entertainment, wayfinding and signage, to website and user interface, Neue DIN is ready to take on any platform and environment.

Neue DIN supports 435 languages, including Vietnamese. Ivo Gabrowitsch and the talented team at Fontwerk cared deeply about the language expansion; therefore, they reached out to me when they designed Vietnamese diacritics for their typefaces. It had always been a pleasure experience working with them, and Neue DIN was no exception.

As versatile, flexible, legible, and incredible Neue DIN is, I wish it had an oblique or italic companion. Without italicized letters, a typeface can’t be a textface. In most writing formats, including APA, MLA, and Chicago, emphasis and title of source needed to be italicized. Let’s hope Neue DIN will have italics in the future.

Visualgui 2024.1

Last week I relaunched this blog with a new text face, Kaius, designed by Lisa Fischbach. Today I found a tiny bug in its Vietnamese diacritics. The breve and the hook above on the lowercase a () are mapped to the circumflex and the hook above (). I thought I misspelled my Vietnamese, but the issue was the font. I reported it to the designer. Hopefully she’ll get it fix.

In the meantime, I needed a new text face; therefore, I went ahead and licensed Herbik, designed by Daniel Veneklaas. I wanted to license Herbik a while back, but I hesitated because I have been spending way too much on fonts. Now I have the legitimate reason to get them.

I could have used an open source typeface on Google Fonts or rented a typeface on Adobe Fonts, but I wanted to use typefaces from small, independent foundries and to host them on my site—not from a third party. I love Herbik. With buoyant and robust serifs, Herbik lends versatility, readability, and legibility to long-form reading text.

Visualgui 2024: Abstract Arts

The previous design of my blog, Visualgui 2023, was solid. I loved the typographic combination, the grid-based layout, and the focus on simplicity and readability. I wanted to hold on to it, but I also wanted to make a change at least once a year to keep up with the tradition.

For 2024, I wanted the visual to be playful since this is a personal blog. I was thinking along the lines of the contemporary style of Swiss design. While browsing through Adobe Stock to get some inspiration, however, I came across Yang Guoquan’s striking abstract landscape paintings. I loved his use of colors and the beauty of nature in his art. I quickly went in that direction. Since Guoquan has a series of landscape paintings, I selected one for the header, one for the footer, and one for the divider between each blog post.

To complement Guoquan’s paintings of nature, I set the headline for each blog post in Borel, designed by Rosalie Wagner. The way Wagner skillfully connected each letter drew me into Borel. Only a lowercase letter connected to another lowercase letter. An uppercase letter would throw off the connection; therefore, I made all my headlines lowercase.

To complement the handwriting headlines, I set the body text in Kaius, designed by Lisa Fischbach. I licensed Kaius a few months ago because I always had a soft spot for a reading serif face and I knew I would need it for this redesign. Kaius supports the Vietnamese language. If I were consulted, I would make a few minor recommendations, but the diacritics are good.

For huge display words as well as small texts, I selected Neue DIN, designed by Hendrik Weber, Andreas Frohloff, and Olli Meier. I was consulted for Vietnamese diacritics on Neue DIN and I just received the updated font files yesterday. I put it to use today.

For coding examples, I stay with IntelOne Mono, designed by Fred Shallcrass. Because I rarely blog about coding, I wanted to use IntelOne Mono more than just for coding examples. I set the date, which is also the permanent link for each blog post, in IntelOne Mono. I am using four typefaces for this blog. I hope I can make Bethany Heck proud of my type combination.

Unlike WordPress’s Twenty Twenty-Four, which has 119 files, Visualgui 2024 has only 3 files. I am keeping it classic until Matt Mullenweg forces me to move to Gutenberg. I can no longer keep up with the modern theme development for WordPress. I would have to use an existing theme like WordPress’s Twenty Twenty-Four and mess around with its visual editor to modify the design, which doesn’t feel right at all. I still want the ability to design a simple blog theme with just 3 files.

That’s pretty much it for Visualgui 2024. I hope you enjoy the new look. If you are reading this from an RSS feed or another social media site, head over to visualgui.com in your preferred browser.

Beacon of HOV

JAY-Z is a lyrical living legend. Underneath his flamboyant flows, he packed his rhymes with articulated alliterations, meticulous metaphors, and witty wordplays. When listening to his music, I always found something new and intriguing. For over a decade, I wanted to pore through his entire catalog to select rhymes that fascinated me. I kept it on the back-burner because I couldn’t find the time. Furthermore, I would have to sift through his misogynist materials as well as his extravagant lifestyles. I had no interest in either subject.

The more I listened to his music, the more his words got into my head. Once I could get past his misogyny and wealth, I found his hustling mentality to change his life and his relentless audacity to change the world inspiring and motivating. In the last few weeks, I was determined to read through song by song, line by line, and word by word starting with Reasonable Doubt to 4:44 and his guest verses for other rappers.

Beacon of HOV is my passion project in which I would like to shed a light on his rhymes that spoke to me. Furthermore, I would like to translate them into Vietnamese. I am not a translator; therefore, I use Google Translate to help me get started. Then I edited Google’s translations with my own understanding of his words. I enjoyed learning the art of translation.

With my favorite JAY-Z rhymes and my Vietnamese translations, I needed a space to host them and the sample section for “Vietnamese Typography” fit the bill. I wanted the web page to be as simple as possible; therefore, I came up with a random system that would feature a different quote, set in a different font, and display a different background photo each time someone visited the page. For typography, I chose typefaces with condensed width so I could make the quotes bigger.

I had a blast putting the page together. I invite you to refresh the page, read the quotes, and be inspired.

A Sample Page for Trúng Số Độc Đắc

While reading Trúng Số Độc Đắc (Winning the Lottery), a classic novel by the great late Vũ Trọng Phụng, I encountered so many use of Vietnamese proverbs. One of my favorites is “Con giun xéo mãi cũng quằn” (Even a worm will turn). I collected them for my literary leisure and created a sample page. Typeset in Loes, designed by Dương Trần.

Retypesetting My Portfolio Site

Donnytruong.com gets a new set of types. Instead just using one sans-serif typeface, I wanted to combine several typefaces to give my portfolio a bit more flavor. For the large heading, I chose Gimlet Banner. For subheadings and user interface elements, I chose Gimlet Sans. For body copy, I wanted to return to a serif face; therefore, I chose Warbler Text. All three typefaces designed by David Jonathan Ross and they are from his excellent Font of the Month Club.

George Washington School of Business

I republished selected projects I worked on during my time at George Washington School of Business. Good old memories. I am glad that I had kept many of them for posterity.