5x12 pentomino tiling

New Fonts


I am, it has to be said, a bit obsessed with fonts and over the years I've collected a lot as many font designers give them away. But in the past I couldn't use them on web sites as you had to rely on the user's device having the fonts loaded1. So you ended up sticking to the basic font families: serif, sans serif, monospace etc plus a very small selection of fonts that most PCs had loaded.

However we are now at the point where all the leading browsers support TTF fonts in @font-face declarations in CSS and you can embed, and then use, any fonts you like.

In my last redesign of this site I decided to use a serif font for body text for a change (I'm usually more of a sans fan) and picked Fenix by Fernando Díaz from Google fonts.

That worked very well ... until I discovered the New Yorker web site. Now they use two main fonts. The all caps headline font is their own design NY Irvin and was created by Rea Irvin, the first art editor of the magazine. There are clones of it about but they're expensive and I've not found a decent free alternative.

The body text is Adobe Caslon Pro and again it's a paid for font.

But this did leave me thinking about using different, but complementary, fonts for the header and body text. So I came up with what you're seeing here. The body text is Lusitana by Ana Paula Megda from Google fonts and it's similar in feel to the New Yorker's Caslon Pro which I liked reading.

For the heading I went a different way to the New Yorker though and stuck with a mixed case font and, after trying lots of options, I came up with this.

Fontleroy Brown NF sample

It's Fontleroy Brown NF by Nick Curtis. I like the curly bits of business in the capitals: just look at that "T" in "The" for example or the "B" in "Brown". They would look completely over the top in the body text but I think they work well in the heading.

The kerning can also be quite excellent. Look at the splendid job it's doing with that "Q" curling under the rest of "Quick" for example (and similarly with the body font I see!).

Anyway this should keep me happy for a few months, until I need to scratch the itch again.

  1. It's actually a bit more complicated than that: it was possible to embed fonts from very early on in CSS but Microsoft only used EOT fonts whereas all the other leading browsers supported TTF (and others in some cases).

Tags: websites Written 14/10/16

Comment on this article

You can follow these posts on Twitter at @Wibblings
I am currently reading:

dot.bomb by Rory Cellan-Jones The Magic of the Swatchways by Maurice Griffiths

Word of the Day: