This is the 10th installment of my monthly feature on Typewolf where I share my favorite type-driven websites from the previous month and then write a little about the typographic details behind the designs. You can check out last month’s post for October here.

The New Wave Company

Noe Display is a distinctive display face with its pointy triangular serifs. I think it pairs well with the quirky open-source font Karla. My only nitpick about the type is how the paragraph line length expands to fill the browser window — on a smaller screen it’s not an issue but on a large screen like mine, it’s a little too wide for optimal reading.

• Where to get Noe Display →
• Where to get Karla →

Jamie Wilson

There isn’t much type on this site, but the type that is here is set really well with some nice touches. I love how the title uses the small caps style of Alegreya with the “of” set in lowercase italics, providing a touch of formality. The thin weight of Source Sans Pro works well to not overpower the refined title text.

• Where to get Alegreya →
• Where to get Source Sans Pro →

Webstock

The type on this site is really unusual in that the text set in Harriet above each photo doesn’t follow any kind of template. Instead, there’s a custom, one-off layout for each one that uses a SVG image rather than web text. Generally, using images in place of text is considered a bad practice, however, on this site it makes things so much more interesting and engaging. The header is an SVG image as well, set in Domaine Display and Knockout.

• Where to get Harriet →
• Where to get Domaine Display →
• Where to get Knockout →

The Water Rat

With its distinctive character, P22 Underground is the perfect typeface choice for this simple, yet quirky site. There are several small details that I really like that make this site stand out. The type set vertically is a nice touch and the paragraphs are set in the more traditional print style, with each paragraph using an indent rather than a line break.

• Where to get P22 Underground →

Stephen Webster

Cochin is a wonderful serif that is seldom-used on the web. The italic is especially beautiful and looks elegant and refined on this jewelry site. The Stephen Webster logo looks like it uses a slightly-altered version of Cochin, with an extended tail on the “R”. Armitage, a sans-serif typeface from Dunwich Type Founders, makes for a nice combination with Cochin.

• Where to get Cochin →
• Where to get Armitage →

Fedrigoni

Folio is a neo-grotesque that was released around the same time as Helvetica and Univers, although it’s not nearly as popular as those two typefaces. This is the first time I’ve encountered it on the web. It has a lower x-height than Helvetica, so it’s a little more distinctive looking. The Bauer version of Bodoni is combined with Folio, adding a bit more formality to the design.

• Where to get Folio →
• Where to get Bodoni →

The Ruby Tree

Antwerp is a serif typeface from A2-Type with beautiful, ultra-sloped italics which this site features prominently. I really dig the italic ampersand of Antwerp as well, which you can see used in the intro copy at the top. The sans-serif Neuzeit is used sparingly for the nav and footer.

• Where to get Antwerp →
• Where to get Neuzeit →

Ezra’s

The heavier weights of Caslon give this design a stout and sturdy feeling. The use of Euclid Flex, set almost entirely in uppercase with a generous amount of letterspacing, adds a contemporary touch. The one thing I have to call out is the use of straight quotes instead of proper apostrophes in the type in the hero graphic. For small text it’s not as noticeable, however, for large type like this, the lack of proper apostrophes really stands out.

• Where to get Caslon →
• Where to get Euclid Flex →

Bloomberg Politics

I love when a big news site pushes the boundaries of web type like this by going all out with web fonts. Neue Haas Grotesk, the original Helvetica, looks wonderful on the chunky headlines. Both the headline and text styles of Tiempos are used beautifully. However, there are still bits of Arial mixed in here and there, most likely left in the design inadvertently.

• Where to get Neue Haas Grotesk →
• Where to get Tiempos Headline →
• Where to get Tiempos Text →

Forefathers Group

This site uses a simple and consistent type system. Both Century Schoolbook and Montserrat are set entirely in uppercase, while Fjord One is used for paragraphs. Both Montserrat and Fjord One are open-source fonts available for free on Google Fonts. Fjord One doesn’t contain any italic styles, so it’s not ideal for setting body copy, however, for the small amounts of text here it works fine. It’s nice to see the logo type using a crisp and scalable SVG.

• Where to get Century Schoolbook →
• Where to get Montserrat →
• Where to get Fjord One →

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.

This is the 11th installment of my monthly feature on Typewolf where I share my favorite type-driven websites from the previous month and then write a little about the typographic details behind the designs. You can check out last month’s post for November here.

Snask

I remember the previous design of Snask was one of the first places I saw Apercu being used on the web. The folks at Snask are real trendsetters as this typeface has exploded in popularity over the last year or two. Their new redesign sticks with Apercu but adds in Platform, a geometric sans from Commercial Type. The bold weight pairs surprisingly well with Apercu. Lacrima Senza from Milieu Grotesque is used for the nav set in uppercase.

• Where to get Apercu →
• Where to get Platform →
• Where to get Lacrima Senza →

Gitman Vintage

The trend of 1970s-esque typefaces becoming popular again continues with the use of ITC Clearface on Gitman Vintage’s site. Although for a vintage clothing site, this style of font makes total sense. The sans-serif Maison Neue adds a touch of modernity. One odd thing I noticed — there appears to be letterspacing added to the body copy — I’m not sure if that was intentional or not but the spacing feels a little wide for comfortable reading.

• Where to get ITC Clearface →
• Where to get Maison Neue →

Electric Pulp

It’s nice to see a site using a font that isn’t commonly used like Kostic Serif — it definitely helps in creating a more distinctive brand. Adelle Sans, a more popular grotesque from TypeTogether, is used sparingly as the secondary font.

• Where to get Kostic Serif →
• Where to get Adelle Sans →

Tuxedo no.2

Bookmania is Mark Simonson’s revival of the Bookman faces popular in the 1960s and 1970s. I think it’s a great typeface choice for branding this site about classic cocktails. The swash styles used in the logo add a touch of vintage flair. I really dig the use of drop caps on the recipes pages — sometimes drop caps can be a bit overwhelming but these are implemented in a tasteful way.

• Where to get Bookmania →

Ape Unit

I love the mega-sized setting of Minion — it’s nice seeing the fine details of such a beautiful typeface. FF Super Grotesk is similar to the ultra-popular Brandon Grotesque, but feels much more distinctive and unique as it’s not used nearly as much. Together these two typefaces make for an interesting combination.

• Where to get Minion →
• Where to get FF Super Grotesk →

Thomas Schrijer’s Top 10 Albums of 2014

Lust is a “sensual” serif designed to be used at large sizes to show off its lustful curves. This site makes great use of it combined with the “Helvetica killer”, Aktiv Grotesk, which helps to balance out and anchor the ornate display face. Also nice to see Future Islands at #1.

• Where to get Lust →
• Where to get Aktiv Grotesk →

The Local Palate

Franklin Gothic is set entirely in uppercase and combined with the serif Abril. Abril is interesting in that the display styles take on more of a classic Bodoni/Didone feel, while the text styles feel more like a slab serif in the Clarendon style. I really like how the type on the homepage overhangs slightly onto the photo — it makes the design feel more dynamic and less locked into a grid.

• Where to get Franklin Gothic →
• Where to get Abril →

An Oral History of Boogie Nights

The “Livin’ Thing” title is set in the text style of Harriet rather than the display style one might expect from a large title like this. However, the display style might be a little too high-contrast when combined with the delicate light weight of Balto which might have been why the designers used the text style instead. This shows that just because a typeface has a display version doesn’t mean it’s always necessary to use it when setting titles.

• Where to get Harriet →
• Where to get Balto →

The Many Faces Of… Sigourney Weaver

Another popular typeface of the 1970s, ITC Serif Gothic, makes an appearance on Paravel’s Sigourney Weaver tribute site. ITC Serif Gothic was used in the original Star Wars posters, so it definitely has a lot of sci-fi connotations which makes it the perfect typeface choice for this sci-fi focused design. It’s combined with Proxima Nova, which is starting to feel so ubiquitous and anonymous that it seems like it can be paired with anything at this point.

• Where to get ITC Serif Gothic →
• Where to get Proxima Nova →

The Outpost

I’m really impressed by how closely the designers of this site were able to match the typography from the print edition of the magazine. Leitura News and Leitura Display were specifically created with editorial usage in mind and this superfamily looks absolutely beautiful on the web as well as in print.

• Where to get Leitura News →
• Where to get Leitura Display →

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.

Welcome to the second annual edition of the ten most popular web fonts of the year as featured on Typewolf. For 2014, I have a full year’s worth of data with 365 sites being featured on the site. Last year’s list for 2013 was a little more curated and less backed by data as Typewolf hadn’t been around for a full year at that point.

This list features typefaces from all type foundries regardless of where the typefaces can be purchased or licensed, unlike other lists that might only include fonts available on certain sites such as MyFonts or Typekit. It’s still a curated list as I choose all the sites featured on Typewolf, however, with font usage data for 365 sites I think it shows a clear picture of what fonts were most commonly used in 2014.

Ok, on to the top ten…

10) Caslon

Apparently the old typesetter’s saying of “When in doubt, use Caslon” applies to the web as well. The various revivals of William Caslon’s work from the 18th century continue to be popular in the digital world of the 21st century.

• 10 sites using Caslon in 2014 →
• Where to get Caslon →

9) Circular

This geometric sans from Lineto really took off in 2014 thanks to its prominent use in a few big rebrandings from companies like Airbnb and Mint. I think it brings a touch of freshness to the geometric sans genre without deviating too much into unfamiliar territory. Laurenz Brunner’s other well-known typeface, Akkurat, has been a favorite of designers for years and I’m sure Circular will be as well.

• 11 sites using Circular in 2014 →
• Where to get Circular →

8) Gotham

In 2014, Hoefler & Co’s Cloud.typography service finally started to see more widespread usage. Although their flagship typeface Gotham was one of the most used web fonts of the year, their other offerings such as Sentinel, Whitney and Archer have been quite popular as well.

• 11 sites using Gotham in 2014 →
• Where to get Gotham →

7) GT Walsheim

GT Walsheim, from Swiss foundry Grilli Type, is similar to other geometric sans such as Circular, but isn’t afraid to bring on the quirks. The horizontally protruding bar on the “G” and the curvy tail on the “y” give it a distinctive look that adds a bit of warmth and friendliness to a geometric typeface that could otherwise feel cold and sterile.

• 11 sites using GT Walsheim in 2014 →
• Where to get GT Walsheim →

6) Franklin Gothic

Franklin Gothic has a long history as a classic editorial typeface in print, so I’m glad to see it used more for editorial purposes on the web, like on Time Magazine’s site. It’s also a noted favorite font of “the Godfather of the web”, Jeffrey Zeldman, so it’s fitting that it makes the list of the most popular web fonts of the year.

• 12 sites using Franklin Gothic in 2014 →
• Where to get Franklin Gothic →

5) Proxima Nova

On last year’s top ten list, I predicted that Proxima Nova would fall out of style for 2014. I couldn’t have been more wrong. This typeface continues to be a staple on the web. I think due to its ubiquity it’s starting to feel almost anonymous, like Helvetica, where it can be used for any type of design and fit right in.

• 16 sites using Proxima Nova in 2014 →
• Where to get Proxima Nova →

4) Apercu

Apercu was #2 on last year’s list and I predicted it would start to feel a little played out in 2014 due to it being used absolutely everywhere. Of course “played out” is entirely subjective, but I feel like this prediction rings true. It could easily have reached #1 on this list, however, I personally started to not feature sites using it as they all seemed to be carbon copies of each other. If you use Apercu, will users of your site think the font is overused? Probably not, so don’t let its popularity stop you from using it. But to someone who looks at type all day long it no longer feels fresh and exciting.

• 17 sites using Apercu in 2014 →
• Where to get Apercu →

3) Avenir

Adrian Frutiger considered Avenir his best work and this typeface has other admirers as well — I published a survey in April of last year where I asked 41 influential designers to list their three favorite typefaces and Avenir was mentioned the most. It doesn’t feel “trendy” like some other typefaces on this list can tend to feel; it instead has a timeless quality that I believe will make it popular for years to come.

• 19 sites using Avenir in 2014 →
• Where to get Avenir →

2) Futura

Speaking of timeless typefaces, Futura has seen widespread usage since it was released in 1927 and it continues to be popular on the web. Although it has a classic look, it’s not the most readable of typefaces due to its low x-height. It may be worth checking out some alternatives to Futura if you are in need of something more flexible.

• 20 sites using Futura in 2014 →
• Where to get Futura →

1) Brandon Grotesque

It’s no surprise to anyone who follows type that Brandon Grotesque made it to #1 on this list. Last year I complained that too many sites were using it where the typeface felt a little out of place for their brand. Media Temple, a web hosting company, switched to Brandon Grotesque earlier this year for all of their branding. To me it feels odd seeing a tech company branding themselves with a typeface that has roots in architectural lettering of the 1920s. The typeface used to have a certain “feel” to it, to me at least, but that feeling is starting to become lost due to it being used everywhere, for every conceivable type of brand. But of course these kinds of feelings are subjective and typography and culture are always shifting and changing — typefaces will always have different connotations to different people.

• 21 sites using Brandon Grotesque in 2014 →
• Where to get Brandon Grotesque →

Key Takeaways

I think one of the key takeaways is how diverse the use of web fonts really is. The most popular font on this list, Brandon Grotesque, was used on 21 out of 365 sites featured which comes out to only 5.7% of all the sites featured on Typewolf. I complained that it was overused, but really, font usage is still pretty diverse on the web which is certainly a good thing.

I also noticed less free Google Fonts being used in 2014 — last year’s list included four and this year there are zero. I don’t think this means that Google Fonts are being used less in general, just that the type of sites featured on Typewolf have been looking for more distinctive and perhaps higher-quality options.

Keep Up With the Latest in Web Typography for 2015

Be sure to follow Typewolf if you want to keep up with the latest happenings in web typography. You can sign up for the monthly newsletter below or follow Typewolf on Twitter or Tumblr.

Thanks for reading.

Every day on Typewolf I feature a site with nice typography. Out of the 365 sites featured over the course of 2014, these are my top 40 personal favorites. I was originally planning on doing a top 10 list, but after attempting to narrow down my favorites I realized there were just too many sites with beautiful type for me to choose just 10 or even just 20. So yes, 40 is a lot but I think every single one of these sites has something for type connoisseurs to appreciate.

Ok, get ready to scroll because this is a long post…

40) Snask

I remember the previous design of Snask was one of the first places I saw Apercu being used on the web. The folks at Snask are real trendsetters as this typeface has exploded in popularity over the last year or two. Their new redesign sticks with Apercu but adds in Platform, a geometric sans from Commercial Type. The bold weight pairs surprisingly well with Apercu. Lacrima Senza from Milieu Grotesque is used for the nav set in uppercase.

