Sifting Through the Typekit Library

December 19, 2010 7:00 AM

The Great Typekit Table — Finding a good Typekit font for long blocks of text is hard, but Sleepover has done it so you don't have to. They've pared it down accord­ing to two sim­ple rules: first, the font has to have low­er­case, upper­case, bold, italic, and bold italic; sec­ond, the font can't be hand­writ­ing, script, or mono­space.
posted by netbros (37 comments total)

Having more fonts available sounds like a good thing, but I'm not convinced that cluttering everyones browser cache with temporary font files and becoming reliant on a third party subscription service is the right answer.

The original HTML specs include generic font faces like serif, san-serif, monospace etc why can't they just extend that to cover the 50 most popular fonts and let the browser substitute the nearest installed font.
posted by Lanark at 7:33 AM on December 19, 2010 [1 favorite]

The original HTML specs include generic font faces like serif, san-serif, monospace etc why can't they just extend that to cover the 50 most popular fonts and let the browser substitute the nearest installed font.

Because civilization.
posted by romanb at 7:41 AM on December 19, 2010 [3 favorites]

Neat, but worth pointing out that these are not free fonts, and can only be used on a web site, not elsewhere.
posted by Old'n'Busted at 7:55 AM on December 19, 2010

The original HTML specs include generic font faces like serif, san-serif, monospace etc why can't they just extend that to cover the 50 most popular fonts and let the browser substitute the nearest installed font.

Font stacks work pretty much just like that, although the available fonts could probably be expanded. The problem there for designers is that fonts vary so much that layout from user to user is still a bit of a crapshoot.


Having more fonts available sounds like a good thing, but I'm not convinced that cluttering everyones browser cache with temporary font files and becoming reliant on a third party subscription service is the right answer.

I agree. You don't have to use a third-party setup; I've used @font-face a few times with great success. None of the methods is really great for body text, though.
posted by Benny Andajetz at 7:57 AM on December 19, 2010 [3 favorites]

To further my point just a bit..

Fonts are designed by people. Limiting the web to 50 fonts means leaving the most commonly used method of communication online to be completely influenced by the work and design skill of less than 50 individuals. There are nearly 7 billion people on earth, with 1.5 billion of them already online.

So who decides which 50 fonts are suitable for 1.5 billion people? Civilization did not end with Arial, Verdana, Times New Roman and Comic Sans.
posted by romanb at 7:58 AM on December 19, 2010 [3 favorites]

Civilization did not end with ... Comic Sans.

That's not how I heard it.
posted by bjrubble at 8:11 AM on December 19, 2010 [5 favorites]

"why can't they just extend that to cover the 50 most popular fonts and let the browser substitute the nearest installed font."

That's not how fonts work. Despite their ubiquity, web safe fonts such as Arial, Verdana, Georgia are proprietary. They have to be made by someone and that someone has to be paid. Every font on your computer comes with a license by the publisher, that's why Macs come with Helvetica and Windows does not. MS refused to pay Linotype's royalties for Helvetica and instead commissioned Monotype to come up with Arial.

In order to get new fonts on all computers, someone would have to create a good font, release it with an open license, and then convince all browser makers to include it with their browser, or more likely convince OS makers to include them. As Skeptopotamus would say, NOT LIKELY!

While there are people out there releasing open licenses for their fonts (such as the wonderful League of Movable Type) they're usually far from perfect, nor do they contain all the glyphs, variants, or even the hinting that we are used to in our traditional web-safe fonts. In short, making a good font takes time, and time means money. Just look at Arial, the most generic of generic fonts. Arial has changed often over the years. Each version gets updated to look good as screen resolution and rendering engines improve. That is able to happen because someone is getting paid to do it.

Finally, it's pretty hard to just "substitute the nearest installed font." The feel of a typeface is as much art as it is science. Measurable differences such as shape, weight, x-height, letter spacing, etc, are only part of it. While you can substitute Arial and Helvetica, with most people being none the wiser, that is because one was built to be like the other (I'm not going into arguments about whether Arial is a copy, it was based of something else, but it was intentionally built as a replacement), you can't do that with most fonts. Even if you keep almost everything the same in two fonts, except changing the semi-slab to a slab serif, they're can convey powerfully different emotions. Check out Museo and Museo Slab, which are even by the same designer and are meant to be complimentary, to see what I mean.

