Dear Web Font Providers

Advertisement

When you buy something, I bet you want it to work. Heck, even if you use something for free — maybe borrowed from a friend — I bet you want it to work. No one prefers hiking boots that are too tight (or too loose), a car that shimmies when you drive faster than 40 miles an hour, or a kitchen knife that can’t cut a tomato. And Web designers don’t prefer fonts that don’t fit a project, fall apart in different browsers or can’t be used in a mock-up.

We also don’t like wading through all of the fonts that won’t work for us in order to find the ones that will. It takes precious time away from other tasks and responsibilities.

You’ve Come A Long Way, Baby!

Six years ago, A List Apart published “CSS @ Ten: The Next Big Thing281,” in which Håkon Wium Lie describes the @font-face declaration and announces:

“Two things must happen before Web fonts can take web design to the next level… First, we must ensure the validity of the approach.…  Second, we must convince browser makers to add support for web fonts.”

You Helped Make It Happen: Validity and Browser Support

Today, browsers support Web fonts, and we’ve got the valid CSS to make the fonts work. Of course, as old browsers changed and new browsers (and extended font families) emerged, valid CSS became an ever-moving target.

On the DIY side, a big “Thank you!” to Paul Irish, who gave us the “Bulletproof Syntax” to fool Internet Explorer (IE) into loading the correct font file (remember using a smiley face for the local font name?); to Richard Fink, who gave us “Mo’ Bulletproofer Syntax” to fix a font-loading problem in Android; and to Ethan Dunham, who gave us the “Fontspring @font-face Syntax,” which even works in IE 9. You all thoroughly explained why your syntax works, which enabled each to pick up where the other left off. On top of that, Dunham, your @font-face generator2 brought valid syntax to those of us who (please, I beg of you) just want our fonts to work.

Web font hosts such as Typekit and Fontdeck deserve a shout out, too. You worked to support multiple weights and styles of a font family cross-browser. Your variation-specific font-family names3 (which is a shorter and sweeter way of saying, “Hey everyone, you need to use a unique font-family name for each weight and style of a family”) require longer CSS, but they are valid and allow more than four weights and styles to load in IE 7 and 8. Those of us who can’t live without light, regular, bold, extra bold, and black weights are in Web font heaven!

You Went Above and Beyond: Responding to the Needs of Type Designers

One aspect that Lie missed in his article was the need for more Web fonts — how could we take Web design to the next level if we didn’t have a lot of fonts to use? This, of course, meant that you had to gain the trust of the type design community.

You had to protect the fonts.

Remember when type designers wouldn’t design or provide Web fonts without the guarantee that their files were secure? Typekit, your article “Serving and Protecting Fonts on the Web294” (2009) laid out how you set up hurdles to “discourage casual misuse” and created a reasonably secure system for serving fonts.

Thanks to everyone’s tenacity, at some point in the last four years, “reasonably secure” was enough for type designers to take a chance. And now they’re hooked. In a recent interview5, Jonathan Hoefler and Tobias Frere-Jones of H&FJ said: “We’re requiring that every new project have a way to thrive not only on paper, but on desktop and mobile screens.” How freaking awesome is that?

So, in the span of only six years, you’ve come a long way, baby. Web font syntax is valid and supported by most browsers (our fonts load!); we have thousands of Web fonts to work with; we have multiple options to deliver Web fonts (DIY or through a service provider; and free, monthly, yearly or a one-time purchase); and you are constantly improving your services, so Web fonts are easier to implement and they (usually) load seamlessly!

What else could a Web designer need from you?

I am so glad you asked.

“What About Us?”: What Web Designers Need

Web designers — especially those of us who care about type and are trying to be thoughtful about the fonts we use — need more than access to thousands of Web fonts. Frankly, we need access to high-quality, appropriate Web fonts. And we need to be able to find them.

We’ve visited your websites. Some of you have thousands of fonts for us to use. But you know what? More isn’t always better. Sometimes more becomes more-stuff-to-wade-through-to-find-what-I-want. In 2010, a New York Times article, “Too Many Choices: A Problem That Can Paralyze306,” reported on the debilitating effect of too many choices. Too many choices make it harder to choose. How do we know our choice is the best one? How do we know it’ll fit when we go for a hike? And if it does fit, how do we know another one won’t fit better?

