Ratio

ratio

View the web font spec­i­men sheet.

A human­ist sans serif font by psType.

Ratio has some quirky ele­ments, such as the rela­tion­ship between the dots and the strokes on the let­ters i and j. But the quirks don’t under­mine the over­all tex­ture, rhythm, or read­abil­ity of the font. This makes it stand out from oth­ers that try and fail to incor­po­rate unique ele­ments into a text font.

PsType says that Ratio shows “the best of both human­ist and geo­met­ric sans ser­ifs.” I cat­e­go­rize it as a human­ist sans because it has gen­er­ous aper­tures, a double-decker g, bowls with implied stress (on the b, d, q, p), and a lovely, human­ist italic.

Ratio’s x-height is smaller than Ver­dana, and needs to be set a bit larger to retain read­abil­ity. At the same time, the bowl is almost cir­cu­lar, mak­ing the font feel wider. Thus, I wouldn’t rec­om­mend Ratio for use in a nar­row col­umn. The bold weight is a bit heavy for my taste (the closed coun­ter­forms on the a and e start to “fill in” at text sizes). But the semi-bold is heavy enough to cre­ate a good con­trast to the reg­u­lar weight. I’ve used reg­u­lar and semi-bold in the spec­i­men sheet.

Ratio comes in 12 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 Type­kit.

Filed under 12 Styles, Humanist Sans Serif, TypeKit |

Merriweather

merriweather

View the web font spec­i­men sheet.

A serif font by Eben Sorkin. I cat­e­go­rize Mer­ri­weather 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.

Mer­ri­weather grace­fully mixes-and-matches var­i­ous his­toric approaches to font design. Head ser­ifs and some ter­mi­nals feel pen-formed, while foot ser­ifs are rem­i­nis­cent of del­i­cate slab ser­ifs. It has a large x-height, and gen­er­ous aper­tures. It is extremely read­able at smaller sizes, and the bolder weights are well bal­anced and don’t get too heavy on screen. I’ve spent some time using this font this sum­mer, and it is one of my favorite fonts for web text.

Mer­ri­weather cur­rently has 4 weights avail­able via google web­fonts. There is not an italic yet, but Sorkin’s blog promises one is in the works. As well as a sans serif ver­sion! Keep an eye on this font as it devel­ops! It’s read­able, beau­ti­ful, and holds up well cross browser.

Filed under "Other Serif", 4 Styles, Google Fonts |

WhatFont Tool

You’re online, and you stum­ble on a site using a great web font. It makes your heart sing. And you want to know what it is.

Enter the What­Font tool cre­ated by Chengyin Liu. It’s a quick and easy way to find out what web font is in use. Roll over the type, and the font-family name pops up. Click on the type, and you’ll even get type­set­ting infor­ma­tion (font-size, line-height, and color). This is par­tic­u­larly help­ful when you find a site where the text is both beau­ti­ful and easy to read. Good web type isn’t just about using a good web font.

The book­marklet claims to have full sup­port on Fire­fox 3.6+, Chrome 9+, Safari 4+, Inter­net Explorer 9; and lim­ited sup­port on Inter­net Explorer 8.

Filed under Web Font Resources |

Minion Pro

minion_pro

View the web font spec­i­men sheet.

An old style font by Robert Slim­bach, Min­ion Pro was orig­i­nally designed for print. It is part of the Adobe Orig­i­nals series.

Min­ion Pro feels “old” and pen-formed. It has a smaller x-height than Geor­gia, small closed coun­ters on the let­ters a and e, and rel­a­tively small aper­tures. Thus it needs to be set larger to retain read­abil­ity. Min­ion Pro is my favorite print font, and I didn’t expect it to work so well on screen (I usu­ally pre­fer web fonts with a larger x-height and aper­ture). I was pleas­antly surprised.

Min­ion Pro comes in 8 styles, includ­ing a beau­ti­ful semi-bold, which cre­ates hier­ar­chy with­out get­ting too heavy on screen. Even though it was orig­i­nally designed for print, Min­ion Pro is well hinted and tests well across browsers. It gets a lit­tle light on Fire­fox, Chrome, and Opera on Win­dows XP, but is still leg­i­ble if set at a gen­er­ous size. The whole fam­ily is avail­able on Type­kit.

Filed under 8 Styles, Old Style (Serif), TypeKit |

Vera Sans

Vera Sans Heading

View the web font spec­i­men sheet.

vera sans example A sans serif font trade­marked by Bit­stream, Inc.

Vera Sans has a large x-height and gen­er­ous aper­tures, and should retain read­abil­ity at smaller sizes. But I find the bold low­er­case a  tends to “fill in” and become dif­fi­cult to read at 14px and smaller on Win­dows browsers (Safari, IE, Chrome, and Fire­fox) when tested on crossbrowsertesting.com. Thus, while text is com­fort­able to read at 14px, I rec­om­mend using Vera Sans bold at 15px and larger.

Vera Sans comes in reg­u­lar, bold, italic, and bold italic. It is avail­able for free down­load at fontsquirrel.com. It is also avail­able via typekit.com.

Filed under 4 Styles, FontSquirrel, Sans Serif, TypeKit |