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.

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.

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.

Status on Book and Final Project

My writing on Professional Web Typography is going well. The content is shaping up. I hired a copyeditor to help me with proofreading. I also began to work on the design of the site. Once the editing is done, I’ll invite some friends to look at the book. If everything goes as planned, I should have the book live at the end of April.

My research for the final project on Understanding Vietnamese Typography is so far so good. I have been learning quite a bit about Vietnamese grammar and diacritical marks. I am sure this project will help type designers and typographer understand Vietnamese typography. I can’t even wait to begin to work on the web site, but that won’t happen until the fall. So I still have plenty of time to work on the content.

Spring break is next week. Since I don’t attend any class, my schedule will be the same. I came in the art building the first time last night since last semester to speak to students about web presence. Thanks to Jim for inviting me to speak and treating me to dinner. I used the opportunity to practice my public speaking. I did well (I think). I was not nervous at all, but my stomach was hurting afterward. Maybe all that butterflies was trembling inside of me while I gave the lecture.

Understanding Vietnamese Typography

For my independent design project to complete my graduate journey in the spring of 2015, I wanted to tackle a subject that suits both my personal interest and creative passion. I have thought about this project when I first began the program. I wanted to do something related to music (jazz, hip-hop, or Vietnamese) or typography. In the summer of last year, I finally settled on the topic that I am excited about: Vietnamese typography. I am passionate about typography and Vietnamese is deeply personal.

As I become more conscious of typography, I realize that fonts that support Vietnamese writing is extremely limited. The combine of online font services from Typekit and Google Fonts featured thousands of fonts, and yet only a handful could be used to display proper Vietnamese characters. As I am browsing Vietnamese publications to read news or music, many sites, 99% of the time, are still using default system fonts such as Arial, Helvetica and Times New Roman.

With those two issues in mind, the purpose for this project is to introduce the Vietnamese writing system and its unique typographic features to two types of audiences. First, my goal is to help type designers to understand the nuances of Vietnamese letters so they could expand their fonts library to support Vietnamese language. Second, my intention is to guide web and graphic designers in using correct Vietnamese typography in their work.

When I first began my research on the topic, I find my sources to be very limited. The most resources I found were books and only posts on Vietnamese grammar. Nevertheless, they gave me a good start. During the summer of last year, I began putting together a rough draft with the resources that I had combined. I sent the draft to my friend whose language skills are equally impressive in both Vietnamese and English. She sent me back with so much valuable feedback that I have decided to do more research and rewrite everything.

I started doing all of this work before my it was approved for my final project. I didn’t realize that I needed approval until I signed up with an advisor this year to do my research for the project. Luckily when I presented my concept, it was approved immediately. I am now in the process of finding more sources and digesting everything. I have already changed my plan from my original direction, but I still get plenty of time to work on it.

Writing a Little Book On Professional Web Typography

When Advanced Web Design, a course I supposed to teach this semester, got dropped just a few days before the first class begin, I was devastated. Not because I did not get to teach, but because I needed a four-credit course to finish my Master of Arts in Graphic Design in the fall. Teaching was to be counted toward my studio elective class.

Out of desperation to fill in my elective, I proposed to write a little book on web typography. To my amazement, my professor accepted it and agreed to be my advisor. Even though this is something I am passionate about and have wanted to do it for a while, I had never written anything longer than a blog post. Though I am not a writer, I would like to take on the challenge.

One of the reasons I wanted to write this book is to scratch my own itch. In recent years, typography is exploded on the web, but I haven’t found a book that teaches me professional typography and shows me the CSS techniques at the same time.

When Jason Santa Maria released his book On Web Typography last summer, I was thrilled. Finally someone who is well respected in the industry wrote a book on this topic. On Web Typography is an excellent read and I highly recommend it, but Jason chose to leave out the codes. His reason is that the codes will get outdated quickly and he wanted his book to stay relevant for years to come. I understand his intention.

As for my little book, the primary purpose is to get an “A” for my four-credit independent study, but I would also like to publish it online. It won’t be printed or in an e-book format. I have decided to publish it in HTML for three main reasons: it could be read on any device; I have control of the design; and I can continue to update it as the codes continue to change.

The book will be online in early May. I will model after Mathew Butterick’s approach on how to pay for this book. All contents will be available for you to read. If you like what you read, you can pay for it in any amount you like to support. The book will be out in early May.

Independent Studies

Since the class I was supposed to teach this semester got dropped, I am now taking on two independent studies. The first one is an independent project research (one credit) for my final thesis in the fall. I know what I wanted to do and I hope that it will be approved tomorrow.

The second one is a challenge, but it is something I wanted to do for some time. It’s a four-credit study. I am thrilled about it. I just hope that I can complete it on time.

My time for the next three months will be devoted to these projects when I am not working, not with my family, or not sleeping. It looks like things are turned out well after all. I knew I should have been more relaxed and stayed calm.

Course Dropped

The Advanced Web Design class I spent months and some sleepless nights to prepare had been dropped. The number of student registered fell from 9 to 6.

Although I had invested a tremendous amount of time crafting the web site and the projects, I understand the situation. I also get a sense of the way the school operate. They can cancel the course anytime despite it’s less than a week before the starting date. I apologize to the 6 students who wanted to take the course.

Now I just need to sign up for a class to take instead. My only options are Mobile App Design and Mixed Media. I am kind of interested in the former and waiting for the professor to let me in. I have no idea what Mixed Media is even though I read the course description. It would be my last resort.

Preparing for Advanced Web Design

Crafting the course for advanced web design has been a challenge. I started in November and kept on revising it. On one hand, I don’t want to overwhelm the students with too many projects. On the other, I don’t want to give them an easy ride. Finding the balance to fit into the schedule is not an easy task.

Last night, I made my final decision to drop four projects to three, which will give them a bit more time to work on the coding. The focus will be on HTML and CSS. I will also introduce Sass since it is becoming a standard practice. I leave JavaScript as an option for the students to explore. Once they meet the requirements for the project, they could use JavaScript to enhance the interactive experience. I might introduce some basic PHP to make their work easier.

In addition to design and technical, content is an important part of web design. One of the required readings is Nicely Said: Writing for the Web with Style and Purpose by Nicole Fenton & Kate Kiefer Lee. The other required book is Sass For Web Designers by Dan Cederholm. I also recommend Learning Responsive Web Design: A Beginner’s Guide by Clarissa Peterson and JavaScript and JQuery: Interactive Front-End Web Development by Jon Duckett.

As for the projects, students will learn to create an online editorial experience, digital brand guidelines, and an entire design project from start to finish. For the design project, students will work together as a team to come up with everything from proposal to pricing to design to interacting with the client. It will be a fun semester.

Post Binding

For the final project in Experiential History of Graphic Design, we had to do a post binding with all the class workshops (calligraphy, relief printing, photogram, letterpress, paste-up, screen printing) we had done and our research paper.

Even though the professor had gone through the demo in class and we watched a very useful instructional video, I was extremely nervous. We only had one shot and I am still terrible with handcrafting design. I had to take three days off work before Thanksgiving to focus on this project. The entire process went better than what I had expected. The book was not as perfect as I wanted to be, but it met my satisfaction. I am proud of the final result.

Colophon

The body text in this book is set in Sabon designed by Jan Tschichold. The headings are set in Clarendon designed by Robert Besley. The captions are set in Univers designed by Adrian Frutiger. The book is made by Donny Truong under the guidance of professor Don Starr. The publication is produced in the fall of 2014 as a final project for a course titled Experiential of Graphic Design at The George Mason University’s School of Art.