Typekit Likes ProWebType

My book, Professional Web Typography, is featured on Typekit. Sally Kerrigan writes:

Donny Truong’s Professional Web Typography is just about everything you’d want in a starter text for learning about type on the web — and best of all, he practices what he preaches with the type selection and placement. Adobe Caslon works nicely in the body text and in headings, with Myriad in subheads for an effective sans alternate. Source Code appears in the code samples throughout.

Can’t ask for a better Friday!

The First 30 Days of ProWebType

My book, Professional Web Typography, released to the world 30 days ago. It has been an intriguing experience to see the reaction from the web community, especially on Twitter, and to learn about the pay-what-you-want model. Although the book was never intended to be free, I even put a prominent buy button next to the read button, I noticed a handful of tweets refer to it as a free ebook.

To give you some perspective on the economics of the book in its 30 days, I have gathered some information from Google Analytics and PayPal. According to Analytics, there were 18,075 sessions, 11,578 users, and 50,399 pageviews. According to PayPal, out of 76 readers have supported the book, one paid $25, four paid $0.01, and everyone else paid in between.

As promised to keep the book up-to-date, I added two new chapters: “Using SVG as Type” and “Animating Type.” My goal is still to keep the book as succinct as possible.

One of the most requested additions to the online book is a PDF version. In fact a handful of supporters expected to get a download link after they made the payment. Although I initially had no plan to release any other format other than the web, I had made a PDF version for anyone who supports $7 or more for the book. Since I have been writing a personal email to thank anyone who had supported the book, it would not be too much work to attach a PDF copy.

Once again, thanks for all your support.

Animating Type

Despite the lack of sell on Professional Web Typography this week, I added a new chapter on animating type. I write about my lost love for Flash and how you can use CSS animations to bring your typography to life. It’s a beautiful Friday so take your iPad to the nearest bar for happy hour, order a drink or two, and enjoy reading.

Performance Starts With Education

The new Facebook’s Instant Articles has shaken up the web community on performance. Broadband are getting better and yet sites are getting slower. Sites are slow to the point that Facebook could even use performance as its marketing strategy. While the tools can cause websites to load slowly, we, as web designers, are responsible for implementing those tools; therefore, to increase performance we have to start with education.

I had an opportunity to teach web design and usability to advanced undergraduate and graduate students in the Fall of 2014. For the final project, in which the students had to design and code their own portfolio, I kept reminding them the concept of progressive enhancement because they were so early to create slick-looking websites. Out of 19 students, I had three that didn’t take my advice. One student who had some front-end skills decided to create a one-page portfolio with all the bells and whistles. She ended up using multiple CSS files and JavaScript libraries. When I tested her page on the iPhone, it could barely scroll. Another student had to start over from scratch because he couldn’t get jQuery to behave the way he wanted it to. On the last night before the due date, another student asked me why his site was not working properly. I looked at his code, which has jQuery and a handful of JavaScripts, and didn’t know how or where to begin. I told him to just do the best he could.

I was not at all against using JavaScript. In fact, I encouraged students to explore it, but they had to build the solid foundation first before they could layer all the cool interactions on top. That has always been my approach as well in my own work. For example, when I created the website for Professional Web Typography, I set out my priority. I could tuck all items in the table contents under the hamburger, but readers have to click on the icon every time they want to access the TOC. Furthermore, adding a hamburger requires JavaScript. So I decided to have the TOC always accessible at the bottom of every page so that readers can get to it at whatever page they are on. With the fancy drop cap, I could have used Adobe’s dropcap.js for consistency across the browsers, but then I could do it with just a few lines of CSS. Even though the drop cap would be a little bit off in various browsers, but I can live with that. It’s just an enhancement future.

I urge you to think the same when you approach a project to make the web a faster experience for everyone.

Mastering the True Craft of Web Typography

Professional Typography is featured in the Smashing Newsletter, Cat Clark writes:

The time when web design was limited to just a handful of default system fonts seems like a distant memory. But with the coming of web font services, and all the choices they offer, the process of selecting and implementing the perfect typeface can sometimes feel like more of a chore and less of the pleasure that it should be.

Donny Truong is here to help change that. With his new free eBook “Pro Web Type“, described by Jeremy Keith as “practical and refreshingly succinct”, Donny leads his readers step by step through the craft of making beautiful, successful typographic choices. From the various ways of delivering web fonts, through to selecting body text, setting type in the browser and picking type for UI, chapter by chapter, the website offers plenty of practical, applicable advice that is sure to put you back in confident control of your typography.

Thanks for the love.

Redesigning Đẹp Designs

I am working with Đẹp Designs to redesign its website. Located in Takoma Park, Maryland, Đẹp is an architecture, interior design, and master planning studio founded by Chuong Cao and Giang Dinh. Dep is committed to creating modern and elegant design solutions that contribute to the environment and the experiences of the occupants. I am also excited to be implementing Kirby for its content management system. Stay tuned for the relaunch announcement.

Smashing Friday

Woke up early this morning and discovered that my Twitter notification was on fire. Smashing Magazine tweeted about Professional Web Typography to its 900K followers. I couldn’t be happier to see a respected publication in the web community supporting a little guy like me. Big props to Vitaly Friedman. I also want to thank the readers who supported the book.

A Critique of Book Design on the Web

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.

Is There a Print Version of Professional Web Typography?

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.

Thanks for Supporting My Book

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.