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.

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.

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!

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.

With Portada, ​​Veronika Burian and José Scaglione set out to create a serif family that’s as clear and readable as a sans family in digital environments. Portada is designed specifically for user interfaces as well as long reading online. Portada has extended its support for Vietnamese. In working with Vik and José on Vietnamese diacritics for Portada, I caught a glimpse of how the two talented designers collaborated. They lived up to their foundry’s name: TypeTogether.

For August’s Font of the Month, David Jonathan Ross sent his members his revival of Glyptic from the Victorian era. In his digitized interpretation, David retains many of Glyptic’s ornamentations. Even with the diacritical marks, he incorporates delicate spirals and curlicues. It was such a joy for me to work with him on Vietnamese diacritics for Glyptic DJR. If you are into typography, I highly recommend David’s Font of the Month Club.

Tapping into the rich typographic and stylistic history of baroques, Garaldes, transitional, and modern categories, Atlante is a conventional-yet-excessive serif family for text and display with carefully crafted diacritics for Vietnamese. Its acute stacks high to the left of its circumflex. Its grave stacks high to the right of its circumflex. Its hook above stacks to the right of its circumflex.

I had the pleasure of working with Martin Sesto and Yorlmar Campos on Vietnamese diacritics for Atlante.

My kids joined Liên Đoàn Hùng Vương, a Vietnamese Scout Pack in Northern Virginia, a few years ago. During their weekly activities, they often sang Vietnamese Scout songs from a small booklet. The kids and adults often lost these booklets; therefore, I wanted to create a digital version they can use on their phone. For friendly reading, I chose Bree, designed by Veronika Burian and José Scaglione. For the design, I took the colors from the Liên Đoàn Hùng Vương logo. I also used the details element in HTML to reveal and collapse the lyrics quickly. It’s a fun, little project that I can reference when I join them to sing. I hope I can memorize all the songs. Take a look.

Dr. Mỹ An T. Nguyễn and I go all the way back to elementary school when we were two new kids immigrated from Việt Nam. Right from the start when took ESL (English as a Second Language) classes together, I knew she would become successful later in life. Despite her limited English, she excelled in all subjects from elementary throughout high school.

After more than two decades of losing contact, we rekindled our friendship. As I had predicted, she has become a successful optometrist who runs two eye-care offices. When she reached out to this old friend of hers to help redesign her website, I could not refuse. Her goal is to showcase both of Everlasting Eye Care offices on one website. She also wanted her site to be easy on the eyes with personal attention in the message.

In our initial conversation, I could tell that Dr. Nguyễn cares deeply about her patients. She wants to enhance people’s quality of life by improving their eye health. In revamping her website, we featured a personal note from Dr. Nguyễn addressing to her patients right on the homepage. For the look and feel, we decided on a clean, crisp, and simple design with a straightforward and intuitive user experience.

The body text for the website is set in Lexend, designed by Bonnie Shaver-Troup, Thomas Jockin, Santiago Orozco, and Héctor Gómez, for comfort reading experience. Headers are set in Literata, designed by Vera Evstafieva, Veronika Burian, Irene Vlachou, and José Scaglione, for high-contrast display to grab readers’ attention.

As a bonus to an old friend, I created a new word mark for Everlasting Eye Care. I combined P22 Cezanne, designed by James Grieshaber and Michael Want, with Optician Sans, design by ANTI Hamar and Fábio Duarte Martins. While the fancy script, which based on Cezanne’s handwriting, provides a free, creating vision, the geometric sans, which based on the LogMAR Chart, provides legibility for visual acuity. The two contrasted typefaces complemented each other for the word mark.

With Dr. Nguyễn’s busy schedule, the site took a long time to launch, but it is my pleasure to redesign the new Everlasting Eye Care website for my friend.

Simplexpression, the website for my wife’s tiny jewelry design studio, gets a refresh. The goal for the update was to replace the typeface. Previously, the site was set in Mrs Eaves, designed by Zuzana Licko. While I always love Mrs Eaves, I don’t want to be depended on Adobe Fonts to serve the font files. I would like the font files to be on the same server.

Warbler, designed by David Jonathan Ross, is a perfect replacement. Warbler is beautiful and elegant. In addition, it is designed for digital screens. Since Simplexpression doesn’t have much text, I only use the beta version of the variable font to take the advantage of optical sizes for text as well as headings. The new logo is also set in Warbler. If you look closely at the logo, you might able to spot the subtle play on optical sizes.

The detail pages were redesigned using CSS Grid to align the photos side-by-side on large screens. In addition, dark mode was added to match the users’ system preference. Take a look and see if you find something you like.