I told myself I’d only review text fonts, but every once in a while I come across a lovely dis­play font that sings cross browser… and I’ve decided if I’m going to take the time to test and approve, I might as well share.

I recently tested and used Rochester for a client. She’s an inde­pen­dent children’s illus­tra­tor who’s been in the busi­ness for decades. Due to her illus­tra­tion style, I needed a font that ref­er­enced hand­writ­ing, showed a slightly quirky side, and didn’t feel too ele­gant or messy. It also needed to work with all of the let­ters in her name, and the con­nec­tions needed to… well… con­nect properly.

Rochester has a ver­ti­cal stress and sig­nif­i­cant con­trast between thick and thin strokes. The strong ver­ti­cal strokes and the round bowl give the font a slightly “bub­bly,” slightly dig­i­tal feel­ing — not overly ele­gant. I have to admit, I don’t care for Rochester’s low­er­case z or f, but luck­ily my client’s site uses nei­ther in the head­ing. When I tested it cross browser, the spac­ing, con­nec­tions, strokes, and curves all remained lovely.

A font that almost made it. A serif font designed by Jean François Porchez of Porchez Typo­fonderie, Le Monde Cour­rier attempts to “re-establish a style halfway between writ­ing and printing.”

First, let me say, I love this font! The over­all struc­ture and sys­tem (when viewed on Safari, Chrome, Opera or Fire­fox from my mac) is gor­geous. I want to use it. But I can’t (at least not for extended text).

Unfor­tu­nately, Le Monde Cour­rier has slightly uneven spac­ing at text sizes. For exam­ple, look at the word read­ing (first word, fifth line down) in the top exam­ple at left. The space between the e and a is too loose com­pared to the re and di in the same word. This prob­lem occurs mul­ti­ple times in text, between a vari­ety of let­ter pairs.

And, unfor­tu­nately, the prob­lem gets worse on Win­dows plat­forms (see the lower exam­ple at left, a screen­shot from Safari on Win­dows 7). Let­ters get nar­rower, block­ier, and more loosely spaced. Let­terspac­ing between ed, er, ea, en, and al all get too loose. Granted, the font remains leg­i­ble, but it loses some of its read­abil­ity and grace.

I cat­e­go­rize Le Monde Cour­rier as an “Other Serif” font, because it does not fall neatly into any of the gen­eral his­toric cat­e­gories com­monly used to describe serif type.

Le Monde Cour­rier grace­fully mixes-and-matches approaches to font design. The e, i, and l have italic influ­ence, while most other let­ters are Roman. It has a large x-height, a sin­gle decker g, and an almost mono­line stroke — all of which make the font feel more struc­tured. But it also has gen­er­ous aper­tures, pen-formed ser­ifs, and an implied stress on the bowls — all which help it feel more humanist.

Le Monde Cour­rier is an absolutely lovely font orig­i­nally designed for print. It has a cou­ple of spac­ing and hint­ing issues to work out so it can con­tinue to be absolutely lovely on screen. It’s worth keep­ing an eye on. If we’re lucky, future ver­sions of the font will have bet­ter spac­ing. The web ver­sion of Le Monde Cour­rier has 6 weights and styles and is avail­able from Type­kit.

A tran­si­tional font by Robert Slim­bach, Utopia was orig­i­nally designed for print. It is part of the Adobe Orig­i­nals series.

Utopia has a ver­ti­cal stress and sig­nif­i­cant con­trast between thick and thin strokes. The strong ver­ti­cal strokes and the slightly square bowl give the font a “square” feel­ing when used for text. It has a sim­i­lar x-height and aper­tures to Geor­gia. Utopia’s let­terspac­ing is slightly tighter, so I per­son­ally find it eas­ier to read at larger sizes.

Utopia comes in 6 styles. Even though it was orig­i­nally designed for print, Utopia is well hinted and tests well across browsers. The fam­ily is avail­able on Type­kit.

Open Sans was designed with an upright stress, but still feels human­ist due to its open aper­tures, double-decker g, and human­ist italic. It has a sim­i­lar x-height to Ver­dana, but has a lighter stroke weight, and even more clar­ity (leg­i­bil­ity) at smaller sizes. The bold feels a bit heavy, but retains leg­i­bil­ity. There is also a semi-bold for use when the bold is too heavy.

Open Sans comes in 10 styles. It holds up well cross browser. The whole fam­ily is avail­able on both Type­kit and Google Web Fonts.

Ubuntu has some quirky ele­ments, such as the cor­ners cre­ated where shoul­ders meet stems on the let­ters a, r, n, m, h, p, q, and u. The quirks don’t under­mine the over­all tex­ture, rhythm, or read­abil­ity of the font, but it does give text a slightly “futur­is­tic” feel which may or may not be appro­pri­ate for a project.

Even with the “futur­is­tic” feel­ing, I cat­e­go­rize Ubuntu as a human­ist sans because it has gen­er­ous aper­tures, bowls with implied stress (on the b, d, q, p), a curved foot on the low­er­case l, and a rel­a­tively human­ist italic.

Ubuntu’s x-height is slightly smaller than Ver­dana, yet holds up very nicely at smaller sizes due to gen­er­ous aper­tures and bowls. The bold weight is a bit heavy for my taste, though it is still leg­i­ble on screen. While a semi-bold is avail­able, it is not heavy enough to cre­ate a good con­trast to the reg­u­lar weight.

Ubuntu comes in 8 styles. I’ve tested the usual 4 plus the semi-bold, and they hold up beau­ti­fully cross browser. The whole fam­ily is avail­able on both Google Web Fonts and Type­kit.