Website design relying on woodcut image. Help me find an appropriate serif.


For my portfolio site I will make use of a woodcut image. I want to find a serif typeface that would be historically appropriate for it and/or an interesting choice (for whatever reason you find it to be so; but please explain that reason). I can't give too much information about the site, but I'll just mention this: I plan on designing custom blogs for Protestant Christian writers, so a typeface that references the Reformation period (or is in any way relevant to the Reformation) would be a bonus.

Requirements for the typeface:
* It must be available as a webfont, preferably through Typekit or Google Webfonts. But I'm open to other suggestions as long as I don't have to host the file(s) myself.
* It must have both a regular and italic style. (I'll be loading only these two styles of the typeface on the page.)
* It must be suitable for both display and text use. I know, it's not ideal, but since this is for the web, I can't load too many fonts on the same page. However, text size in this case will be somewhere between 16-20px.

Here's what I've played with so far. My favorite for the big text is Adobe Garamond, but I'm having a hard time making it work at smaller sizes, as it looks rather fragile even at 18-20px. (Please check out the links for a full view.)

Adobe Garamond ↓ (FULL VIEW)

Gentium ↓ (FULL VIEW)

Arno ↓ (FULL VIEW)

Adobe Caslon ↓ (FULL VIEW)

Chaparral ↓ (FULL VIEW)

Calluna ↓ (FULL VIEW)

Cardo ↓ (FULL VIEW)

Fell Double Pica ↓ (FULL VIEW)

Minion ↓ (FULL VIEW)

Thanks for taking the time to look at this.

PS - I'll be using a heavy weight of Museo Sans Rounded for small text, mostly in all caps. See full images for an example.

Joshua Langman's picture

You have the Minion image twice.

How about something a little distressed, like Founders Caslon, Old Claude, Celestia Antiqua … ? (I don't know if these are available for web licensing, but you should be able to find something similar.) Maybe too much for the text size, but you do specify a rather large text size, so it might work.

If you like A Garamond, have you tried Garamond Premier? What about a Jensen? Or Centaur/Arrighi?

EDIT: I see, you've tried the Fell type, but it didn't show up in the main post. I really like this choice. The question is whether you want to have a kind of sleek, polished aesthetic that makes some subtle references to craftsmanship and woodcut style (as in, for instance, much of the branding on Lulu), or whether you want your own words to embody the spirit of the woodcut. So — contrast or concord?

Dan B.'s picture

Oops. Here's Fell Double Pica (FULL VIEW)

Joshua, good thoughts. Re distressed fonts, including the above example: I'm worried about rendering (especially on Windows), so I think I'll stick to the more "polished aesthetic".

Ah, yes. I forgot about Jenson. Thanks for reminding me. Garamond Premier is also available on Typekit. Looks to be a bit darker than Adobe Garamond.

Of the examples above, do you find anything particularly appropriate? Thanks for the help.

hrant's picture

No font can be used well at both text and display sizes.


Dan B.'s picture

Hrant, I'll settle for OK then. It's a necessary compromise. (Plus: it's safe to assume regular users are not as picky as typographers / type designers / type enthusiasts. no?)

Please take a look at the full views. Do any of the examples (obviously in their display role here @ circa 65-70px) look OK to you? (Honest question.)

hrant's picture

OK is OK. :-)

I'm thinking a Fleischmann or something in the style of Menhart.


Dan B.'s picture

"Minion Pro exhibits the aesthetic and functional qualities that make text type highly readable, yet is also suitable for display settings," says a Typekit blurb. See, Hrant?! :-D

There's one more thing to consider (which I didn't mention): the site will be responsive, so what is a "display" use on certain devices becomes "text" use on others (e.g. smartphones, if I choose to have the fonts load there too).

Joshua Langman's picture

Well, of the ones you have, I think Arno works best. Arno is available in several optical sizes, but those would probably count as different fonts for your purposes. I like it because it references classical renaissance faces, but is a bit modern and sleek. It's also not too stylized or flamboyant.

Minion in this context looks to me absolutely like the "welcome to the exhibition" sign at a museum of printing history. In general, paragraphs of text, set FL in a large size of a clean text typeface (and overlaid on a rough, muted illustration) feel like museum signage. I think.

riccard0's picture

Actually, I remember Hrant writing that the quirks needed to make good text fonts work could make them interesting when used at display sizes.
But probably I remember wrong.

By the way, I like the distressed idea (if the distressing is subtle enough to not hinder legibility at small sizes).

hrant's picture

Sort of.


jacobsievers's picture

It would only be "responsive" if the font changed to suit the size.

Dan B.'s picture

Jacob, correct, i.e. large text (display) on desktop becomes smaller (24-30px? haven't tested yet) on smartphones.

jacobsievers's picture

I mean: if Minion is just "okay" for each size, than how is it responding to anything?

Frode Bo Helland's picture

You better consider how it's responding to Windows XP as well.

dstdenis's picture

Dan, I noticed that with Typekit you could include different optical versions of Garamond Premier in your typekit, e.g., display, regular, caption. Maybe that would solve the display/text problem?

Dan B.'s picture

@dstdenis, it would, but I don't want to load that many font files on the page (because of their size).

@frode, I hear you.

Syndicate content Syndicate content