• Where to get Apercu →
• Where to get Platform →
• Where to get Lacrima Senza →

39) EBD Journal

Rather than using a line break between paragraphs, the body copy on EBD Journal (set in Freight Text) follows the classic type setting convention of indenting the first sentence of each paragraph with no extra line break. This is how type has been set for hundreds of years in the print world but this convention was never widely adopted on the web for whatever reason. Circular, a geometric sans-serif from Lineto, is used for headers and titles while the monospaced font Atlas Typewriter is interspersed throughout, used for captions and footnotes.

• Where to get Circular →
• Where to get Freight Text →
• Where to get Atlas Typewriter →

38) 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.

• Where to get Larsseit →

37) Mount Vernon

This is a deep site with a ton of content and the designers did an excellent job of keeping the type consistent throughout. Gotham and Mercury, both from Hoefler & Co, make a beautiful combo. Having white text set on top of a photo background like in the header is always a dangerous thing to attempt though — using a light photo can quickly make the type illegible. Right now they seem to do a well enough job of only using dark photos that contrast with the type, however I’d hate to see what happens if the client starts adding their own photos.

• Where to get Gotham →
• Where to get Mercury →

36) The Outpost

I’m really impressed by how closely the designers of this site were able to match the typography from the print edition of the magazine. Leitura News and Leitura Display were specifically created with editorial usage in mind and this superfamily looks absolutely beautiful on the web as well as in print.

• Where to get Leitura News →
• Where to get Leitura Display →

35) Cameron Askin

I love sturdy calligraphic-inspired typefaces like Lapture. I think they work so well just set at a large size against a flat color like on Cameron Askin’s site.

• Where to get Lapture →

34) Homepolish

I’ve always been a big fan of Miller, a Scotch Roman from Matthew Carter, designer of the ubiquitous Georgia. Pairing Miller with ITC Johnston, a humanist face famous for its use in the London Underground, makes for a unique and interesting combo. My only complaint about this site is the logo which uses a scaled down PNG, making it appear slightly blurry. Setting it as a web font would ensure a clear and crisp display.

• Where to get Miller →
• Where to get ITC Johnston →

33) The Many Faces Of… Sigourney Weaver

Another popular typeface of the 1970s, ITC Serif Gothic, makes an appearance on Paravel’s Sigourney Weaver tribute site. ITC Serif Gothic was used in the original Star Wars posters, so it definitely has a lot of sci-fi connotations which makes it the perfect typeface choice for this sci-fi focused design. It’s combined with Proxima Nova, which is starting to feel so ubiquitous and anonymous that it seems like it can be paired with anything at this point.

• Where to get ITC Serif Gothic →
• Where to get Proxima Nova →

32) Heck House

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 →

31) Readymag

Mixing two similar sans-serifs is generally considered a bad idea. However, Readymag seem to know what they are doing when they combine Nobel and Avenir. Nobel is almost used as a display version of Avenir by being set only at large sizes. It’s an interesting and unusual approach but I think it works.

• Where to get Nobel →
• Where to get Avenir →

30) An Oral History of Boogie Nights

The “Livin’ Thing” title is set in the text style of Harriet rather than the display style one might expect from a large title like this. However, the display style might be a little too high-contrast when combined with the delicate light weight of Balto which might have been why the designers used the text style instead. This shows that just because a typeface has a display version doesn’t mean it’s always necessary to use it when setting titles.

• Where to get Harriet →
• Where to get Balto →

29) Forefathers Group

This site uses a simple and consistent type system. Both Century Schoolbook and Montserrat are set entirely in uppercase, while Fjord One is used for paragraphs. Both Montserrat and Fjord One are open-source fonts available for free on Google Fonts. Fjord One doesn’t contain any italic styles, so it’s not ideal for setting body copy, however, for the small amounts of text here it works fine. It’s nice to see the logo type using a crisp and scalable SVG.

• Where to get Century Schoolbook →
• Where to get Montserrat →
• Where to get Fjord One →

28) Future Father

I’ve always loved the combo of Clarendon and Futura. The warmth of Clarendon just contrasts so nicely with the cold modernism of Futura. The colors on this site perfectly complement the type as well. The logo is set in the beautiful and ornate Bookman Swash.

• Where to get Clarendon →
• Where to get Futura →
• Where to get Bookman →

27) un Projects

FF Dagny, a sans-serif from FontFont, works well combined with Academica, a typeface designed for use in scientific papers. I love the use of Academica, but unfortunately the line length of the body text expands to fill the screen size, so on a large display like mine the readability suffers.

• Where to get FF Dagny →
• Where to get Academica →

26) 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.

• Where to get Bodoni Poster →
• Where to get Caslon →
• Where to get Futura →

25) Newswordy

This is the first time I’ve seen Standard CT used on the web and I really dig it. However, I would have loved to see the entire site set with Standard CT rather than being combined with Helvetica Neue.

• Where to get Standard CT →

24) Headspace

Brandon Grotesque really makes a perfect match for this style of quirky, “flat design” illustration. I feel like Brandon Grotesque might be getting a little overused but this site makes excellent use of the typeface. The type effortlessly switches between uppercase and italics to keep things fun, dynamic and engaging.

• Where to get Brandon Grotesque →

23) Google Science Fair 2014

The new website for Google Science Fair 2014 appears to have been art directed by Wes Anderson. I think the designers did a great job pulling off this style. Personally, I find the large photo backgrounds distracting and would have preferred to just see the strong Futura type set against a solid color background instead.

• Where to get Futura →

22) Pitchfork Music Festival

Larsseit is one of my favorite recent sans-serif releases and the Pitchfork Music Festival site makes great use of it. Only one typeface is used and that is all that is needed.

• Where to get Larsseit →

21) Harewood House

I immediately fell in love with the type on this site. The light weight of Bodoni Egyptian just plays so nicely with the simple grotesque, Graphik. This is truly a gorgeous site.

• Where to get Bodoni Egyptian →
• Where to get Graphik →

20) 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.

• Where to get FF Super Grotesk →
• Where to get Rooney →

19) 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.

• Where to get Larish Neue →
• Where to get Lyon Text →

18) True Detective by Nigel Evan Dennis

On first glance, Sofia looks a little like Futura, especially with the bold weights. However, on a closer look it has a less-geometric, more playful feel to it. It’s a great match for the illustration style of Nigel Evan Dennis.

• Where to get Sofia →

17) The Distance

This site feels like you are reading a well-designed newspaper thanks to the ever popular combo of Sentinel + Gotham.

• Where to get Sentinel →
• Where to get Gotham →

16) Co.Exist

Grumpy is another seventies-style chunky serif that works great at large sizes, like on the headlines on the Co.Exist site. Caslon accompanies it, which makes sense as Grumpy is based off of the ultra bold styles of Caslon. Museo Sans is used for body copy.

• Where to get Grumpy →
• Where to get Caslon →
• Where to get Museo Sans →

15) Sivert Hoyem

This is another site with low contrast and muted colors, although when you hover over a section the contrast increases which is great. The font Circular is great for this type of minimal design.

• Where to get Circular →

14) Imperial Pomp

I didn’t even know a monospaced version of Helvetica existed until I came across this site. It actually works fairly well as a body copy font in the short amount of text on this site. And I love the use of the ultra-condensed version of Univers for headlines.

• Where to get Univers →
• Where to get Helvetica Monospaced →

13) Ableton

I love the use of Futura on Ableton’s new site. Wes Anderson would be proud. The small bits of yellow type on white can be a bit hard on the eyes at times, but the splashes of color used throughout the site really add to the design.

• Where to get Futura →

12) Advertising Age

I first saw Tiempos used on the web on Frank Chimero’s What Screen Want site. It’s a great typeface and looks wonderful on Advertising Age’s new site, designed by one of my all-time favorite agencies, AREA 17. There are small amounts of Gotham mixed in and I would have loved to see Gotham used exclusively as the sans-serif typeface instead of mixing it with Helvetica.

• Where to get Tiempos Headline →
• Where to get Tiempos Text →

11) Vox

Mixing two sans-serifs doesn’t always work but Vox seems to pull it off pretty well. They stick to Balto for all their headlines and then use Alright Sans for body copy. The serif Harriet is interspersed throughout as well.

• Where to get Harriet →
• Where to get Balto →
• Where to get Alright Sans →

10) Firmamento

ITC Johnston (famous for its use in the London Underground) is set exclusively in caps and looks great paired with Caslon.

• Where to get ITC Johnston →
• Where to get Caslon →

9) Bloomberg View

This is the first time I’ve seen Supria Sans used on the web and I gotta say I’m very impressed. Supria Sans was designed by Hannes von Döhren, the same designer who created the super-popular Brandon Grotesque. Bloomberg View uses Supria Sans as the sole typeface on their site and they make nice use of the various weights. It’s another great example showing that sometimes one typeface is all you need.

• Where to get Supria Sans →

8) Bloomberg Politics

I love when a big news site pushes the boundaries of web type like this by going all out with web fonts. Neue Haas Grotesk, the original Helvetica, looks wonderful on the chunky headlines. Both the headline and text styles of Tiempos are used beautifully. However, there are still bits of Arial mixed in here and there, most likely left in the design inadvertently.

• Where to get Neue Haas Grotesk →
• Where to get Tiempos Headline →
• Where to get Tiempos Text →

7) SF/Arts

Avenir is the only typeface used on this site and the designers did a great job of creating a clear hierarchy simply by setting the type in different weights and using different type treatments such as uppercase for subheaders. They also did a superb job of keeping the line length at an optimal width for reading throughout the site. Oftentimes when a site expands to fill the browser window like on this site, the line lengths can expand along with the size of the window, which quickly makes for a poor reading experience on larger displays. This site keeps an optimal length from mobile to large displays like mine.

• Where to get Avenir →

6) Harvard Law Review

The Harvard Law Review site makes excellent use of Hoefler & Co’s Cloud.typography service, using Hoefler Titling paired with Whitney. The type looks gorgeous on this site. However, it would have been great to see them go all out and use Hoefler Text for the body copy rather than Georgia.

• Where to get Hoefler Titling →
• Where to get Whitney →

5) The Monocle Café

Plantin is a beautiful typeface that went on to inspire the creation of Times New Roman. It’s a shame that it’s not used on the web very often. The italic is especially beautiful and The Monocle Café feature it prominently throughout their site.

• Where to get Plantin →

4) n+1

This entire site uses just one typeface — Adelle Sans. There are no bits of default fonts like Arial and Georgia thrown in which oftentimes happens. Adelle Sans has such a full range of weights that introducing a second typeface into the design is not needed.

• Where to get Adelle Sans →

3) The New York Times Cooking

The New York Times have been using Cheltenham as a headline face for over 100 years, so it’s nice to see it used on the web in their Cooking section. Cheltenham is used sparingly, mostly for headlines and short descriptions, but it really helps to establish the NYT brand. The slab serif Karnak is used for headers and the rest of the type is set in the classic newspaper face Franklin Gothic.

• Where to get Cheltenham →
• Where to get Franklin Gothic →
• Where to get Karnak →

2) Not Coming 2013 In Review

I think using the calligraphic-inspired Ogg with the quirky grotesque Maple is such an interesting and unusual combination. The body copy serif Elena seems to provide a sturdy foundation and works to anchor the other two fonts together.

• Where to get Ogg →
• Where to get Maple →
• Where to get Elena →

1) OKREAL

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.

• Where to get ITC Clearface →
• Where to get GT Walsheim →
• Where to get Goudy Old Style →

Keep Up With the Latest in Type for 2015

If you enjoyed this post, then be sure to check back in with Typewolf throughout 2015 whenever you need typography inspiration. You can sign up for the monthly newsletter below, follow @typewolf on Twitter or get blog post updates on Feedly.

Also be sure to check out the most popular fonts from 2014 as well. Thanks for reading and best wishes for 2015.

This is the 12th installment of my monthly feature on Typewolf where I share my favorite type-driven websites from the previous month and then write a little about the typographic details behind the designs. You can check out last month’s post for December here.

Kim Bost

This is a simple site that uses a single typeface at a single size and weight. I think the key to making this work is the use of color — the white type adds much-needed contrast and the variation in the link underline color adds a warmth to the design. The poster style of Darby Sans, with its high contrast, refined lines, looks wonderful at large sizes.

• Where to get Darby Sans →

Jens Windolf

I love how Grilli Type has only a handful of typefaces available and each one expresses a unique idea and concept. GT Pressura Mono was inspired by the way ink spreads under pressure when stamped on shipping boxes. And the calligraphic serif, GT Sectra, combines the flow of a broad nib pen with the sharpness of a scalpel knife.

• Where to get GT Pressura Mono →
• Where to get GT Sectra →

Large Glass

Schneidler is a classic serif from 1936 that is seldom used on the web. The distinctive cupped serifs really stand out when used at a large size like this. Mr Eaves Sans, the humanist sans-serif counterpart to popular serif Mrs Eaves, makes a great combo paired with Schneidler.

• Where to get Schneidler →
• Where to get Mr Eaves Sans →

Pound & Grain

Pound & Grain take full advantage of Hoefler & Co.’s Cloud.typography service, using three H&Co typefaces. I’m stoked to see them using the chunky slab serif Ziggurat so prominently — it’s definitely one of the more underused H&Co faces. Tungsten makes a nice font combination paired with it and Sentinel is used more subtly for body copy.

• Where to get Ziggurat →
• Where to get Tungsten →
• Where to get Sentinel →

Frances

This is another site using Grilli Type’s GT Pressura Mono. The typeface is surprisingly flexible for a monospaced family — the type takes on a slightly different feel when set in uppercase, which makes introducing a second typeface into the design unnecessary.

• Where to get GT Pressura Mono →

The Next Century

I think this design shows restraint by using the classic Century Schoolbook, rather than going with something more “techy” looking that might be a more obvious choice for a site about the future of technology. I love the use of Nexa as well — it’s much less used than similar faces like Gotham or Proxima Nova and it looks great combined with the monospaced Anonymous Pro.

• Where to get Century Schoolbook →
• Where to get Nexa →
• Where to get Anonymous Pro →

Burning of Columbia

It looks like the designers did an excellent job of matching the type from the print brochures with the type on the website using Galaxie Copernicus and Alternate Gothic. My only critique would be that in some places uppercase Alternate Gothic is used for buttons and then in other places uppercase Proxima Nova is used instead on the buttons. The design might feel more cohesive had they stuck to a more consistent type system. Other than that the type on this site is outstanding.

