Typophile

Typophile › General Discussions

Which webfonts are best suited to rendering small text across all browsers?

cameronfission20 Jan 2011

Hi Typophile,

After trying out TypeKit last year and deciding that it was a bit too bleeding-edge to be of use to me at that time, I've jumped back in with another investigation of the now numerous webfont vendors and services available online. I've checked out FontDeck, Typotheque, and WebType. So far I've been avoiding TypeKit because I prefer a not-javascript-dependant solution.

A major frustration for me is the seeming lack of information regarding which typefaces in a given library are technically suited to rendering small type across all browser platforms. I've basically been surfing these websites in IE6 with cleartype disabled (painful!) to get an idea of the worst-case-scenario for each typeface.

I love the fact that WebType groups their offerings by intended display size, and I was very impressed with the performance of BentonSansRE. At Typotheque, I was impressed with Fedra Sans Screen. At FontDeck, I noticed that most of their own site text is crisply rendered in PT Sans, which ironically enough is available for free.

Does anyone have tips on how to streamline this research/testing/font-selection process? Has somebody already done this work for me and published the results somewhere? I'd love to specify some fresh web type on an upcoming project, but at this point Verdana is looking pretty convenient.

Thanks!
Cameron

riccard020 Jan 2011#

http://typedia.com/blog/post/cure-for-the-common-webfont-part-1-alternat...

http://typedia.com/blog/post/cure-for-the-common-webfont-part-2-alternat...

PabloImpallari20 Jan 2011#

I just posted a list on another thread. Quoting myself here:
"In the Google Web Font Directory there are a few that have great hinting and looks great even on WinXP with cleartype off at 12px, such as Droid Sans & Serif, Cousine, Arvo, Lato, Arimo, PT Sans, Anonymous Pro, Ubuntu, Nobile."
Check it out: http://code.google.com/webfonts

Also, the paragraph fonts from Webtype.
http://www.webtype.com/catalog/intended/?ts=829

I'm also sure that Type-kit have well hinted fonts, but I don't know witch ones.

apankrat20 Jan 2011#

I killed a couple of weeks on just that.

I went through pretty much all Sans fonts on WebFonts, WebType, WebInk, FontSpring/FontSquirrel, FontsLive, FontDeck and TypeKit. There is some overlap, but ultimately the choice for 11-13px text sizes is very limited. I was testing on Windows XP as you did, but with ClearType on. My take on this is that I will detect the lack of ClearType smoothing on the client and provide a safe fallback font like Verdana.

In any case, here's the list:

WebType:

* Droid Sans
* Franklin Gothic
* Calibri
* News Gothic

FontsLive:

* Segoe UI
* Miramonte Pro

WebInk:
* URW Grotesk Light
* Proxima Nova
* Tondo Light

Also Delicious by Exjlibris.

--

FontShop has some nice ones (FF Scala Sans Web, FF Dagny Web Pro, FF Meta Web), but they only sell .woff and .eot (meaning no support for Firefox 3.x, which is a very big deal). They also would tell you they have an arrangement with TypeKit to host a font if you buy it from them. What they do NOT tell you right away is that you will need to get a paid TypeKit account -or- to display a TypeKit badge on your website. Sneaky.

--

In the end and after much deliberation I went with Calibri.

Frode Bo Helland20 Jan 2011#

.

Arno Enslin20 Jan 2011#

@ Frode

Do you know about the bookmark function? It’s relatively new. The button is on the top right of the initial post of each thread.

Miss Tiffany20 Jan 2011#

On Typekit, also don't forget Adobe. Their team has done a great job on optimization of their fonts for the web.

I'm not sure if DaMa's fonts are available to use on the web yet, but I've reviewed some screenshots of their fonts from Windows XP—which we all know is what kills most fonts—and they looked amazing.

Frode Bo Helland20 Jan 2011#

I know, it just doesn't work with the tracker.

John Hudson20 Jan 2011#

Which webfonts are best suited to rendering small text across all browsers?

Verdana.

apankrat20 Jan 2011#

@Miss Tiffani - WebInk carries Dalton Maag's fonts and very few are actually fit for setting a body text in a smaller size, on XP. Give it a try if you have some spare time, it'd be curious to compare notes.

Jens Kutilek21 Jan 2011#

