Visualgui 2021 Iteration 1: Recursive

I am proud to introduce the first redesign of this blog for 2021. The layout is still simple. The color is still red, but much more dominating. The focus is still on readability. The typeface is all new. In this redesign, I wanted to have just one typeface—one font file—to rule it all. From large display typography to bold headings to readable body copy to legible user interface to coding samples to small texts, Recursive, designed by Stephen Nixon, takes care of everything thanks to the flexibility of its variable font.

I had the opportunity to work with Stephen on adding Vietnamese diacritics to Recursive in September, 2019. Although I always had the typeface in mind, I didn’t know which project to use it with until Stephen sent me a copy of his book on Recursive in December of last year. The book is filled with typographic beauties and versatilities. It shows all the possibilities of using a variable font. The best part is where Stephen shared his original concept and the meticulous process. I was inspired.

With five different axes to play with, I had a lot of fun redesigning the site live in the browser. Wakamai Fondue was incredibly helpful in testing out different combinations as well as copying and pasting the CSS properties. Even though I don’t blog about coding much, I still love how the coding font matches up exactly with the text font.

I hope you enjoy the new design and thank you for reading.

Trang web tưởng nhớ Mẹ

Trong những chuỗi ngày sống lo lắng, sợ hãi, và đau buồn, tôi nằm trong căn phòng xưa của mẹ mòn mỏi đợi chờ tiếng reo điện thoại của bác sĩ để báo niềm hy vọng. Ngược lại, tôi chỉ nhận được những tin đầy tuyệt vọng. Vì không biết gì về lĩnh vực y học nên tôi không thể làm gì được cho mẹ. Dưới tâm trạng bất lực, việc tôi có thể làm là thiết kế trang nhà riêng cho mẹ.

Thế là tôi bắt tay vào làm. Công việc đầu tiên là chọn lọc những hình ảnh cho mẹ. Xem lại những tấm ảnh mẹ đi nghỉ mát bên Mexico với cu Đạo và vợ chồng tôi, mẹ ôm mấy đứa cháu nội vào lòng, mẹ cảm động trong ngày mừng sinh nhật 80 tuổi, mẹ lúc còn trẻ, bao nhiêu ký ức tràn về. Tôi cười mà giọt lệ tuôn rơi. “Mẹ của tôi có một nụ cười, đẹp như đóa hoa đời rực tươi” (Ngọc Tú Anh).

Tôi kết hợp những tấm ảnh của mẹ được chọn lọc với những câu thơ nói lên tấm lòng của mẹ. Và như thế tôi đã tạo ra 12 tấm băng rôn đủ để làm ra một cuốn lịch 2021 với chủ đề mẹ và đặc biệt là mẹ của tôi. Tôi đã in 3 quyển cho gia đình tôi và hai chị.

Khi tạo trang nhà riêng cho mẹ thì phải viết tiểu sử của mẹ. Tôi viết rất tổng quát về mẹ, như nơi mẹ sinh ra hoặc mẹ thích làm gì trong cuộc sống. Không ngờ bài tiểu sử đó phải sửa lại thành bài cáo phó. Trong đó tôi rất thích câu chuyện người chị họ đã kể cho tôi nghe mấy hôm trước. Tuy câu chuyện rất đơn giản nhưng nó vẫn nằm trong trí nhớ của chị 50 năm qua.

Khi chọn lựa kiểu chữ, tôi nghĩ ngay đến Queens của nhà thiết kế Sebastian Losch. Anh đã tặng cho tôi bộ phông này khi chúng tôi trao đổi thiết kế về những dấu phụ cho ngôn ngữ Việt. Tại sao tôi lại quyết định chọn Queens? Đơn giản là vì trong tôi mẹ luôn luôn là một nữ hoàng, đặc biệt là một nữ hoàng nấu ăn những món miền nam Việt Nam.

Nhắc đến món ăn thì tôi là một trong những người được may mắn thưởng thức rất nhiều món ăn ngon và đảm bảo rất sạch sẽ do chính tay mẹ nấu. Lúc trước có một thời gian tôi viết rất nhiều về những món ăn Việt trên trang blog cá nhân của mình. Vì thế tôi đã chụp được một số hình ảnh của những món mẹ đã nấu. Khi ôn lại hình ảnh những món ăn khiến tôi nghĩ ngay đến kiểu chữ Patrona của nhà thiết kế Ringo R. Seeber. Patrona được thiết kế hướng về ẩm thực. Thế là tôi phối hợp giữa Queens và Patrona để tạo ra một trang nhà cho nữ hoàng ẩm thực.

Sau cùng tôi chọn phông kiểu chữ Saira Extra Condensed của Omnibus-Type để dùng cho những phần cần chữ nhỏ như dẫn đường (navigation) hoặc bản quyền (copyright).

Mời các bạn và người thân viếng thăm trang nhà riêng của Mẹ.

A Tribute to My Father

Last night, I put together a webpage in memory of my father. It features photos, a couple of blog posts I have written here, and a video of his funeral. I hope my brother, sisters, and extended family members will send me their photos and written memories of him.

The typeface is the variable version of Piazzolla, designed by Juan Pablo del Peral for Huerta Tipográfica. Piazzolla is a versatile type system with great Vietnamese support.

This is my way of paying a tribute to him. I can always visit him here. He’s not just in my heart and mind, but also in my virtual home. I love you, dad!

Visualgui 2020 Iteration 7: Roslindale

For the seventh iteration of my blog, I reset the typeface using the demo variable font of Roslindale, designed by David Jonathan Ross. Although this version of Roslindale is still a work-in-progress, David would send it to any member of his Font of the Month Club to try out. Of course, I jumped on the opportunity to test it out.