• Where to get Galaxie Copernicus →
• Where to get Alternate Gothic →
• Where to get Proxima Nova →

Dishoom

I really dig the combo of Cheltenham and Gill Sans. Gill Sans is a quintessential British typeface so I think it’s a great choice for this London chain of restaurants. I’m surprised by the use of Brandon Grotesque though. I don’t think it necessarily looks bad paired with Gill Sans, however, I’d be curious to know the reasoning behind the designers choice to introduce a second sans-serif into the design instead of just using Gill Sans throughout.

• Where to get Cheltenham →
• Where to get Gill Sans →
• Where to get Brandon Grotesque →

David Yeiser

I can tell that a ton of thought was put into setting the type on this site. Yeiser created a consistent type system and then stuck with it religiously throughout his site, creating a cohesive design. Tiempos Headline is used for headlines, Benton Sans is used for body copy with the wide cut used for navigation/subtitles and the monospaced Pitch is used for tables and auxiliary text.

• Where to get Tiempos Headline →
• Where to get Benton Sans →
• Where to get Pitch →

Palaxy Tracks

It can be risky mixing four different typefaces, however, if you can pull it off it makes for an engaging design for type lovers. H&Co’s new serif Quarto is used for the “Palaxy Tracks” masking effect along with the pull quote, Knockout is used for the “EST. 1995” line below the logo and the rest of the design is a mix of Gotham Narrow and Hoefler Text. It probably helps that the designer of the site actually works for Hoefler & Co. so it’s obvious he is quite proficient at working with their typefaces.

• Where to get Quarto →
• Where to get Knockout →
• Where to get Gotham →
• Where to get Hoefler 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.

I’m a huge fan of Samuel Hulick’s user onboarding teardowns so I thought it would be fun to try a new feature on Typewolf where I do a “typography teardown” of a popular website. I’ll review the design from a typographic perspective and discuss what makes the type work and what could potentially have been done better.

In this first edition I’m going to take a deep dive into the type behind the Advertising Age website. But first, a disclaimer.

Disclaimer: The following site was created by designers way more talented than myself. This is simply my opinion on the typography and how, at times, I may have approached things differently. Rules in typography are meant to be broken.

“By all means break the rules, and break them beautifully, deliberately and well.” Robert Bringhurst, The Elements of Typographic Style

The Advertising Age homepage.

Advertising Age is a magazine dedicated to the latest happenings in the advertising industry. The first issue was published in 1930 and it continues to be popular in print as well as on the web. The site was designed by AREA 17, one of my favorite interactive agencies.

The typefaces used in the design.

The site uses the typefaces Tiempos Headline, Tiempos Text, Gotham and Helvetica. In my opinion, including two different sans-serif fonts probably isn’t needed. Why use Helvetica at all when you are already loading the Gotham font? Choosing just one sans-serif might add a little more consistency to the design.

It’s also a possibility that the small amounts of Gotham that appear in the design were left on the site unintentionally. They don’t appear to be using Hoefler & Co.’s Cloud.typography service and are instead hosting the Gotham font files themselves.

Tiempos Headline and Tiempos Text are the most prominently featured typefaces, used for headlines and body copy, respectively. The Tiempos family was designed by Kris Sowersby of New Zealand-based Klim Type Foundry. Surprisingly, much of the inspiration for Tiempos came from Times New Roman. I like this quote from Sowersby:

“These days Times New Roman is much maligned. It’s easy to dismiss due to it’s ubiquity — being the default for a decade sunk it to the depths of bureaucratic banality. Which is unfortunate, for when it comes to the twin tenets of newspaper typography — economy and legibility — it still performs admirably. As Tiempos had to fulfill these same tenets, it was natural to look towards Morison’s classic Times New Roman, a forefather of modern newspaper typefaces.” Kris Sowersby, designer of Tiempos

• Where to get Tiempos Headline →
• Where to get Tiempos Text →
• Where to get Gotham →

Tiempos Headline (enlarged to show details) has high stroke contrast and tight spacing.

Tiempos Headline is a display version of Tiempos, created specifically for setting headlines. It features higher contrast between thick and thin strokes and overall tighter spacing between letters. If used at small sizes these features could cause legibility problems, however, when used at large sizes they add a sense of refinement and elegance to the type.

Tiempos Text (enlarged to show details) has lower stroke contrast and slightly looser spacing.

Notice how Tiempos Text has a more uniform stroke thickness (compared to Tiempos Headline) as well as slightly looser spacing. These features strip away some of the elegance but enhance the readability when set at text sizes. The designers of this site did a great job of consistently using Tiempos Headline and Tiempos Text for their intended purposes. It’s amazing how often I encounter sites using display faces for setting body copy, which is a recipe for a bad reading experience.

The line length of approximately 55 characters and line height of 1.47 makes for a comfortable reading experience.

Here is how Tiempos Text looks when used for body copy. Notice the comfortable line length (also known as measure) of about 55 characters. A 45 to 75 character line length is considered ideal for reading and the body copy on this site falls nicely in that range. It’s very common on the web for line lengths to greatly exceed that (especially for fluid layouts), so it’s nice to see that the designers added a max width so that the type remains easy to read, even on large screens like mine.

The line height (also known as leading) of the body copy looks good as well, coming in at about 1.47. Shorter line lengths require less leading than longer ones. For some reason web designers can tend to go a little overboard with the CSS line height setting. The default setting for line height may be a little too tight but that doesn’t mean you should go nuts with it. A line height of around 1.5 is usually considered ideal.

The double hyphens should be replaced with en dashes or em dashes.

I find it curious that this site uses double hyphens everywhere instead of en dashes. An em dash could be considered proper as well, depending on the editorial style. I prefer en dashes and tend to agree with Robert Bringhurst:

“The em dash is the nineteenth-century standard, still prescribed in many editorial style books, but the em dash is too long for use with the best text faces. Like the oversized space between sentences, it belongs to the padded and corseted aesthetic of Victorian typography.” Robert Bringhurst, The Elements of Typographic Style

To create proper dashes, use the following HTML entities:

En dash → –

Em dash → —

Content management systems can be set up to automatically convert double hyphens into en dashes, so this very well could be a case of the editors trying to input the proper dash but having the CMS not cooperate.

Also be sure to check out my typography cheatsheet for everything you need to know about properly using en dashes and em dashes.

A headline tweaked to show how it would look with smart quotes and an en dash.

Straight quotes are used throughout the site instead of smart quotes. In body copy they aren’t that noticeable but in headlines they are hard to miss. In a few places smart quotes are used properly, so it makes me think the original designers of the site knew better and it’s more of an issue with the content management side of things.

In general, if your quotes and apostrophes are straight, they are dumb; if they are curly, they are smart. The “curliness” of course will vary from typeface to typeface but proper quotes almost never point straight up and down.

To create proper quotes and apostrophes, use the following HTML entities:

Opening single quote → ‘

Closing single quote and apostrophe → ’

Opening double quote → “

Closing double quote → ”

For much more detailed information about using smart quotes and apostrophes, check out my typography cheatsheet.

Do the uppercase headers look better with a slight amount of letterspacing added? Pretty subjective.

A standard “rule” of typography is to always add letterspacing when setting type in all caps. Smaller sizes of all caps text need more letterspacing and larger sizes need less. I find this rule to be pretty subjective. Depending on the look you are going for, sometimes you want your uppercase text to look tight. In this example, I think adding a bit of letterspacing enhances the legibility slightly, but overall is more a matter of personal taste.

Key Takeaways From This Teardown

• Combining a display (or headline) typeface with its text counterpart from the same family is an easy way to ensure readable body copy while still having elegant headlines but remember to never set body copy with a display font.
• Don’t combine two different sans-serif typefaces without a good reason.
• A 45 to 75 character line length is considered ideal for reading — don’t let the line length expand to fill the browser window.
• Aim for a line height of around 1.5 — decrease the line height for shorter line lengths and increase it for longer line lengths.
• Be sure to use proper dashes, apostrophes and quotes — consider configuring your CMS to do this for you automatically. Remember: if your quotes and apostrophes are straight, they are dumb; if they are curly, they are smart.
• Adding slight letterspacing to type set in uppercase can enhance its legibility.

Stay Tuned for More Typography Teardowns

I’ll be writing more typography teardowns in the future, so enter your email below if you’d like to be notified when they are published. And be sure to visit Typewolf whenever you are in need of typography inspiration.

This is the 13th installment of my monthly feature on Typewolf where I share my favorite type-driven websites from the previous month and then write a little about the typographic details behind the designs. You can check out last month’s post for January here.

Charlie was a sinner

It’s usually not a good idea to rely on a display face for the single typeface on your site. Display typefaces, like Chronicle Display, are meant to be used at large sizes for headlines and are not intended for body copy. That being said, I think this site can get away with it — there is essentially no body copy and the text is set large enough to not cause any legibility issues with the high contrast typeface.

• Where to get Chronicle Display →

Wolf & Son

I think it is interesting to see Electra, a typeface traditionally used as a book face, being used essentially as a display face on this site. I think it looks great combined with Futura. The body copy type, set in Futura, runs a little on the small side but the narrow line length and ample line height definitely adds to the readability.

• Where to get Electra →
• Where to get Futura →

Calvin Teoh

I always thought Calluna was kind of quirky, for a serif text face at least, so I think it looks great paired with the quirky geometric, Brown. Maison Mono is added to the mix as well, used for tertiary text. Also I wanted to give props to Calvin for using proper apostrophes throughout the site.

• Where to get Calluna →
• Where to get Brown →
• Where to get Maison Mono →

NASA GeneLab

There is a lot I like about this site, however, I have a lot of nitpicks as well. Overall, I love the general aesthetic of the design — it’s great to see a more distinctive grotesque like Theinhardt, rather than Helvetica. The Theinhardt plus Chronicle Display combo looks wonderful. That being said, I think a lot of the type on this site is just way too tiny. A high contrast face like Chronicle Display doesn’t hold up well at small sizes and the body copy is set rather small with a long line length which doesn’t make it very readable. I also think some of the small type set in uppercase Theinhardt would greatly benefit from some added letterspacing.

• Where to get Theinhardt →
• Where to get Chronicle Display →

Rush

Rush is a band I hated growing up but recently rediscovered in adulthood and finally realized how brilliantly awesome their music is. I absorbed their entire catalog in a span of a few months. So I was stoked to see their site recently redesigned by Plank and Happy Cog. The geometric sans Refrigerator Deluxe, from Mark Simonson, is set entirely in uppercase and the contemporary serif FF Tisa is used for body copy.

• Where to get Refrigerator Deluxe →
• Where to get FF Tisa →

Junction Moama

This is yet another example this month of a site using a display face for setting body copy. Miller is a beautiful Scotch Roman designed by Matthew Carter that has both a text and a display version available, but this site is using only the display version. Ideally you would want to use the text version for body copy, but there is always the page load time trade-off with introducing additional fonts. I think in this case the display version is ok for the body copy — the text length is fairly minimal and a large enough font size is used to keep things legible. Neuzeit is used in the design as well, set mostly in uppercase.

• Where to get Miller →
• Where to get Neuzeit →

Hazlitt

Is four different typefaces too many to use on one site? In general, I’d say the answer is yes. However, what this site loses in type consistency, it makes up for with an engaging, interesting and lively design that begs to be explored. Brown and FF Franziska are the main typefaces used, with Brown being used for headlines and FF Franziska for body copy. Tablet Gothic is thrown in as well for sidebars and the nav. And then the serif Larish Alte make an appearance for the occasional headline. Using too many typefaces sometimes actually works.

• Where to get Brown →
• Where to get FF Franziska →
• Where to get Tablet Gothic →
• Where to get Larish Alte →

Seesaw

I really love the combo of the serif Kepler and the sans-serif Aktiv Grotesk, also known as the “Helvetica killer”. However, to me personally it feels weird adding in Proxima Nova as a secondary sans-serif for body copy. At small sizes it feels similar enough to Aktiv Grotesk but not different enough to add sufficient contrast. I’d be curious to know why they didn’t just stick with a single sans-serif throughout.

• Where to get Kepler →
• Where to get Aktiv Grotesk →
• Where to get Proxima Nova →

Studio Lovelock

This site uses Futura as the sole typeface and I’m glad they didn’t introduce a secondary typeface, as I think it would have ruined this whole aesthetic. I’ve noticed a trend of sites using a geometric sans-serif such as Futura for the primary display face and then using a secondary sans-serif for body copy. I think the reasoning is that geometric sans-serifs don’t make good text faces so therefore a secondary typeface is needed. The problem is that in most cases, good body copy sans-serifs, especially humanist sans, tend to clash horribly with geometric sans. If you only have small amounts of body copy then I think it is fine to just stick with a single geometric sans like this site does. If you have longer amounts of body copy then it’s usually better to introduce a serif typeface rather than another sans-serif.

• Where to get Futura →

The Hechinger Report

I love how this site makes prominent use of the italic style of National. The roman feels like a traditional grotesque but the italic has more of a flowing, humanist quality which adds warmth to the design. National was designed by Kris Sowersby and two more of his typefaces, Tiempos Headline and Tiempos Text, round out the design. A lot of times, using typefaces from the same type designer can add an underlying sense of consistency to a design.

• Where to get National →
• Where to get Tiempos Headline →
• Where to get Tiempos 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.

This is the 14th installment of my monthly feature on Typewolf where I share my favorite type-driven websites from the previous month and then write a little about the typographic details behind the designs. You can check out last month’s post for February here.

Ryan J. Hubbard

This site uses three typefaces from Colophon Foundry, each of which features a fairly quirky design. The serif Fortescue has a distinctive sharp leg on the “R” and “K” which I really dig. Colophon describes the sans-serif Raisonne as “parodic-serious” which is an apt description. It’s a unique design but the legibility suffers at smaller sizes which is probably why the designer chose to use the more legible quirky sans-serif Apercu for body copy.

• Where to get Fortescue →
• Where to get Raisonne →
• Where to get Apercu →

Random House Books

Surveyor is one of the newer releases from H&Co and the Random House redesign is the first site I’ve come across using it. It’s a great typeface choice that fits perfectly with the site’s fleurons and line work. The combination with the sans-serif Aaux is a little unusual – Surveyor feels so historic and Aaux feels so modern but maybe that is the contrast they were going for. Georgia is used for body copy and I think for the most part it pairs nicely with Surveyor, although in the places where the intro paragraphs are set in Surveyor and then abruptly switch to Georgia can feel a little jarring.

• Where to get Surveyor →
• Where to get Aaux →

