Font delivery services

Bloke · 2011-10-09 20:11:04

I admit, up-front, I’m a heathen.

Typeface choice is largely a foreign art to me. I can tell the difference between fonts to some degree, know that some work better for some jobs and some at others, know my serif from my sans-serif, and know that Comic Sans is just awful.

Past that — at the kind of level that typogrophers / typesetters start to notice subtle font nuances — is where my limits lie. It’s like people justifying $800 per metre speaker cable from a Marantz to a pair of Bang & Olufsens; even though I’m a self-confessed audiophile, at the extreme end of the spectrum I part company with the purists as the 80:20 rule dictates that most people — myself included — can’t tell the damn difference between that and a Sony deck to a pair of Jamos when something as derivative and over-compressed as Katy Perry is put through the system.

When it comes to fonts, to date I’ve stuck with the Web Safe crowd (cf. heathen, above). I realise in today’s CSS3 world that’s not enough and I’m man enough to hold my hand up and ask for help. I know of TypeKit, but since I’m not a designer by trade and pump out maybe one site a year if I’m lucky, paying to use the service seems a little frivolous. Plus the acquisition by Adobe doesn’t fill me with confidence, given the company’s history of sloth-like development and bloated products (Flash: bleurgh; Photoshop: pretty stable; Adobe reader: awful; After Effects: patchy; …). Time will tell.

But there’s stiff competition from other players such as:

And I’m sure many others.

So to my questions: with my joe-average outlook, but my oh-so-willing-to-do-it-better ethos, what do you designers use? Specifically:

What’s your provider of choice? Why?
Are there good alternatives to any of the above?
Are free fonts good enough for my use to make better looking sites than using Verdana, or is it imperative to pay for a font (sidestep the fact that font designers deserve paying for everything of course: I’ll only willingly pay for something if it offers demonstrable value to me, not in the eyes of a purist who thinks I should have understood font hinting better when I can’t tell the difference between Font A and Font B)?
Do I need a font stack if I’m using these services, or does one font render reliably enough from one provider across browsers? If a font stack is mandatory, what approach do you use to build the best one across modern browsers? (e.g. how do you find which fonts are close enough to your ideal? I only know of poking around blindly at Identifont and choosing the ‘you might also consider these close alternatives’ they provide).
Should I just slink off and stick to code instead of dabbling in something so blatantly out of my league?

My apologies for the absolutely noobish questions, but there’s so much conflicting information from type gurus on the Interweb that I fear I’m getting brainwashed by the 20% B&O/Marantz crowd and not hearing enough from the real people at the sharp end of web development like you, who make beautiful and practical font choices every time you create a site.

Thanks in advance,

Baron von FontPagan

jakob · 2011-10-09 22:28:54

There are thousands and thousands of typefaces, some with very subtle differences, and the plethora of webfont services that have emerged have increased choice on the web dramatically.

I couldn’t recommend one service specifically over another, but one thing that differentiates them is that they don’t all serve all fonts. This is mostly to do with the font foundries behind them and there may be some overlap where typefaces are cross-licensed. That may start to blur more in future. fonts.com, for example is run by monotype who have access to a vast library of fonts. IIRC there is some overlap with adobe’s own collection. typekit serve fonts from some large (e.g. adobe, fontfont or fontshop and bitstream) and smaller foundries (e.g. darden studio, porchez or underware to name but a few). Fontdeck list several british foundries whose typefaces are particularly common in GB such as Jeremy Tankard or Fontsmith. Webink I’ve not looked at in any detail, except to note that they have exclusive rights to the Ourtype library, which is a prized European foundry. And then there are some very highly respected foundries such as Hoefler and Frere-Jones who haven’t yet licensed fonts for webfont use (but are working on it) or have developed a solution of their own (e.g. Typotheque or Lucasfonts – the latter shows how the display can vary from browser to browser).

I guess the above doesn’t clarify much, except to say that a designer will look for a typeface that supports the message/content and probably then look for a service. If they already have an account with a service, they may look for a similar font in that vendor’s selection. Many of the services provide help in looking for typefaces and there are sites galore and font directories on the web (of which fontshop and myfonts” I find most comfortable to use).

It’s definitely worth checking how webfonts display at the size, colour and settings you want to use them. Screen resolution is very coarse and lots of fonts, especially those with finer strokes start disintegrating markedly at small sizes – or look weak or clunky on screen.