Benjamin Scheibehenne, a research scientist at the University of Basel in Switzerland, suggests in the article that debilitation comes not only from too many choices, but also from a “lack of information or any prior understanding about the options.” Hmm. While we’re at it, how do we know it won’t shimmy on the highway?

You’ve given us thousands of Web fonts. Now give us useful information about the options. Help us understand them. Help us ascertain which ones will work best for us. Which ones will work for a particular project. Which ones hold up cross-browser. Which ones will integrate seamlessly in our workflow.

Show Us Your Web Fonts in Context

Most of you show us how your fonts will sort of look in context. You give us just enough to see whether a font might be appropriate to use (“Hmm, this one is a slab serif, so it might work.”), and you help us to eliminate those that definitely won’t work (“Nope, I don’t want such a round-looking font.”). OK, that’s a start. But that’s not enough.

Take a page from history. Before type went digital, printers and type designers sold their typefaces to clients by showing how they looked in context. They’d provide broadsides or books, often setting each typeface in paragraphs at various sizes. They’d show available weights and styles of each family. And because the specimen sheets and books were printed, publishers and designers could see how the typefaces held up when the ink hit the paper.

Caslon font specimen sheet7
A specimen sheet by William Caslon, 1728. The typeface is shown in paragraphs of various sizes in both roman and italic. A larger digital image8 shows other fonts available in the family. If I were in the market for a typeface back in 1728, I’d know exactly what to expect from Caslon.

Not to name names, but Fontdeck9, Fontspring10, Font Squirrel11 and MyFonts12, you guys only offer the opportunity to test-drive Web fonts in a sentence. The problem with a sentence is that it doesn’t show how the font looks in body copy. Body copy has visual texture, and texture can be pleasing (lively but not intrusive, promoting horizontal movement of the eye) or jarring (with uneven spaces or a strong vertical pull, hindering horizontal movement of the eye). Texture affects readability.

Texture also affects the look of a Web page, and Web designers need to know whether they are picking a font with the texture they need. A sentence doesn’t help us to make a good choice. If you don’t believe me, take a look at the images below. Two fonts that look really similar when set in a sentence look different when set in paragraphs of text.

Two fonts as cascading sentences13
Cascading sentences from Typekit. Top: Kepler Standard by Adobe. Bottom: Utopia Standard by Adobe. Both are serif fonts with a slightly oval bowl (look at the shape of the “o”) and a high contrast between thick and thin strokes. They look pretty similar to the casual eye. Heck, they even look pretty similar to the trained eye!

Same two fonts as paragraphs14
The same fonts set as text in paragraphs from Typekit. When shown in paragraph format, we can see the difference. Top: Kepler Standard by Adobe. Kepler has a rounder, “bubblier” feel and looks slightly smaller when set at body-copy sizes. Bottom: Utopia Standard by Adobe. Utopia feels more structured, less round. And, of course, it looks bigger when set at body-copy sizes. Neither of these fonts is “wrong” when set in text. But they look different in paragraphs, and each might be appropriate for different projects.

Now, for the rest of you, Google Fonts15, Fonts.com16Webtype17 and Hoefler & Frere-Jones18, you show your fonts in paragraphs. Thank you. But just so you know, not all of the paragraphs are as helpful as they could be.

Google Fonts, your text has too tight a line height, so your fonts all look clunky (see the image below). Fonts.com, you don’t offer enough text sizes; if a font looks too small at 14 pixels and too big at 18 pixels, we can’t tell what it would look like at 16 pixels (just so you know, 16 pixels is a really popular type size for Web text). Webtype, you use a string of capitalized words, so there are too many capital letters, and your fonts look clunky; if you want to show us what your fonts really look like, just use plain text. Hoefler & Frere-Jones, your paragraphs are limited to three lines, with a super-long 725-pixel line length; these paragraphs aren’t delightful to read, and they undermine the quality of your fonts.

Same font, same size, two line heights19
Which font would you choose? How paragraphs are set makes a difference. Top: Google Fonts paragraphs have a tight line height. Open Sans looks clunky and hard to read, making it hard to tell whether the font would look good in body copy. Bottom: Open Sans on Typekit. A looser line height helps us to see that the same font is actually a pleasure to read.

Typekit20 and Typotheque21, of all the Web font services I’ve visited or used, you provide the best on-site examples of how your fonts look in body copy. You both provide multiple paragraphs at various sizes, with a good line length and a good line height. WebINK22, your off-site solution is also pretty good. Using the FontDropper 100023 bookmarklet, I can drop any of your fonts onto an existing Web page and see how it looks in context. One problem I noticed, though: Your bookmarklet doesn’t drop in an entire font family, so we can’t see a font’s true bold and italic.