Multiply that out by using two or three (hopefully no more) different fonts per site. Even if we are able to get 50 more web-safe fonts included in every new operating system in the world (I'm not even going to suggest updating old operating systems and browsers), choosing fonts is no longer a question of serif or san, that was easy. Choosing fonts finally becomes what it always actually is: what conveys this expression? How do I choose fonts to express wit? Can we cover the whole range of emotion with 50 fonts? Yes, Helvetica does pretty well at conveying whatever we want. But can we use others that do a better job? Dear God, yes.

To use @font-face, you don't need to use Typekit (though I do). There are plenty of others ways out there. First there are a plethora of other subscription services coming out, even one the lets yo use @font-face to serve Helvetica Neue for the poor Windows folk, I can't even remember all of them. The Google Font API lets you do it for free, from Google servers with a small selection of open fonts. Some small foundries are also selling their fonts with an @font-face license, so you can host them yourself. Or you can go to the free sites such as League of Movable Type or FontSquirrel.

Of course, using @font-face does require users to download fonts, and that is a major issue. For people on old operating systems such as XP, or using older browsers such as IE7, things aren't going to look as hot. But you definitely aren't beholden to a third-party service, and when you use a third-party service, your fonts are served via a CDN of some sort, yes, you're paying money, but you're paying for a quality service (hopefully). Honestly, the idea of not paying for fonts is a new concept in the design world, we on the web are behind the times in this sense. Print designers have always been paying for fonts. Are they paying for a subscription? No, but they don't have to do the special things we do to get people to see the fonts they use either. To me, services like Typekit is not paying over and over to use fonts I already have, it is like paying for access to a private library that I can go to anywhere in the world. They keep the library clean, and the books in great condition.
posted by thebestsophist at 8:42 AM on December 19, 2010 [12 favorites]

Well, the last time I played, Comic Sans wound up reaching Alpha Centauri while I was still working on Satellites, but I blame that on an overly-long iron age war against the Aztecs.

The original HTML specs include generic font faces like serif, san-serif, monospace etc why can't they just extend that to cover the 50 most popular fonts and let the browser substitute the nearest installed font.

That's actually kind of like how CSS fonts work already, you can specify multiple fonts in order of preference for a given element and the browser will pick the first available one, so you could go "font-family: palatino, georgia, serif" and list a generic equivalent at the end, and the browser hopefully gives you something sorta close to what you had in mind. To my untrained eye, that's good enough for body copy--but I think part of what pro designers get paid for is being able to tell the difference between "good enough" and "good". Plus, being able to specify an exact font means less need for headlines rendered as images.
posted by arto at 8:45 AM on December 19, 2010 [1 favorite]

That list is useful, but doesn't cover the most important consideration for choosing webfonts: rendering quality on Windows machines.
posted by Typographica at 8:48 AM on December 19, 2010 [2 favorites]

As someone who spends most of his days staring at a fixed font in vi running in an xterm, typefaces really don't do much for me. I'd be happy with one fixed, one variable sans and one variable serif for the rest of my life. Yes I've seen the Helvetica movie and no I still can't easily tell the difference between it and Arial. As long as I can tell one letter from another, I don't care what shape the descender on the lower-case 'g' looks like.
posted by octothorpe at 8:50 AM on December 19, 2010 [1 favorite]

Whatever, pound sign.
posted by Combustible Edison Lighthouse at 8:57 AM on December 19, 2010

That list is useful, but doesn't cover the most important consideration for choosing webfonts: rendering quality on Windows machines.

That's the "Windows OK" column, no?
posted by mendel at 9:48 AM on December 19, 2010

fixed font in vi running in an xterm

Well, switch to Courier New for a month, see if you notice a difference.
posted by mendel at 9:49 AM on December 19, 2010

The problem there for designers is that fonts vary so much that layout from user to user is still a bit of a crapshoot.

awwwww. those poor designers.
posted by quonsar II: smock fishpants and the temple of foon at 9:55 AM on December 19, 2010

That's a really nicely done list. It would be even nicer if someone did something like it for fonts that are available free for embedding

Typographica—you probably know this already, but if you click through to the info on each listed font, you can see a screenshot showing how that font is rendered in pretty much every browser on every platform, including IE6–8 on Windows XP–7.
posted by adamrice at 10:38 AM on December 19, 2010

In thousands of years when humans have died out, and whatever intelligent lifeform around is sifting through the digital ruins of what is left of the Internet, they will conclude that the world's worst and most difficult job of the early 21st century is that of "web designers."
posted by Threeway Handshake at 10:42 AM on December 19, 2010 [4 favorites]

This whole idea is in opposition to everything HTML and the Web stands for. Designers don't get it. Content is separated from presentation. Users have control of presentation. If I want to set my browser so the default sanserif face is 72 point Comic Sans, I have that power. Designers who want to force their presentation have been the source of most ills of the web, for example, Flash.
posted by charlie don't surf at 10:54 AM on December 19, 2010 [3 favorites]

quonsar II: smock fishpants and the temple of foon: I neither understand nor appreciate your negativity, not being able to control layout in design is powerfully important. Not being able to properly control typesetting and layout is akin to telling a carpenter to build a house without using any measuring tools, and arguably as important. While design may seem like a frivolous occupation to some, it actually shapes huge parts of our daily lives. Without thoughtful design, road signs, emergency defibrillator instruction manuals, and a car steering wheel would be neigh impossible to understand or use, things we can all agree are massively important.
posted by thebestsophist at 10:58 AM on December 19, 2010

Content is separated from presentation. Users have control of presentation. If I want to set my browser so the default sanserif face is 72 point Comic Sans, I have that power. Designers who want to force their presentation have been the source of most ills of the web, for example, Flash.

Content is separate from presentation in a properly designed web page. You are free to turn off the CSS if you want - the reason the two are separate is so you can still get the info if you turn off the design. To go from that to saying that design isn't important is just dumb.

As a rule, Flash does suck , though.
posted by Benny Andajetz at 11:01 AM on December 19, 2010 [5 favorites]

To go from that to saying that design isn't important is just dumb.

Hmmm... if the popularity of websites such as Facebook, Twitter, and MetaFilter (especially MetaFilter) prove anything, it's that fonts don't matter. Good design? Fine. Layout? Yes. But it seems to me that part of the reason that people have been struggling for years to get some kind of system working on the browser, without a ton of success, is because there just hasn't been the pressing need for it in the same way that there was for working standards for layout and other aspects of design.

I love typefaces and typography, but I think it means a lot more on the printed page than it does on the screen.
posted by Deathalicious at 11:26 AM on December 19, 2010 [1 favorite]

Why not just render everything as .GIF files to get real control over what gets displayed? And as a bonus, you can make it flash!
posted by Joe in Australia at 12:42 PM on December 19, 2010

"This whole idea is in opposition to everything HTML and the Web stands for. Designers don't get it. Content is separated from presentation. Users have control of presentation. If I want to set my browser so the default sanserif face is 72 point Comic Sans, I have that power. Designers who want to force their presentation have been the source of most ills of the web, for example, Flash."

Visual design is a communication channel every bit as real and high resolution as text. It IS content. But, as with non-verbal and non-textual communication channels of every kind, the layperson often underestimates just how much information is carried by these channels, precisely because their effect is indirect and beneath most people's conscious awareness. One of the reasons visual communication is so powerful is precisely because most people don't know they are using it or interpreting it.

But suffice it to say, you might as well make the claim: "Writers don't get it. 1. USERS should get to decide what words are used on websites. 2. Most of the ills of digital publishing are generated by writers who want to say something."

There's a sense in which you're (perhaps unintentionally) correct - which is to say that yes, the web allows for creatives of many kinds to create custom channels for targeted personas, interest groups, and demographics, etc - and that within those channels, the digital milieu allows a lot of room for user-generated content and designed tweaks. But you'd be dead wrong to think that this process can happen without visual and UX designers. In fact, integrating user-generated and custom digital content into a holistic experience that communicates well is one of the most difficult tasks visual designers have ever faced.

And the fact that designers have been working on the web for so long with such a limited typographic toolset - has meant that we've ALL suffered from an impoverished (read: literally lossy, less information-dense, less articulate, less beautiful, and simply less readable) web experience.
posted by macross city flaneur at 12:44 PM on December 19, 2010 [1 favorite]

"mmm... if the popularity of websites such as Facebook, Twitter, and MetaFilter (especially MetaFilter) prove anything, it's that fonts don't matter."

Yes, and if the popularity of internet porn proves anything, it's that people love pop ups, banner ads, and general disorientation.
posted by macross city flaneur at 12:53 PM on December 19, 2010 [3 favorites]

"Content is separate from presentation in a properly designed web page. You are free to turn off the CSS if you want - the reason the two are separate is so you can still get the info if you turn off the design."

Sorry, Benny, but I beg to differ. As someone who's been building websites professionally for a decade, I can tell you that content is never fully separated from presentation. Whether it is a worthwhile goal to separate them in some degree is debatable, but in point of fact, I can tell you that every website is full of code that encodes intelligence about the relationship between content and presentation in a highly ad hoc manner. How long do we expect the paragraph to be coming out of that database? Is the data numeric? Tabular? A sentence a single word? An image? A link? Everything rendered on the page carries with it assumptions about, for example, the page structure and context in which it will appear, and to the extent those assumptions have to vary, my code will need to interpret that variation and respond.

The separation of content and presentation is, and always has been, a destructive and naive illusion of the engineering community.
posted by macross city flaneur at 12:58 PM on December 19, 2010 [1 favorite]

Why not just render everything as .GIF files to get real control over what gets displayed?And as a bonus, you can make it flash!

On the off chance this a real question, here's why:

Image files are much heavier bandwithwise and, more importantly, they are not able to be directly parsed by indexing as information. A picture of text is no longer text - it's no longer information. (Part of correct design is making the information available to everyone, even those who can't see or hear very well.)

