The Beauty of Publishing Books on the Web

With over 25 years of experience, I have designed and developed all kinds of websites. In the past 10 years, however, what I enjoyed crafting the most were web-based books.

With the adoption of responsive web design and web fonts, web-based books can be accessed anywhere and read on any device. Furthermore, web books can be preserved. All of the books I have coded using HTML and CSS; therefore, I still have all the files if my books go offline.

As I was reading about Writebook, a tool from 37signals for writing and publishing online books, I realized that I had created a handful of web-based books on my own. I wanted to collect them here for your reading pleasure.

Pro Web Type was published as an independent study for one of my graduate courses in graphic design. This book combines theory and practicality on the emerging support of web fonts. My goal is to prove that typesetting is fun and rewarding—not intimidating. Web typography remains a craft that is honed, nurtured, and acquired over time, with patience and practice. Join me in a journey to explore this craft.

Thơ Mưa is a poetry collection written by Cao Nguyên. To celebrate the book’s twenty-fifth anniversary, the author wanted to release a digital edition to share with his friends, family, and readers around the world. To reach as many readers as possible, making a responsive website for the book was the ideal solution. Anyone with an internet connection can access the book.

Vietnamese Typography was published as my final thesis for my MA in graphic design from George Mason University School of Art. This book had quickly become an essential guide for designing Vietnamese diacritics. For the second edition, I turned the online book into a rich visual experience. Completely redesigned, the new website offers prominent illustrations, in-depth references, and new typefaces.

The Familý Stories was written by my mother’s youngest sister, Lý Minh Anh. She wrote about her parents and siblings as if she was sitting next to me and telling me our family stories. I loved her writing so much that I asked her to allow me to put it together in a web book so our family around the world could learn about our family stories. Since the stories are personal, I had to password protect the book.

Cây cối quê hương is a children book of poetry on homeland trees. These beautiful, innocent, and poetic words will light up the young readers’ souls, bring them closer to nature, and help with their language development in Vietnamese and English.

Truyện Kiều, by Nguyễn Du, is recognized as the masterpiece of Vietnamese national literature. Structured in lục-bát (six-eight) couplets, Truyện Kiều, which consists of 3,254 lines, is not only a literary Bible but also a national epic that has inspired political debate, social critique, and revolutionary spirit. The book has been translated into English by Vương Thanh.

Cổ Tích Nhi Đồng is a collection of Vietnamese children folk tales with English translations.

Pete the Cat’s Groovy Guide to Life, by Kimberly and James Dean, collected inspiring quotes to live by. I translated the quotes into Vietnamese and created web book for fun.

Làm Đĩ is a novel about prostitution written by Vũ Trọng Phụng. Although it was published in 1936, the book is still a refreshing read. Vũ Trọng Phụng was such a great writer who was ahead of his time. Even though I only read it in recent months, I loved the book so much that I decided to create a one-page web book to preserve it.

badòngthơ, by physician-poet Cao Nguyên, is a collection of three-line poems. The form is similar to the Japanese haiku, but Cao Nguyên also plays with three, five, and seven syllables. When he asked me to bring badòngthơ to the web, I jumped at the opportunity. As of this time, only 15 poems are online, but the printed book can be purchased on Amazon.

New Vietnamese Sample: Love Letter #3

Vũ Thành An is a talented Vietnamese songwriter whose music is well-known for his series of nameless love songs. In 1997, he published his first book, Chuyện tình không tên (Nameless Love Stories), in which he shared stories behind his nameless songs through personal letters.

