In early September 2020, Shari Hersh, director environmental justice at Mural Arts Philadelphia, reached out to me after she saw “Mapping Corruption,” an interactive webpage I designed for the American Prospect. Ms. Hersh liked the concept of presenting an interactive map and discovering the hidden corruption in every agency in the federal government under the Trump administration. Her team had been working on a similar project to unearth the hidden connections between COVID-19 and climate change. She invited me to design a website for this project.

Based on Professor Donna Haraway’s implosion method, COVID & CLIMATE is a collaborative effort between activists and artists exploring and illustrating the deep connections between environmental injustice and ecological crisis. By transforming a collective body of research into an interactive presentation, Covid and Climate invites people into conversation while generating a deeper understanding of the world around us.

Although the project was still a work in progress, I accepted Ms. Hersh’s invitation. Once her team completed the writings and drawings, I would start to develop the site. In late December 2020, we scheduled a kickoff meeting via Zoom. Unfortunately, it was on the same day I had to make one of the toughest decisions in my life. Should my mother who contracted COVID-19 get on the ventilator? I called off the meeting. I told Shari and her team that I had an emergency related to COVID-19 and that I could not take on the project at the moment.

My mother passed away after her brutal battle with COVID-19. I spent two months grieving and writing. In late January 2021, I sent Ms. Hersh an apology and checked in to see if she had found a web designer for the project. I felt bad for dropping the ball on her and her team, but I did not expect to get the job. Her team was in the process of interviewing several candidates for the project. Twenty four hours later, they decided to move forward with me.

From this point on, I worked closely with Ms. Margaret Kearney, an artist who led the project. From the get-go, I requested that all the illustrations must be in vector format so that I could export them into SVGs for the web. I loved working with SVG. It almost felt like using Flash in the early 90s, but in the web standard format. Although animation inside SVG is limited, I could add HTML classes and used CSS to give the artwork some scaling and fading effects.

In addition to handwritten text integrated into the artwork, the headers were set in Korinna. The text inside the blue boxes was previously set in Korinna as well and the body text was originally set in Futura. Korinna looked fine as headers, but the spacing was odd as reading text. Since I didn’t have access to the web-font format for Futura, I proposed switching both to Forma DJR. The change was approved.

With all the materials on hand, I designed the website quickly. Since this project was one of its kind, it deserved its own domain name and hosting. Because it was not tied into any content management system or technology, I had the complete freedom to design and develop from the ground up. The site is straight up HTML and CSS with heavy use of SVGs. I used a bit of PHP to make the site easy to manage and to update. Because all of the illustrations were in vector format, they look great on any device.

I learned a great deal while putting the site together. I read all the pages just to make sure all the characters and punctuations were correct, but also to learn about these invaluable discoveries based on facts and thorough research. I love the balance between engaging illustration and insightful content. Don’t take my words for it. Browse through the pages, read the texts, and discover the hidden connections yourself.

I dedicate COVID & CLIMATE to my mother.

In the last few weeks, I made some small updates to Vietnamese Typography. On the homepage, I added more random covers showcasing big, bold display typefaces with vibrant colors. I also added large display text throughout the pages to accommodate body text.

The significant update was the recommendation page. I decided to remove all open-source typefaces. When I first published this book, support for Vietnamese language was hard to find. Now the open-source community has stepped up its support for Vietnamese. Google Fonts now has a sizable collection of quality typefaces with Vietnamese. With the release of Fontshare from Indian Type Foundry, it seems like all of its typefaces support Vietnamese. I wish it had a language filter like Google Fonts.

Open-source typefaces are important and they are a great service to make graphic design and the web typographically better. Anyone can download and use them; therefore, I don’t need to recommend them. I would like to focus on typefaces from small foundries and independent type designers instead. A smaller selection also made it manageable for me. Looking at the current list, I need to showcase typefaces designed by Vietnamese type designers. That will be my goal moving forward.

If you’re a Vietnamese type designer and you have a complete typeface, particularly text face, I would love to showcase your work. It has to be commercial and not open source.

It’s only March and my blog has gone through three iterations. I am making changes to my website once a month. I can’t help myself. Whenever I acquired a new typeface, I want to put it to use immediately and my personal website is the perfect place to do so.

Last week I purchased Every, designed by Anita Jürgeleit, not only because it is such a damn fine typeface, but it also supports Vietnamese. I am setting the body text for this blog with Every Micro and I am using its thin instead of regular weight. It is a risky choice for readability, but I am going for it.

For the blog titles, I am using Job Clarendon, designed by David Jonathan Ross in collaboration with Bethany Heck. Job Clarendon is also released in March for Font of the Month Club. I always loved Clarendon and this interpretation is striking, especially its Vietnamese diacritics.

For user interface and small text, I am keeping Name Sans, designed by Stephen Nixon, from the previous iteration. I also keep Recursive Mono, also by Nixon, for coding samples.

The layout stays the same. Black text on white background for light mode and white text on black background for dark mode. There’s no switching button between dark and light mode. It all depends on the visitors’ preference set on their device.

Lastly, the wordmark has a bit of motion. A red light moves through each letter letters. I am just having fun with the SVG.

My wife said that I have way too much time on my hand. Of course, she’s being sarcastic. I was working on my website late at night when I was supposed to be sleeping. It’s my passion as well as profession to keep my skills sharp.

While reading Nguyễn Phan Quế Mai’s The Mountain Sings, I highlighted all the tục ngữ (Vietnamese proverbs) she had incorporated throughout the novel. I loved her straightforward translations of these proverbs. For example, she translated “Có công mài sắt có ngày nên kim” as “Perseverance grinds iron into needles.” These are simple proverbs, but a translator has to know both languages well to make the translation accurate and relatable.