An advantage of the core webfonts originally provided by microsoft, and the extended set that followed with microsoft office, is that they are all hinted (= equipped with special “hints” for the rasterizer that correct pixel irregularities at specific font sizes. That is an extremely labour and time intensive process and most fonts are not hinted, or at least not manually hinted. As screen resolutions improve, this whole process will become increasingly obsolete). That means they are very readable at most small sizes.

I would always use a font stack as fallback for webfonts in case they don’t load for whatever reason. There’s a useful font stack builder at codestyle. Typekit, and probably some of the others, provide events for such cases so that you can use an alternative font stack if the web fonts are not active – see here for more infos.

Lots of people use cufón (or SIFR in the past) but primarily for headings as they are comparatively processor intensive. It also breaches the EULA of many font foundries, especially when not restricting the font to the site’s own domain.

gomedia · 2011-10-09 22:37:50

Hi Stef,

I use Font Squirrel coz it’s “100% free for commercial use”.

Adi

maruchan · 2011-10-09 22:43:07

What’s your provider of choice? Why?

I don’t have one yet, and I don’t think I will for a while. It seems too early in the game to decide. I’m happy with Typekit right now and will trust for the time being that the service is relatively safe. However, I will watch for emails in my inbox from Adobe… :-)

Are there good alternatives to any of the above?

In addition to Typekit I’ve used Ascender Fonts, but it looks like they are now relying on the Fonts.com service. Haven’t had any problems there.

Are free fonts good enough for my use to make better looking sites than using Verdana,

Depends on which, but sure. Remember that the property of being well-designed does not always get to decide what’s most appropriate for your design. A good deal of culture informs that, among other things. But I am one of those people who is pretty sick of Helvetica, so take that as you will… :-)

or is it imperative to pay for a font

It doesn’t seem like this is the case. I know how you feel though. I found a good medium by learning more about the people who make the fonts I like, and purchasing one or two fonts (or a font service) based on what I respect about the people who make the commercial fonts I like. It feels good to support them, now that I know they’re not some greedy suit hawking some old fonts from the ’90s. Or 1890s. :-)

(sidestep the fact that font designers deserve paying for everything of course: I’ll only willingly pay for something if it offers demonstrable value to me, not in the eyes of a purist who thinks I should have understood font hinting better when I can’t tell the difference between Font A and Font B)?

Yeah, take a look at what I wrote above. You may want to look in your nearest Linux distro’s repositories for hundreds of free fonts designed by Ray Larabie, essentially donated to the Free Software effort. Many of his fonts are available as commercial web fonts as well, and he has some budget-friendly font packs that I have recommended to students in the past.

Do I need a font stack if I’m using these services, or does one font render reliably enough from one provider across browsers? If a font stack is mandatory, what approach do you use to build the best one across modern browsers? (e.g. how do you find which fonts are close enough to your ideal? I only know of poking around blindly at Identifont and choosing the ‘you might also consider these close alternatives’ they provide).

I like to make sure I at least know what the fallback fonts will look like. You can do that really quickly with Chrome’s web inspector at any point in the web design process, too.

Should I just slink off and stick to code instead of dabbling in something so blatantly out of my league?

No! That would mean I’d have to stop working on my coding skills. :-)

Edit: See also a recent online discussion I started by asking a bunch of coders about which framework I might learn…ha

Last edited by maruchan (2011-10-09 22:45:08)

tye · 2011-10-09 23:23:17

I’ve been using Google webFonts recently – you can normally find something similar to what you want to use on there, they are easy to use. I did use them on a site I designed recently though, and then checked on in IE on a PC – and they looked shockingly pixelated – so always double check

I have used cufón and SIFR and other replacement options, but the is that the font is not selectable on the page and I think with cufon, there is a problem with links… can’t remember what.

I was looking at using @font-face – but this opens up a whole new set of cross browser headaches

Font Stacks… yes, but I normally just use my main font, possibly an alternative, then the lazy wildcard serif, or sans-serif :)

I like to use Da Font (most are free) and What The Font for finding fonts…

masa · 2011-10-09 23:39:42

I agree with your feelings about Adobe’s acquisition of Typekit. I’d avoid them if possible, because they have a poor track record especially when it comes to acquisitions.

On the other hand the google web fonts directory just keeps growing, is free and, I guess, they have the server power to deliver reliably. The quality of fonts varies a bit and you won’t find any of the classic typefaces there, but plenty that might be close enough.