Even when I was a kid, I always marveled at the beauty of cursive handwriting, especially through letters. In the Vietnamese culture, honing cursive handwriting has been an essential, life-long skill. I have been wanting to create a sample page to showcase a quality handwriting typeface that supports Vietnamese and Vũ Thành An’s letters fit the bill. I chose “Tình thư thứ ba” (Love Letter #3), in which he included the original version and the updated version of “Bài không tên cuối cùng” (The Last Love Letter).

After playing around with a handful of cursive typefaces, I settled on Playwrite Việt Nam, designed by Veronika Burian and José Scaglione. Playwrite Việt Nam is based on the Mẫu chữ thảo tiếng Việt (Vietnamese official cursive script) provided by the Bộ Giáo dục và Đào tạo (Ministry of Education and Training). Take a look.

New Site for badòngthơ

Physician-poet Cao Nguyên, the author of Thơ Mưa (Rain Poems), follows up with badòngthơ (Three-Lines Poems). The form for badòngthơ is similar to the Japanese haiku, but Cao Nguyên also plays with three, five, and seven syllables.

As someone who is rediscovering his native language, I appreciate Cao Nguyên’s simple wordplay. As a designer, I appreciate his generous use of white space. When he asked me to bring badòngthơ to the web, I jumped at the opportunity.

Since the web has plenty of white space, I decided to keep it to one page. Readers just scroll to read the next poem. For the book title, I kept the web version the same as the print version, which is set in SVN Conqueror Didot, a Vietnamese-supported version of AW Conqueror, designed by Jean François Porchez.

In the print version, the body text is set in Microsoft Sans Serif, which is clean and legible. The Vietnamese diacritics for Microsoft Sans Serif, however, are a bit off, especially the circumflex-acute and the circumflex-grave combinations. For the web version, I set the main text in Inclusive Sans, designed by Olivia King, instead.

The website started off with 15 poems. The print version has 119 poems. If you can read Vietnamese or want to learn Vietnamese, you will enjoy these delightful poems. Go ahead, give badòngthơ a read.

New Typographic Sample: Làm Đĩ

Làm Đĩ is a novel about prostitution written by Vũ Trọng Phụng. Although it was published in 1936, the book is still a refreshing read. Vũ Trọng Phụng was such a great writer who was ahead of his time. Even though I only read it in recent months, I loved the book so much that I decided to create a sample page to preserve it. For long-form reading, I chose Job Clarendon, by Bethany Heck and David Jonathan Ross. For headings, I selected Albula Pro, by Silvio Meier. For the book title, I wanted a whimsical vibe; therefore, I went with Mireille, by Anita Jürgeleit.

Dressed My Sites In New Typefaces

I love typography. I prefer licensing new fonts over buying new clothes. I hardly wear new clothes, but I dress my websites in crisp, new typefaces whenever I can.

Yesterday, I typeset my personal blog in Job Clarendon, designed by Bethany Heck and David Jonathan Ross. It was the first time I used a slab-serif typeface for text. Since Job Clarendon Text, which David sent out a couple of weeks ago to his Font of the Month Club members, has a slightly lighter weight, I increased the font size for readability. Then again, I’ve always wanted the text on my blog to be a bit larger by default.

For the blog titles and headings, I used the variable display version of Job Clarendon. To keep the typographic system in the same family, I used Input Mono, also designed by David, for the dates and code samples. I hope you will enjoy reading my old blog in the new text face.

The main text for my blog was set in Euchre, designed by Jackson Showalter-Cavanaugh. I would like to use Euchre for my professional portfolio site, but I didn’t want to use the same typeface on both places. After switching my blog to Job Clarendon, I could use Euchre for my portfolio. Since Euchre is a sans-serif text face, I needed a serif display face to complement it. I ended up with Aneto, designed by Veronika Burian, José Scaglione, Azza Alameddine, and Roxane Gataud.

To showcase my UX design, I was searching for a beautiful, readable sans-serif text face and Euchre fulfilled my needs. I could have used Inter, but I wanted to stand out, not in. I am not knocking Inter. In fact, I give Rasmus Andersson tons of props for making Inter ubiquitous in the UX community, higher education, corporation, and everywhere else. As of this writing, Inter has been served 6.14 billion times through Google Fonts API just over the last week. Inter is featured in more than 1.20 million websites.

Let’s keep it real. Inter and many open source fonts are popular because they are free. It is insane to me that a website project could cost between $100,000 – $200,000, but we can’t license a commercial font family. As a designer, I support small, independent type foundries. If I came across a typeface that I liked, I would license it without any hesitation if it had Vietnamese diacritics. My only requirement for choosing any typeface is the support for Vietnamese. Check out my growing list of typefaces that can set in English, Vietnamese, and many more languages.

Simplexpression’s New Wordmark

Simplexpression is my wife’s online jewelry store. Since the initial launch in 2009, I worked closely with her on the branding and the site design and development.

Over the years, I kept refining the wordmark. I wanted it to be simple yet somewhat expressive. Yet I hadn’t quite got there until the latest redesign.

The new wordmark combines Poetica and Adobe Kis, both typefaces designed by Robert Slimbach. Adobe Kis is simple and elegant. Poetica adds a bit of flare to Adobe Kis. Since they were both designed by Slimbach, their proportions and structures matched effortlessly.

I am happy with the new wordmark. I finally found what I had been looking for so many years.

New Typographic Sample: Đinh Cường

After reading what Trịnh Công Sơn had to say about his artist friend, I decided to put together a tribute page for Đinh Cường, whose website I designed more than a decade ago. I also would like to present some of his oil-on-canvas masterpieces. I created an art-direction sample with the integration of typography and imagery. For typesetting, I chose Platypi, designed by David Sargent, for its quirky features such as the contrast between sharp and heavy serifs and intriguing visual rhythms. Take a look: “Đinh Cường: Thi sĩ của hoài niệm

I Love Ngoc Lan Gets New Typefaces

I gave iLoveNgocLan.com a new set of typefaces. Body copy is set in Platypi, designed by David Sargent. Headlines, UI elements, and small texts are set in Bricolage Grotesque, designed by Mathieu Triay. Just wanted to jazz the site up a bit.

Visualgui 2024: Euchre & Lavishe

Here’s the sixth iteration of this blog. I just copped a license of Euchre, designed by Jackson Showalter-Cavanaugh, and I just couldn’t wait to use it. Euchre goes well with Lavishe, designed by Dương Trần.

I am also returning to readability first. The previous iteration was cool, but could be a bit hard to read. I still like to change it up once in a while. I think I’ll stick with this design for a bit. Then again, maybe I won’t.

We’ll see how it goes. This iteration is quieter, but good for reading the text. I hope you enjoy it.

New Typographic Sample: “Bonjour Vietnam”

On February 4, 2006, I launched a slideshow based on “Bonjour Vietnam,” a French song recorded by Phạm Quỳnh Anh. With gorgeous photography of Vietnam accompanying beautiful melody, the slideshow went viral around the world. Now, 18 years later, I revisit the project and put together a sample page for my Vietnamese Typography book site. The main text is set in Herbik, designed by Daniel Veneklaas, and display text is set in Lavishe, designed by Dương Trần.