Antoine Fauchié wrote a detailed analysis of the design of the website for Professional Web Typography. The article, “Un design de livre web,” is written in French, but I could understand it thanks to Google Translate. Although I haven’t talked about my design decision, Antoine pointed out a critical intention:

L’une des grandes originalités de ce livre web, c’est justement cette table des matières en pied de page, et non dans un menu dédié comme c’est souvent le cas. Les menus habituels sont encore majoritairement placés dans le header – dans la partie supérieure du site, avant le contenu – avec une adaptation en menu hamburger – les fameuses trois barres horizontales – pour des écrans plus petits. L’accès aux différents chapitres et sous-chapitres se fait très facilement, et quoi qu’il arrive l’arborescence est toujours visible.

En terme de design et d’ergonomie, ce choix de la simplicité est à mon avis le bon. Limiter les subterfuges dynamiques – menu sandwich, éléments de navigation qui n’apparaissent qu’au survol, introduction d’interactions issues du tactile – permet une grande accessibilité de l’outil, proche de celle d’un livre physique, papier.

To offer an accessible design, I moved away from the popular trend of hiding everything under the hamburger menu. The menu or the table of contents is always available on every page and readers don’t have to click on the hamburger to access it. In term of technical implementation, I was able to get away with the dependency of JavaScript.

Many thanks to Antoine for spending the time to write this article.

I have been getting a handful of inquiries about a print version of Professional Web Typography. Even my professor suggested that I should go for it. And here’s an email from a reader:

Hi Donny!

I just discovered your book, it is fantastic. I’m a graphic design student who has learned a lot of typographic specifics, but none directed at web usage, so this is a really great tool.

As much as I love what you’ve done, this is exactly the kind of book I would want to buy as a physical thing. Do you have any plans to setup some kind of publishing? If not, I’m considering copying the content, laying it out myself and printing and binding it myself (only to be used for personal use of course).

Thanks,
J
Graphic Designer and ProWebType.com Enthusiast

I have no plan to make a print version for several reasons. First, the book about web typography should live and be read on the web. Second, I took the advantage of the web to keep the book as succinct as possible. If readers want to learn more, I have provided links to other resources throughout the book. Third, readers can download and practice the examples I have uploaded to GitHub. Forth, I am about to graduate with a MA in graphic design, and yet I am still don’t know my way around InDesign. I am getting really good with Illustrator though. All the illustrations in the book are created with Illustrator because I love SVG. With all the benefits of the web, I don’t see any reason for me to go print, even though, I must admit, I still love reading books on paper.

D.L. Hughley goes through a huge pile of laundry list in his latest special Clear. It’s hard to remember every jokes he made, but one particular stood out on the topic of police brutality. His routine would have been more effective if he dove deeper into a particular topic rather than landed short punchlines. It took me a minute to get the “airbag” reference.

Tingli’s Inspiration of Book showcases books designed to offer unique experiences. Readers can crumble a piece of paper into a ball with Play More, spill coffee on the Expresso, or even eat a Cookie Bookie. My personal favorite is Snoop Dogg’s Rolling Words: A Smokable Book. You can roll it up and smoke it. With the vast number of projects and the minimal writing make it a perfect coffee table book to flip through for inspiration.

When I set out my price my book based on the pay-what-you-want model, I put my trust in the readers. I am glad to see readers like Kevin Lorenz supporting it. He tweeted:

If you enjoy reading @visualgui’s book ‘Professional Web Typography’ on https://prowebtype.com please be fair, share and pay for it! <3

I chose the web because I wanted to deliver valuable information in a legible, readable, and accessible format—anyone with an internet connection can read the book. The book is available to be read, but it is not free, as Kevin puts it:

@visualgui thank you for writing such an amazing book and making it accessible for so many people.

Readers have been paying for the book in various amount: $1, $3, $5, and $10. Thank you.

Yesterday I saw the following tweet from Ben Tambling:

Love type resources, and this is a gem, but is it just me that finds the site itself a bit lacking in readability?

As I was processing what he meant, Ben sent me a personal email explaining to me that the text is a bit small on a large screen. Within minutes, I made the update to make the type much bigger on desktop. All I did was uncommenting some of the CSS lines I had in my SASS file. When designing for the site, I had the text size larger for desktop, but then I decided to stay at 16 pixels for consistency across devices. After I made the update, Ben tweeted:

Update #2: Very honoured to have Donny listen to my feedback regarding the site, now reads like a dream.

I am glad that Ben pointed it out because I like the new changes. Not only the text is more readable, but also the justified text looks like you’re reading a book. Another issue got fixed is the drop cap. It looks much more consistency now in different browsers. In the previous design, the drop cap was inconsistent because I only used CSS. Firefox was always a few pixel off the baseline. Someone at Adobe pointed out to me that although I talked about dropcap.js in my book, I was not using it on the site. Although I played with dropcap.js, I didn’t implement it because I didn’t want to add JavaScript and the drop cap didn’t behaved as it should in Firefox. Somehow the drop cap blew up twice the size it was supposed to be. The problem had to do with Adobe Caslon Pro, the typeface I used for the body copy. When I use Myriad Pro or Source Code Pro, the drop cap looked fine in Firefox. As a result, I kept CSS for my drop cap. I hope that browsers will implement the initial-letter property soon to make drop caps work consistently on the web.

As for the buzz, Professional Web Typography was featured in issue 23 of “Product Design Weekly.”