Which brings us to font families. I’m sure you’ve noticed that bold and italic versions of a font are sometimes too similar to the regular font, which undermines hierarchy. Other times, the bold is too heavy or the italic too squished, and one or both are hard to read. These are all reasons why we might not want to use a particular font. Plus, sometimes a bold or italic has letterforms that a client simply doesn’t like.

So, to really see how a font works in context, we would need to see how the entire family of weights and styles works together. Unfortunately, none of you do this yet.

Show Us What Your Fonts Look Like on Other Systems and Browsers

I’ve been talking a lot about context. Context is not just a font’s texture in a paragraph or how the font family works together. Context is also where a font “lives.”

As Web designers, we know that our designs are ephemeral, constantly changing based on operating system, browser and screen size. For example, we know that fonts behave differently cross-browser — if they aren’t hinted correctly, then letter shapes, strokes and letter spacing will change in unexpected ways.

Problems arise cross-browser24
If fonts aren’t hinted well, their strokes can change significantly from browser to browser. This font looked great on my Mac (top). When I tested it cross-browser, I ran into problems (bottom). The font is too light to read easily.

More problems arise cross-browser25
If fonts aren’t hinted well, then spacing (both inside and between letters) can change significantly from browser to browser. This font looked great on my Mac (top). When I tested it cross-browser, I ran into problems (bottom). The font gets narrower, and the spacing between letters is erratic.

The only way to know whether a font will work cross-browser is to test it. And let me tell you, testing Web fonts is mind-numbing and time-consuming. (I once cleaned out my garage to avoid testing fonts for a project.)

Thank you Fonts.com, MyFonts and Typekit for providing screenshots of your fonts in different browsers. You present only cascading sentences, but even that helps. Much like Caslon’s printed specimen sheet showed what his typeface looked like in print, you three give Web designers a glimpse of what your fonts look like in use. You show us which fonts to reject and which to consider for further testing.

Hoefler & Frere-Jones, you claim that your new Cloud.typography service creates multiple font files (each hinted and built for a specific browser and platform) and supplies each browser with its unique font file. If this is true, then your fonts should look great across all browsers. If this is true, I might just have to bake you some cookies. But I sure wish you’d provide screenshots to back up your claims. Some things I need to see for myself.

Let Us Use Your Fonts in Mock-Ups

Some Web designers comfortably go from a pencil-and-paper wireframe to building a partial-website-as-mock-up. Others prefer (or are required) to include an intermediate step and mock up pages with a tool such as Photoshop, Illustrator or InDesign.

I know — now it’s your turn to tell me to take a page from history.

Before type went digital, designers didn’t mock up projects using real fonts. Clients certainly couldn’t expect to see such a thing — comps were fine. But since the late 1980s, mock-ups have been expected to “look like the real thing.” And if we want (or need) to show a realistic mock-up to a client, we need access to the Web fonts.

Fonts.com, Font Squirrel, Google Fonts and WebINK, you all supplement Web fonts with free access to desktop (or “mock-up”) fonts for subscribers. Thank you.

Again, unfortunately, none of your solutions are perfect. Fonts.com, you allow access to mock-up fonts for only one day, to “kick off the design process.” I don’t know how it works in your office, but I can’t get anything done in one day. Font Squirrel and Google Fonts, you specialize in free fonts. While I (and my students) love having free fonts to use, access to good-quality body fonts is sort of limited. WebINK, your plugin for Photoshop is a great solution — unless a Web designer prefers to use Illustrator, InDesign or another tool.

Fontspring, MyFonts, Typotheque and Hoefler & Frere-Jones, I know you all offer bundles or discounts for purchasing both Web and desktop fonts, and bundling does take some of the pressure off a Web designer’s wallet. But if you’re a small company or an independent designer, like me, shelling out the extra money just to mock up an idea is hard.

The most promising approach for mock-up fonts might be just around the corner. Typekit, I know you’re working with Adobe Creative Cloud to bring us desktop font sync26. I’ve tested it out, and I’m happy to report that it works like a charm. (OK, my old Mac laptop runs more like a tortoise than a hare when I’m running Creative Cloud — but, hey, I can turn it off when I’m not using it.)

