Nhờ quyển sách Vietnamese Typography (Nghệ thuật chữ Việt) mà tôi được cơ hội làm việc với những nhà thiết kế chữ từ Á Châu đến Âu Châu từ Nam Mỹ đến Bắc Mỹ. Tôi được họ tin tưởng trong việc nhật xét và góp ý để chữ của họ được rõ ràng và dễ dàng cho người Việt đọc. Được đóng góp một phần nho nhỏ trong công việc đưa nghệ thuật chữ Việt được dồi dào hơn là một sự vui sướng cho những con tim yêu thương chữ Việt như tôi.

Gần đây nhất, tôi được làm việc với Stephen Nixon qua bộ chữ mới Name Sans của anh được thiết kế dựa theo những bảng tên mặc khảm của NYC Subway. Name Sans đã được văn phòng Thống Kê Dân Số của tiểu bang New York chọn làm phông chữ nên họ yêu cầu anh Stephen làm bộ chữ với tiếng Việt và anh Stephen đã tìm đến tôi.

Tuy Name Sans vẫn chưa hoàn tất nhưng tôi tin chắc sẽ là một bộ phông rất hữu dụng, đặc biệt là Name Sans có tiếng nói Việt cho người Việt.

Back in April, David Jonathan Ross sent me a demo version of Roslindale variable font upon my request. I hadn’t a chance to try it out until a couple of days ago when I had the idea of redesigning Trịnh Công Sơn’s lyrics sample page, which I had created to show off Vietnamese typography. In the previous version, I set each quote using various fonts from Font of the Month Club, which I am still a member. It was playful but distracting reading experience. Furthermore, the performance was terrible because of the amount of fonts. In this redesign, I wanted to take the opposite approach.

Although this version of Roslindale is still a work-in-progress, it demonstrates the power of the variable font technology. With just one file, I can use Roslindale for large display, body text, and everything in between. The level of control the designer placed in the typographer’s hand for setting text with variable fonts is unprecedented. As you can see on the page, the author’s name is set in ultra weight. Each song’s title is set in bold display. Each song’s lyric is set in text. Each song has highlighted quotes setting in thin italic display.

I am not sure who reads this page, but I read it all the time. Trịnh Công Sơn’s lyrics are filled with poetic prose. I love to read them when I have nothing else to read or if I need to kill time. It’s a great way to learn Vietnamese and to figure out Trịnh Công Sơn’s spellbinding lyrics. I have been using this page more than I had originally thought.

Many thanks to David for letting me experimenting with demo. I can’t wait to see the final release of Roslinsdale. I know it will be amazing.

My experimentation with advertisement on this blog is so far so good. Even though I haven’t had any clients coming to me to book a spot, I have ads in the lineup in the next couple of weeks. These ads are the result of cold emails. It felt kind of awkward reaching out to potential advertisers who I have known asking to advertise on my site.

The first email I sent out, I felt immediate regret. Would the potential advertiser think I am being greedy? Would the potential advertiser think selling ads on my blog is silly? I kept checking my email to see if the advertiser had responded. To my surprise, the advertiser gave a positive response and was willing to schedule for two to three weeks. That reply gave me confidence to reach out to another one, and another one, and one more. So far, they have been supportive of my advertisement plan.

Why am I selling ads anyway? Obviously, it is not about the money because the price is quite low. I like ads when they are done well, especially high-quality ads in print magazines. The web has a bad rep for advertisement from the start and it is just getting worse. Advertisement on the web has been intrusive, annoying, and just creepy. Ads on the web interrupt the reading experience, slow down the website performance to a crawl, and invade users’ privacy. I don’t want any of that and I want to change all of that. I do not use any tracking. I have no Google Analytics. The only analytic I can see is through CloudFlare’s web traffic. I want to bring high-quality ads to the web. I am glad someone gets it. Sophia Lucero tweeted about this week’s ad:

as one who has a site with a sorta similar split layout / image sidebar, this is a refreshing & honest take on promoting

