Q&A: Dan Rhatigan talks web fonts

In our webinar Pro Tips for Picking Web Fonts, type designer Dan Rhatigan showed us how tough screens can be on type and shared practical advice on making smart web fonts choices—from size and spacing to color and styles. Afterwards, he tackled questions from the group about picking web fonts, useful tools for testing fonts before you buy, and embedding approaches. Here’s what he had to say.

When it comes to type color on body copy, what do you recommend?

For longer passages of text where you want to have immersive reading and you don’t want people to get distracted, black text on white probably works best. Everything about the rendering environment is tuned towards getting black text to look as clear as possible on screen. I see a lot of examples of dark grey against white that work, but it’s for the same reasons that black and white does. The principle is this: the more contrast you have, the easier it’s going to be to read. So you can back away from full black into a dark grey, and it’ll still hold up pretty well. But it gets a little bit tougher for longer passages of text. For short, single paragraphs you have a little bit more leeway where lower contrast relationships will work.

For web fonts, aren’t the italics redrawn to add more white space between the letters so they don’t fill in on screens?

Only if it is a font that has actually been redrawn for the web. Just because a font says it’s a web font doesn’t necessarily mean it’s been designed to look great on the web. It means the desktop version has been prepared for delivery on the web. So all the term ‘web font’ guarantees is that the font data has been packaged up so it can be delivered to a web browser, and it may have been hinted (an extra layer of software added to help it look crisper).

If we look at ITC Galliard® italic, for instance, it is a web font. However when you compare it to ITC Galliard® eText italic [above] you can see at a glance the eText italic has been redrawn to be more open and clear. So you have to remember not to just look at what styles are available in the family, but to use your eyes and judge whether that italic, for example, is an appropriate design for what you want to do on the web. PMN Caecilia® eText is another great typeface for on-screen text that has been redrawn for the web. It’s a slab serif, which means it’s low contrast and doesn’t necessarily get narrower in its italic. But it also has serifs, which helps it stay clear.

Is there any way to tell whether a font has been redrawn for the web?

If a foundry has taken the time to draw or redraw a typeface to make sure it's readable on screen, they’ll brag about it. It's an important quality factor and a selling point for type designs, and they'll want you to know about it. For Monotype fonts, if it has eText in its name it means that we have redrawn it from the ground up to be big and sturdy and clear at text sizes on the web. Hoefler & Co. has its ScreenSmart collection and the Font Bureau has their Reading Edge series.

What about brand new typefaces that never existed as desktop fonts before? Can we assume they’re high quality web fonts that have been optimized for on-screen use?

Not necessarily, because designers design typefaces for all kinds of purposes. This is why it’s important for you to:

  • look at the kind of examples that I’m showing here, so that you begin to train your eyes. That’s the best test available to figure out if something is readable or not. Trust your eyes and look at things a lot; and
  • test your web fonts in the browser so you can make sure they render well, suit the environment and work you’re doing, and you can really know that you’re making a good choice.

Are there any tools you recommend for previewing web fonts on screen at various sizes before you purchase them?

Yes, you should take a look at a tool we offer called Typecast. It’s a browser-based web design tool that includes the entire Monotype, Fonts.com, and MyFonts web font libraries as well as some other providers’. It’s free to sign up for, and you can preview typefaces, set them, scale them, and even take it as far as prototyping actual web pages. It’s great for being able to see typefaces in the browser and genuinely see how they’re rendering as opposed to working from Photoshop comps.

What’s better: embedding the font using @font face or bringing in the library through Javascript?

Using a kit is generally preferable to using @font-face. There’s actually a pretty good blog post about this from Typekit. There are a lot of advantages to using Javascript/kits:

  • Javascript can help you determine what’s happening on the page. Has the font loaded yet? No? Okay. Add a class so I know to apply fallback styles to help tackle FOUT.
  • Using a kit takes away cross-browser concerns. Different browsers will only support certain font file types. The kit will determine which one to load for you rather than you having to specify multiple fallback files in your @font-face rules.
  • Generally fonts coming from provider kits will be hosted on a super-fast CDN, rather than you hosting them yourself (which would be common when using @font-face). Some providers will actually embed the raw font data into the CSS they serve up—reducing HTTP requests which improves performance.
  • Also by using a kit from a provider, you know that your fonts are properly licensed to use on the web.

The obvious downside to using Javascript over @font-face is that a user might have Javascript disabled in their browser, meaning that the font won’t load. The likelihood of this is very low as 1) Javascript is such an integral technology on the web today and 2) with Javascript disabled, the user’s browsing experience will likely be crippled to the point that fonts not loading should be the least of their worries!

What web font would you recommend for longform content, like a long survey, for example? Helvetica®?

A lot of different typefaces can work, but in that situation you want to maximize the readability at these fairly small text sizes, and you want a typeface the makes it really easy to distinguish between specific characters—like between the capital I, lowercase l, and number one.

Now Helvetica® is pretty good, but the minor tweaks that were made to Neue Helvetica® eText make it so much clearer. So it’s strong on readability. That said, the legibility between those characters I mentioned can be a bit tricky. And you’ll find that in a number of sans serifs.

If you want extra personality, good clear sans serifs that have details like a double story A and a double story G make it easier to distinguish letters and really help people when reading text.

In your presentation you showed an overlay of two web fonts [see above]. Were those set at the same size?

These are set at exactly the same font size. The second line just has a zero line height so that they would overlap. But this shows just how different the size of text can appear based on how a typeface is drawn. 16px in one typeface can appear bigger or smaller than 16px in another typeface. The proportion of the design itself has a big effect on what the size looks like.

What are some of the go-to web fonts that will always work well on the web?

The good stuff rises to the top, so I think the best seller lists at MyFonts, or Fonts.com and other portals are good places to start. And what you tend to see are a lot of big, generously-proportioned sans serif typefaces with low contrast—things like Helvetica®, Frutiger®, Museo Sans, and Brandon Grotesque. Type that is clear and more open is generally your best bet for text on screen.

Sometimes it’s hard to bridge the gap between designer and programmer. What’s the best way for a web designer to specify the line spacing or letter spacing to a programmer?

Doubling back to Typecast, it actually lets you prototype your pages in the browser using front-end visual controls that feel familiar. You design by eye, but in the background it’s writing the CSS and the HTML for you. So when you have your layout how you want it to look, you can output your HTML and CSS and hand that over to your developers, which gives them an itemized record of all your design decisions. It saves your developer from having to interpret your Photoshop comp—having to work out ‘Is that text this size or that size? Is that the same typeface or a slightly different one? Is that line-length equivalent to 480px or 500px?

I’ve been to a lot of presentations at agencies and publishers, where we have talked to mixed teams of designers and developers about this very question and shown how Typecast works. And teams who are dealing with these issues in the trenches every day really appreciate what the tool makes possible. They get pretty excited about this idea of letting the designer rely a little bit more on their visual thinking, yet deliver those designs in a way that describes those decisions in CSS syntax that the developers understand. It cuts back on the rounds of revisions that often happen after handover, and brings the design and development processes closer together.

Which is better for use on the web: serifs or sans serifs?

I think serifs are tricky on the web and on screen, just because they have more detail in the typeface design. And again I’m talking about that sort of 1em/12px–16px text size. If you’re going to go with a serif, consider ones that have lower contrast and very crisp detailing about them, like Century®, PMN Caecilia®, Clarendon®, Georgia®, etc with their straight lines and crisp angles to those serifs. They’re not too fussy or delicate. Stay away from typefaces with thin lines that are too too thin like in a Didot®, particularly for body text.

Watch our webinar Pro Tips for Picking Web Fonts.