Love this tweet from Sonia Su:

Aspiring to make my website & résumé as simply beautiful as @visualgui’s! #obsessed #typography

I am also getting contribution from some readers. To show my appreciation, I added some CSS demos to “Practicing Typography” for them to play with. Thank you for supporting this project.

Lastly, thanks to Ms. Nguyen for a big shout-out.

The final grade is in and I couldn’t be happier: A+ for Practices in Graphic Design. I had accomplished what I set out to do with Professional Web Typography.

I am also glad to hear that some readers find this book useful.

Paul Bradley:

[A] succinct overview of web typography techniques.

Matti Besser:

[A] great resource for everyone doing typography on the web. Good read to gain and refresh knowledge.

Chris McElwee:

Thought you might like this; an awesome resource that will be a massive help to me.

Tomango:

Brilliant guide to web typography. Fantastic online resource.

Typewolf:

A comprehensive online book covering web typography.

Thomas Byttebier:

A book on professional web typography, published on the web. Definitely bookmarked.

On Sunday night, I spent several hours polishing Professional Web Typography. At around 2am on Monday, I launched the site, published the announcement, and notified Twitter, Facebook, and LinkedIn. Went to sleep and woke up three and half hours later when my iPhone gave me this notification. One tweet from Tim took off.

Jeremy Keith has written up about it in his 100-word series. The Pipe has chose it to be “Pick of the Day.” BeBe Ragsdale, my MA classmate, says: “This book is definitely one of a kind!” I couldn’t be happier. I am glad that the book is well-received.

One of the things that I seem to give the wrong impression is that the book is free. Although all the contents are available to the public, the book is not free. If readers find this book is useful, they can pay what they want for it. I explain the pricing model in the support section. I take on this project with deep passion and serious intention. I wanted readers to enjoy reading the book, learning from it, and supporting it.

It was teacher appreciation day. I gave Đạo two cards to write to his teachers. Here’s how our conversation went:

Me: What are you going to write for Ms. G?
Đạo: Dear Ms. G, you are a very nice teacher.
Me: That’s really nice. How about Ms. D?
Đạo: Dear Ms. D, you are a very nice teacher.
Me: Can you write something else?
Đạo: No, because I want them to be happy.
Me: Oh OK.
Đạo: They look pretty with clothes on.
Me: If you say so.

Đán with candies on his hand.

Đán Daddy, grownups can’t eat candy.
Me: Why not?
Đán Because they will get sick. Only small, small, small boys and babies can eat candy. They won’t get sick. Candy is not sweet.

He gave me no chance to defense the grownups.

I am thrilled to introduce the launching of my book titled Professional Web Typography. It’s a web-based book written part as an independent study for my MA in graphic design program, and part as an experiment in using web as a self-publishing platform. It is also an opportunity for me to share what I have learned about typesetting for the web.

When I set out to write this book, I have a specific audience in mind: web designers who want to step up their type game and print designers who want to step up their web game. The combination of the rich history of typography and the evolving of the web technology can be intimidating for beginners; therefore, I wanted to make the book as succinct and as approachable as possible.

My goal is to show that typesetting on the web is fun and rewarding—not intimidating. I begin the book showing various methods of delivering web fonts. Second, I break down font features and characteristics to look for when selecting body text. Third, I demonstrate the important of setting typeface in the browser. Forth, I examine the crucial elements when picking type for user interface. Fifth, I present ways of seeing typographic details. Finally, I encourage the practice of typography with various real-design examples.

Although the purpose of this book is to get a good grade for my independent study, I wanted to take it beyond the academic boundary. After all, with most of the projects I have done as a graduate student, I try to apply real-world use cases to them. This book is no exception, but I wanted to take it step further with an experiment in taking the web as a self-publishing platform. I wanted to deliver a quality level of writing that is the best from my ability and deliver a reading experience that is the best the web could offer at this time.

I spent every night, after my wife and kids went to bed, in the past three months researching and writing the content; I secured the domain name and paid for the hosting; I built the website and made all the illustrations; I hired a friend to do copyediting; I consulted acquaintances in the industry to look over the technical details; I reached out to a few people I admired in the web community for feedback.

I take on this project with deep passion and serious intention. I wanted you to enjoy reading the book and learning from it. If you find this book useful, consider paying for it. Although $5 to $10 is suggested, the price is up to you. You can support the book based on the value you think it deserves. Your contribution will help sustain the effort, allow me to update the content (especially the constant evolving CSS techniques), and let me do more independent projects like this in the future with resources to invest in copyediting and technical editing.

Writing this book was quite a learning experience and I would have not accomplished it without the help and support from family members, friends, and the web community. Many thanks to professor Don Starr for his support and counsel of writing this book as an independent study for my MA program in graphic design at the George Mason School of Art. I want to thank Linh Nguyen for her exceptional copyediting, Raymond Schwartz for his meticulous technical and editorial review, and Jim Van Meer for making my words clearer and stronger. My deep gratitude goes to Matthew Butterick for inspiring me to use the web as a book-publishing medium. My appreciation goes to the following prerelease readers: Tim Brown, Jeremy Keith, Chris Silverman, and Khoi Vinh. Special thanks to my wife Dana Nguyen for her love and encouragement. She booked an all-inclusive trip to Punta Cana, Dominican Republic so we could spend the days with the kids and I could write this book during the nights.

Although I don’t know how well this book will receive, I am very exciting to share it with you. I hope you can join me in a journey to explore this craft.