I have wanted to put together a project for these Vietnamese proverbs with English translations for while, but couldn’t find the time or the right typeface. Last week when Anita Jürgeleit released Every, I found a perfect match. For this project, I wanted to connect a talented Vietnamese author who had written a beautiful, poignant novel with a skillful German type designer who had created an elegant typeface.

Every typeface feels just right for typesetting everyday’s Vietnamese proverbs. I wanted to show the contrast between macro and micro sizes of Every. I also pulled the colors from the book cover for the background. Take a look. I hope you’ll find something inspirational.

For the second iteration of this blog, I am switching up the typefaces. The body text is now set in NewsReader, a beautiful serif typeface by Production Type. NewsReader comes equipped with legible Vietnamese diacritics. Big headers are now set in Name Sans, by Arrow Type. Name Sans supports Vietnamese, in which I had a small role in it. I am keeping Recursive Mono, also by Arrow Type, for coding samples.

For the design, I am stripping down the layout a bit and going for all black and white with red only on the hover state. I also keep the dark theme, which is pretty much the opposite of the light theme. The accented color is still red.

I also brought back the navigation, which I had avoided using for so long. I moved all the information related to the site to an info page, but I filled out the navigation with links to various sections as well as to my professional website.

I keep tinkering around this blog. It’s my personal site.

Last Friday, we rolled out yet another redesign for Scalia Law School website. This is our third redesign in the past couple of months. Our new dean did not like the previous turquoise color as an overall theme; therefore, we added a gray background to our top head just so we can use white and a bit of gold on our logo.

We made the homepage banners bigger and their new purpose is to attract prospective students. We went a bit crazy with the banners in the previous design. We kept getting requests for new banners for stories that didn’t even warrant to be on our homepage.

We switched from Myriad Pro to Minion 3, both designed by Robert Slimbach, for our headers. Minion 3 Display provides a more contrast to Pelago, also designed by Slimbach.

We brought back the action buttons: visit, request information, and apply. We highlighted our programs: Flex JD, JD, LLM, JM. We expanded our spotlights to showcase our diverse community. We made news and events less dominating.

Basically, we had gone back to where we were before we hired a consultant to change up our homepage. The consultant and our director of communications wanted banners and news on our homepage to take our visitors directly to somewhere else instead of drawing them into our site. These links often take visitors to news outlets that hit the paywalls. As a result, our readers couldn’t read the content. I am glad we’re making the news less prominent on our homepage.

The work hasn’t been done. We still have some tweakings to do. The site has grown so much since I took the reins almost a decade ago. The design had stood the time. I still maintain the main CSS, but we sprinkled inline styles here and there over the years. It is still manageable. I just need to go through and see if they are visually compatible with the new theme. Our next step is to bring more colors to the pages. We’ve gone from too-much colors to neutral gray to back to colors again. I am not complaining as long as I get pay to do.

Dr. Joy Garcia Tiên is my life-long mentor. I got to know Dr. Tiên through the Upward Bound program way back when I was in seventh or eighth grade. Upward Bound was the pre-college program that gave kids from low-income families an opportunity to pursue a higher education. By providing summer college courses, campus visitations, and job shadows with professionals in different fields, the Upward Bound program prepared children with limited access to educational resources a path to a better future. Through her kindness, compassion, and mentorship, Dr. Tiên had played an essential role in getting many of us, particularly Vietnamese-American children of immigrants, to where we are today.

Two weeks ago, I met up with Dr. Tiên for the first time in over twenty years. Even though we haven’t met face to face, Dr. Tiên has always been in contact to see how I was doing. She understood what it was like losing a mother and offered advice to help me pull through the darkest days of my life. When we were catching up about the good old time, in a windy evening at my mother’s resting place, Dr. Tiên mentioned that she is working on her own coaching and consulting endeavor called Educational Partnerships for Success. Helping kids to success has always been her passion for over 30 years; therefore, this project is near and dear to her heart. I offered to help with her website. Dr. Tiên only had two requirements: the ability to update the content herself and a blog component to share her writing. To meet her needs, WordPress is the obvious solution.

Since Dr. Tiên already purchased the domain name, we just needed to get the hosting through the same company. Domain.com’s hosting package offers SSL certificate and WordPress installation with a click of a button. I hope these features become standards for many hosting companies if they don’t have them already. Once WordPress was installed, I activated its Twenty Ninety theme. This theme offered a clean, simple design that would work well for Dr. Tiên’s website. To make it personal, I created a child theme to add the logo at the top, change the colors to match the branding, and reset the typography. For headings, I chose Fraunces, designed by Phaedra Charles and Flavia Zimbardi, for its playfulness. For body text, I chose Rosario, designed by Héctor Gatti, for its academic friendliness. The two typefaces complement each other.

With the new Gutenberg editor inside WordPress, this theme gave me the flexibility to create different editorial elements through UI components as well as typographical hierarchies. It seemed to be the way to take advantage of WordPress’s Gutenberg. The days of creating a WordPress theme from scratch are long gone for me. I just needed to create the shell and rely on Gutenberg’s blocks to do the rest.

With the website up and running, I hope it will play a small role in getting Dr. Tiên started. She had already put together some wonderful STEM programs for the kids. I can’t wait to get my boys to enroll once the pandemic is under control. With her PhD in math, Dr. Tiên is also passionate about helping students who struggled with math to build more confidence in themselves.

I believe in Educational Partnerships for Success because Dr. Tiên had tutored, mentored, and guided me into the right direction. I am grateful for her support and her continuous work to help underserved kids, like myself and my friends were, to expand their potentials, reach their goals, and pursue their dreams.

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.

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ẹ.

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!