A couple of days ago I switched the Neuton typeface into this space, via Google Web Fonts. I liked it but a lot of others didn’t, and it turned out that for some reason, on Windows it just didn’t work as a body font; I suspect it’d be fine for display purposes (as in, for headlines). So, on to Plan B: FF Tisa Web Pro, from Typekit.
Why Tisa? · I spent a really excessive amount of time trying this font and that, but at the end of the day the choice was easy. I wanted something that was really easy to read, unobtrusive, and yet struck my eye as “modern”, whatever that means.
I was also struck by the narrative: “Mitja Miklavčič drew FF Tisa to meet the technological and aesthetic requirements of modern magazine use.” Because, all these years into the blog experience, I now think that’s what this wants to be: a modern magazine. This has become clearer with the rise of Twitter and Tumblr pushing the limits of the short form, and then of Facebook and Google+, working on publishing-as-conversation.
Also, I’m prone to italics, and some otherwise-great fonts tend to crumble when bent over. That’s a big problem with Georgia, which has otherwise served me pretty well here all these years.
Mechanics · Setting up Typekit fonts is not quite as much of a no-brainer as are Google Web Fonts. Their “Kit Editor” Web application is nicely-designed but accumulates entropy and has to be relaunched every so often.
The real pain-in-the-butt is caching. The font download for Tisa (I left out the bold-italic variant) is 110K; so yes, please cache it. Except for when I’m twiddling CSS selectors, or trying to A/B back and forth between a couple of fonts. For Safari in particular, if you want to un-cache a font, you have to take the ship up and nuke the site from orbit; it’s the only way to be sure.
What I eventually did for A/B testing was to set up three copies
of the same page, and hand-edit them to put class="F1" on each
paragraph tag in the first, class="F2" in the second, and so on.
Then I set up a Typekit kit including all three fonts with .F1,
.F2, and .F3 selectors. Kind of gross, but it got
me there; there’s just no substitute for looking at the options
side-by-side.
Finance · I signed up for Typekit’s “Portfolio” package at $49.99/year. This strikes me as a fair price for what they offer, and I have no urge to “own” a font. If Typekit becomes unreasonable down the road, I’m sure there will be lots of competitive options.
Contributions
Comment feed for ongoing:
From: Cameron McCormack (Jul 17 2011, at 19:32)
FYI, the "č" characters seem to be being rendered in a fallback font.
[link]
From: Michael Zajac (Jul 17 2011, at 20:43)
There's a non-breaking space between “of Facebook,” that renders so narrow it makes the words look run together. Perhaps an artifact of the justified column.
[link]
From: John Cowan (Jul 17 2011, at 21:36)
Much, much better. Thank you.
And I do find your posts via a feed reader, but I don't read them through a feed reader. Only web comics and other highly visual things get that treatment.
[link]
From: Jan Minář (Jul 17 2011, at 22:02)
It's not a non-breaking space. The lowercase "f" runs into the next word on other occasions as well. The typeface rendering is slightly less disgusting than the previous one.
[link]
From: Joelle Nebbe-Mornod aka iphigenie (Jul 17 2011, at 23:35)
For information, if I leave a page on the site open in a tab, browse elsewhere, then return to it, it looks all garbled together. Looks as if the formatting vanishes and one is left with bigger characters in the same space as the smaller were, overlapping
Nothing a refresh won't fix, but weird indeed
[link]
From: Peter (Jul 18 2011, at 01:24)
FWIW, you may want to take time read this 6 part series : http://blog.typekit.com/2010/10/05/type-rendering-on-the-web/ (links to all parts at top of article) and find links to suggested paragraph and headline fonts at the end of the final article (Fonts that render well).
[link]
From: klkl (Jul 18 2011, at 03:25)
Opera 11.50/Mac just renders text with Times New Roman (it's the computed style in Dragonfly, so it seems Opera isn't even seeing the web font declaration).
[link]
From: Andrew Wright (Jul 18 2011, at 03:31)
Neuton was interesting, but seemed to have a slightly olde-world, hand printed aspect to it, which I thought caused legibility to suffer.
Tisa feels more modern somehow, and looks better on screen.
That said, I seem to have ended up with san-serif fonts as default screen reading options, so even Tisa seems slightly heavier than normal.
Experimentation is good though - I'll be interested to see what happens over the next few weeks!
[link]
From: J. Prevost (Jul 18 2011, at 04:38)
Regarding the rendering of "Mitja Miklavčič": Tim probably made his kit with "Default" instead of "All Characters" selected. This makes for a smaller font package (in the case of FF Tisa Web Pro, 151k instead of 344k), which means it does not include the 'č' character from the Latin Extended-A Unicode block.
"Default" only includes Latin-1 (i.e. the 0-255 range most commonly used in Western European languages) and selected typographic glyphs like quotation marks.
[link]
From: Anton (Jul 18 2011, at 05:00)
The problem with Google Fonts, at least in this part of the world, is that there is no single font which contains glyphs outside Latin 1.
[link]
From: tag (Jul 18 2011, at 06:23)
Hi,
Please advice your windows users to enable font smoothing.
http://2.bp.blogspot.com/-YITsgCuHhUk/TgnPnR-FzUI/AAAAAAAAABo/2617RaDPSd0/s1600/clear_type3.png
Hope that helps.
[link]
From: Tom Malaher (Jul 18 2011, at 09:52)
And while we're on the topic...
When I print blog postings (which I do for longer postings so I can read them in a leisurely fashion on the bus), they look like this:
http://dl.dropbox.com/u/472006/ongoing_print.png
Which is nice, but the headings (e.g. "Why Tisa?" and "Mechanics") which are larger, bold sans-serif when reading onscreen become the same size/font/weight as the body when printed.
Can I put in a vote for keeping them distintive in the print-media CSS?
[link]
From: Ezra (Jul 25 2011, at 19:22)
The c-hacek, č, apparently comes from a different font, which is disappointing, since it appears in the creator's name. On my Linux machine it is even outsized, but there and on the Mac you can see it has a different shape and weight from the English 'c'.
[link]