This site is such a work in progress, it may feel painful at times.
November 2014 July 2015 Summer 2016 and I’m updating the site (again). Please be patient with links that don’t work, horrid use of punctuation marks, missing lessons, and so forth.
About the HTML and CSS
The lessons in TWD3 focus on web typography, not writing clean, expert syntax.
TWD3 is not about web compliance, testing across browsers, accessibility or interactivity. Every single one of these issues is integral to designing the best (accessible, usable) website possible, and I try to touch on them, but they are not the focus of these lessons.
If you are new to writing HTML and CSS, these lessons were written for you. Every step in the process is explained, and new techniques are introduced in each chapter so you can build your HTML and CSS skills with confidence.
I avoid HTML and CSS that assumes prior knowledge. I want to help you get up-and-running quickly so you can revel in your successes. You can learn more advanced techniques once you have mastered the basics.
If you are experienced writing HTML and CSS, some of the syntax and semantics used in the lessons might not match your expectations of how HTML and CSS should be written. For instance, I don’t use shorthand and I don’t introduce reset stylesheets. I don’t show how to use more than a couple of techniques in each chapter, so semantically things might feel a “step behind” in some places. I use naming conventions meant to help new HTML and CSS writers recognize what they are doing in their syntax.
If you already know how to complete a lesson using more advanced techniques or using different semantics, please do so! This is the perfect time to weave together your new typographic skills and your existing HTML and CSS knowledge. But I still recommend you take the time to read through the exercises; I often point out what a typographer looks for on the screen.
Typographic Web Design 3 is the third iteration of a book I wrote 6 years ago.
The first book was a downloadable PDF. The second (updated) version was a print book published by Wiley. This iteration (updated yet again) is web-based, available to anyone who wants or needs to learn about web typography. The third iteration has now turned into the fourth iteration… but I’ve got to stop counting sometime.
This site will show you how to think like a typographer. It’s about visually organizing and designing web pages based on how people read. It’s about respecting, clarifying, and sharing the words, ideas, and information presented on a website.
The content comes from hands-on exploration, from decades of using type on the printed page, from classic and contemporary typography books written by experienced book typographers, from over a decade of using type on the web, and from current blogs dedicated to web typography. It combines typography tips established pre-computer with instructions on using the @font-face property to incorporate web fonts.
TWD3 wouldn’t be here if it weren’t for the passion, creativity, dedication, and (sometimes brutal) honesty of Randy Apuzzo (who jotted down the first CSS I ever saw on a napkin at the break table outside the CVPA labs), Regina Milan (who inspires me to stay passionate about change), and the talented type students who went the extra mile to test these lessons: Francis Barry, Evan Boisvert, Matt Desrochers, Amanda Griffin, Chris Parish, Ashley Rego, Meighan Tague, Josh Terceira, Jamie Thomas, and Corrine Turpin.
I know it sounds sappy, but every one of you makes teaching a joy. Thank you.
About The Author (me!)
Professor Laura Franz teaches a wide range of classes at UMass Dartmouth, including Typography I (The Structure and History of Letterforms with an Introduction to Text on the Page); Typography II (Type as Information); Typography III (Type in Context: Web and Print); Graphic Design VI (Branding Systems); and The History and Context of Graphic Design.
Inspired by the intersection of tradition and technology, Laura shares her carefully tested web font recommendations on goodwebfonts.com. She also shares her typography knowledge via the lynda.com video courses Typography for Web Designers and Choosing and Using Web Fonts. A presenter at the 2012 HOW Magazine Interactive Design Conferences and the 2015 RWD Summit, she writes for SmashingMagazine.com and contributes to TypeKit at practice.Typekit.com.
She’s also a total type geek! Follow her type geek page on facebook.
Laura holds an MDes in Communication Planning and Design from Carnegie Mellon University, and a BFA in Graphic Design from Western Michigan University.