Øya Festival

I love the unusual grid on this site and how the type playfully switches between Domaine Display and GT Walsheim for the headlines and blurbs, as well as mixing up the uppercase and lowercase seemingly at random. Yes, it may be inconsistent but it makes the site feel dynamic and engaging which I think is the point. Although in some places a little more vertical spacing might be needed between the headlines and blurb underneath, as occasionally the descenders and ascenders collide.

• Where to get Domaine Display →
• Where to get GT Walsheim →

Claire & Kyle

This is another site this month using the ever-popular GT Walsheim. I think the typeface lends itself well to this style of open and colorful layout. The use of Caslon set in italics adds a touch of formality to the otherwise playful design.

• Where to get GT Walsheim →
• Where to get Caslon →

Ghostly Ferns

On first glance, I thought this was yet another site using Brandon Grotesque. However, on closer examination you can tell the sans-serif is definitely not Brandon Grotesque. Although Halis Rounded may have similar rounded terminals, its letterforms are actually shaped quite differently. So kudos to Ghostly Ferns for going with a less-used and more distinctive typeface. The Modern serif Kepler combines nicely with the geometric shapes of Halis Rounded.

• Where to get Halis Rounded →
• Where to get Kepler →

The Modern House

Gill Sans is considered the quintessential British typeface, so it’s a fitting choice for this site about British modern architecture. Old Style serifs such as Minion always make a nice font combination with humanist sans-serifs such as Gill Sans.

• Where to get Gill Sans →
• Where to get Minion →

Columbia Journalism Review

Stag is a nice slab serif from Commercial Type that doesn’t seem to be used as much on the web as other slabs like Adelle. The fragile, thin weight of Stag looks refined and crisp when set at large headline sizes like this. Lyon Text, also from Commercial Type, makes a great body serif paired with Stag. It appears that most of the headlines use smart quotes and apostrophes, however, the headline in the screenshot above suffers from an improper straight quote.

• Where to get Stag →
• Where to get Lyon Text →

Woven Magazine

P22 Underground, a digital version of Edward Johnston’s 100 year-old London Underground typeface, feels much more distinctive than the similar Gill Sans. It was unique for its time and it still feels unique today. A second sans-serif, Tablet Gothic, is used for story headlines and pull quotes, set entirely in uppercase. The body copy is set in the system font Georgia rather than Minion – although Minion is already being loaded, my guess is that the designers didn’t want to add extra page weight by having to load italic, bold and bold italic styles of Minion, which would be required if it were used for body text.

• Where to get P22 Underground →
• Where to get Tablet Gothic →
• Where to get Minion →

Hodinkee

I really like how this site uses the inline sans style of Portrait combined with the standard serif version – it adds a nice classy touch to the design. A common theme this month seems to be sites using web fonts throughout their site but then sticking with Georgia for body copy – I guess sometimes you can’t beat system fonts performance-wise. And continuing with the Gill Sans theme this month, I just realized the sans-serif Brown actually takes on quite a few similarities to Gill Sans when set in uppercase.

• Where to get Portrait →
• Where to get Brown →

Wired

I’ve heard quite a few criticisms about the new redesign of Wired, mainly that it uses too many different typefaces. The new design uses six typefaces — Ambroise, FF Oxide, Brandon Grotesque, Exchange, Tungsten Rounded and Proxima Nova — when conventional design advice says to never use more than two or three typefaces. That being said, I actually really dig the redesign and think that magazine-style sites like this can get away with a few too many typefaces. Sure, with this many typefaces, a certain amount of consistency is lost, but what is gained is a more interesting and engaging design that encourages exploration. If you flip through a physical magazine you’ll notice it’s pretty common to see a wide range of typefaces used for the various forms of content. I think this redesign is no different and the high-tech demographic of Wired is well-suited to a site that pushes the boundaries of web type.

• Where to get Ambroise →
• Where to get FF Oxide →
• Where to get Brandon Grotesque →
• More about Exchange →
• Where to get Tungsten Rounded →
• Where to get Proxima Nova →

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.

This is the 15th installment of my monthly feature on Typewolf where I share my favorite type-driven websites from the previous month and then write a little about the typographic details behind the designs. You can check out last month’s post for March here.

Matthew Galloway

GT Sectra is surprisingly versatile for a calligraphy-inspired typeface — at larger sizes the display version shows off fine details derived from a broad nib pen but at smaller sizes the book style cuts back on the contrast, making a perfectly readable text face. Matthew did a great job setting the body copy as well — the narrow line length is easy to read and smart quotes and dashes are used throughout.

• Where to get GT Sectra →

OJOS Eyewear

Dala Floda, a stencil typeface inspired by worn lettering found on tombstones, makes for a distinctive display face on the OJOS Eyewear site. Cutive Mono, a monospaced typewriter face available for free on Google Fonts, is used for body copy. Cutive Mono doesn’t contain italic or bold styles, so it’s not ideal for body copy, however, for the small amounts of copy on this site I think it works fine. Another monospaced font, Letter Gothic, is set entirely in uppercase for headers. Letter Gothic is a condensed design so it lends itself well to being set in uppercase.

• Where to get Dala Floda →
• Where to get Cutive Mono →
• Where to get Letter Gothic →

Hopes&Fears

The type on this site takes a super unusual approach — different typefaces are swapped out in mid sentence. The body text is set using Merriweather but the italics inside the body text switch to Adobe Text. There are pull quotes that will start with Franklin Gothic and then switch to Adelle. In other places, bold Franklin Gothic will change to Proxima Nova. This gives the site somewhat of a haphazard and disorderly feel, however, the content on the site is a crazy mishmash of different topics so perhaps this is exactly what the design called for.

• Where to get Merriweather →
• Where to get Adobe Text →
• Where to get Franklin Gothic →
• Where to get Adelle →
• Where to get Proxima Nova →

Spotify

Both Airbnb and Mint started using Circular in their recent redesigns, so when I saw that Spotify chose Circular for their new redesign as well, it felt a little uninspired to me. But that’s just my perspective from someone who looks at type on the web all day — I’m sure for their target audience it’s a refreshing typeface choice. But I’m hoping that Circular won’t become the next Proxima Nova due to every site adopting it. I do like how they set Circular tightly with negative letterspacing for the headlines — it gives it a slightly different feel when set this way.

• Where to get Circular →

Access Ventures

I love when type is set at a huge size like this and the details of the letterforms become the main design element of the page. Caslon has been surprisingly popular lately on the web but you can’t really call it trendy since it has been a popular typeface choice for several hundred years. Theinhardt, a neo-grotesque that makes a great alternative to Helvetica, makes for a nice combination with Caslon.

• Where to get Caslon →
• Where to get Theinhardt →

Institute for New Economic Thinking

Content-heavy sites with a corporate feel like this are probably my favorite type of site to feature on Typewolf. There is nothing artsy about them to make them stand out — they just rely on solid typography and that makes them hard to do well. This site is currently in beta but I really like what I see so far. The logo uses Neutraface and Atlas Grotesk is paired with Freight Text, one of my favorite body text fonts.

• Where to get Neutraface →
• Where to get Atlas Grotesk →
• Where to get Freight Text →

Ahoy

This is another site that switches typefaces in mid sentence, although in this case it is done very sparingly. Neuzeit is the primary typeface and Portrait, a serif from Commercial Type, is used sparingly as a secondary typeface. Neuzeit is interesting in that there have been several different versions of it released throughout the years by different foundries — some versions have a single-story “a” and others a double-story “a”, so it can sometimes feel geometric like Futura and other times more like a neo-grotesque depending on which version is used.

• Where to get Neuzeit →
• Where to get Portrait →

Oxford Bibliographies

This site is a great example of demonstrating what can be done using just a single typeface. Calluna Sans is set in a wide variety of styles — regular, bold, italics and letterspaced uppercase — creating a clear hierarchy and enough contrast without the need to introduce a second typeface.

• Where to get Calluna Sans →

Oldham Goddard

Lydia is Colophon Foundry’s condensed take on Lydian, a calligraphic typeface from 1938. The white on cyan text creates a harsh contrast but judging from the website copy, that is exactly what the designers were aiming for.

• Where to get Lydia →

The Atlantic

For the most part, I really dig the new redesign of The Atlantic. It’s great to see them using a proper display face for headlines (Lyon Display) and a proper text face (Lyon Text) for body copy. Rajdhani is an open-source font available on Google Fonts that I was completely unfamiliar with, so it was kind of cool discovering it for the first time in such a prominent redesign. The ubiquitous Proxima Nova is used sparingly — mostly for subheadlines. The body text uses proper quotes and apostrophes, however, the large headlines use dumb quotes, which is a shame because that is exactly where they are the most noticeable.

• Where to get Lyon Display →
• Where to get Lyon Text →
• Where to get Rajdhani →
• Where to get Proxima Nova →

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.

This is the 16th installment of my monthly feature on Typewolf where I share my favorite type-driven websites from the previous month and then write a little about the typographic details behind the designs. You can check out last month’s post for April here.

Not To Scale

I think this site is interesting in that it uses two typefaces from Hoefler & Co, Quarto and Mercury, but the third typeface, Akkurat, is from Lineto. It made me realize that what’s missing from the H&Co catalog is a design in the DIN meets Univers style. That style of typeface seems to be growing in popularity — think Google’s Roboto and Apple’s new San Francisco typeface. Although I doubt H&Co has plans to release any kind of interpretation of that style as they seem to do their own thing regardless of what is trending at the moment.

• Where to get Quarto →
• Where to get Mercury →
• Where to get Akkurat →

Ike Kligerman Barkley

The Ike Kligerman Barkley logo uses Radim Pesko’s distinctive serif Larish Alte. The rest of the site uses FF Scala Sans. This is the first time I’ve seen FF Scala Sans used on the web but I remember it being used in Bringhurst’s The Elements of Typographic Style. The type in the navigation runs a little on the small side, however, the body copy is a nice size for comfortable reading which is what is most important. I think FF Scala Sans makes a wonderful body text face so I hope to see it used more on the web.

• Where to get Larish Alte →
• Where to get FF Scala Sans →

Sand & Such

For a minimal site design like this, I think choosing a distinctive typeface is so crucial for branding. Colophon Foundry’s Fortescue is the sole typeface used and it works wonderfully as the main branding element of the site.

• Where to get Fortescue →

Cereal

This is the first time I’ve seen 9px type used for navigation in as long as I can remember. Thankfully it is letterspaced generously which helps with legibility, but damn, it’s still pretty tiny. But what this site lacks in readability it makes up for with its elegant and graceful aesthetic. Humanist sans-serifs like Gill Sans always go well with Old Style serifs like Garamond.

• Where to get Gill Sans →
• Where to get Garamond →

Elbow

With so many sites using Proxima Nova and Gotham, I applaud Elbow for going with something different. Galano Grotesque is a new geometric/grotesque hybrid that Rene Bieder released last year. On first glance, it appears similar to Gotham, but if you look closer you’ll notice quite a few quirks that give it more personality, like the more prominent tail on the “t”. A monospaced font, Maison Mono, is used for setting body copy which is an untraditional approach. It’s not a very text-heavy site though so I think that it works just fine.

• Where to get Galano Grotesque →
• Where to get Maison Mono →

Confetti Studio

I feel like Hermann Zapf’s Optima might be making a comeback, at least on the web. Bondfire used it in their latest redesign and Confetti are using it as well. It’s a face that has commonly been used for beauty products in the physical world, so seeing design agencies use it on the web feels strangely avant garde. On Confetti’s site they mix it with Akzidenz Grotesk, using an extended style for navigation and headers.

• Where to get Optima →
• Where to get Akzidenz Grotesk →

Quotes Magazine

I really dig the condensed cut of Minion used for the headlines — I think it goes great with the logo which is set with a heavy weight of Romana. Romana is the same typeface used in the Typewolf logo but you’ll notice that the heavy cut has quite a different feel to it. This is another site this month that is setting body copy with a monospaced font, in this case Nitti from Bold Monday. There is quite a bit of text to be using a monospaced font, however, Nitti is a fairly readable face and the type is set well with adequate line height so I don’t think it really hinders the readability too much.

• Where to get Minion →
• Where to get Romana →
• Where to get Nitti →

Bone and Gold

With its wide letterforms, Sweet Sans looks best set in uppercase and remains legible even at small sizes like on the Bone and Gold site. Sweet Sans is based off engraver’s lettering templates so I think it makes for a perfect combination with Grilli Type’s sharp, calligraphic GT Sectra. Maison Neue from Milieu Grotesque is used for the minimal amounts of body text.

• Where to get Sweet Sans →
• Where to get GT Sectra →
• Where to get Maison Neue →

Bruce Gillingham Pollard

This is yet another site this month that uses super small type — maybe I’ve just gotten used to sites setting 18px+ body text so anything below 14px is starting to feel small. Despite the small size, the body text set in Univers still remains readable as the paragraphs are set with a narrow line length along with a generous line height. The choice to use Typonine Stencil for the large headlines was pretty clever — the “Bruce Gillingham Pollard” logo has subtle notching in some of the letters that resembles stencilling, so it’s a great way to carry that look throughout the design. I also like the choice of Typonine Stencil because it’s one of the few stencil typefaces that can pull off an elegant look as opposed to the “stamped on a crate” look. The use of Baskerville in the subheaders pairs nicely with it as well.

• Where to get Univers →
• Where to get Typonine Stencil →
• Where to get Baskerville →

Work & Co

The type on the Work & Co site is truly top notch — the type is set impeccably with proper dashes, smart quotes and apostrophes and you can tell a lot of care was put into the spacing and layout of the type. I love the contrast of such a modern site design with typeface designs that originated before the twentieth century — Garamond and Akzidenz Grotesk. I also have to comment on the unique site navigation — oftentimes using “creative” navigation like this ends up being a nightmare for usability, however, in this case it is refreshingly simple and intuitive.

• Where to get Garamond →
• Where to get Akzidenz Grotesk →

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.

This is the 17th installment of my monthly feature on Typewolf where I share my favorite type-driven websites from the previous month and then write a little about the typographic details behind the designs. You can check out last month’s post for May here.

Mister French

The type on this site is spaced rather loosely with added letterspacing — I think this touch helps give off an easy-breezy feel that matches the laidback aesthetic of the Mister French brand. Apercu and the heavy, poster style of Stanley make for a unique pairing, especially when the two typefaces are combined in mid-sentence.

• Where to get Apercu →
• Where to get Stanley →

Pannier

