Last Friday, a new version of Loretta, designed by Abel Martins and Joana Correia, landed in my inbox. When I found out that the latest release supports Vietnamese, I was ecstatic. I have invested in a handful of typefaces from FutureFonts, but Loretta is the first completed family with Vietnamese diacritics.

Of course, I wanted to put Loretta to use and this blog is the perfect place for it. To complement Loretta, I immediately thought of Captura Now, designed by Anita Jürgeleit. Captura Now is also one of my recent acquisitions. When I combined them, they looked great together.

For this new design, I wanted to simplify the layout to just one narrow column with generous white space. But then I decided to bring in photography for a change. I played around with Unsplash Source to load random images that are related to typography. This direction brings back the good old days of web design, especially for blogs.

I hope you enjoy this new design and continue to read my rants.

I was assigned to design the landing page for My Law School Portal. The portal is powered by Blackboard. I was given a JSP file to work with. The only way to see how the page work is to upload the JSP file and refresh the page. The page has ton of JavaScript and CSS callings in the backend. I don’t know what are being used for. For the purpose of what I was in charged to do, I just added some custom CSS elements to create the page. It’s like killing an ant with a sledgehammer, but whatever works.

I spent my Sunday night realigning Vietnamese Typography. I stripped the site down to just black text on white background. I am heading toward a much more minimalist approach with the focus on readability. I find colors a bit distracting, but I still use red for the hover state.

I also decided to give the site a dark-mode experience for those who prefer reading white text on dark background. To accomplish dark mode, I had to re-export all the SVG files and embed them directly into the pages instead of linking to them using the img tag. The process was a bit tedious, but it was worth doing since Adobe Illustrator improved its SVG export with responsive support and cleaner codes.

I still love this site very much even though it was published six years ago. My original intention was to treat it like a book: publish it and forget it. The site has moved beyond the book format as I continue to add new type recommendations for Vietnamese. The traffic continues to go up and I get more requests for reviewing Vietnamese diacritics. Vietnamese Typography remains one of my favorite projects and I am very proud of it.

David Jonathan Ross writes about the expansion of his Forma DJR:

Ruggero also took the opportunity to add Vietnamese language support, bringing it in line with my other recent releases. Donny Truong, creator of the incredible Vietnamese Typography resource, advised us on the project, and was particularly helpful with the crucial diacritical horn.

We were nervous about using a straightened horn, which would be an unusual feature for a sans like this one, but we thought it vibed with Forma’s Modernist leanings. To our delight, Donny encouraged us to keep this more daring shape, and we took his pragmatic suggestion to provide a curved alternate for those who prefer it, especially in text.

I have always been opened about diacritics and I alway loved when type designers go beyond the convention for display typefaces. I am so happy to see the final result for Forma DJR. Congratulations to David and Ruggero Magrì for the superb expansion. I can’t wait to try out the variable font version.

Tuần trước đọc một bài văn của Trần Hữu Thực viết về ca từ của Phạm Duy làm tôi nhớ đến 10 bài tục ca của ông. Đã lâu rồi không nghe. Giờ nghe lại vẫn cảm thấy tục tĩu và vui nhộn.

Những bài tục ca của ông không có ca sĩ nào dám hát nên ông đành tự hát lấy. Nếu như tôi là ca sĩ, tôi sẽ thu âm một album nhạc tục của ông. Thôi thì dùng kỹ năng của mình để thiết kế một trang web gồm những ca từ của ông.

Về phần chữ thì tôi dùng Viaoda Libre của Nguyễn Giang Trà và Xanh Mono của Bảo Lâm và Đào Duy. Đồng thời tôi cũng mượn một tranh vẽ thoả thân của bác Đinh Cường để phụ hoạ cho tập tục ca.

Từ ca từ đến phông chữ đến tranh vẽ, tôi đều sử dụng những sản phẩm của người Việt. Vì thế tôi rất hãnh diện với dự án nhỏ này.

Hôm thứ Tư, Mẹ vợ cùng vợ chồng con cái cùng nhau đến chùa Di Đà để cúng 100 ngày cho Mẹ. Nghe sư ông Pháp Quang và sư cô Hạnh Hiếu tụng bài kinh về Mẹ rất ý nghĩa. Tôi chỉ nhớ mang máng:

Nhớ nghĩa thân sinh
Con đến trưởng thành
Mẹ dày gian khổ
Ba năm nhũ bộ
Chín tháng cưu mang.
Không ngớt lo toan
Quên ăn bỏ ngủ
Ấm no đầy đủ

Về nhà tìm trên mạng mới biết đây là bài “Sám Vu Lan.” Đồng thời tôi cũng tìm được 10 bài “Sám báo hiếu” nên quyết định làm một trang web để dành đọc. Trong 10 bài “Sám báo hiếu” tôi tìm được, bài số 6 (“Kệ nhớ ơn cha mẹ”) và bài số 7 (“Sám hiếu từ”) giống với nhau. Chỉ khác tựa đề nên tôi đã đổi bài số 6 với “Sám Vu Lan.”

Về phần chữ, tôi dùng Texturina do Guillermo Torres thiết kế. Texturina có những đặc điểm của Blackletter và Blackletter loại chữ được dùng để in kinh mấy trăm năm về trước. Khâm phục nhà thiết kế Guillermo Torres đã tạo ra bộ phông sắc sảo nhưng rất dễ đọc và có luôn cả dấu Việt.

Mời các bạn đọc bộ kinh “Sám báo hiếu.”

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.