Webfont: a legible, good quality grotesk/serif combination. Choices and alternatives

nishiun's picture

Hi everybody,
looking for a font combination for a web editorial project I'm working on (a magazine focused mainly on stories and opinion but also with short news, let's say in a 70/30% proportion). A sidenote: I'm not the graphic designer, guess I'm the "creator".
Since I spend most of my days reading, print and on screen, I really like looking at good typograpghy and even if I'm waaaaay far from being an expert, I'd like to choose a bunch of typefaces myself and then discuss with the graphic designer.
Anyway, I'd like to use a sans for titles/headlines and a serif for long text. The layout is clean, with colors and composition vaguely inspired to the 60-70s italian and european magazines, but It looks like a website, so It's not "old" or "vintage".

The ideal combo for me would be Founders Grotesk (Klim) or Akkurat (Lineto) for headlines and Tiempos (Klim) or Publico (Commercial Type) for text. But sadly Founders, Tiempos and Akkurat are not available for web use, and Commercial Type has not live preview.
Wich fonts are valid alternatives for web use? That's the question.

I narrowed to FF Bau (and as last choice FF Dagny, wich is good but too "impersonal") for headlines + FF Milo, FF Spinoza, FF Tundra or FF Qadraat for text ( I do not work for FF: it's only they have a pricing policy I can afford and let you test webfonts live).
Here comes the question for you wonderful people:
How would you combine them?
Would you suggest other grotesk (or halfway between grotesk and more cold typefaces, like Akkurat) and other serif wich have a good (and I mean it: it has to be legible even with XP) web version, don't look too informal but still have personality?
Thanks, a lot. (And sorry for language mistakes)

hrant's picture

Another FF you should look at - it's highly suited for web typography:
http://ernestinefont.com/

hhp

nishiun's picture

Hi, hrant, thank you. Lovely font, looks beautiful on screen. But I need something more classic. Ernestine is too rounded, some carachter (ie the "g") are way to personal (but still beautiful).

Indra Kupferschmid's picture

If your website is frequently read on windows computers or will use a type size under 16px, you have to carefully look at the rendering of the fonts, otherwise long text will not be very pleasant to read. Georgia is still a good free option, so is Droid Serif (I might be the only typographer who likes it though).

From the paid pool of web serifs for body copy, I like Benton Modern RE and Ibis RE best. They cost $40 per style per year but you can go a long way with just one or two of them. And they can also be tested for free or try an existing site with their swapper tool. Both combine well with FF Bau or Dagny, which I both like very much too.

oldnick's picture

Nishiun,

Quit being such a freaking prima donna: you have several excellent suggestions from two people who know what the hell they are talking about. Study them well, Grasshopper: you might actually learn something. Mister Creator Person. Jeez…

Enlightenment does not come cheap, cheapskate: consider donating…

http://www.nicksfonts.com

nishiun's picture

@Indra: Thanks for your comment. The rendering of the fonts, especially with XP, was actually my concern: about the font size, I will not go under 16px, everything under is very hard to read for average user (me). And yes, Georgia is still a good option. Just wondering if there's something wich can really compete, and I found that it's possible: fonts like Fedra, Tisa, Adelle, Chaparral, Ernestine looks surprisingly good even with Xp (at 14-16px). And so perform the FF serif I mentioned, wich I found better suit for my needs (questionable, but still my needs).
I understood the Reading Edge webfonts are amongst the best you can find in this moment, they look stunning, I tested them and the quality is surprising. But they are too expensive for me right now (let's say $40 x 4 styles, normal and bold, it's 160/year: for that price I could buy once and forever 4 licenses for web from other services).
By the way, I discovered Bau reading your post on Fonts in Use about True Type of the Bauhaus, and since then it was my first choice. So, again, thank you.

@oldnick: Hi, never questioned hrant and Indra know what they're saying: it's to have opinion from people like them I posted here even if I'm not and expert :-)
And about the "creator" thing: it was ironic, i was meaning I'm not the one who actually "do things", but since I pay someone, I'm trying to avoid being served with the old package Arial/Georgia like it's the best deal ever.
And yes, about fonts I'm a primadonna: i simply can't stand bad typography since I become almost blind in years squeezing my eyes infront of a monitor ;-)

Frode Bo Helland's picture

Indra, don't you think it is a bit misleading to say they work well under XP? After all, the default setting for XP is greyscale/binary and Reading Edge looks horrible under those circumstances. The same goes for most of the others.

oldnick's picture

Nishiun—

Which is to say: blah, blah, blah, look at me. And, yes: you ARE a prima donna who is not an expert, but who loves the sound of his own voice. Get a grip…

hrant's picture

Mac, don't mind Nick. He's the new James.

fonts like Fedra, Tisa, Adelle, Chaparral, Ernestine looks surprisingly good

The FSI boys are true wizards at onscreen rendering.
And their stuff actually does look good under XP.

hhp

oldnick's picture

Who the hell is James?

Indra Kupferschmid's picture

Frode, I don’t remember saying anything like this. My comment was: “If your website is frequently read on windows computers or will use a type size under 16px, you have to carefully look at the rendering of the fonts.” (And then suggested Georgia or Droid Serif.)

What browser are you talking about, and what size? Now that you mentioned it I had a look and 10px seem pretty decent to me in IE7. http://www.fontbureau.com/ReadingEdge/images/browsershots/ss-10/Windows_... I also looked at the browser samples of the mentioned fonts on typekit.

I’d be happy to hear what fonts render better under XP in small sizes. This question comes up frequently.

hrant's picture

Uh, like you said Indra:

Then there's this...


... although that's from an era when the fruity OS cared about people reading.

BTW to me it takes at least 22 ppem to come close enough to handmade.

Also:

If your website is frequently read on windows