The Old Style serif typeface Minister makes for a wonderful body text face, especially on my new Retina iMac where the fine details of the design really come through. On most of the pages on this site the body text is set center-aligned which looks fine for a single paragraph, however, once the copy expands to several paragraphs it becomes a bit tiresome to read. On a few of the sections that feature longer content, the layout actually changes to a two column, flush left layout which is much, much easier to read. Proxima Nova makes an appearance on the site as well, mostly for headers set in uppercase.

• Where to get Minister →
• Where to get Proxima Nova →

Number 6 Cider

Mark Simonson’s Refrigerator Deluxe does contain a lowercase alphabet but I think I’ve only ever seen it set in uppercase. The same can also be said for Alternate Gothic — condensed typefaces like these almost always work best set in all caps. Helvetica Neue is used for body copy but only the bold weight is used, most likely to help match the heaviness of all the uppercase type.

• Where to get Refrigerator Deluxe →
• Where to get Alternate Gothic →

Point Oh!

Blanco is a serif typeface designed by Dave Foster that currently isn’t available to the general public. The designers must have worked directly with the type designer to license a special copy — that is an excellent way to ensure the type on your site is unique and not overused. The text in the footer is set in uppercase Futura.

• Where to get Blanco →
• Where to get Futura →

Cienne NY

Farnham is a serif typeface from Font Bureau that seems to be used more in print than on the web. The body copy set in Farnham is a little on the small side, however, the adequate line height makes it easy to read. I’ve always thought that smaller body type tends to look a little more refined whereas larger body type can sometimes feel a little horsey. The body copy is also set with proper apostrophes, quotation marks and dashes which definitely helps add to the refined feel. The quirky GT Walsheim makes for a fun pairing with Farnham and DIN is also used sparingly throughout the site. The design probably didn’t need a third typeface but I think they probably integrated DIN into the site to match the Cienne logo, making the design feel more cohesive.

• Where to get Farnham →
• Where to get GT Walsheim →
• Where to get DIN →

Goodmoods

Choosing two display faces as the only typefaces on your site is usually a pretty dangerous idea. Luckily this site is light on body copy — no more than a single paragraph in most places — so I think it can pull off not having a proper text face. Voyager is a geometric sans-serif with loads of personality and I think it creates an interesting contrast with the delicate, calligraphic Ogg. Neither typeface was created with longform reading in mind, however, they both add plenty of character to the design which I’m sure is the intended goal.

• Where to get Voyager →
• Where to get Ogg →

Lesli Ink

This site is interesting in that the about page is essentially a style guide that includes a section on their use of type. The Lesli Ink brand uses three typeface families — Caslon Graphique, Visby CF and Harriet (both the display and text versions). Three may seem like a lot of typefaces but as long as the use is consistent (which it is) I think it allows a little more room to make things dynamic and engaging. Georgia is actually used in places for body copy, most likely as a substitute for Harriet Text to cut back on page weight from loading too many fonts.

• Where to get Caslon Graphique →
• Where to get Visby CF →
• Where to get Harriet →

Wolff Olins

In contrast to the previous site above, the Wolff Olins site uses only a single typeface. This adds a slightly more serious, no-nonsense tone to the design. Not to say that the typeface they are using, Akkurat, doesn’t have character because it definitely does. Akkurat takes the neo-grotesque model of Univers and mixes in some characteristics of DIN, creating a new type of grotesque that went on to be a major influence on Apple’s new San Francisco typeface.

• Where to get Akkurat →

dConstruct 2015

The design for the dConstruct 2015 site features a retro-futuristic concept and the chosen typefaces perfectly fit this aesthetic. The Art Deco inspired sans-serif, Andes, is combined with the 1950s evoking script face, Lamplighter Script. Futura is added to complete the look. The video game Fallout 3 actually shares a pretty similar retro-futuristic type of look using Futura combined with a script face.

• Where to get Andes →
• Where to get Lamplighter Script →
• Where to get Futura →

Dageraad Brewing

This is a perfect example of a brand having completely cohesive visuals spanning both print and the web. It helps that the design agency, Fivethousand Fingers, designed both the packaging and the website. I think it’s interesting that both the serif typeface, ITC Stepp, and the sans-serif, Avenir, are modeled after typefaces from a similar time period — ITC Stepp was based off a Stetson Shoe Company logo from 1930 and Avenir was modeled after Futura from 1927. The two typefaces couldn’t feel any more different but they still share a common history.

• Where to get ITC Stepp →
• Where to get Avenir →

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.

This is the 18th installment of my monthly feature on Typewolf where I share my favorite type-driven websites from the previous month and then write a little about the typographic details behind the designs. You can check out last month’s post for June here.

Margaux Le Pierrès

Burgess is a serif typeface from Colophon Foundry that is based loosely off Times New Roman so it has a comforting sense of familiarity to it. Founders Grotesk from Klim Type Foundry is used for auxiliary text and makes a nice combo with Burgess as grotesques usually pair well with transitional faces. I think the type treatment with the text partially over the photo is a nice touch that makes the design feel a little less rigid.

• Where to get Burgess →
• Where to get Founders Grotesk →

Public Books

Monotype Grotesque is an early grotesque that is full of irregularities and inconsistencies between its various weights and widths. I think it helps add a bit of vintage character to the Public Books design. The text on the interior pages, set in Plantin, uses indents to mark paragraphs rather than line breaks, making it feel more like a book than a typical website. Adrian Frutiger’s monospaced OCR B, a typeface rarely used on the web, is used for labels.

• Where to get Monotype Grotesque →
• Where to get Plantin →
• Where to get OCR B →

Baobab

This site is an excellent example of designers translating a print identity to the web and keeping the type consistent. Although the website tends to feel almost a little over reliant on the monospaced Letter Gothic – it might have been nice to see Century Old Style or the chunky 1970s-evoking serif, ITC Grouch, used more to make the design feel a bit less monotonous.

• Where to get Letter Gothic →
• Where to get Century Old Style →
• Where to get ITC Grouch →

Thurston Southern

Miller is a serif typeface designed by Matthew Carter, the same designer of the ubiquitous Georgia. Both designs were heavily influenced by Scotch Romans so they share some similarities, however, the display version of Miller used here has much higher contrast so there is no mistaking it for Georgia. Usually using a display face to set body text is a bad idea but the type here is minimal and set at a large size so legibility isn’t an issue. Scotch Romans fall into the Modern category of serifs with their vertical stress and high contrast, so they tend to pair well with geometric sans-serifs like Futura which is used as the secondary typeface set entirely in uppercase with slight letterspacing

• Where to get Miller →
• Where to get Futura →

The Nation

The latest redesign of The Nation has gone all-in on web fonts using Hoefler & Co.’s Knockout and Mercury. It’s great to see Knockout used as it is way less common on the web than other Hoefler faces such as Gotham. I’ve always thought of Knockout as one of the more quirky typefaces in the H&Co collection – the notch on the number “1” has always jumped out at me. One odd thing about this design is that the display version of Mercury is used for body text, rather than the text version. For such a content-heavy site, the lower-contrast text version would probably be much easier on the eyes.

• Where to get Knockout →
• Where to get Mercury →

Koto

This site has an unusual concept where the main brand of the studio — GT Walsheim on a yellow background — is only featured on the top and bottom of the site. The middle section of the site features a case study and the design of this section adopts the look and feel of the actual project they designed for the client, using the same colors and the typefaces Merkury (not to be confused with H&Co’s Mercury) and Warnock. I think it’s a pretty neat approach that makes the case study feel all the more cohesive.

• Where to get GT Walsheim →
• Where to get Merkury →
• Where to get Warnock →

The Enchantments

This is a really cool site that I’ve spent a lot of time checking out — not just for the great type but great content as well (“Mountain Goats are gonna drink your pee. You can’t change that.”). Lydian is a calligraphic sans-serif that you have probably seen on a paperback cover in a thrift store and I think it makes for an interesting and unexpected combo with Futura set in uppercase.

• Where to get Lydian →
• Where to get Futura →

Stillmade

Big Caslon is a Caslon revival by Matthew Carter, although instead of drawing inspiration from the text styles of Caslon, Carter focused solely on the more ornate display sizes of William Caslon’s creations. It looks distinctive and elegant when set at large sizes on the Stillmade site. Univers set in uppercase contrasts nicely with it.

• Where to get Big Caslon →
• Where to get Univers →

Loeffler Randall

This site follows a cohesive and consistent design system using Caslon combined with Gotham which is always set entirely in uppercase. The type is set with careful attention to detail with proper quotes and apostrophes used throughout. I really dig the type treatment of Caslon overlayed on top of Gotham bold.

• Where to get Caslon →
• Where to get Gotham →

Nicole Fenton

I really love this site because it uses just two typefaces — Tiempos Text and Apercu — but somehow manages to get so much out of them. The type liberally switches between italic styles as well as letterspaced uppercase, making the design feel lively and engaging. The page layout feels airy and open with generous spacing between the blocks of content while the small splashes of color help to draw the eye down the page.

• Where to get Tiempos Text →
• Where to get Apercu →

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.

Welcome to the second annual edition of the ten most popular web fonts of the year as featured on Typewolf. For 2014, I have a full year’s worth of data with 365 sites being featured on the site. Last year’s list for 2013 was a little more curated and less backed by data as Typewolf hadn’t been around for a full year at that point.

This list features typefaces from all type foundries regardless of where the typefaces can be purchased or licensed, unlike other lists that might only include fonts available on certain sites such as MyFonts or Typekit. It’s still a curated list as I choose all the sites featured on Typewolf, however, with font usage data for 365 sites I think it shows a clear picture of what fonts were most commonly used in 2014.

Ok, on to the top ten…

10) Caslon

Apparently the old typesetter’s saying of “When in doubt, use Caslon” applies to the web as well. The various revivals of William Caslon’s work from the 18th century continue to be popular in the digital world of the 21st century.

• 10 sites using Caslon in 2014 →
• Where to get Caslon →

9) Circular

This geometric sans from Lineto really took off in 2014 thanks to its prominent use in a few big rebrandings from companies like Airbnb and Mint. I think it brings a touch of freshness to the geometric sans genre without deviating too much into unfamiliar territory. Laurenz Brunner’s other well-known typeface, Akkurat, has been a favorite of designers for years and I’m sure Circular will be as well.

• 11 sites using Circular in 2014 →
• Where to get Circular →

8) Gotham

In 2014, Hoefler & Co’s Cloud.typography service finally started to see more widespread usage. Although their flagship typeface Gotham was one of the most used web fonts of the year, their other offerings such as Sentinel, Whitney and Archer have been quite popular as well.

• 11 sites using Gotham in 2014 →
• Where to get Gotham →

7) GT Walsheim

GT Walsheim, from Swiss foundry Grilli Type, is similar to other geometric sans such as Circular, but isn’t afraid to bring on the quirks. The horizontally protruding bar on the “G” and the curvy tail on the “y” give it a distinctive look that adds a bit of warmth and friendliness to a geometric typeface that could otherwise feel cold and sterile.

• 11 sites using GT Walsheim in 2014 →
• Where to get GT Walsheim →

6) Franklin Gothic

Franklin Gothic has a long history as a classic editorial typeface in print, so I’m glad to see it used more for editorial purposes on the web, like on Time Magazine’s site. It’s also a noted favorite font of “the Godfather of the web”, Jeffrey Zeldman, so it’s fitting that it makes the list of the most popular web fonts of the year.

• 12 sites using Franklin Gothic in 2014 →
• Where to get Franklin Gothic →

5) Proxima Nova

On last year’s top ten list, I predicted that Proxima Nova would fall out of style for 2014. I couldn’t have been more wrong. This typeface continues to be a staple on the web. I think due to its ubiquity it’s starting to feel almost anonymous, like Helvetica, where it can be used for any type of design and fit right in.

• 16 sites using Proxima Nova in 2014 →
• Where to get Proxima Nova →

4) Apercu

Apercu was #2 on last year’s list and I predicted it would start to feel a little played out in 2014 due to it being used absolutely everywhere. Of course “played out” is entirely subjective, but I feel like this prediction rings true. It could easily have reached #1 on this list, however, I personally started to not feature sites using it as they all seemed to be carbon copies of each other. If you use Apercu, will users of your site think the font is overused? Probably not, so don’t let its popularity stop you from using it. But to someone who looks at type all day long it no longer feels fresh and exciting.

• 17 sites using Apercu in 2014 →
• Where to get Apercu →

3) Avenir

Adrian Frutiger considered Avenir his best work and this typeface has other admirers as well — I published a survey in April of last year where I asked 41 influential designers to list their three favorite typefaces and Avenir was mentioned the most. It doesn’t feel “trendy” like some other typefaces on this list can tend to feel; it instead has a timeless quality that I believe will make it popular for years to come.

• 19 sites using Avenir in 2014 →
• Where to get Avenir →

2) Futura

Speaking of timeless typefaces, Futura has seen widespread usage since it was released in 1927 and it continues to be popular on the web. Although it has a classic look, it’s not the most readable of typefaces due to its low x-height. It may be worth checking out some alternatives to Futura if you are in need of something more flexible.

• 20 sites using Futura in 2014 →
• Where to get Futura →

1) Brandon Grotesque

It’s no surprise to anyone who follows type that Brandon Grotesque made it to #1 on this list. Last year I complained that too many sites were using it where the typeface felt a little out of place for their brand. Media Temple, a web hosting company, switched to Brandon Grotesque earlier this year for all of their branding. To me it feels odd seeing a tech company branding themselves with a typeface that has roots in architectural lettering of the 1920s. The typeface used to have a certain “feel” to it, to me at least, but that feeling is starting to become lost due to it being used everywhere, for every conceivable type of brand. But of course these kinds of feelings are subjective and typography and culture are always shifting and changing — typefaces will always have different connotations to different people.

• 21 sites using Brandon Grotesque in 2014 →
• Where to get Brandon Grotesque →

Key Takeaways

I think one of the key takeaways is how diverse the use of web fonts really is. The most popular font on this list, Brandon Grotesque, was used on 21 out of 365 sites featured which comes out to only 5.7% of all the sites featured on Typewolf. I complained that it was overused, but really, font usage is still pretty diverse on the web which is certainly a good thing.

I also noticed less free Google Fonts being used in 2014 — last year’s list included four and this year there are zero. I don’t think this means that Google Fonts are being used less in general, just that the type of sites featured on Typewolf have been looking for more distinctive and perhaps higher-quality options.

Keep Up With the Latest in Web Typography for 2015

Be sure to follow Typewolf if you want to keep up with the latest happenings in web typography. You can sign up for the monthly newsletter below or follow Typewolf on Twitter or Tumblr.

Thanks for reading.