I was cynical (who me?) about font synching actually working. I use CS6 out of the box and the free Creative Cloud membership level. But you promised me that it would work with a paid Typekit membership (which I have), and it did! The fonts even stay synced when I’m working offline. This has exciting possibilities.

In Conclusion

I know you guys are busy, so I’ll wrap this up.

One more thing needs to happen before Web fonts can truly take Web design to the next level, and only you can do it. You need to meet the needs of the people who actually choose and use the Web fonts (ahem, Web designers).

Sure, we can all work around these issues. Personally, I’ve got a font specimen page that I use to test the fonts I’m interested in. After I narrow down the options, I can test fonts cross-browser myself. Hours later, if one of the fonts I like actually works, I can go straight to HTML and CSS from my pencil sketch and avoid the need for mock-up fonts.

But here’s the question:

“Why should we have to work around these issues?”

(All Web designers who love to use new fonts, repeat after me, “Why should we have to work around these issues?”)

If it’s important that fonts load in every browser, why isn’t it important to identify which fonts actually look good in every browser?

If it’s important to woo font designers so that you have a lot of fonts to offer, why not show us how those fonts actually work in copy?

Look, Web fonts aren’t just font files that need to be secure and easy to implement. They affect the overall look and usability of a website. They need to be chosen with care. And thanks for the thousands of fonts, but quantity is not as important as quality. A hundred knives that can’t cut a tomato won’t meet my needs when I’m making my kid a BLT.

So, make our lives a little easier. Make our work a little better. Help us find the Web fonts we want to use.

I dare say, you’ll win some affection from every Web designer who has ever looked at the thousands of Web font options and said, “Oh shit. Which one should I use?”

Sincerely yours,

A Type-Loving Web Designer


P.S. In case you’re interested, I’ve summarized how you’re all doing27 so far. Web designers who love to use new fonts, I hope you find it useful.

P.P.S. Below you’ll find the official bibliography of the articles quoted above. Otherwise, my students would be very disappointed by my lack of scholarly detail.

(Credits of image on front page: Michael Bundscherer31)

(al, ea, il)

Footnotes

  1. 1 http://alistapart.com/article/cssatten
  2. 2 http://www.fontsquirrel.com/tools/webfont-generator
  3. 3 http://blog.typekit.com/2011/06/27/new-from-typekit-variation-specific-font-family-names-in-ie-6-8/
  4. 4 http://blog.typekit.com/2009/07/21/serving-and-protecting-fonts-on-the-web/
  5. 5 http://gigaom.com/2013/07/18/meet-the-designer-behind-some-of-the-webs-newest-killer-fonts/
  6. 6 http://www.nytimes.com/2010/02/27/your-money/27shortcuts.html
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2013/09/1_caslon.jpg
  8. 8 http://upload.wikimedia.org/wikipedia/commons/f/fe/Caslon-schriftmusterblatt.jpeg
  9. 9 http://fontdeck.com/
  10. 10 http://www.fontspring.com/
  11. 11 http://www.fontsquirrel.com/
  12. 12 http://www.myfonts.com/
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2013/09/2a_sentences.jpg
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2013/09/2b_text_paragraphs.jpg
  15. 15 http://www.google.com/fonts/
  16. 16 http://www.fonts.com/
  17. 17 http://www.webtype.com/
  18. 18 http://www.typography.com/
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2013/09/3_paragraph.jpg
  20. 20 https://typekit.com/
  21. 21 https://www.typotheque.com/
  22. 22 http://www.webink.com/
  23. 23 http://www.webink.com/fontdropper
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2013/09/4_crossbrowserexample.jpg
  25. 25 http://www.smashingmagazine.com/wp-content/uploads/2013/09/5_crossbrowserexample.jpg
  26. 26 http://help.typekit.com/customer/portal/articles/1189216
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2013/09/who_provides.pdf
  28. 28 http://alistapart.com/article/cssatten
  29. 29 http://blog.typekit.com/2009/07/21/serving-and-protecting-fonts-on-the-web/
  30. 30 http://www.nytimes.com/2010/02/27/your-money/27shortcuts.html
  31. 31 http://www.flickr.com/photos/bundscherer/5188735146/

↑ Back to topShare on Twitter

Laura Franz is a Pro­fes­sor at UMass Dartmouth, where she teaches a wide range of type classes — including a Web Typography class in The Grad­u­ate Cer­tifi­cate In Web and Inter­ac­tion Design. Inspired by the intersection of tradition and technology, Laura shares her web font recommendations on goodwebfonts.com and her typography knowledge via “Typo­graphic Web Design: How to Think Like a Typog­ra­pher in HTML and CSS” (Wiley), “Typog­ra­phy for Web Design­ers”, and “Choosing and Using Web Fonts”.