What [kind of] site isn't?

hhp

Indra Kupferschmid's picture

I don’t understand what you are saying Hrant. What is the type in your images?

Oh, and to answer your last question: my site. Windows systems make up ca. 15%.

hrant's picture

First one is Georgia (10px, might look even better with equalized apparent size at 11), the second one is my Mana* (comes in three sizes, each with a Bold; that's the 11px, but it still looks smaller - the 13 was too big though). To me both render better (although like I said the latter -which is a handmade grayscale pixelfont- is admittedly an anachronism).

* http://www.themicrofoundry.com/manademo/

Your site stats: it might make sense in your case, but if you're only getting 15% of 95% of users I have to suspect there's some wasted potential there.

hhp

Frode Bo Helland's picture

Indra: You were answering a question about fonts for XP!

Hrants screenshot show Cleartype rendering, no? This is not default in XP. Note: Installing later variants of IE changes the system default from "Standard" to "Cleartype".

hrant's picture

Those samples are not using ClearType (which for one thing ruins Mana).

BTW I think IE does force ClearType internally but not on other applications (which continue to abide by the selection in the OS).

hhp

Indra Kupferschmid's picture

No, I was responding to an inquiry called “Webfont: a legible, good quality grotesk/serif combination. Choices and alternatives” but will refrain from doing so in the future. Should better start working on bitmaps fonts again.

hrant's picture

Nah, remember? we've been saved from the trouble of reading.* Now text just has to sit like a dumb gray blonde among all the purdy pitcherz, just like Modernism always wanted.

* Related: http://www.themicrofoundry.com/ss_uniglyph1.html

hhp

Frode Bo Helland's picture

Please don't:) I value your input highly. There's a gap in the webfont sphere. It's closing slowly (soon we may even disregard it completely), and I think it is -- in general - backwards to design and hint for binary/greyscale, but important to be "transparent" and honest about the limitations.

hrant's picture

I would love to design -manually- for subpixel rendering (and some people do effectively do that) but it's too much of an investment.

Until virtually all screens go over ~250 ppi (which isn't happening that soon) the gray crap surrounding fully vertical or horizontal elements remains a poor substitute for the real thing, and exactly not transparent about what readers need.

hhp

Té Rowan's picture

@nishiun – I personally like Paratype's PT Sans/Serif, but some folk dislike them for the detached tail on the 'Q'.

Jack B. Nimblest Jr.'s picture

"Hrants screenshot show Cleartype rendering, no?"

No, they show something unrelated to the (user's) questions, (web's) requirements and (both's) capabilities to deploy. They are also something anyone can make having just a few hours to waste.

"I think it is -- in general - backwards to design and hint for binary/greyscale, "

And that is the point x 2... Cleartype's shelf life was 14 years at release. Is it forward to design and hint for CT?

hrant's picture

In both those example I was merely showing what has been* and in the second example what should be - always useful for putting the sad reality in context. And for the record, Mana took a lot more than a few hours, not just because of the time needed to make those glyphs by hand (noting that it takes much longer to come up with ideal bitmaps than some might think**) but also because software was written to automatically convert the bitmaps to a TT font so it can actually be used (because this process was performed on much more than just Mana). BTW, I still use Mana in Photoshop to annotate hi-res images, like when I'm paid to critique fonts; it looks better than anything else, ever, period. Not a single crappy gray pixel anywhere in sight, in contrast to these gray miasmas being hailed as Progress.

* With good ol' Georgia still better than RE. Damn shame the fruit went bad.

**

As for shelf life: the relevance of CT was/is subpixel addressing, which will remain quite relevant for a while, especially for Italics.

--

We can give up on quality, individually or collectively, but this individual won't applaud the mud we're being fed. And am I alone? No:
http://www.typotheque.com/fonts/elementar/about

hhp

Jack B. Nimblest Jr.'s picture

"...takes much longer to come up with ideal bitmaps than some might think"

You've still got time.

nishiun's picture

After all, the default setting for XP is greyscale/binary and Reading Edge looks horrible under those circumstances. The same goes for most of the others.

I think it's true, but the number of people who use the default setting one way or another (new OS, IE updates etc) is decreasing and shortly will no longer be a concern. The quality of webfonts will, even when XP will disappear.

I still live in an XP world, 12 hours a day at office. In the years I've worked with a lot of people who never switched on ClearType until someone had told them Clear Type existed; who genuinely don't care what they're reading as far as they understand what's written; who don't realize that the font they have been reading for months suddenly changes. But nowdays, in the era of the "webfont revolution", when they came across website sporting poor quality web typography, you can hear them scream. ClearType or not. You simply can't understand what's written.

So I was wondering if there are real alternatives to Georgia (still looks amazing on screen) and Arial (don't, but it's familiar to users) wich don't cut out XPers from reading until XP disappear. I found a number of very well done webfonts which do look good even under XP, like hran said. Asked if there are others and how you would combine them. I see there's so much more under the surface...

Anyway, here's some screenshots of serifs in small size under XP (first image is the original, second Georgia. Then the webfonts).

They all look very good to me.

nishiun's picture

I personally like Paratype's PT Sans/Serif, but some folk dislike them for the detached tail on the 'Q'

Hi Té, thanks for the suggestion. I'm afraid I'm among "some folk". Have you spotted them in use on a website? If so, It'd be nice to have the link.

Té Rowan's picture

I use PT Sans/Serif as the default faces on K-Meleon 1.5.4, the browser I use the most, so I can't really tell if a site uses them or the browser defaults.

Frode Bo Helland's picture

Sorry Hrant. Finally a regular computer, and I can see the rendering samples.

hrant's picture

Sorry Frode. I don't understand what you mean. :-)
"Finally a regular computer"?

hhp

Syndicate content Syndicate content