Every day on Typewolf I feature a site with nice typography. Out of the 365 sites featured over the course of 2014, these are my top 40 personal favorites. I was originally planning on doing a top 10 list, but after attempting to narrow down my favorites I realized there were just too many sites with beautiful type for me to choose just 10 or even just 20. So yes, 40 is a lot but I think every single one of these sites has something for type connoisseurs to appreciate.

Ok, get ready to scroll because this is a long post…

40) Snask

I remember the previous design of Snask was one of the first places I saw Apercu being used on the web. The folks at Snask are real trendsetters as this typeface has exploded in popularity over the last year or two. Their new redesign sticks with Apercu but adds in Platform, a geometric sans from Commercial Type. The bold weight pairs surprisingly well with Apercu. Lacrima Senza from Milieu Grotesque is used for the nav set in uppercase.

• Where to get Apercu →
• Where to get Platform →
• Where to get Lacrima Senza →

39) EBD Journal

Rather than using a line break between paragraphs, the body copy on EBD Journal (set in Freight Text) follows the classic type setting convention of indenting the first sentence of each paragraph with no extra line break. This is how type has been set for hundreds of years in the print world but this convention was never widely adopted on the web for whatever reason. Circular, a geometric sans-serif from Lineto, is used for headers and titles while the monospaced font Atlas Typewriter is interspersed throughout, used for captions and footnotes.

• Where to get Circular →
• Where to get Freight Text →
• Where to get Atlas Typewriter →

38) 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.

• Where to get Larsseit →

37) Mount Vernon

This is a deep site with a ton of content and the designers did an excellent job of keeping the type consistent throughout. Gotham and Mercury, both from Hoefler & Co, make a beautiful combo. Having white text set on top of a photo background like in the header is always a dangerous thing to attempt though — using a light photo can quickly make the type illegible. Right now they seem to do a well enough job of only using dark photos that contrast with the type, however I’d hate to see what happens if the client starts adding their own photos.

• Where to get Gotham →
• Where to get Mercury →

36) The Outpost

I’m really impressed by how closely the designers of this site were able to match the typography from the print edition of the magazine. Leitura News and Leitura Display were specifically created with editorial usage in mind and this superfamily looks absolutely beautiful on the web as well as in print.

• Where to get Leitura News →
• Where to get Leitura Display →

35) Cameron Askin

I love sturdy calligraphic-inspired typefaces like Lapture. I think they work so well just set at a large size against a flat color like on Cameron Askin’s site.

• Where to get Lapture →

34) Homepolish

I’ve always been a big fan of Miller, a Scotch Roman from Matthew Carter, designer of the ubiquitous Georgia. Pairing Miller with ITC Johnston, a humanist face famous for its use in the London Underground, makes for a unique and interesting combo. My only complaint about this site is the logo which uses a scaled down PNG, making it appear slightly blurry. Setting it as a web font would ensure a clear and crisp display.

• Where to get Miller →
• Where to get ITC Johnston →

33) The Many Faces Of… Sigourney Weaver

Another popular typeface of the 1970s, ITC Serif Gothic, makes an appearance on Paravel’s Sigourney Weaver tribute site. ITC Serif Gothic was used in the original Star Wars posters, so it definitely has a lot of sci-fi connotations which makes it the perfect typeface choice for this sci-fi focused design. It’s combined with Proxima Nova, which is starting to feel so ubiquitous and anonymous that it seems like it can be paired with anything at this point.

• Where to get ITC Serif Gothic →
• Where to get Proxima Nova →

32) Heck House

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 →

31) Readymag

Mixing two similar sans-serifs is generally considered a bad idea. However, Readymag seem to know what they are doing when they combine Nobel and Avenir. Nobel is almost used as a display version of Avenir by being set only at large sizes. It’s an interesting and unusual approach but I think it works.

• Where to get Nobel →
• Where to get Avenir →

30) An Oral History of Boogie Nights

The “Livin’ Thing” title is set in the text style of Harriet rather than the display style one might expect from a large title like this. However, the display style might be a little too high-contrast when combined with the delicate light weight of Balto which might have been why the designers used the text style instead. This shows that just because a typeface has a display version doesn’t mean it’s always necessary to use it when setting titles.

• Where to get Harriet →
• Where to get Balto →

29) Forefathers Group

This site uses a simple and consistent type system. Both Century Schoolbook and Montserrat are set entirely in uppercase, while Fjord One is used for paragraphs. Both Montserrat and Fjord One are open-source fonts available for free on Google Fonts. Fjord One doesn’t contain any italic styles, so it’s not ideal for setting body copy, however, for the small amounts of text here it works fine. It’s nice to see the logo type using a crisp and scalable SVG.

• Where to get Century Schoolbook →
• Where to get Montserrat →
• Where to get Fjord One →

28) Future Father

I’ve always loved the combo of Clarendon and Futura. The warmth of Clarendon just contrasts so nicely with the cold modernism of Futura. The colors on this site perfectly complement the type as well. The logo is set in the beautiful and ornate Bookman Swash.

• Where to get Clarendon →
• Where to get Futura →
• Where to get Bookman →

27) un Projects

FF Dagny, a sans-serif from FontFont, works well combined with Academica, a typeface designed for use in scientific papers. I love the use of Academica, but unfortunately the line length of the body text expands to fill the screen size, so on a large display like mine the readability suffers.

• Where to get FF Dagny →
• Where to get Academica →

26) 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.

• Where to get Bodoni Poster →
• Where to get Caslon →
• Where to get Futura →

25) Newswordy

This is the first time I’ve seen Standard CT used on the web and I really dig it. However, I would have loved to see the entire site set with Standard CT rather than being combined with Helvetica Neue.

• Where to get Standard CT →

24) Headspace

Brandon Grotesque really makes a perfect match for this style of quirky, “flat design” illustration. I feel like Brandon Grotesque might be getting a little overused but this site makes excellent use of the typeface. The type effortlessly switches between uppercase and italics to keep things fun, dynamic and engaging.

• Where to get Brandon Grotesque →

23) Google Science Fair 2014

The new website for Google Science Fair 2014 appears to have been art directed by Wes Anderson. I think the designers did a great job pulling off this style. Personally, I find the large photo backgrounds distracting and would have preferred to just see the strong Futura type set against a solid color background instead.

• Where to get Futura →

22) Pitchfork Music Festival

Larsseit is one of my favorite recent sans-serif releases and the Pitchfork Music Festival site makes great use of it. Only one typeface is used and that is all that is needed.

• Where to get Larsseit →

21) Harewood House

I immediately fell in love with the type on this site. The light weight of Bodoni Egyptian just plays so nicely with the simple grotesque, Graphik. This is truly a gorgeous site.

• Where to get Bodoni Egyptian →
• Where to get Graphik →

20) 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.

• Where to get FF Super Grotesk →
• Where to get Rooney →

19) 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.

• Where to get Larish Neue →
• Where to get Lyon Text →

18) True Detective by Nigel Evan Dennis

On first glance, Sofia looks a little like Futura, especially with the bold weights. However, on a closer look it has a less-geometric, more playful feel to it. It’s a great match for the illustration style of Nigel Evan Dennis.

• Where to get Sofia →

17) The Distance

This site feels like you are reading a well-designed newspaper thanks to the ever popular combo of Sentinel + Gotham.

• Where to get Sentinel →
• Where to get Gotham →

16) Co.Exist

Grumpy is another seventies-style chunky serif that works great at large sizes, like on the headlines on the Co.Exist site. Caslon accompanies it, which makes sense as Grumpy is based off of the ultra bold styles of Caslon. Museo Sans is used for body copy.

• Where to get Grumpy →
• Where to get Caslon →
• Where to get Museo Sans →

15) Sivert Hoyem

This is another site with low contrast and muted colors, although when you hover over a section the contrast increases which is great. The font Circular is great for this type of minimal design.

• Where to get Circular →

14) Imperial Pomp

I didn’t even know a monospaced version of Helvetica existed until I came across this site. It actually works fairly well as a body copy font in the short amount of text on this site. And I love the use of the ultra-condensed version of Univers for headlines.

• Where to get Univers →
• Where to get Helvetica Monospaced →

13) Ableton

I love the use of Futura on Ableton’s new site. Wes Anderson would be proud. The small bits of yellow type on white can be a bit hard on the eyes at times, but the splashes of color used throughout the site really add to the design.

• Where to get Futura →

12) Advertising Age

I first saw Tiempos used on the web on Frank Chimero’s What Screen Want site. It’s a great typeface and looks wonderful on Advertising Age’s new site, designed by one of my all-time favorite agencies, AREA 17. There are small amounts of Gotham mixed in and I would have loved to see Gotham used exclusively as the sans-serif typeface instead of mixing it with Helvetica.

• Where to get Tiempos Headline →
• Where to get Tiempos Text →

11) Vox

Mixing two sans-serifs doesn’t always work but Vox seems to pull it off pretty well. They stick to Balto for all their headlines and then use Alright Sans for body copy. The serif Harriet is interspersed throughout as well.

• Where to get Harriet →
• Where to get Balto →
• Where to get Alright Sans →

10) Firmamento

ITC Johnston (famous for its use in the London Underground) is set exclusively in caps and looks great paired with Caslon.

• Where to get ITC Johnston →
• Where to get Caslon →

9) Bloomberg View

This is the first time I’ve seen Supria Sans used on the web and I gotta say I’m very impressed. Supria Sans was designed by Hannes von Döhren, the same designer who created the super-popular Brandon Grotesque. Bloomberg View uses Supria Sans as the sole typeface on their site and they make nice use of the various weights. It’s another great example showing that sometimes one typeface is all you need.

• Where to get Supria Sans →

8) Bloomberg Politics

I love when a big news site pushes the boundaries of web type like this by going all out with web fonts. Neue Haas Grotesk, the original Helvetica, looks wonderful on the chunky headlines. Both the headline and text styles of Tiempos are used beautifully. However, there are still bits of Arial mixed in here and there, most likely left in the design inadvertently.

• Where to get Neue Haas Grotesk →
• Where to get Tiempos Headline →
• Where to get Tiempos Text →

7) SF/Arts

Avenir is the only typeface used on this site and the designers did a great job of creating a clear hierarchy simply by setting the type in different weights and using different type treatments such as uppercase for subheaders. They also did a superb job of keeping the line length at an optimal width for reading throughout the site. Oftentimes when a site expands to fill the browser window like on this site, the line lengths can expand along with the size of the window, which quickly makes for a poor reading experience on larger displays. This site keeps an optimal length from mobile to large displays like mine.

• Where to get Avenir →

6) Harvard Law Review

The Harvard Law Review site makes excellent use of Hoefler & Co’s Cloud.typography service, using Hoefler Titling paired with Whitney. The type looks gorgeous on this site. However, it would have been great to see them go all out and use Hoefler Text for the body copy rather than Georgia.

• Where to get Hoefler Titling →
• Where to get Whitney →

5) The Monocle Café

Plantin is a beautiful typeface that went on to inspire the creation of Times New Roman. It’s a shame that it’s not used on the web very often. The italic is especially beautiful and The Monocle Café feature it prominently throughout their site.

• Where to get Plantin →

4) n+1

This entire site uses just one typeface — Adelle Sans. There are no bits of default fonts like Arial and Georgia thrown in which oftentimes happens. Adelle Sans has such a full range of weights that introducing a second typeface into the design is not needed.

• Where to get Adelle Sans →

3) The New York Times Cooking

The New York Times have been using Cheltenham as a headline face for over 100 years, so it’s nice to see it used on the web in their Cooking section. Cheltenham is used sparingly, mostly for headlines and short descriptions, but it really helps to establish the NYT brand. The slab serif Karnak is used for headers and the rest of the type is set in the classic newspaper face Franklin Gothic.

• Where to get Cheltenham →
• Where to get Franklin Gothic →
• Where to get Karnak →

2) Not Coming 2013 In Review

I think using the calligraphic-inspired Ogg with the quirky grotesque Maple is such an interesting and unusual combination. The body copy serif Elena seems to provide a sturdy foundation and works to anchor the other two fonts together.

• Where to get Ogg →
• Where to get Maple →
• Where to get Elena →

1) OKREAL

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.

• Where to get ITC Clearface →
• Where to get GT Walsheim →
• Where to get Goudy Old Style →

Keep Up With the Latest in Type for 2015

If you enjoyed this post, then be sure to check back in with Typewolf throughout 2015 whenever you need typography inspiration. You can sign up for the monthly newsletter below, follow @typewolf on Twitter or get blog post updates on Feedly.

Also be sure to check out the most popular fonts from 2014 as well. Thanks for reading and best wishes for 2015.

This is the 12th installment of my monthly feature on Typewolf where I share my favorite type-driven websites from the previous month and then write a little about the typographic details behind the designs. You can check out last month’s post for December here.

Kim Bost

This is a simple site that uses a single typeface at a single size and weight. I think the key to making this work is the use of color — the white type adds much-needed contrast and the variation in the link underline color adds a warmth to the design. The poster style of Darby Sans, with its high contrast, refined lines, looks wonderful at large sizes.

• Where to get Darby Sans →

Jens Windolf

I love how Grilli Type has only a handful of typefaces available and each one expresses a unique idea and concept. GT Pressura Mono was inspired by the way ink spreads under pressure when stamped on shipping boxes. And the calligraphic serif, GT Sectra, combines the flow of a broad nib pen with the sharpness of a scalpel knife.

• Where to get GT Pressura Mono →
• Where to get GT Sectra →

Large Glass

Schneidler is a classic serif from 1936 that is seldom used on the web. The distinctive cupped serifs really stand out when used at a large size like this. Mr Eaves Sans, the humanist sans-serif counterpart to popular serif Mrs Eaves, makes a great combo paired with Schneidler.

• Where to get Schneidler →
• Where to get Mr Eaves Sans →

Pound & Grain

Pound & Grain take full advantage of Hoefler & Co.’s Cloud.typography service, using three H&Co typefaces. I’m stoked to see them using the chunky slab serif Ziggurat so prominently — it’s definitely one of the more underused H&Co faces. Tungsten makes a nice font combination paired with it and Sentinel is used more subtly for body copy.

• Where to get Ziggurat →
• Where to get Tungsten →
• Where to get Sentinel →

Frances

This is another site using Grilli Type’s GT Pressura Mono. The typeface is surprisingly flexible for a monospaced family — the type takes on a slightly different feel when set in uppercase, which makes introducing a second typeface into the design unnecessary.

• Where to get GT Pressura Mono →

The Next Century

