The Best Typography-Based Sites of June 2014

July 1, 2014

This is the fifth installment of my new 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 May here.

Grinders Coffee

Grinders Coffee

A condensed version of Clarendon is combined with the ultra-condensed free font League Gothic. Minion is used as the text face and pairs very nicely with the two condensed faces. The type on this site is set beautifully — the only thing that bothers me is that League Gothic doesn’t really match the condensed sans-serif used in the Grinders logo.

Check out other sites using the fonts Clarendon, League Gothic and Minion on Typewolf.

Where to get Clarendon →

Where to get League Gothic →

Where to get Minion →


Concrete Matter

Concrete Matter

It’s nice to see a site using FF Super Grotesk. It has a similar feel to the mega-popular Brandon Grotesque but is used way less on the web. It makes a great combo with the playful rounded serif Rooney.

Check out other sites using the fonts FF Super Grotesk and Rooney on Typewolf.

Where to get FF Super Grotesk →

Where to get Rooney →


Louder Than Ten

Louder Than Ten

The lively display version of Harriet is used at large sizes while the much more legible text version is used for body copy. Avenir is used as well although its use is somewhat inconsistent with some body copy set in Avenir and other sections of body copy set with Harriet.

Check out other sites using the fonts Harriet and Avenir on Typewolf.

Where to get Harriet →

Where to get Avenir →


Nick Leith-Smith

Nick Leith-Smith

Akkurat is used as the sole typeface on this site for architecture firm Nick Leith-Smith. Akkurat comes across as very classic and anonymous but it immediately gives the design a distinctive feel compared to a more common typeface like Helvetica.

Check out other sites using the font Akkurat on Typewolf.

Where to get Akkurat →


VOTD.tv

VOTD.tv

Multiple weights of Hoefler & Co.’s Gotham are used to create a nice type hierarchy using only a single typeface. My only nitpick is the leading looks a little too tight when the video author text wraps to two lines.

Check out other sites using the font Gotham on Typewolf.

Where to get Gotham →


Another

Another

Frank Chimero’s new design studio keeps things simple and uses Commercial Type’s Atlas Grotesk set in the same point size for the entire site.

Check out other sites using the font Atlas Grotesk on Typewolf.

Where to get Atlas Grotesk →


Rokkan

Rokkan

Avenir and Minion are a classic combo and Rokkan’s site has consistent, balanced and well-thought-out typography.

Check out other sites using the fonts Minion and Avenir on Typewolf.

Where to get Minion →

Where to get Avenir →


Atlantic Records

Atlantic Records

I love the use of Futura bold on Atlantic Records’ new site. However I think it would have been nice to see a different serif paired with it besides the default font Georgia. Something like Bodoni might combine better with Futura.

Check out other sites using the fonts Futura and Georgia on Typewolf.

Where to get Futura →


Christopher Doyle & Co.

Christopher Doyle & Co.

I always dig sites like this that rely almost entirely on type for the design while keeping images to a minimum. For this type of site to work the typography needs to be spot on and in this case it definitely is. Tiempos Text looks great paired with Post Grotesk.

Check out other sites using the fonts Tiempos Text and Post Grotesk on Typewolf.

Where to get Tiempos Text →

Where to get Post Grotesk →


Pete Nicholson

Pete Nicholson

Mixing two different serif typefaces is generally considered a bad practice in setting type. However Pete Nicholson’s site breaks the rules by combining Larish Neue with Lyon Text and I think it looks great. The two serifs are different enough to provide adequate contrast while still feeling like they belong together.

Check out other sites using the fonts Larish Neue and Lyon Text on Typewolf.

Where to get Larish Neue →

Where to get Lyon Text →


Stay Tuned for Next Month’s Post

I’ll be publishing a new type-driven design roundup post like this at the beginning of every month. Enter your email below if you want to be notified when it is published.

Receive an Email When I Publish This Monthly Post

Note: I do send out the occasional email about other happenings at Type & Grids. You can unsubscribe at any time with one click.

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.

Typewolf




follow us in feedly

Filed Under: typography

← Blog Home

blog comments powered by Disqus