Before I decided to sell my own ads directly, I wanted to join Carbon Ads. Based on my monthly pageviews, I seemed to qualify. Unfortunately, I have not heard back from them about my application. It could be that my blog is not specific to design or development. I blog about anything under the sun. My experiment with sell ads directly is inspired by John Gruber’s Daring Fireball’s weekly sponsorships. He’s pulling $7,500 a week and he has consistently done week after week for many years. I am obviously not shooting for the moon here. If I can make a third of what he is making, I would quit my full-time job in a heartbeat. I don’t think I can make more than 50 bucks a week, but that’s good enough for me to cover the hosting and domain renewal expenses. That’s all I am aiming for.

Spent the last few late nights tightened up Vietnamese Typography. Every page had been updated, but the recommendation page got the most attention. I wanted to make the Vietnamese specimen for each typeface more prominent. I also added a list of information for each typeface. I got rid of the rating. It doesn’t seem necessary. I also featured two new typefaces from Okay Type. Harriet and Alright came highly recommended to me by a Vietnamese type enthusiast. I really love Harriet. I might license it for the future design of this blog.

Designing for the dark mode had been an afterthought for me. I simply changed the text and background colors and leave everything else intact—even typography. Because I still preferred reading dark text on light background over light text on dark background, I spent most of my time designing for light mode and I had always loved serif text faces. If I have to read text on dark background, however, I prefer sans serif over serif. As a result, I thought why not changing up the typography as well for dark mode.

If you are reading this site with dark mode, the main text is set in Amica Pro, by Dave Rowland. Last year, I had the opportunity to advise Dave on Vietnamese for Amica Pro. I am not sure if he had a chance to implement my recommendations. The version I am using has not been updated. Although some minor tweaks would be better, but the diacritic design over all is pretty solid. For display text, I am using David Jonathan Ross’s Dattilo DJR Banner, which has a variable font.

If you read this site on dark mode, please let me know your feedback.

I am working on a small website for a freelance project. While all the pages are static, I would like to give my client an easy way to update the news section of the site. Implementing a content management system, such as WordPress or Kirby, just to do that is unnecessary.

Over the weekend, I spent an hour revisiting Mavo, which seems like a perfect solution for what I wanted to accomplish. Developed in the Haystack Group at MIT CSAIL and led by Lea Verou, Mavo allows an easy way to update website content with no backend database and without a single line of JavaScript. I gave it a try a few years ago, but got hung up on creating the JSON file in Github. This time, I set up the JSON file in Dropbox and it worked. I was able to make part of the web page editable. Furthermore, I added TinyMCE to give my client an easy way to update the content.

I was thrilled to see how friendly and intuitive it is to update website content with Mavo. This is something I have wanted for many years to offer to my freelance clients, but I don’t have the skill to develop myself. Unfortunately, the huge disappointment came when I viewed the source code. The content section was blank. When I turned off JavaScript, the content also disappeared on the page. I realized that the content was being injected using JavaScript.

If the main content of the page doesn’t show up when JavaScript is turned off, that is a major accessibility issue. Who has JavaScript turned off these days? I have been trying Safari on my iPhone without JavaScript and the experience has been so good that I am continuing to do so. For the website project, I am back to square one again. I should have known that Mavo is a JavaScript library; therefore, it depends on JavaScript to work. Although I can’t implement Mavo, my time spent was not wasted. It was a good learning experience.

I am excited to be working on a new website for Kristin Bair whose new novel is coming out in November. Last week, I sent her a test site to review and she tweeted:

My new website for my new novel (out in November!) is being designed by the ever-brilliant @visualgui. He sent me 1st test with questions. I want to look but I’m afraid to look. I am so weird. Not the only weirdo out there, right?

In 2009, Kristin approached me in several months leading up to the release of her debut novel, Thirsty. I don’t know for sure how she found me, but I suspect it had to do with the slideshow “Bonjour Vietnam.” Before I even designed the site for Thirsty, I asked Kristin if I could read the manuscript and she sent it to me. It was a dark yet beautiful and hopeful novel. After reading the entire book via PDF, I knew the site for the book had to take on a life of its own. Even though the site is aged now—it was before responsive design—I still love it.

