Layout Patterns for Scalia Law School Website

When I took over the law school website, responsive design started to gain traction. In my interview presentation, I made the promise that I would make the whole site responsive if I were hired. Even though I had very little knowledge on server administration, which was the main responsibility of the web services developer position, I was hired.

My supervisor at the time told me, “Although you don’t have much backend knowledge, you have a strong sense of design. I am sure you will be able to pick up all the server stuff.” I was thrilled that she had more confidence in me than I did in myself.

To keep my promise, I ripped out all the HTML and CSS and rewrote them from the ground up. I also approached mobile first in my responsive redesign. I did not use any frameworks; therefore, everything I coded tailored to the site—nothing more, nothing less. At that time, we still used floats for layouts, but as soon as the CSS grid landed on major browsers, I rewrote the CSS to take advantage of the grid functionality.

To give our site more flexibility, I developed layout patterns based on the grid system. I put together a demo page to show different combinations (buttons, images, text, video). The grid can accommodate at least 12 layouts. The best part is the fluidity of the grid system. It is made to adapt to any digital devices.

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.

People & Blogs

I’ve been reading Manuel Moreale’s People and Blogs. I am so glad to see people are still blogging. I’ve been doing this since 2003 and haven‘t stopped. It’s all good, baby baby!

How I Become a Type Advisor

Since the release of my book, Vietnamese Typography, in the winter 2015, I have had the opportunity to collaborate with type designers and type foundries around the world. I reviewed their diacritics and made recommendations to improve legibility and readability for Vietnamese readers.

When I decided to drop my book on the open web, I wanted to provide a complete resource for designing Vietnamese diacritics. I did not think about the advising service until David Jonathan Ross reached out to me to review his hyper-stylized typeface called Fit. As the name of the typeface suggested, everything must fit—even the diacritics. The double-stacked marks in Vietnamese proved to be a challenge. We went back and forth many rounds until we came to the perfect fit. In our collaborative efforts, I learned about his design process and decision making.

After my work with David, I realized I could offer similar advice to other type designers. As my site reached the type community, requests for reviewing Vietnamese diacritics rolled in from different parts of the world, including Dalton Maag in London, TypeTogether in Vinohrady, Sandoll in Seoul, Fontwerk in Berlin, Grilli Type in Lucerne, Klim Type Foundry in Wellington, TypeNetwork in Seattle, and Frere-Jones Type in Brooklyn. For a complete list, visit my client section.

In addition to typefaces, I review apps, websites, and any materials with Vietnamese text. As a result, I added type advisor to my resúmé to make the title official.

Need a Holiday Gift?

Check out Dana Nguyễn’s handcrafted simplexpression, in which she captures the joy and spirit of the festive season in the heart of Fairfax City.

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 in your preferred browser.

Replacing Battery for 2018 Toyota Sienna

I can’t recall if we had replaced the battery for our 2018 Toyota Sienna or not. This must be the first time since we bought the vehicle. The battery lasted 5 years, which was not bad. It was dead this morning when my wife took the kids to school. She picked up a new battery from Costco and I replaced it.

  • Battery: $120.
  • A can of CRC Battery Cleaner: $9

Letter to My Sons #29

Happy birthday my dearest Đán—the son who gives me happiness and headaches. You are still my blading champ. As much as I wanted to keep up with you, I could never drop into those tall ramps like you had pulled off. Even though I spent more time at the skatepark than you, I could never catch up to you. If you put your heart and mind into blading, I guarantee that you can do a whole lot more.

If you practice playing the piano and reading the notes, you will excel in your music journey. As I reminded you many times, private piano lessons are expensive. I don’t mind paying if you put your efforts into playing. I don’t want to waste money, time, and your instructor’s dedication.

I admire your snowboarding skills as well, but your head and soul are devoted to your digital activities. You spend way too much time on your computer and your phone. You can’t control yourself. You refuse to do anything else willingly. You isolate yourself. You don’t focus on your schoolwork. You get frustrated and depressed when you can’t spend time on your digital devices. I don’t want to restrict your access, but I need to. I worry everyday about your digital addiction. You are not alone though. Your brothers, your cousins, your peers are living and breathing in the digital generation.

Now that you are twelve years old, I hope that you will make better decisions and choices. I love you and I am here for you until the day I die.


Shutting Off Water Before Leaving for Vacation

While Mr. Điệp fixing our HVAC unit, I sought out his advice on setting the thermostat before leaving for vacation. He recommended setting the temperature to about 67 degrees. Then he also gave me some tips on preventing a water disaster. Here are the steps:

  1. Turn off the the water heater power
  2. Shut off the main water valve
  3. Turn on the sink faucet until all the water drained out then turn it off

If the HVAC unit broke down while we were away, we wouldn’t come back to a swimming pool. When return, we can prevent the disaster even if the pipes busted by shutting off the main valve again. I’ll definitely take his advice whenever we go out of town.