Laura Franz on Web Typography #HOWidc

As an associate professor in UMass Dartmouth’s visual design department, Laura Franz teaches a wide range of typography classes and wrote the book the book Typographic Web Design: How to Think Like a Typographer in HTML and CSS (read our review here). Inspired by the intersection of tradition and technology, Laura shares her web font recommendations on

At the HOW Interactive Design Conferences this fall, Laura will present the beginner-track session Finding, Testing and Using Web Fonts. You’ll learn how to determine which web font provider is best for you and your client, plus tricks for using web fonts, such as how to avoid faux bold and italic on your site, how to improve readability on screen, and what to look for in a fallback font.

laura franz, web typography, web design conference

Tell us a little more about your conference session.

My experience in grad school (realizing that the internet was less about games and more about text-based information) and my experience as a web type teacher (realizing my students needed guidance in using the plethora of available web fonts) combined to lead me to this topic. I want web designers to know they can work with web fonts to create beautiful, pleasurable reading experiences.

I was lucky enough to start my undergraduate studies before we had computers to design on, so I understand the physicality of type. I was lucky enough to teach intro type for years before web fonts became a reality, so I know how to talk about type and letterforms (with passion). I am also lucky enough to love systems (math, alphabets, hierarchies). I loved CSS the moment I laid eyes on it.

What was your first interactive design project?

I started grad school in 1995 thinking I’d always be a print designer, but the more I learned about web design and the more I learned about information design, the more I realized the potential of the web.

Back in the mid-’90s a lot of companies didn’t have real websites up yet, and those that did seemed to try and attract us visitors by providing games and fun animations. Somewhere along the line, I realized the potential of the web wasn’t just entertainment and novelty. It was the boring stuff (like what time the library opens). I also realized that the blinking yellow text on a black background HAD TO STOP. I realized I needed to embrace the web and be a “digital designer.”

My first interactive design project was designing the intranet site for Alcoa. I remember using card-sorting tests to help group lower-level links under an umbrella main navigation. I also remember needing to keep in mind a wide-range of “users” who all used Internet Explorer at the office. My only font choices were Times New Roman, Arial and Courier.

What are your favorite design tools for creating an interactive project?

Honestly? A notebook and pen. I work more quickly with paper and pen when starting a project. I can list ideas and words, I can regroup the ideas and words, I can sketch and scribble and cross out and start again. I prefer pen because it doesn’t smudge like pencil lead does. I prefer notebooks because it keeps my ideas together. And notebooks and pens force me to keep ideas longer. I can’t erase them or casually toss them out. I’ll draw big Xs on pages/ideas that don’t work. Later, when I’m feeling stuck or unsure of my direction, I can go back and remember other ideas I considered. When a client asks, “Why don’t you do this?” I can refer back to the “reject” pages quickly.

I often have three or four projects going at once, and try (not always successfully) to keep a separate notebook for each. Since I’m often feeling a little sleep-deprived and under pressure (I’m also a full-time educator and mom), I’ll often look for hideously gaudy notebooks to use. The colorful designs make tasks seem a little more lighthearted, and when I’m running out the door, it’s easier to make sure I grab the notebook I need for the day.

Do you have any pet projects?

I manage and donate my time (it’s an unfunded project at this point) testing web fonts for use in text. As print designers, we know that text requires fonts that are legible and well-spaced. Complex text needs fonts that have at least two weights and an italic version so we can create hierarchy.

Unfortunately, a lot of web fonts that are available are hard to read on screen, are poorly spaced, or aren’t well hinted. A poorly hinted font may look great on a designer’s system, but starts to fall apart on another browser (gets bolder or lighter; gets squished or stretched). It takes a long time to sift through the available fonts and test them across multiple browsers.

I started this project when my advanced typography students started spending too much time trying to find good fonts to complete their web type projects. I realized that as an educator, I help guide them toward good print fonts by choosing (limiting) the typefaces available in our computer labs. I needed to guide them toward good web fonts too!

Will we see you at the HOW Interactive Design Conference? Register by August 15 to save $200 on your registration to our web design conference in San Francisco or Washington, DC.