Only go with a paid service, if a client insists on a specific font only available from there, or if you’d want to impress the font snobs, that make up about ≤ 0.001% of visitors.

In any case I’d still only use them for headings and short bits of text, e.g. pretty pull quotes, but plain font stacks for the bulk of body copy.

The real tricky bit though is to pick good fonts and combinations in the first place.

Bloke · 2011-10-10 00:20:27

Wow, thanks for the tips and thoughts everyone.

@jakob: I didn’t realise that the services were affiliated with foundries (guess it’s like brewers being affiliated with a particular pub). So it makes sense to find the perfect font first and then pick the service, as you say. Awesome tip. I’ll have a more in-depth play with the CodeStyle font stack builder later: looks grand.

@gomedia: Never heard of fontsquirrel, and the site just displays a white screen in FF 7.0.1 (Winbloze). Luckily it rendered fine in Chrome. Goldmine, fab, thanks.

@maruchan: I’ll look into a bunch of fonts that make me go “woah” and build up a list of the designers behind them. Perhaps that’ll give me some clues who to reward. I’ll check out Larabie’s stuff too, thanks for the tips.

@tye: I’ve used cufón once. It’s alright but the fact you can’t select the text is a bit annoying. My site’s one area where I want to experiment with newfangled font knowledge garnered from all you clever people where font selection seems to be innate. And thanks for the What The Font link: very handy.

@masa: Good advice, thanks. I’m intrigued by Google’s font service but, well, y’know, it’s Google so they might just decide one day that they’re gonna make the entire service vanish overnight because it’s not fun enough. And I definitely need to refine the craft of picking good font combos. That’s probably not something that can be taught so it’ll have to come from people lauging hysterically and pointing at me a lot until I get the message.

All good stuff. Thank you for helping me out so far. If anyone else has anything to add then I’m all eyes.

uli · 2011-10-10 00:56:10

Bloke wrote:

That’s probably not something that can be taught so it’ll have to come from people lauging hysterically and pointing at me a lot until I get the message.

Four fig leaves to prevent that:

“What Font Should I Use?”: Five Principles for Choosing and Using Typefaces

Best Practices of Combining Typefaces

19 top fonts in 19 top combinations

4 Rules for Combining Typefaces

jstubbs · 2011-10-10 02:05:35

For most use cases, Typekit is very hard to beat.

joebaich · 2011-10-10 02:50:02

I don’t disagree much with anything I have read in this thread. I have been using Typekit for almost a year now and like what I have been getting for $50. I felt my way to begin with by using their free fonts, there are about 170 of them currently and one has a limit of 25K page views per month (I wish!). The folks there are well known and established designers and so far it has been a good experience. I like their blog and find the “About Face” articles to be helpful and insightful. I’ll watch what Adobe does with them and move on if it stops being a good experience.

I also like the look and feel of Fontdeck; their ‘try any font’ over 20 IPs free is a good way to try out font combinations and to get used to using served fonts. Thereafter Fontdeck’s pricing structure is per font whereas Typekit provide most of their fonts for the $50 annual fee. I haven’t done a complete font face inventory check between the two but there is a degree of commonality between them.

I haven’t had negative feedback from the clients who pay a smidgeon more for the fonts so I will continue using one or another of the services.

jakob · 2011-11-29 07:34:30

Also possibly of interest: Choose your web fonts wisely from Elliot Jay Stocks’ blog.

uli · 2011-11-29 11:56:46

Takes a bit longer for printed sources to reach the target audience: font-combinator.com, for quickly combining G’s fonts and the most widespread system fonts. (Updates automatically when G add fonts to their pool.)

Last edited by uli (2011-11-29 11:59:14)

Textpattern CMS

Textpattern CMS support forum

#1 2011-10-09 20:11:04

Font delivery services

#2 2011-10-09 22:28:54

Re: Font delivery services

#3 2011-10-09 22:37:50

Re: Font delivery services

#4 2011-10-09 22:43:07

Re: Font delivery services

#5 2011-10-09 23:23:17

Re: Font delivery services

#6 2011-10-09 23:39:42

Re: Font delivery services

#7 2011-10-10 00:20:27

Re: Font delivery services

#8 2011-10-10 00:56:10

Re: Font delivery services

#9 2011-10-10 02:05:35

Re: Font delivery services

#10 2011-10-10 02:50:02

Re: Font delivery services

#11 2011-11-29 07:34:30

Re: Font delivery services

#12 2011-11-29 11:56:46

Re: Font delivery services

Board footer