Introduction to Web Design (Summer 2015)

The summer course, Introduction to Web Design, ended yesterday with students presenting their final project. The websites, in which they came up with the concept, designed, and coded, turned out well given that all six of them had no prior knowledge of web design.

My goal for the course, which was compacted into into eight  weeks, was to train students the foundation of HTML and CSS. In the first three weeks, I covered all the chapters in Jon Duckett’s HTML & CSS: Design and Build Websites. In each chapter, I selected the practical features that they would use the most in real-world projects. In addition to two exams, I created five exercises based on the code demo covered in class.

In parallel to learning HTML and CSS, students had to come up with the concept for their own site. They had to write a proposal, gather content, and create a sitemap, wireframes and mockups. The final website must be hand-coded, functional, and responsive.

Once we were done with with the book, they began to create the mockups and code their final site. The most challenging part of the course was coding; therefore, I only gave them one project to do and plenty of time to code. They struggled a bit, but everyone pulled through. I am happy with what they turned in. I hope that I had given them enough basic knowledge so that they will continue to improve their HTML and CSS skills after the intro course.

Here are a few mockups the students have created.

First Week of Class

The first two days of Introduction to Web Design had gone well. The students seem to be interested in learning to code. Although most of them are learning HTML and CSS for the first time, they understand the concept very quickly. Because of the small class size I can work with each individually on the assignment. I am glad that the school did not cancel it. For a web design course, keeping it small should be the way to go. The students also came up with intriguing proposals for their project. Can’t wait to see the final results.

Summer Teaching

Starting next week, I will be teaching Introduction to Web Design. With only eight students signed up, I thought the class would get cancel, but I got the green light on Tuesday that the show will go on. As I was scrambling to prepare the lesson plan and the syllabus, I realized that the schedule, which will begin on June 2nd and end on July 23rd; is quite condensed. I have less than two months and I my goal is to teach the students the foundations of HTML & CSS. I ended up turning it into a hands-on training bootcamp. Everyday I will teach them how to code and give them assignments. They will have one project to do so that they’ll learn everything from creating a site map to wireframe to complete website.

One of the challenges of teaching an intro course is selecting the textbook. I had three choices: Shay Howe’s Learn to Code HTML and CSS: Develop and Style Websites, Thomas Michaud’s Foundations of Web Design: HTML & CSS, and Jon Duckett’s HTML & CSS: Design and Build Websites. I chose Duckett’s. Beside its beautiful design, the content seems to be easy for beginners to understand.

I built my lesson plan around the book and will cover only parts that the students will work with most of the time. My goal is to get them to get comfortable with HTML & CSS. They can learn more design in their upper classes. When I taught Web Design and Usability, which is an advanced class, last year, most students were struggling with basic coding. I want to change in the intro level. I truly believe that you can’t be a web designer, especially today, unless you can code the basics. They will have some work cut out for them.

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.


Brilliant guide to web typography. Fantastic online resource.


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.