The Best Typography-Based Sites of August 2014
September 3, 2014
This is the seventh installment of my monthly feature on Type & Grids where I pick my favorite type-driven websites from the previous month and then write a little about the typographic details behind the design. You can check out last month’s post for July here.
I love when designers set out a clear system for using type and then stick with it throughout the entire site. ITC Clearface is only used at large sizes while the body copy is set with Goudy Old Style. GT Walsheim is used sparingly for the nav and small headers, always set entirely in uppercase.
Grafik’s site uses Neuzeit for headers combined with Apercu for body copy. It feels strange to combine two grotesques but as long as the use is consistent I think it works. Monosten, a monospaced font from Colophon, looks great with Apercu. It looks like there is some faux bold in the nav dropdown menu that went unnoticed.
On the homepage, a heavy weight of Proxima Nova contrasts nicely with a light weight of Kulturista. Kulturista is an excellent slab serif but it doesn’t seem to be used on the web as much as other slabs like Adelle. My only complaint about the type on this site is that on some of the body copy the line length keeps expanding with the width of the browser window, so on a large screen like mine reading becomes a little more difficult.
P & T
The thing that impresses me the most about this site is how closely the type on the site matches the type on their product packaging. It’s hard to tell from the photos but it looks like the combo of Scotch Modern and National used on the site is the same as the packaging type. It’s awesome when a brand can be consistent between print and the web like this. Just a few years ago before web fonts took off, this site probably would have been be using Georgia and Arial instead.
Weightshift contrasts the heavy and light weights of the oval-shaped Colfax to create a beautifully simple site using only a single typeface.
PT Serif, an open-source typeface funded by the Russian Federal Agency for Press and Mass Communications, is paired with GT Walsheim, a commercial typeface from Swiss foundry Grilli Type. The two typefaces from totally different worlds of type design work surprisingly well together.
Digital Telepathy use two H&Co typefaces, Whitney and Sentinel. Whitney was originally designed as a signage typeface, so it looks great set at large sizes. Sentinel is used mainly for navigation, however I would have loved to see it tied in more with the rest of the site design.
Les Deux Mondes
Larsseit, one of my personal favorite sans-serifs, seems to be getting more popular as I keep coming across more sites using it. This single-typeface site makes wonderful use of it. The color scheme of the type changes color every time you refresh the page which is a neat touch.
If the Suit Fits
This site is another nice example of a brand showing consistency between the type on their physical marketing and their digital marketing. I love the combo of Bodoni Poster and Futura. Caslon is used for the body copy.
I love this site because it’s not afraid to break one of the first rules of setting type — don’t use too many different fonts. Four typefaces are used, two sans-serifs and two serifs — Galaxie Copernicus, Interstate, Harriet and Nimbus Sans. The key to getting away with this is consistency and Bethany Heck’s site is relentlessly consistent in using each typeface for a specific purpose.
- Where to get Galaxie Copernicus →
- Where to get Interstate →
- Where to get Harriet →
- Where to get Nimbus Sans →
Keep Up With the Latest in Web Typography
If you enjoyed this post then you’ll probably really like Typewolf, my other side project. Typewolf features the best type-centric designs from around the web with the web fonts identified. It’s an excellent resource to check out the next time you need to choose a typeface for your next web project. You can follow Typewolf on Twitter and Tumblr or sign up to receive a weekly email summary.