Advertising
  1. 1

    How exactly does quantity hurts quality? If you’re good at what you do — design, I suppose — having a huge variety of web fonts out there won’t hurt your work. You and your decisions will.

    0
    • 2

      “Sometimes more becomes more-stuff-to-wade-through-to-find-what-I-want.” — that’s how. Choosing the right font becomes even more time consuming when you have to go through a tons of fonts, especially if they are of lower quality.

      0
    • 4

      Envision the difference between the menus at Cheesecake Factory vs. a small Italian restaurant employing competent chefs who cook simple meals. Is it possible to eat a meal at Cheesecake Factory that compares to any one of the 8-12 items available at the small Italian restaurant? Probably, but good luck finding it. It’s the only place I’ve ever been to that presents its menu as a book. And it is intimidating.

      It’s important to remember that choice isn’t always a good thing. We tend to assume that choice = freedom, but more often than not it just causes cognitive overload and a user will lock up when confronted with a dizzying array of options. Better to curate a smaller list of higher-quality options.

      I’m not saying get rid of all those other typefaces. After all, someone will have a use for them, and your point about the quality of a designer is true. We are ultimately accountable for the work we do, regardless of whether or not it was “hard” to do. But that doesn’t mean the people who supply us can’t help us do a better job. They just find a better way to bring the cream to the top.

      I teach typography at the Startup Institute in Boston, and the most common question I get is about how to choose a typeface. I know for a fact that all the students there are going to get theirs from Google Web Fonts because a) it’s free b) it’s easy and c) it’s Google. So I’ve developed a simple way for them to eliminate the crap immediately. Google allows you to sort their typefaces by number of styles that are available. I’ve found that it’s generally true (on their site) that the more styles a typeface has the better it is. And they have a button to sort by number of styles.

      They don’t know yet what they’re doing, they haven’t developed the intuition that a designer with years of experience has, so they need a quick way to make a decent decision. I tell them to sort by number of styles, filter down to the type of typeface they’re looking for, and don’t choose anything with less than 4 styles. Is this method perfect? Absolutely not, but you’d be amazed how much more confident they get in evaluating their choices when they only have to pick the best of 4 or 6 rather than 432. By removing the paralysis of quantity from their process they can concentrate on factors that really matter.

      4
      • 5

        This. Every damn word. Couldn’t have said it better myself.

        0
      • 6

        That’s a great idea Steve. Students (and non-design colleagues) are always asking me how to choose a typeface. Your method is a simple, direct way to narrow the field. Many good fonts have an extended family. And yes, you still have to pick the best font and test it… but there’s much less to wade through!

        0
      • 7

        Steve, that’s exactly my method for narrowing the field of choices on Google fonts. And, it’s also what I recommend to my students. In the print world, our font family choices usually come with the 4 basics: roman, italic, bold, italic. We shouldn’t expect anything less with web fonts.

        0
      • 8

        @Steve Hickey “By removing the paralysis of quantity from their process they can concentrate on factors that really matter.”

        Absolutely, reminds me of this fantastic Ted talk on the Paradox of Choice by Barry Schwartz.

        http://www.ted.com/talks/barry_schwartz_on_the_paradox_of_choice.html

        I find the same issue with some the these round-up posts on Smashing Magazine too!

        0
      • 9

        Steve, you need to be elected President of the Universe. Totally agree.

        0
  2. 10

    Let me drop a comment (and maybe a little bit of an ad). Fonts for mock-ups are a big issue and as you said Typekit Desktop Sync is probably the only reasonable solution right now. (Well if you subscribe to Creative Cloud and all that.) But what should smaller foundries do? At Rosetta we decided to trust our customers and during the Smashing conference we released first of our Test fonts. Those are paid, but very cheap and if an update to full version is made within three months you get your money back. And I can promise you that these exact fonts will be available as webfonts very soon! And if there is enough interest, we will release more Test fonts soon-ish.

    http://www.rosettatype.com/index.php?action=portal/viewContent&cntId_content=3032&id_section=141

    0
    • 11

      The cheap test fonts is a great idea, David.

      If I understand correctly, if I am interested in using one of your web fonts, I could purchase a test version for mock-ups. This would allow me to use any tool I wanted to create the mock-up, and I would only have to charge my client a small amount for the mock-up font… Nice.

      To back up a step though, as a web designer, I wish I could learn more about how your web fonts work from your site. The PDFs provided make sense to my print side, but leave me guessing when it comes to web.

      I’m familiar with Skolar Web from Typekit. I’ve always appreciated it at various sizes, but haven’t used it. Recent screenshots on Typekit show me Skolar Web looks like it’s gone through some revised hinting. It’s looking great cross browser (even in the bold italics which used to give me trouble). Nice!

      (That’s another reason to show us how your fonts really look. We get to see how they’ve changed over time.)

      0
      • 12

        Yes, you got the test fonts idea just right.

        We are working on our own webfonts (right now we only serve them via providers) and they will be 100% reliable for web and (hopefully) well presented. Also, thanks to your article.

        0
  3. 13

    Extensis makes a photoshop plug-in so you can use Google Fonts (and WebINK) all IN photoshop: http://www.webink.com/webfontplugin
    That feels like a good step forward. Maybe the next thing is an API or something so these other webfont sites can get their fonts into this plug-in. That way you’re working as you normally work. No more going to a dozen font sites and doing the hunt and peck wading through all the options.

    0
    • 14

      Great little plug-in. Thanks.

      0
    • 15

      I love Extensis plug-in. I just wish I could use it in Illustrator or InDesign, where I’m more comfortable using text. But you’re right, it’s there, it works, and it’s a viable solution for those that use PhotoShop for their mock-ups.

      0
  4. 16

    Some of these foundries have made efforts to address the context issues you mention. Fonts.com, Fontdeck, Typekit, Webtype and Googlefonts, for example, have all partnered with us at Typecast (typecast.com) to offer designers a better way to experiment with their libraries. You can try out typefaces on your own real text of any length, adjusting style properties and composition right there in the browser, building up a type system (with multiple faces from different providers if you like), and outputting your design as HTML and CSS. This is before you license your typefaces or build any kits/projects. You’re able to check rendering in the browser as you work, and you can also publish your design to a public URL, which lets you then test how those fonts perform on other operating systems and browsers. And if you need to pull your typography into a mockup, you can output your design as a PNG. It ticks a lot of the boxes you’re talking about, here.

    0
    • 17

      Shelley,
      I used typecast.com in beta and absolutely loved it. LOVED IT! I can’t imagine all the hard work you guys put into that. I agree that it handles a lot of what is discussed in the article. But here is the but…$30/month is out of my price threshold as a single freelance shop. I would use this three or four times a month in the context of designed font stack for a new website project, not everyday.

      I feel like a cheap bastard saying that, but hey there it is. For now I do this all the hard way, because it isn’t that often.

      I hope that typecast.com takes off and gets millions of users and the costs come down. Or maybe I will not have to watch my dollars so closely in the future – which would be way better :)

      If you are a small design shop or an agency – typecast.com is a great tool – highly recommended.

      0
      • 18

        Thanks so much Peter, for the kind words and the honest feedback. We’re actually looking at ways we can better support designers in your position, so don’t give up on us! We might have something to to suit you by end of year, fingers crossed.

        0
    • 19

      +1 for Typecast! The BEST tool for setting type on the web, full stop. If only more web type providers would jump on board.

      0
      • 20

        Cheers Jason. You’ve been with us since practically the beginning, and it means a lot to us that you’ve stuck around. We’d definitely love more providers to join us too. I know you’re a big fan of H&FJ. If we ever tempt them over, you’ll be the first one we call for testing:)

        0
      • 21

        +2 for Typecast. I kept waiting for it to be mentioned. Very useful tool to test, use and implement type from design phase to final code. I fell in love with it while using a free trial. Great tool with lots of potential for integration in any web process.

        0
    • 22

      I’m really surprised that Typecast wasn’t mentioned!

      It most certainly takes care of a lot of the complaints and ties in nicely with the font providers mentioned. I often use it for initial page/post combinations because you can quickly run through variations across multiple font providers.

      Saves a ton of time, and has nifty exporting for client previewing (among other things). +1000 for Typecast!

      0
    • 25

      Hi Shelley, I’m excited to learn about typecast (though Peter’s response regarding cost would also be an issue for me). Typecast wasn’t included, because, quite frankly, I haven’t heard of it! Crazy I know, with all the blogs I read and conferences I attend. Sounds like you’ve got a good rep. I’ll take a look!

      0
      • 26

        Laura,

        Your honesty is refreshing, many would pretend to know showing … these days its impossible to know everything. Thanks for sharing your knowledge and information.

        0
      • 27

        Totally understand, Laura.
        Would love to hear your feedback on the app, once you get a chance to come kick the tires.

        0
  5. 28

    Laura, thanks for a very thorough look at the challenges and opportunities of presenting type. It’s very much at the center of what we do at H&FJ: the physical center of our office is a library of type specimen books, and the philosophical center of our practice is the ongoing effort among type designers, graphic designers, developers, and programmers to share typography in ever more engaging and meaningful ways.

    All of the specific things you’ve mentioned are things we’re working on at H&FJ, projects we held back in order to launch Cloud.typography as soon as we could, so expect some new things at typography.com in the coming months. In the meantime, here’s a tiny glimpse of how our fonts perform in the browser: http://www.typography.com/cloud/the-fonts/#ssm-render-quality. Not enough for the cookies you mentioned baking, but I hope you’ll keep the cookbook handy.

    It’s especially meaningful to me personally that you’ve taken such an interest in this topic, because the poor presentation of fonts is one of the reasons I founded our company in 1989. This was at a time when displaying an alphabet at twelve point in a phonebook-sized catalog constituted effective marketing, an approach which insults both the graphic designers who buy fonts, and the type designers who spend tens of thousands of hours making them. We helped raise the standard by introducing our typefaces with larger and more thoughtful type specimens instead. In many ways, Cloud.typography was a response to this same sort of indifference, in which Five Boxing Wizards rendered at twelve pixels in a print font is meant to communicate anything at all, besides a company’s insensitivity to typography and utter disdain for designers. Frankly I don’t think anyone’s gotten it right yet, not even close. But it’s an incredibly exciting project for anyone who loves typography, and if there’s one thing we love at H&FJ, it’s typography. Stay tuned.

    0
    • 29

      Jonathan, I love what you show at http://www.typography.com/cloud/the-fonts/#ssm-render-quality. This link makes me believe you really can deliver on what you promise.

      I came across this page just a few weeks ago. When I saw that the fonts shown render well even in Windows Chrome (where many fonts I test tend to fall apart), I knew we may have cause for celebration. That’s why I offered cookies (instead of say, my first born). I just wish, as a web designer, I could see this kind of detail for each font.

      I’ll keep an eye out for updates at typography.com… and a cookbook handy.

      0
  6. 30

    Thank you for this article. I agree with the points you made.

    I hope I have time (and money) to implement the things you mentioned on Fontfeest(.nl), an initiative of myself to serve only free quality fonts.

    I feel a little shamed that I did not saw your points in an earlier stage. So back to the drawingboard and upgrade the site!

    0
  7. 31

    Great article. Very helpful. It would be even more helpful if you would share your font specimen page. Hope you consider it.

    0
    • 32

      Hi Chuck, the specimen page I use is available at http://goodwebfonts.com. Just view any specimen page on that site and make a copy. The page is a modification of another (earlier) web font specimen page Tim Brown created and shares at http://webfontspecimen.com/

      Mine incorporates bold, italic, regular, and bold italic all in the same file, so I can see them all together. And I use different text.

      0
  8. 33

    Maybe I’m arrogant for saying this, but I think half of the fault is the OS. In my opinion, Windows is and always has been awful at rendering typography. It seems to butcher characters in one way or another. I really don’t see the difference between IE8 and IE9. Even though IE9 renders character forms different from its predecessors, it’s still bad – just a different kind of bad.

    Look at the same font rendered in Chrome on Windows versus Chrome on Mac, and they look vastly different.

    Besides proper hinting, there needs to be better OS support.

    0
    • 34

      Not sure about Chrome being a good point for comparison, have they moved on from not using the latest font rendering engine on Windows (see http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/) ?

      Rendering in IE10 and Firefox look pretty similar and definitely better than in Chrome, so it might be better comparing Firefox rendering accross OSes.

      0
    • 35

      I totally agree with this. Windows absolutely sucks with fonts. Even when Cleartype or whatever they call it is turned on, they look terrible. I spent several hours looking for the perfect font for a clients site and once it was developed it looked so bad on the client’s machine he had me change it to Arial.
      Completely useless.

      0
      • 36

        I agree. The shift in quality between OSes is drastic. And without proper hinting, a font that looks great on one looks horrible on another. (I know Windows people who think the Mac type looks bad — too heavy.) Tim’s example of spending hours looking for a perfect font only to have it look so bad on Windows the client went with Arial is a perfect example of why fonts need to be tested cross-browser. Never pick a font you haven’t tested cross browser. And doing the testing is profoundly boring. It’s like watching paint dry. Which is why I LOVE it when a web font provider shows me what to expect cross browser. Tim, you should have been shown that font would look bad on Windows. If you had, you wouldn’t have picked it!

        0
  9. 37

    heather gardner-madras

    September 27, 2013 6:24 pm

    What a great analysis of Web Fonts, the history, the good, bad and ugly. And most importantly a solid vision of where we can go from here.

    I have run into every single one of the issues mentioned and admit that they have somewhat decreased my initial enthusiasm for web fonts. But it never occurred to me to speak up and and ask for something better. Font-combinator.com and typecast.com have been helpful to some degree, but real improvements from the providers are key. I think what you have here is a little bit of a manifesto on how we all can work towards a better, more beautiful (and readable! ) web.

    Also agree that MS needs to step up its rendering or we are forever limited.

    0
    • 38

      Hi Heather, I think we couldn’t ask for something better until now. Providers had to put their attention elsewhere first. But now it’s time. And honestly, some of them (especially those with print type and web experience combined) know it.

      I presented at a conference last fall, and my topic was how to choose web fonts. When I listed out what we (web designers) need and then charted out who was providing what we need, I realized something needed to be said. Here it is, 9 months later, and both Typekit and typography.com are already working on it.

      We can’t give up on what web fonts can become!

      0
  10. 39

    I think another huge issue, especially for what I do, is the tedious DRM some of these font providers put up. My company uses Fonts.com and there is a lot of prep work to even testing out fonts.

    We not only have to get our marketing member to add each server we plan on using the font on (not too sure how it works between internal/external servers) but you also need to place a special @import statement at the beginning of your CSS definition (or somewhere close). This becomes a big deal when you’re working with a web platform like SharePoint which has it’s own order of serving up CSS files. We have to omit the speicalized SharePoint CSS tags and use the ole’ fashioned HTML link tag (which I prefer anyway, but it’s still a big consideration for rest of SharePoint-dom). Worst of all, that @import statement is very slow. We downloaded and host the fonts locally under our own firewall but we get a near full-second lag before Times New Roman turns into our custom font. About 50% of the time.

    Isn’t there a way to make this process less harsh on our developers yet ensure that we actually DID pay for the fonts?

    0
  11. 40

    Should have include ridiculous “page view” licensing models, with some times unrealistic prices.

    0
  12. 41

    I know this isn’t related to the fonts themselves, but what I’d really like to see is a way to have anti-aliasing improved on Windows browsers. Web fonts look superb on a Mac but Windows browsers (I’ve tried IE, FF, and Chrome) show web fonts with jagged edges. Isn’t there any way to improve this so that they look as smooth as they do on a Mac (or iOS, or Android for that matter)?

    0
  13. 42

    Font hinting is a wonderful thing, until it is stripped out by the web font conversion tools! Not much type designers can do about that!

    0
  14. 43

    Google Web Fonts doesn’t let you search for monospace fonts. Foundries need loads more categories to help us get to a short list quicker.

    0
  15. 44

    Laura, I’m so glad you brought up all these issues which might seem nitpicky to a non-designer. Lack of a 16px type sample drives me batty! Excellent article.

    0
  16. 45

    Thank you for this article.

    Laura, I’d like to add some detail… to your review of the WebINK service you mentioned.

    1. WebINK not only shows fonts in text, but also customizable text…here’s an example: http://screencast.com/t/JmkZqQfgD61

    2. In Extensis’ font management software, Suitcase Fusion …which offers a free developer account, one can preview all WebINK fonts.

    3. WebINK provides fonts for mock-ups using the photoshop plug-in…which works properly inside adobe apps – and protects licenses for foundries.

    Hope this helps to round out your WebINK profile – appreciate attention web fonts as a noteworthy topic.

    0
  17. 46

    @fontface saved me so much trouble, and especially since there are wordpress plugins available these days that can implement whole libraries of Google fonts!

    0
  18. 47
  19. 48

    I request myanmar language

    0
  20. 49

    It is worth noting that Hoefler fonts are currently not supported at all in the Google search app browser!

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top