I think this design shows restraint by using the classic Century Schoolbook, rather than going with something more “techy” looking that might be a more obvious choice for a site about the future of technology. I love the use of Nexa as well — it’s much less used than similar faces like Gotham or Proxima Nova and it looks great combined with the monospaced Anonymous Pro.

• Where to get Century Schoolbook →
• Where to get Nexa →
• Where to get Anonymous Pro →

Burning of Columbia

It looks like the designers did an excellent job of matching the type from the print brochures with the type on the website using Galaxie Copernicus and Alternate Gothic. My only critique would be that in some places uppercase Alternate Gothic is used for buttons and then in other places uppercase Proxima Nova is used instead on the buttons. The design might feel more cohesive had they stuck to a more consistent type system. Other than that the type on this site is outstanding.

• Where to get Galaxie Copernicus →
• Where to get Alternate Gothic →
• Where to get Proxima Nova →

Dishoom

I really dig the combo of Cheltenham and Gill Sans. Gill Sans is a quintessential British typeface so I think it’s a great choice for this London chain of restaurants. I’m surprised by the use of Brandon Grotesque though. I don’t think it necessarily looks bad paired with Gill Sans, however, I’d be curious to know the reasoning behind the designers choice to introduce a second sans-serif into the design instead of just using Gill Sans throughout.

• Where to get Cheltenham →
• Where to get Gill Sans →
• Where to get Brandon Grotesque →

David Yeiser

I can tell that a ton of thought was put into setting the type on this site. Yeiser created a consistent type system and then stuck with it religiously throughout his site, creating a cohesive design. Tiempos Headline is used for headlines, Benton Sans is used for body copy with the wide cut used for navigation/subtitles and the monospaced Pitch is used for tables and auxiliary text.

• Where to get Tiempos Headline →
• Where to get Benton Sans →
• Where to get Pitch →

Palaxy Tracks

It can be risky mixing four different typefaces, however, if you can pull it off it makes for an engaging design for type lovers. H&Co’s new serif Quarto is used for the “Palaxy Tracks” masking effect along with the pull quote, Knockout is used for the “EST. 1995” line below the logo and the rest of the design is a mix of Gotham Narrow and Hoefler Text. It probably helps that the designer of the site actually works for Hoefler & Co. so it’s obvious he is quite proficient at working with their typefaces.

• Where to get Quarto →
• Where to get Knockout →
• Where to get Gotham →
• Where to get Hoefler 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.

I’m a huge fan of Samuel Hulick’s user onboarding teardowns so I thought it would be fun to try a new feature on Typewolf where I do a “typography teardown” of a popular website. I’ll review the design from a typographic perspective and discuss what makes the type work and what could potentially have been done better.

In this first edition I’m going to take a deep dive into the type behind the Advertising Age website. But first, a disclaimer.

Disclaimer: The following site was created by designers way more talented than myself. This is simply my opinion on the typography and how, at times, I may have approached things differently. Rules in typography are meant to be broken.

“By all means break the rules, and break them beautifully, deliberately and well.” Robert Bringhurst, The Elements of Typographic Style

The Advertising Age homepage.

Advertising Age is a magazine dedicated to the latest happenings in the advertising industry. The first issue was published in 1930 and it continues to be popular in print as well as on the web. The site was designed by AREA 17, one of my favorite interactive agencies.

The typefaces used in the design.

The site uses the typefaces Tiempos Headline, Tiempos Text, Gotham and Helvetica. In my opinion, including two different sans-serif fonts probably isn’t needed. Why use Helvetica at all when you are already loading the Gotham font? Choosing just one sans-serif might add a little more consistency to the design.

It’s also a possibility that the small amounts of Gotham that appear in the design were left on the site unintentionally. They don’t appear to be using Hoefler & Co.’s Cloud.typography service and are instead hosting the Gotham font files themselves.

Tiempos Headline and Tiempos Text are the most prominently featured typefaces, used for headlines and body copy, respectively. The Tiempos family was designed by Kris Sowersby of New Zealand-based Klim Type Foundry. Surprisingly, much of the inspiration for Tiempos came from Times New Roman. I like this quote from Sowersby:

“These days Times New Roman is much maligned. It’s easy to dismiss due to it’s ubiquity — being the default for a decade sunk it to the depths of bureaucratic banality. Which is unfortunate, for when it comes to the twin tenets of newspaper typography — economy and legibility — it still performs admirably. As Tiempos had to fulfill these same tenets, it was natural to look towards Morison’s classic Times New Roman, a forefather of modern newspaper typefaces.” Kris Sowersby, designer of Tiempos

• Where to get Tiempos Headline →
• Where to get Tiempos Text →
• Where to get Gotham →

Tiempos Headline (enlarged to show details) has high stroke contrast and tight spacing.

Tiempos Headline is a display version of Tiempos, created specifically for setting headlines. It features higher contrast between thick and thin strokes and overall tighter spacing between letters. If used at small sizes these features could cause legibility problems, however, when used at large sizes they add a sense of refinement and elegance to the type.

Tiempos Text (enlarged to show details) has lower stroke contrast and slightly looser spacing.

Notice how Tiempos Text has a more uniform stroke thickness (compared to Tiempos Headline) as well as slightly looser spacing. These features strip away some of the elegance but enhance the readability when set at text sizes. The designers of this site did a great job of consistently using Tiempos Headline and Tiempos Text for their intended purposes. It’s amazing how often I encounter sites using display faces for setting body copy, which is a recipe for a bad reading experience.

The line length of approximately 55 characters and line height of 1.47 makes for a comfortable reading experience.

Here is how Tiempos Text looks when used for body copy. Notice the comfortable line length (also known as measure) of about 55 characters. A 45 to 75 character line length is considered ideal for reading and the body copy on this site falls nicely in that range. It’s very common on the web for line lengths to greatly exceed that (especially for fluid layouts), so it’s nice to see that the designers added a max width so that the type remains easy to read, even on large screens like mine.

The line height (also known as leading) of the body copy looks good as well, coming in at about 1.47. Shorter line lengths require less leading than longer ones. For some reason web designers can tend to go a little overboard with the CSS line height setting. The default setting for line height may be a little too tight but that doesn’t mean you should go nuts with it. A line height of around 1.5 is usually considered ideal.

The double hyphens should be replaced with en dashes or em dashes.

I find it curious that this site uses double hyphens everywhere instead of en dashes. An em dash could be considered proper as well, depending on the editorial style. I prefer en dashes and tend to agree with Robert Bringhurst:

“The em dash is the nineteenth-century standard, still prescribed in many editorial style books, but the em dash is too long for use with the best text faces. Like the oversized space between sentences, it belongs to the padded and corseted aesthetic of Victorian typography.” Robert Bringhurst, The Elements of Typographic Style

To create proper dashes, use the following HTML entities:

En dash → –

Em dash → —

Content management systems can be set up to automatically convert double hyphens into en dashes, so this very well could be a case of the editors trying to input the proper dash but having the CMS not cooperate.

Also be sure to check out my typography cheatsheet for everything you need to know about properly using en dashes and em dashes.

A headline tweaked to show how it would look with smart quotes and an en dash.

Straight quotes are used throughout the site instead of smart quotes. In body copy they aren’t that noticeable but in headlines they are hard to miss. In a few places smart quotes are used properly, so it makes me think the original designers of the site knew better and it’s more of an issue with the content management side of things.

In general, if your quotes and apostrophes are straight, they are dumb; if they are curly, they are smart. The “curliness” of course will vary from typeface to typeface but proper quotes almost never point straight up and down.

To create proper quotes and apostrophes, use the following HTML entities:

Opening single quote → ‘

Closing single quote and apostrophe → ’

Opening double quote → “

Closing double quote → ”

For much more detailed information about using smart quotes and apostrophes, check out my typography cheatsheet.

Do the uppercase headers look better with a slight amount of letterspacing added? Pretty subjective.

A standard “rule” of typography is to always add letterspacing when setting type in all caps. Smaller sizes of all caps text need more letterspacing and larger sizes need less. I find this rule to be pretty subjective. Depending on the look you are going for, sometimes you want your uppercase text to look tight. In this example, I think adding a bit of letterspacing enhances the legibility slightly, but overall is more a matter of personal taste.

Key Takeaways From This Teardown

• Combining a display (or headline) typeface with its text counterpart from the same family is an easy way to ensure readable body copy while still having elegant headlines but remember to never set body copy with a display font.
• Don’t combine two different sans-serif typefaces without a good reason.
• A 45 to 75 character line length is considered ideal for reading — don’t let the line length expand to fill the browser window.
• Aim for a line height of around 1.5 — decrease the line height for shorter line lengths and increase it for longer line lengths.
• Be sure to use proper dashes, apostrophes and quotes — consider configuring your CMS to do this for you automatically. Remember: if your quotes and apostrophes are straight, they are dumb; if they are curly, they are smart.
• Adding slight letterspacing to type set in uppercase can enhance its legibility.

Stay Tuned for More Typography Teardowns

I’ll be writing more typography teardowns in the future, so enter your email below if you’d like to be notified when they are published. And be sure to visit Typewolf whenever you are in need of typography inspiration.

This is the 13th installment of my monthly feature on Typewolf where I share my favorite type-driven websites from the previous month and then write a little about the typographic details behind the designs. You can check out last month’s post for January here.

Charlie was a sinner

It’s usually not a good idea to rely on a display face for the single typeface on your site. Display typefaces, like Chronicle Display, are meant to be used at large sizes for headlines and are not intended for body copy. That being said, I think this site can get away with it — there is essentially no body copy and the text is set large enough to not cause any legibility issues with the high contrast typeface.

• Where to get Chronicle Display →

Wolf & Son

I think it is interesting to see Electra, a typeface traditionally used as a book face, being used essentially as a display face on this site. I think it looks great combined with Futura. The body copy type, set in Futura, runs a little on the small side but the narrow line length and ample line height definitely adds to the readability.

• Where to get Electra →
• Where to get Futura →

Calvin Teoh

I always thought Calluna was kind of quirky, for a serif text face at least, so I think it looks great paired with the quirky geometric, Brown. Maison Mono is added to the mix as well, used for tertiary text. Also I wanted to give props to Calvin for using proper apostrophes throughout the site.

• Where to get Calluna →
• Where to get Brown →
• Where to get Maison Mono →

NASA GeneLab

There is a lot I like about this site, however, I have a lot of nitpicks as well. Overall, I love the general aesthetic of the design — it’s great to see a more distinctive grotesque like Theinhardt, rather than Helvetica. The Theinhardt plus Chronicle Display combo looks wonderful. That being said, I think a lot of the type on this site is just way too tiny. A high contrast face like Chronicle Display doesn’t hold up well at small sizes and the body copy is set rather small with a long line length which doesn’t make it very readable. I also think some of the small type set in uppercase Theinhardt would greatly benefit from some added letterspacing.

• Where to get Theinhardt →
• Where to get Chronicle Display →

Rush

Rush is a band I hated growing up but recently rediscovered in adulthood and finally realized how brilliantly awesome their music is. I absorbed their entire catalog in a span of a few months. So I was stoked to see their site recently redesigned by Plank and Happy Cog. The geometric sans Refrigerator Deluxe, from Mark Simonson, is set entirely in uppercase and the contemporary serif FF Tisa is used for body copy.

• Where to get Refrigerator Deluxe →
• Where to get FF Tisa →

Junction Moama

This is yet another example this month of a site using a display face for setting body copy. Miller is a beautiful Scotch Roman designed by Matthew Carter that has both a text and a display version available, but this site is using only the display version. Ideally you would want to use the text version for body copy, but there is always the page load time trade-off with introducing additional fonts. I think in this case the display version is ok for the body copy — the text length is fairly minimal and a large enough font size is used to keep things legible. Neuzeit is used in the design as well, set mostly in uppercase.

• Where to get Miller →
• Where to get Neuzeit →

Hazlitt

Is four different typefaces too many to use on one site? In general, I’d say the answer is yes. However, what this site loses in type consistency, it makes up for with an engaging, interesting and lively design that begs to be explored. Brown and FF Franziska are the main typefaces used, with Brown being used for headlines and FF Franziska for body copy. Tablet Gothic is thrown in as well for sidebars and the nav. And then the serif Larish Alte make an appearance for the occasional headline. Using too many typefaces sometimes actually works.

• Where to get Brown →
• Where to get FF Franziska →
• Where to get Tablet Gothic →
• Where to get Larish Alte →

Seesaw

I really love the combo of the serif Kepler and the sans-serif Aktiv Grotesk, also known as the “Helvetica killer.” However, to me personally it feels weird adding in Proxima Nova as a secondary sans-serif for body copy. At small sizes it feels similar enough to Aktiv Grotesk but not different enough to add sufficient contrast. I’d be curious to know why they didn’t just stick with a single sans-serif throughout.

• Where to get Kepler →
• Where to get Aktiv Grotesk →
• Where to get Proxima Nova →

Studio Lovelock

This site uses Futura as the sole typeface and I’m glad they didn’t introduce a secondary typeface, as I think it would have ruined this whole aesthetic. I’ve noticed a trend of sites using a geometric sans-serif such as Futura for the primary display face and then using a secondary sans-serif for body copy. I think the reasoning is that geometric sans-serifs don’t make good text faces so therefore a secondary typeface is needed. The problem is that in most cases, good body copy sans-serifs, especially humanist sans, tend to clash horribly with geometric sans. If you only have small amounts of body copy then I think it is fine to just stick with a single geometric sans like this site does. If you have longer amounts of body copy then it’s usually better to introduce a serif typeface rather than another sans-serif.

• Where to get Futura →

The Hechinger Report

I love how this site makes prominent use of the italic style of National. The roman feels like a traditional grotesque but the italic has more of a flowing, humanist quality which adds warmth to the design. National was designed by Kris Sowersby and two more of his typefaces, Tiempos Headline and Tiempos Text, round out the design. A lot of times, using typefaces from the same type designer can add an underlying sense of consistency to a design.

• Where to get National →
• Where to get Tiempos Headline →
• Where to get Tiempos 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.

This is the 14th installment of my monthly feature on Typewolf where I share my favorite type-driven websites from the previous month and then write a little about the typographic details behind the designs. You can check out last month’s post for February here.

Ryan J. Hubbard

This site uses three typefaces from Colophon Foundry, each of which features a fairly quirky design. The serif Fortescue has a distinctive sharp leg on the “R” and “K” which I really dig. Colophon describes the sans-serif Raisonne as “parodic-serious” which is an apt description. It’s a unique design but the legibility suffers at smaller sizes which is probably why the designer chose to use the more legible quirky sans-serif Apercu for body copy.