but they only sell .woff and .eot (meaning no support for Firefox 3.x, which is a very big deal)

That's not true. Firefox 3.6 supports WOFF. The only Firefox version which supports web fonts but not WOFF is 3.5 (Fx 3.5 has ~2% of market share).

Arno Enslin21 Jan 2011#

On Typekit, also don't forget Adobe. Their team has done a great job on optimization of their fonts for the web.

What I have seen there, looks terrible. What’s optimized there?

-------------------------

Dalton Maag’s font Interface (the TrueType version) looks impressive on screen. But it is a sans serif font, and therefore less problematic. I meanwhile think, that the best serif candidates for a good look on screen are slab serifs.

-------------------------

Vollkorn is meanwhile relatively well hinted.

Té Rowan21 Jan 2011#

As far as I can remember, 'Foxes up until 3.0 (and browsers derived from them) did not support @font-face at all. Firefox 3.5 could deal with raw font files (TTF).

dberlow21 Jan 2011#

If one takes "ALL Browsers" literally... You're all wrong. But the more browsers you eliminate from consideration, the more fonts work.

Chris Dean21 Jan 2011#

.

apankrat21 Jan 2011#

> Firefox 3.6 supports WOFF.

My bad, it does indeed. I was too irked by their loaded "TypeKit partnership" "workaround" to pay proper attention to the important details.

Miss Tiffany21 Jan 2011#

Alex, That is strange. I'll have to go see what is live then. Because when I reviewed screenshots I was very impressed and I was mostly concerned with text sizes.

Thomas Phinney21 Jan 2011#

At WebINK we will soon have more guidance on usable sizes. A lot depends on exactly how small you want to go with the body text. Do you have a target px size?

Here are some WebINK fonts that have styles that work well at 12 px (and some as small as 9 px), even on XP without ClearType:

Adelle Web
Cora Web
Museo Sans
Museo Slab
Museo
Tondo
Anonymous Pro
Bluejack Light
Edita Web
Effra
Omnes
Calluna
Candida

Cheers,

T

apankrat21 Jan 2011#

Thomas, this is Omnes at 12px with ClearType:


Note the /e/s and /s/s; /g/s bowls too. At 13px /g/s/ bowl just steals the show. At 15px though Omnes looks undeniably great, but so do many other fonts.

dberlow21 Jan 2011#

I just did a bit of scouting on Typekit's excellent new "paragraph" subdivision, and if you're looking for good text from there you just have to be a bit selective... or, two people can have completely different experiences/opinions browsing the same fonts, your choices.

Nearly all the families in the subdivision have four styles that can do the job, with the rest being arguably a matter of taste. In the Adobe fonts e.g., in the selection of a regular weight, e.g., test Garamond Premier, over Adobe Garamond Pro. 

In the case of 6 to 8 style families, you need to avoid the lightest weight. In larger families you have to avoid the two or three lightest weights. These example choices are about survival of the roman weight in all windows browser shots you may wish to try.

Now arise web typographers to your posts and no bickering! Bold and italic cross platform-safe selections await thee on lots of sites.;)

Arno Enslin24 Jan 2011#

Lucas de Groot uses TheSans Office on his website. And at least on Windows it works extremely well in small sizes, even in very small sizes.

http://www.lucasfonts.com/support/webfonts/

I would like to know, if TheSerif Office also works so well. Unfortunately the character set of both font families is very limited. I hope Lucas is going to offer Thesis SC Office families in near future.

Except from that Lucas fonts probably belong to the technical most perfect fonts. The kerning is likewise extremely good.

The only thing I don’t like with regard to Lucas fonts is, that he permanently renames his fonts. It is a bit confusing.

All Office versions of his fonts: http://www.lucasfonts.com/fonts/for-the-office/

I have not yet asked Lucas, but I assume, that all of these Office fonts are available as web fonts.

Chris Dean24 Jan 2011#

Keeping in mind that once monitors exceed ~300 PPI resolution will no longer be a significant concern. Visual angle will.

http://prometheus.med.utah.edu/~bwjones/2010/06/apple-retina-display/

and

Curcio, C. A., Sloan, K. R., Kalina, R. E. & Hendrickson, A. E. (1990). Human photoreceptor topography. Journal of Comparative Neurology. 292, 497-523.

Captured from commoncrawl.org on 18 Apr 2015. original URL