Flash is the same, with the added benefit of being proprietary and having the contents of the file completely invisible.
posted by Benny Andajetz at 1:03 PM on December 19, 2010

macross city flaneur:

I'm not sure I understand what you are saying.

I design web sites also, and I agree that total separation is not always possible (although it usually is).

The type of information on the page is defined by the DOM. You still have to specify a paragraph or image or tabular data, but that is not presentation. That's the DOM of HTML or XHTML; it's the language of the web. It also doesn't matter where the information is coming from.

How the information is arranged, or colored, or positioned is presentation. That can all be defined in CSS.
posted by Benny Andajetz at 1:18 PM on December 19, 2010 [1 favorite]

I'd be happy with one fixed, one variable sans and one variable serif for the rest of my life.

Yeah, and why do we have so many colors, when all you really need is black and white? Okay, maybe throw red in there, just for emergencies, but seriously, who needs crap like "indigo"?

Also I'm real tired of the fact that food tastes different all the time. It seems like every time I go to a restaurant they've always got these show-off "recipes" -- it's totally pointless. As long as you can tell what's food and what's not food, who cares about things like "flavor" or "taste"?
posted by ook at 1:23 PM on December 19, 2010 [5 favorites]

How the information is arranged, or colored, or positioned is presentation. That can all be defined in CSS.