• Where to get Fortescue →
• Where to get Raisonne →
• Where to get Apercu →

Random House Books

Surveyor is one of the newer releases from H&Co and the Random House redesign is the first site I’ve come across using it. It’s a great typeface choice that fits perfectly with the site’s fleurons and line work. The combination with the sans-serif Aaux is a little unusual – Surveyor feels so historic and Aaux feels so modern but maybe that is the contrast they were going for. Georgia is used for body copy and I think for the most part it pairs nicely with Surveyor, although in the places where the intro paragraphs are set in Surveyor and then abruptly switch to Georgia can feel a little jarring.

• Where to get Surveyor →
• Where to get Aaux →

Øya Festival

I love the unusual grid on this site and how the type playfully switches between Domaine Display and GT Walsheim for the headlines and blurbs, as well as mixing up the uppercase and lowercase seemingly at random. Yes, it may be inconsistent but it makes the site feel dynamic and engaging which I think is the point. Although in some places a little more vertical spacing might be needed between the headlines and blurb underneath, as occasionally the descenders and ascenders collide.

• Where to get Domaine Display →
• Where to get GT Walsheim →

Claire & Kyle

This is another site this month using the ever-popular GT Walsheim. I think the typeface lends itself well to this style of open and colorful layout. The use of Caslon set in italics adds a touch of formality to the otherwise playful design.

• Where to get GT Walsheim →
• Where to get Caslon →

Ghostly Ferns

On first glance, I thought this was yet another site using Brandon Grotesque. However, on closer examination you can tell the sans-serif is definitely not Brandon Grotesque. Although Halis Rounded may have similar rounded terminals, its letterforms are actually shaped quite differently. So kudos to Ghostly Ferns for going with a less-used and more distinctive typeface. The Modern serif Kepler combines nicely with the geometric shapes of Halis Rounded.

• Where to get Halis Rounded →
• Where to get Kepler →

The Modern House

Gill Sans is considered the quintessential British typeface, so it’s a fitting choice for this site about British modern architecture. Old Style serifs such as Minion always make a nice font combination with humanist sans-serifs such as Gill Sans.

• Where to get Gill Sans →
• Where to get Minion →

Columbia Journalism Review

Stag is a nice slab serif from Commercial Type that doesn’t seem to be used as much on the web as other slabs like Adelle. The fragile, thin weight of Stag looks refined and crisp when set at large headline sizes like this. Lyon Text, also from Commercial Type, makes a great body serif paired with Stag. It appears that most of the headlines use smart quotes and apostrophes, however, the headline in the screenshot above suffers from an improper straight quote.

• Where to get Stag →
• Where to get Lyon Text →

Woven Magazine

P22 Underground, a digital version of Edward Johnston’s 100 year-old London Underground typeface, feels much more distinctive than the similar Gill Sans. It was unique for its time and it still feels unique today. A second sans-serif, Tablet Gothic, is used for story headlines and pull quotes, set entirely in uppercase. The body copy is set in the system font Georgia rather than Minion – although Minion is already being loaded, my guess is that the designers didn’t want to add extra page weight by having to load italic, bold and bold italic styles of Minion, which would be required if it were used for body text.

• Where to get P22 Underground →
• Where to get Tablet Gothic →
• Where to get Minion →

Hodinkee

I really like how this site uses the inline sans style of Portrait combined with the standard serif version – it adds a nice classy touch to the design. A common theme this month seems to be sites using web fonts throughout their site but then sticking with Georgia for body copy – I guess sometimes you can’t beat system fonts performance-wise. And continuing with the Gill Sans theme this month, I just realized the sans-serif Brown actually takes on quite a few similarities to Gill Sans when set in uppercase.

• Where to get Portrait →
• Where to get Brown →

Wired

I’ve heard quite a few criticisms about the new redesign of Wired, mainly that it uses too many different typefaces. The new design uses six typefaces — Ambroise, FF Oxide, Brandon Grotesque, Exchange, Tungsten Rounded and Proxima Nova — when conventional design advice says to never use more than two or three typefaces. That being said, I actually really dig the redesign and think that magazine-style sites like this can get away with a few too many typefaces. Sure, with this many typefaces, a certain amount of consistency is lost, but what is gained is a more interesting and engaging design that encourages exploration. If you flip through a physical magazine you’ll notice it’s pretty common to see a wide range of typefaces used for the various forms of content. I think this redesign is no different and the high-tech demographic of Wired is well-suited to a site that pushes the boundaries of web type.

• Where to get Ambroise →
• Where to get FF Oxide →
• Where to get Brandon Grotesque →
• More about Exchange →
• Where to get Tungsten Rounded →
• Where to get Proxima Nova →

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.

This is the 15th installment of my monthly feature on Typewolf where I share my favorite type-driven websites from the previous month and then write a little about the typographic details behind the designs. You can check out last month’s post for March here.

Matthew Galloway

GT Sectra is surprisingly versatile for a calligraphy-inspired typeface — at larger sizes the display version shows off fine details derived from a broad nib pen but at smaller sizes the book style cuts back on the contrast, making a perfectly readable text face. Matthew did a great job setting the body copy as well — the narrow line length is easy to read and smart quotes and dashes are used throughout.

• Where to get GT Sectra →

OJOS Eyewear

Dala Floda, a stencil typeface inspired by worn lettering found on tombstones, makes for a distinctive display face on the OJOS Eyewear site. Cutive Mono, a monospaced typewriter face available for free on Google Fonts, is used for body copy. Cutive Mono doesn’t contain italic or bold styles, so it’s not ideal for body copy, however, for the small amounts of copy on this site I think it works fine. Another monospaced font, Letter Gothic, is set entirely in uppercase for headers. Letter Gothic is a condensed design so it lends itself well to being set in uppercase.

• Where to get Dala Floda →
• Where to get Cutive Mono →
• Where to get Letter Gothic →

Hopes&Fears

The type on this site takes a super unusual approach — different typefaces are swapped out in mid sentence. The body text is set using Merriweather but the italics inside the body text switch to Adobe Text. There are pull quotes that will start with Franklin Gothic and then switch to Adelle. In other places, bold Franklin Gothic will change to Proxima Nova. This gives the site somewhat of a haphazard and disorderly feel, however, the content on the site is a crazy mishmash of different topics so perhaps this is exactly what the design called for.

• Where to get Merriweather →
• Where to get Adobe Text →
• Where to get Franklin Gothic →
• Where to get Adelle →
• Where to get Proxima Nova →

Spotify

Both Airbnb and Mint started using Circular in their recent redesigns, so when I saw that Spotify chose Circular for their new redesign as well, it felt a little uninspired to me. But that’s just my perspective from someone who looks at type on the web all day — I’m sure for their target audience it’s a refreshing typeface choice. But I’m hoping that Circular won’t become the next Proxima Nova due to every site adopting it. I do like how they set Circular tightly with negative letterspacing for the headlines — it gives it a slightly different feel when set this way.

• Where to get Circular →

Access Ventures

I love when type is set at a huge size like this and the details of the letterforms become the main design element of the page. Caslon has been surprisingly popular lately on the web but you can’t really call it trendy since it has been a popular typeface choice for several hundred years. Theinhardt, a neo-grotesque that makes a great alternative to Helvetica, makes for a nice combination with Caslon.

• Where to get Caslon →
• Where to get Theinhardt →

Institute for New Economic Thinking

Content-heavy sites with a corporate feel like this are probably my favorite type of site to feature on Typewolf. There is nothing artsy about them to make them stand out — they just rely on solid typography and that makes them hard to do well. This site is currently in beta but I really like what I see so far. The logo uses Neutraface and Atlas Grotesk is paired with Freight Text, one of my favorite body text fonts.

• Where to get Neutraface →
• Where to get Atlas Grotesk →
• Where to get Freight Text →

Ahoy

This is another site that switches typefaces in mid sentence, although in this case it is done very sparingly. Neuzeit is the primary typeface and Portrait, a serif from Commercial Type, is used sparingly as a secondary typeface. Neuzeit is interesting in that there have been several different versions of it released throughout the years by different foundries — some versions have a single-story “a” and others a double-story “a”, so it can sometimes feel geometric like Futura and other times more like a neo-grotesque depending on which version is used.

• Where to get Neuzeit →
• Where to get Portrait →

Oxford Bibliographies

This site is a great example of demonstrating what can be done using just a single typeface. Calluna Sans is set in a wide variety of styles — regular, bold, italics and letterspaced uppercase — creating a clear hierarchy and enough contrast without the need to introduce a second typeface.

• Where to get Calluna Sans →

Oldham Goddard

Lydia is Colophon Foundry’s condensed take on Lydian, a calligraphic typeface from 1938. The white on cyan text creates a harsh contrast but judging from the website copy, that is exactly what the designers were aiming for.

• Where to get Lydia →

The Atlantic

For the most part, I really dig the new redesign of The Atlantic. It’s great to see them using a proper display face for headlines (Lyon Display) and a proper text face (Lyon Text) for body copy. Rajdhani is an open-source font available on Google Fonts that I was completely unfamiliar with, so it was kind of cool discovering it for the first time in such a prominent redesign. The ubiquitous Proxima Nova is used sparingly — mostly for subheadlines. The body text uses proper quotes and apostrophes, however, the large headlines use dumb quotes, which is a shame because that is exactly where they are the most noticeable.

• Where to get Lyon Display →
• Where to get Lyon Text →
• Where to get Rajdhani →
• Where to get Proxima Nova →

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.

This is the 16th installment of my monthly feature on Typewolf where I share my favorite type-driven websites from the previous month and then write a little about the typographic details behind the designs. You can check out last month’s post for April here.

Not To Scale

I think this site is interesting in that it uses two typefaces from Hoefler & Co, Quarto and Mercury, but the third typeface, Akkurat, is from Lineto. It made me realize that what’s missing from the H&Co catalog is a design in the DIN meets Univers style. That style of typeface seems to be growing in popularity — think Google’s Roboto and Apple’s new San Francisco typeface. Although I doubt H&Co has plans to release any kind of interpretation of that style as they seem to do their own thing regardless of what is trending at the moment.

• Where to get Quarto →
• Where to get Mercury →
• Where to get Akkurat →

Ike Kligerman Barkley

The Ike Kligerman Barkley logo uses Radim Pesko’s distinctive serif Larish Alte. The rest of the site uses FF Scala Sans. This is the first time I’ve seen FF Scala Sans used on the web but I remember it being used in Bringhurst’s The Elements of Typographic Style. The type in the navigation runs a little on the small side, however, the body copy is a nice size for comfortable reading which is what is most important. I think FF Scala Sans makes a wonderful body text face so I hope to see it used more on the web.

• Where to get Larish Alte →
• Where to get FF Scala Sans →

Sand & Such

For a minimal site design like this, I think choosing a distinctive typeface is so crucial for branding. Colophon Foundry’s Fortescue is the sole typeface used and it works wonderfully as the main branding element of the site.

• Where to get Fortescue →

Cereal

This is the first time I’ve seen 9px type used for navigation in as long as I can remember. Thankfully it is letterspaced generously which helps with legibility, but damn, it’s still pretty tiny. But what this site lacks in readability it makes up for with its elegant and graceful aesthetic. Humanist sans-serifs like Gill Sans always go well with Old Style serifs like Garamond.

• Where to get Gill Sans →
• Where to get Garamond →

Elbow

With so many sites using Proxima Nova and Gotham, I applaud Elbow for going with something different. Galano Grotesque is a new geometric/grotesque hybrid that Rene Bieder released last year. On first glance, it appears similar to Gotham, but if you look closer you’ll notice quite a few quirks that give it more personality, like the more prominent tail on the “t.” A monospaced font, Maison Mono, is used for setting body copy which is an untraditional approach. It’s not a very text-heavy site though so I think that it works just fine.

• Where to get Galano Grotesque →
• Where to get Maison Mono →

Confetti Studio

I feel like Hermann Zapf’s Optima might be making a comeback, at least on the web. Bondfire used it in their latest redesign and Confetti are using it as well. It’s a face that has commonly been used for beauty products in the physical world, so seeing design agencies use it on the web feels strangely avant garde. On Confetti’s site they mix it with Akzidenz Grotesk, using an extended style for navigation and headers.

• Where to get Optima →
• Where to get Akzidenz Grotesk →

Quotes Magazine

I really dig the condensed cut of Minion used for the headlines — I think it goes great with the logo which is set with a heavy weight of Romana. Romana is the same typeface used in the Typewolf logo but you’ll notice that the heavy cut has quite a different feel to it. This is another site this month that is setting body copy with a monospaced font, in this case Nitti from Bold Monday. There is quite a bit of text to be using a monospaced font, however, Nitti is a fairly readable face and the type is set well with adequate line height so I don’t think it really hinders the readability too much.

• Where to get Minion →
• Where to get Romana →
• Where to get Nitti →

Bone and Gold

With its wide letterforms, Sweet Sans looks best set in uppercase and remains legible even at small sizes like on the Bone and Gold site. Sweet Sans is based off engraver’s lettering templates so I think it makes for a perfect combination with Grilli Type’s sharp, calligraphic GT Sectra. Maison Neue from Milieu Grotesque is used for the minimal amounts of body text.

• Where to get Sweet Sans →
• Where to get GT Sectra →
• Where to get Maison Neue →

Bruce Gillingham Pollard

This is yet another site this month that uses super small type — maybe I’ve just gotten used to sites setting 18px+ body text so anything below 14px is starting to feel small. Despite the small size, the body text set in Univers still remains readable as the paragraphs are set with a narrow line length along with a generous line height. The choice to use Typonine Stencil for the large headlines was pretty clever — the “Bruce Gillingham Pollard” logo has subtle notching in some of the letters that resembles stencilling, so it’s a great way to carry that look throughout the design. I also like the choice of Typonine Stencil because it’s one of the few stencil typefaces that can pull off an elegant look as opposed to the “stamped on a crate” look. The use of Baskerville in the subheaders pairs nicely with it as well.

• Where to get Univers →
• Where to get Typonine Stencil →
• Where to get Baskerville →

Work & Co

The type on the Work & Co site is truly top notch — the type is set impeccably with proper dashes, smart quotes and apostrophes and you can tell a lot of care was put into the spacing and layout of the type. I love the contrast of such a modern site design with typeface designs that originated before the twentieth century — Garamond and Akzidenz Grotesk. I also have to comment on the unique site navigation — oftentimes using “creative” navigation like this ends up being a nightmare for usability, however, in this case it is refreshingly simple and intuitive.

• Where to get Garamond →
• Where to get Akzidenz Grotesk →

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.