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.

When Type Designer David Jonathan Ross sent out Warbler Text to members of his Font of the Month Club, I immediately updated the body text of my blog.

Even though Warbler Text supported Vietnamese, there were some issues with diacritical marks, including collisions between the horn and the hook above and the horn and the tilde. David reached out to me to review Vietnamese diacritics for Warbler Text. I went through everything related to diacritical marks for Vietnamese and made a list of suggestions. A week later, David sent me an update with all the corrections for Vietnamese diacritics.

If you read Vietnamese on my blog, please do a hard refresh to get the new changes. Warbler Text is such a pleasure to read; therefore, I featured it in Vietnamese Typography. If you want to get a copy of Warbler Text, I highly recommend you join David’s Font of the Month Club. Full membership is only $6 a month. Discount membership for $2 a month is also available.

My mother’s brother passed away on Tuesday. I wrote a farewell piece in Vietnamese. His son, who is my cousin, asked me to put together a tribute website for his father, similar to the one I created for my mother. Of course, I agreed.

I took codes from mother’s site as a starting point. I wanted the same structure and layout, but completely different typography. I never thought I would ever use the Noto global family, due to its neutrality, but here I am. While Noto Serif text is pretty bland, its display companion is quite striking, especially the contrast between thick and thin. As a result, I use Noto Serif Display for big headlines and Noto Sans for body copy and small texts.

I hope it is a fitting tribute to my uncle. Rest in peace, uncle. We love you and miss you dearly.

Welcome to the second iteration of this blog. Warbler, a new text face David Jonathan Ross has sent out to the Font of the Month Club yesterday for February, has prompted the change.

I have been a member of the club from the beginning and I appreciated all the display fonts, but a text face is rare to come by. Even though Warbler Text is still a work in progress, especially with Vietnamese diacritics, I can’t wait to use it and this blog is a perfect place to experiment. Stephen Nixon once quipped, “I like how @visualgui handles this: he updates the fonts on his blog frequently … like once a month, I think?” Whenever I get new fonts, I tend to update this blog to put them to use.

Although the body text has changed to Warbler, I still keep Forma DJR for display and small texts. I also changed the colors to make it easier on the eyes for reading. In addition, I moved the main column to the middle and the sidebar to the left. Thanks to CSS Grid, swapping columns is so easy.

Since we are celebrating Vietnamese New Year this week, this little update is fitting with the holiday spirit. Wishing those who celebrate Lunar New Year with plenty of love, health, and wealth. Stay strong like tigers.

When Vik and José sought out my advice on Vietnamese diacritics for one of their award-winning font families, Bree already supported the Vietnamese language. Upon reviewing the typeface, I noticed its diacritical marks were lacking the handwriting qualities that gave Bree its friendly yet distinctive voice. In addition to their generic shapes, the marks were strangely connected to each other, specifically the acute was attached to the right side of the circumflex and the grave was attached to the left side of the circumflex.

Based on my suggestions, José did a complete overhaul of Bree’s diacritical marks. With attention to the details, he incorporated the handwriting touches and organic shapes from the base letters into the diacritical marks. In particular, he redrew the tilde to give it more curves and added the bottom tail to the hook above to give it a humanist touch. In combined marks, he detached the acute and the grave from the circumflex and repositioned all the stacking accents to the right of the circumflex for consistency, which helped with readability on long-form texts. He also reworked the ư and ơ horns to make sure they were harmonized.

After many rounds of revisions, I was happy to see that the diacritics have become part of the letters. I appreciated José’s commitment to get it right. He sweated every detail to make the diacritical marks flow with the base letters. I can’t wait to see more Vietnamese texts set in Bree.

Welcome to the 2022 rendition of Visualgui. If you’re reading this from your favorite RSS reader, you might want to hop over to your favorite browser to see the new change. As a tradition, I try to do a major redesign of this blog for each year then I would follow up with several iterations throughout the year.

For 2022, the major change is typography. In the past few years, I had always drawn to a serif text face for reading content, but I am switching it up for this redesign. Forma DJR, designed by David Jonathan Ross, is not a new typeface, but it was recently updated with Vietnamese support. I am proud to have played a small part in it. When David sent me the test fonts to review, he was not sure if the straight horns (ư and ơ) were too unconventional for reading. I assured him that they weren’t getting in the way and I alway appreciated when designers like David pushed the tradition. I have no trouble reading Vietnamese texts set in Forma DJR.

In addition to language support, David turned the Forma DJR family into variable fonts, which offered so much flexibility for a typographic system. I love the ability to play with font weights and optical sizes with just a few lines of CSS and see the immediate results in a browser. I can set large headlines, body copy, and small text from just one variable font. Variable font is not only convenient, but also a huge time saver. If I have the option between static and variable, I would go for the latter every time.

For the layout, I wanted to bring back the sidebar. A blog isn’t a blog without its sidebar companion. For large screens, I wanted to fill up as much space as possible; therefore, I brought back not one but two sidebars. CSS Grid makes responsive grid-based layouts fast and easy and this redesign gave me the opportunity to implement it. Even though the grid system was drawn from print, CSS Grid is native to the web. I could change from one to two to three columns depending on the screen size.

Finally, I got tired of gray text on white background for light mode and white text on black background for dark mode. I wanted to bring in a different color. I don’t even know the name of the color I am using for this new design. I pulled it from a text file that contained a list of my favorite colors in hex values I had found and saved in the early 90s. Back then websites were much more colorful than now.

I hope you like the new design.

So I decided to bring ilovengoclan.com back to WordPress. I didn’t want to use DigitalOcean because it would take too much work to setup WordPress and to migrate the site over. I definitely didn’t want to go back to HostPapa; therefore, I needed to find an alternative. WordPress recommends three hosting companies: BlueHost, DreamHost, and SiteGround. I have heard of the first two for years, but not so much the third one.

After reading a bit about SiteGround, I was drawn to its WordPress Automatic Migrator. I signed up for the StartUp plan. Setting up WordPress was a click away. I didn’t even have to touch the config file or the database. I installed the WordPress Automatic Migrator plugin on HostPapa, pasted the migration token, and voila. The migration process took less than five minutes. I switched the IP address and that was it. My jaw dropped. Everything worked just as expected.

I am really dig SiteGround. Give SiteGround a shot if you just want to get WordPress up and running quickly. If you want to migrate your site off HostPapa, SiteGround is the way to go.