In 2014, she followed up with The Art of Floating and I designed a simple, responsive landing page to promote it. I also read the second novel and loved her dreamlike writing and erotic storytelling.

For her third novel, Agatha Arch is Afraid of Everything, I am redesigning her website to promote the new book as well as to bring everything together. It will be a simple, elegant website for a wonderful writer. I pre-ordered the new novel and can’t wait to read it.

The first draft for the new site went well. Her feedback was positive. We’re on the right direction. It feels great that she trusts me to bring her visions to life. I love working on a small-scale website like this. It gives me a break from my regualr work. I can’t wait to share it when we launch it.

Joining the CSS Naked Day 2020, I am removing my CSS to reveal the bare-bones HTML of this site. Without the CSS makeups, the site looks plain, but still works well. It also makes me appreciate the power of CSS. I didn’t realize that my SVG logo has no width or height in HTML. As a result, the default logo takes up the entire browser width. I fixed it. Other than the logo, the blog is all text. I hope you enjoy it. This is as naked as I get online.

Visualgui is my personal blog started in 2003. It is a space for me not only to practice my writing but also to hone my web design skills. In addition to blogging vigorously almost everyday, I redesign it several times a year. The process is more iterative than comprehensive. The most drastic changes would be the typography. Whenever I discovered a new text face, I would love to set it here first. I focus mainly on readability.

This blog has been powered by WordPress from the get-go. The theme I had custom remained the same with just three files: index.php, style.css, and screenshot.png. That’s all. Even though WordPress has grown into a powerful content management system, I still use it as a blog system and nothing more. Keeping the theme simple allows me to quickly change the design with CSS. Most of the time, I can visualize the design in my head. I know what typefaces I want to use and how to set them on the page. I also can see how I layout my content. When I begin coding, I just modify my CSS file. The process is inspired by JAY-Z. He never wrote down his lyrics. He just went into the booth and recorded.

Because I make changes all the time, I have wanted to put together a page to showcase all the designs I have done over the years. Here are the screenshots dating back from 2004 for posterity.

After reading Professional Web Typography, a reader wrote:

Hi,

I contributed to your web book. Thank you for making the web a better place. I have been working on the web (semi-professionally) since around 2004. It’s amazing to me how much things have changed, yet how much they have remained the same. I’m intrigued with webfonts, but am frustrated that professional typefaces are largely cost prohibitive for someone like me that would seek to use them on a small personal website that would generate only dozens of pageviews in a very good month. I would support professional type designers if there were more affordable options.

In any case, thanks again for your web book and for your thoughts on Visualgui.com. I couldn’t stop until I went through all 19 pages in the design category.

Please keep sharing.

Regards,
MF

Here’s my response:

Dear MF,

Thank you for reading my web book. I feel your frustration on the cost for professional typefaces, but I also understand the amount of work goes into creating a professional typeface. For my personal use, I search for typefaces that I can afford.

For example, I am a member of the Font of the Month Club runs by David Jonathan Ross. For $6 a month, I have access to fun, experimental typefaces I can use for my personal projects. I also made a few investments in Future Fonts. I invested early; therefore, the cost was around $15 to $50. As the designers update their fonts, I get the latest releases for free.

If there’s a typeface I wanted but the price is high, I purchase only the fonts I needed. For example, I wanted to use Exchange, by Frere-Jones, for body text; therefore, I only bought two fonts (a regular and an italic) for $75. With just two styles, I know I cannot have bold and bold italic text, but I can turn them off easily with a few lines of CSS—that’s one of the beauties of the web.

If none of those above services work, you can always find a handful of decent typefaces on Google Fonts.

I wish you all the best with your typographic journey.

Thanks once again for contributing to my book.

Regards,

Donny Truong
donnytruong.com