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.

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.

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.

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.

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.

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.

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.

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.

I received an offering letter today from the College of Visual and Performing Arts for the position of adjunct faculty. According to the letter I will be teaching Advanced Web Design in the spring of 2015. I took the opportunity to not only updating my online resume, but also recoded the whole page. I scrapped the entire microformats for a much simpler, semantic markup. The whole focus is on typography and hierarchy. I also use Adobe Text Pro and Futura PT Condensed to be consistent with this site. Check it out.

The final project for Web Design & Usability required students to design and code their own portfolio site. The goals were to learn HTML, CSS and responsive design. The final site needed to be fully functional across multiple devices. Minimum deliverables should include a homepage, an about page, and a portfolio section with at least four projects to showcase.

To help students put together their portfolio site, I gathered the following questions:

1. What’s the purpose of your portfolio? (Get hired, showcase your work, get freelance projects, get to know you, gain reputation, communicate)
2. Who is your portfolio for and who is not for?
3. What type of work would you like to focus on?
4. Does your portfolio showcase the type of work you want to do?
5. Does your work present design as a problem-solving methodology?
6. Does your work reflect strategic thinking regarding the chosen subject?
7. Does your work demonstrate high level of typographic execution?
8. Does your work tell a story?

With this project, the concentration is on coding. We zipped through the mockups and jumped right into the coding. I planned out plenty of studio time for students to work on in class. Because I had 19 students, I allowed them to work on their own if they felt comfortable with the codes. That way those students needed help could come to class so I could work one on one with them. In the last few weeks, we stayed until 11pm (an hour over the regular class time) to code. I was glad that they were passionate about the project.

Start simple was the key element that I kept reminding students. They needed to create clean HTML5 markups with ARIA roles and clear CSS. Once they get the basics, they could add JavaScript or more fancy interactivity. Some students started out with frameworks and jQuery. Once they were stuck on something and weren’t able to customize the codes to get what they wanted, they had to start over from scratch. Doing so taught them the important lesson of progressive enhancement.

At the end, many students didn’t get as far as I would like them to be, but they managed to create fully responsive functional web site for their portfolio. My hope is that they could take what they have learned in class and continue to improve their project.

Here are some of the students’ sites available online:

• Carly Peak
• Ogo Batzorgig
• BeBe Ragsdale
• Neha Sohail

Neha’s project was different from the rest of the students. She is more advanced in front-end development. Since she already had a portfolio and didn’t to redo it for the class, I suggested that she put together a site that showcase all of the students’ site. I gave the complete freedom to develop the site. She ended up using way too much JavaScript and jQuery for a simple page, but she was able to apply some nice interactivity.

Final Thought

Teaching this course had been a learning experience for me. There are things that I can improve. Even though I detest quizzes and exams myself, I should have incorporate them into the course to make sure that the students read the book and understand the codes. I could spend more time doing workshops and demos to help them learn. The first two projects, which focused on design and usability, went quite well. The third project, which included coding, were stressful. If given opportunity, I will teach again.