No, it can't. Because of a wide range of factors. But let's just take the fact that the containment relationship of html elements is highly determinative of how and where they display on the page. While technically it is true that, using CSS, you can place a div wherever you want, in practice it would be very difficult to treat HTML content this way. If so, then the order in which content appeared on the page would be irrelevant. It's not.

Let me just give you one example. You get comps from your graphic designer showing how the page should look, and the wireframes call for box x to contain ALL the elements in the database of type y. The HTML guy cuts it up and it's looking great. But uh oh, now the programmer (that's me these days usually) actually flows the dynamic content into the HTML guy's boxes and guess what? There's too much of it. Which is to say that the box is longer than anyone expected when ALL the elements are displayed. It pushes other content down or overlaps it or text simply spills outside the confines of its div (all things that can happen in HTML/CSS depending on how you've set it up). This means that now, as a programmer, I have to write a paging mechanism, because that box simply can't be that long. Now whole new page elements must be designed to support paging, markup has to be changed, and code has to be written to fetch only part of the content. In fact, the whole design might go back to the drawing board at this point. All because people made assumptions about the relationship between content and presentation that, in point of fact, turned out to be wrong. And to correct for those wrong assumptions, EVERYTHING had to change - not just CSS. Not even just CSS and HTML. EVERYTHING.

This actually just happened to me on Friday. It's what I'm working on right now.
posted by macross city flaneur at 1:29 PM on December 19, 2010

macross:

Holy cow. I sympathize.

But I'd also submit that you are involved in a case of the tail wagging the dog. The design needs to serve the information, not the other way around.

The design is important, but the information is paramount. Then it can be fixed with CSS and HTML (and scripting if necessary).
posted by Benny Andajetz at 1:38 PM on December 19, 2010

The table, while pretty, is useless without one-liner samples of the typefaces and screenshots, crucially of various Wintel systems.
posted by joeclark at 2:36 PM on December 19, 2010

What joeclark said. What good is a font book without actual font samples?
posted by egypturnash at 3:23 PM on December 19, 2010

macross city flaneur: sounds like you need a content strategist.
posted by thebestsophist at 4:00 PM on December 19, 2010

That's the "Windows OK" column, no?

There are lots of problems with this column:

1. “OK” is subjective. What looks ok rendering to some, might be very distracting to others.
2. Which Windows? Windows XP uses grayscale (Standard) antialiasing by default. Windows Vista and 7 use ClearType. And to make matters even more complex, IE 7 and 8 as well as Firefox 4 force ClearType on Windows XP, and IE 9 will use even better DirectWrite rasterization.
3. No samples. Without a preview in each of at least three rasterization schemes (Mac, Win Standard, Win ClearType) we don’t know how a majority of web users will see each font.
I don’t blame the good folks at Sleepover for leaving these samples out. It’s far too difficult to create sufficient screenshots on your own (as we found out when we did the Georgia alternatives post on Typedia). Typekit does provide decent samples, but the interface is a bit cumbersome, so it can be a hassle to get to those three important render modes.

posted by Typographica at 8:23 PM on December 19, 2010

I'm kind of design ignorant (not proud of it), but I thought long blocks of text should always be displayed with a serif font? It seems like the majority here are sans-serif.
posted by BrotherCaine at 5:34 AM on December 20, 2010

I thought long blocks of text should always be displayed with a serif font?

That's a long-standing tradition in print, but for onscreen readability the research is pretty murky. A few studies that suggest that serifs actually interfere with readability at small sizes and/or low resolution, and most others seem to say that there really isn't much difference in reading speed for a well-designed serif versus a well-designed sans-serif.

What does seem most consistent in the research is that readability is highest for fonts the reader is already familiar with -- which is why (despite my snarkiness at octothorpe above) I don't use webfonts for body text (last week I actually talked a client out of using one, in fact -- it was very pretty but just drew too much unwarranted attention to itself). Verdana, Times, Arial are not the most attractive fonts in the world, but they're what online readers are most used to seeing, so they're going to be the most readable and unobtrusive.

Webfonts are great for headlines or callouts, anything you want to draw extra attention to, because anything other than the usual suspects automatically calls attention to itself just by virtue of being unusual.

I'll be very curious to see whether as display resolutions get better (so stuff like antialiasing schemes become less relevant), and as webfonts catch on in general, whether those "default" fonts will start to be supplanted by others. I kind of suspect we've already reached the point where there's a self-reinforcing cycle that will keep them in use for the foreseeable future.
posted by ook at 12:00 PM on December 20, 2010

Hmmm... if the popularity of websites such as Facebook, Twitter, and MetaFilter (especially MetaFilter) prove anything, it's that fonts don't matter. Good design? Fine. Layout? Yes. But it seems to me that part of the reason that people have been struggling for years to get some kind of system working on the browser, without a ton of success, is because there just hasn't been the pressing need for it in the same way that there was for working standards for layout and other aspects of design.

IE4-9 supported cached fonts. The big game-changer is the standardization of the implementation among its competitors.

God I can't believe I just defended IE.
posted by thsmchnekllsfascists at 12:03 PM on December 20, 2010

Yes, and if the popularity of internet porn proves anything, it's that people love pop ups, banner ads, and general disorientation.

Why do you think Adblock Plus is the #1 downloaded add-on?

But seriously: I like visual design, but I think some people put too much importance into it. People care about content. Really, that's all. So long as you don't present it on the page in such a fashion that it's unreadable, people will go to the site with the most content and the best content. There are plenty of very pretty websites out there that don't have a lot of content. Now, you're going to probably linger on that site a bit longer because it looks nice, but once you realize it's mostly empty you're going to leave.

Funnily enough, there are some visual features that *have* been shown to have an effect: flashing colors, button shapes, arrows, the text "Click me" -- all of these visual features that would make any self-respecting graphic designer grimace in pain -- have been shown to increase the chance that a visitor will interact with your site.

I think it's really important to answer the question, "Is this website an environment, or is it a tool?" If it's an "environment" (think company brochure) then I think its appearance *is* important. But usually, the website is a tool.
posted by Deathalicious at 8:05 PM on December 20, 2010