Updated The Site and Added CSS Demos

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.

A+ for Pro Web Type

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.

The Modest Success of Launching the Book Site

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.

Kid Talks

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 Published a Book on Web Typography

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.

No Place To Hide

The first two chapters of No Place To Hide capture the captivating interaction between journalist-author Glenn Greenwald, filmmaker Laura Poitras, and whistleblower Edward Snowden. Greenwald provides engaging details of his meeting with the source and his fighting with The Guardian to get the stories published. He doesn’t hold back on criticizing The Washington Post, The New York Times, and even the Obama administration. Reading this book makes me disappointed with Obama for the way he has been handling our privacy. Many thanks to Edward Snowden for putting his life on the line for us. He is truly a hero. I do hope he can come back to the US one day as a normal citizen.

Introducing My New Book

Presenting beautiful type on your website nowadays could not be easier. With popular web font services such as Adobe Typekit, Google Fonts, and Hoefler & Co.’s Cloud.typography, getting web-ready typefaces to display on a site is as simple as adding one line of markup. Unlike the old days of web design when all you had to work with were a handful of default system fonts (Arial, Verdana, Helvetica, Georgia, and Times New Roman), now you have thousands of fonts to choose from. However, with too many choices at your disposal, the process of selecting and combining typefaces can be time-consuming, overwhelming, and intimidating.

In this book, my goal is to prove that typesetting is fun and rewarding—not intimidating. Whenever applicable, I will share the process that helped me make the appropriate type selection for specific assignments in my work as examples for you to examine. Through my process, I hope to inspire you to discover your own. I will also cover CSS techniques that are related to typography and try to keep the technical aspects as simple as possible. You will have the chance to download all the example files, which I have uploaded to GitHub, to play with.

To be upfront, I am not a type expert. I learned typography through obsessive and extensive reading on the subject. I work full time as a web developer and designer at the George Mason University School of Law. Besides the free tuition, one of the perks of working at a university is having full access to the library. Mason has an excellent collection of books on typography and I have read most of them during the past three years. I even started acquiring my own collection with books that I want to keep for reference. Although most of the books I have read apply to print design, my true passion is the web. I started my web design profession early 2002, but the web has only made an exciting transformation within the past few years, thanks to the explosion of web fonts (and web font services to accommodate them). In spite of these fairly recent changes and emergences, 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.

Professional Web Typography will be launched next Monday.

Ba Mươi Tháng Tư

Một vài hình ảnh tưởng niệm bốn mươi năm người dân Việt Nam chia đôi:

Web Site for the Book

Last week I decided to scoop up the domain name for my forth-coming book titled Professional Web Typography. I was planning on publishing it on this site, but I couldn’t resist prowebtype.com. I debated the pros vs. cons and consulted my wife. She insisted that I should so I have no reason to doubt.

After I made the purchase and made the announcement, a former colleague reminded me of Nice Web Type. I didn’t realize the coincident, but I am kind of glad because Tim Brown is my buddy, and he has taught me a great deal on typography.

The book will be launched on May 4th, which is next Monday. I am very excited about it. I am grateful for the helps from friends and some folks in the web industry.

Đình Bảo – Cuộc Tình Đã Mất

Even with his beautiful baritone and delightful diction, Đình Bảo continues to disappoint by staying in his comfort zone. His new release, Cuộc Tình Đã Mất, has some enjoyable tracks such as the bluesy rendition of “Sa Mạc Tình Yêu,” the Latin-inflected “Chia Tay Tình Đầu” (Nguyễn Ngọc Thiện), and the charming cover of “Nổi Đau Muộn Màng” (Ngô Thụy Miên). Unfortunately, there are some bad choices, particularly the cheesy “Tuyết Rơi Mùa Hè” (Trần Lê Quỳnh) and the odd phrasing on “Tiếng Mưa Đếm” (Đức Huy). Then again, this is the best you could get out of a typical Thúy Nga product. He needs to break out on his own to move beyond what the big production can offer. While the music as usual, Thúy Nga has steps up its cover design for this album. The front cover has a simple design with decent typography and the back has a nice white space for the song tracks.

Contact