For big headlines, I wanted the ultra style to grab readers’ attention. For smaller headings, I used the bold display style. On mobile devices, body text set in text regular and text italic at 100% (16px). For large screens, I wanted to increase the size to 125% (20px). At this size, the text weights looked clunky and bulky; therefore, I changed to deck narrow regular and deck narrow italic. The deck style reveals less details at larger size. As a result, I am using six different fonts, but only needed one file. That’s the power of the variable font technology.

For code samples, I needed a mono font, but I hardly write about coding. It would be a waste if I had to include a font in my CSS, but would not using it much; therefore, I used Input Mono, also by DJR, for small details such as category, date, and pagination.

New Dean New Vibe

The Scalia Law School has a new dean who comes from business background. His first order of business is to get rid of Mason’s Green, Gold, and Orange. The only color from the Mason guideline that he approves is Bright Blue (#007dc5). Thanks to SASS, updating the color scheme for the entire website was effortless. Replacing one CSS file and voila!

Yesterday, we rolled out an updated logo with Mason’s Bright Blue. All the links and highlighted items are also blue. Our new color palette consists of blue, gray, and white. Maybe I getting wearied of Mason’s Green, Gold, and Orange, but I find the Bright Blue to be refreshing. I also appreciate the limitation of just using a few colors.

I am sure there will be more changes to come, but just changing the color alone makes a difference.

Visualgui 2020 Iteration 6: Bookerly

I changed the typefaces again. For body text, I switched to Bookerly, designed by Dalton Maag for Amazon Kindle. I love how legible Bookerly appears on e-books. I also changed the background from pure white to light grain-like paper quality. I am a lover of physical books.

For the headers, I went with Ballinger, by Signal Type. I had the opportunity to work with Max Phillips on supporting Vietnamese. I really love the black weight for headers. I wanted to use Ballinger’s text weight, but I still hesitated to use sans serif for body copy. Maybe some time in the future.

In the previous iteration, I said that it would be a while before I made the change again and yet it only lasted 4 days. That’s the beauty of having my own site. I can change it up whenever I want to. I love the freedom to write as well as the freedom to design.

The homepage is featuring a lovely illustration of a diverse group of people supporting Joe Biden. I lifted that artwork right off joebiden.com, which is being displayed way too far down on the official website. I wanted to give it more prominent space on my site until Election Day. Go vote for Sleepy Joe so you can sleep better at night knowing a competent, compassionate president taking care of America.

Visualgui 2020 Iteration 5: Bitter

For iteration 5, I changed the typesetting to Bitter, designed by Sol Matas. In the previous version, the body text was set in Harriet, by designed by Jackson Showalter-Cavanaugh. Although Harriet is beautiful, its serifs appeared a bit too busy for reading on the web. I wanted something simpler and less busy. Bitter fits the bill. Bitter is an open source typeface and it is also a variable font.

In the past few years, I tried to avoid using open source fonts. Because they are open source, anyone can use them. I wanted to have a bit of a selective typeface, but I can’t resist Bitter. Unlike what its name might suggest, Bitter is such a friendly text face. It is so much easy on the eyes. It has distinctive serifs, but not too overwhelming. I wish its black weight has more contrast, but it is still pretty good-looking for headlines. Since it is a variable font, it would be a waste not to use it.

Google Fonts has been putting out so many high quality typefaces with Vietnamese support. I am very impressed with its dedication to typography. I still don’t want to let them host the fonts on its end. I am hosting all the fonts on my own server. If you want to use Bitter, go check it out on Google Fonts.

Visualgui 2020 Iteration 4: Ad Free

The forth iteration of this blog returns to an ad-free design. The ad experiment was fun, but didn’t quite work out as I hope it would. I didn’t think it would work out because I always wanted to change up the design of this blog. With ads, I might be stuck with one design for a while. As a result, I wanted to get back to just making this site a personal blog like it always has been.

A few months ago, I also reduced the footer. I moved all the footer stuff to the info page. The bottom of the blog is now much lighter. I like that. Scrolling on a mobile device is less exhausting.

Of course, the redesign comes with new set of typefaces. Body copy is set in Harriet. UI elements are set in Alright. Both typefaces designed by Jackson Showalter-Cavanaugh for Okay Type.

Simplexpression Rebranded

When David Jonathan Ross sent out Pomfret on July 1st to his Font of the Month Club members, I immediately thought of using it for Simplexpression.

Pomfret is such a beautiful, elegant titling face based on Bertram Goodhue’s Arts & Crafts lettering for The Knight Errant magazine. Unlike the original drawing, David increased the contrast between thick and thin to give Pomfret the extra edge.

In addition, David added over 175 ligatures. Simplexpression has always been about the hidden letter E. As a result, Pomfret is perfect for the Simplexpression brand. With the new wordmark, MP, EX, and EX are joined together. Although SS is a ligature, I wanted to make it extra special. I flipped the second S to form the heart shape. It also gives a sense of weaving strings together like when my wife created her pieces with her hands. I really love how the new wordmark turned out. Take a look.

New Site for Kristin Bair

I have the pleasure of working with Kristin Bair to promote all three of her novels: Thirsty (September, 2009), The Art of Floating (April, 2014), and now Agatha Arch Is Afraid of Everything (November, 2020). With the release of her new book, she wanted a new website. Her goal is to have everything in one place. I revamped her website to draw attention to her new novel and to simplify her online presence.

Read my write-up or check out her new site.