Jeremy Low

Home

About

Blog

Title Font
54pt Loew
Body Font
22pt CMU Serif Roman
Title Color
Body Color
Realized Contrast Ratio
Em Square Contrast Ratio
Change Title Font:
Change Title Weight:
Change Body Font:
Change Body Weight:
Specimen File

Hi there

This whole thing is very much a work in progress, so if something breaks, let me know. There’s a problem (?) with Google Fonts where they don’t actually offer all of the fonts from their GitHub repository on the actual service, so I’m working on moving all of the fonts to be self-hosted so I have a better idea of what is actually available and what is not.

I am also planning on adding fonts that aren’t offered on Google Fonts (such as Gidole, which I am using on this site), so there should be some additions (and probably subtractions since font licensing is asinine!) in the next few days/weeks.

If you go to the specimen page, the kerning pairs from Typographie are slightly modified (adding a letter here and there and rearranging the order of the words) so that the line widths match up in this format. Here’s the text which accompanies those:

On the left page are words which are difficult to set because their letters (ktyvwfrz) leave awkward gaps of white when they are set against each other. On the right page are words comprising letter which cause no trouble (lignchb). With correct set-width and well-cast characters the degree of greyness should be the same on the left and right pages.

To be honest, the difference is fairly slight for all but a few fonts (if you’re interested, try something like “Caesar Dressing”).

The text on the specimen is from Paradise Lost, by John Milton. Anyway, thanks for stopping by. If you have any questions (or suggestions!), I’m on Twitter: @__jcbl__

Further Reading

Color on Butterick’s Practical Typography by

First, ty­pog­ra­phers will some­times speak of a font as cre­at­ing a cer­tain color on the page—even when it’s black. Used this way, the word en­cap­su­lates a set of hard-to-quan­tify char­ac­ter­is­tics like dark­ness, con­trast, rhythm, and texture

Professional Web Typography by

Do keep in mind that there is no set rule for mixing typefaces. You can choose two complementary or completely distinctive typefaces. Go with your own instinct to find a balanced combination for your project.

That’s all I have at the moment. Finding resources online is difficult at best. I will try to update this as I find more.

— May 12, 2015