Typewolf Blog

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.

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.

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.

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.

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.

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.

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.

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.

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.

Stay Tuned for Next Month’s Post

I’ll be publishing a new typography inspiration 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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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 19th 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 July here.

Red Bull Music Academy

Portrait is a serif from Commercial Type that is based off Renaissance forms but with added sharp, triangular serifs. This helps to give the “daily” subsection of the Red Bull Music Academy site a much more classic feel than the main site which feels very modern with its prominent use of the contemporary sans-serif, FF Clan. The type is set really well on the article pages — the line length is narrow and proper apostrophes, quotation marks and dashes are used throughout. I dig how the paragraphs use indents rather than full line breaks — this gives the content more of a magazine feel. Maison Neue, a grotesque from Milieu Grotesque, complements Portrait nicely.

Yours Truly Creative

Austin is another serif from Commercial Type, but this one is influenced by the Scotch Romans of the eighteenth century rather than Renaissance types like Portrait. Instead of pairing Austin with another Scotch Roman for body copy (such as Georgia), the designers chose to combine it with Brix Sans, a contemporary sans-serif. This gives the site a more modern, twenty-first century feel. Brix Sans was designed by Hannes von Döhren of Brandon Grotesque fame, however, this is the first time I’ve seen Brix Sans used on the web, in contrast to Brandon Grotesque which is absolutely everywhere.

Ian Alexander Williams

Calligraphic serifs like GT Sectra seem to be super popular at the moment. They look especially nice on high-density displays where the sharpness of the pen-derived details really stand out. The warm, quirky grotesque Apercu and it’s monospaced counterpart, Apercu Mono, contrast nicely with the sharp angles of GT Sectra.

Carolina Herrera Confidential

Didot is a dangerous typeface to use for body copy, especially when set reversed on a black background — the high contrast and delicate strokes can be quite harsh on the eyes. That being said, for a perfume brand like this I’d imagine the brand image is more important than pure readability. Didot looks refined and sophisticated combined with Gotham and the body copy is fairly minimal, so I think this site can get away with it.

Venamour

Freight Big is another high contrast serif with delicate strokes, however, this design luckily doesn’t use it for body copy. The headers mix the italic style of Freight Big with the roman style, creating an elegant look. The navigation and body text is set in Brandon Grotesque, which runs a little on the small side, but still remains legible.

NeueHouse

Lineto’s geometric sans-serif Circular is one of the most trendy typefaces of the moment and it’s used here set in bold for the headers. Plantin is used for body copy, but unfortunately just the roman style is loaded, so faux italics occur throughout the site. You can see in the image above that the italics look rather butchered — the letters are simply sloped rather than using the flowing, cursive design of the true italics. The letter “a” that remains double-story and the “f” without a descender are usually dead giveaways of faux italics in serifs.

Eye Heart World

Pairing an Old Style serif like Caslon with a monospaced typeface like Letter Gothic is an unusual approach but it immediately gives this design a unique look and establishes a strong brand identity. The one thing I have to call out is the use of dumb quotes rather than smart quotes — in the body copy it’s not as noticeable but in some of the headlines it really jumps out.

Frontend in Wonderland

The display version of Abril has such extreme contrast between thick and thin strokes that it needs to be used at pretty huge sizes to remain legible. Fortunately this site uses it strictly for headlines where it has a dramatic impact. Proxima Nova Soft is used for everything else — its soft, rounded corners harmonize perfectly with the rounded shapes used in the illustrations.

2015 Brand New Conference

This site is a little heavy on the font loading side — my web inspector shows that 13 different font files were downloaded. But for a site catered to designers, the strong impact made by the diverse use of type may justify the load times. H&Co’s new Obsidian typeface features software generated shading and highlighting and looks absolutely stunning. The pro version of Georgia is used for navigation, subheaders and body copy — it includes a light weight not found in the standard system font version. The sans-serif P22 Underground is used for small amount of auxiliary text throughout.

Owltastic

Meagan Fisher’s new redesign shows off the amazing versatility of TypeTogether’s Abril typeface family. The text styles of Abril fall into the Scotch Roman genre but as the weights get heavier, the typeface starts to feel more like a slab serif in the style of Clarendon. The display styles take on more of a Didone quality, especially evident in the high contrast “fatface” style used for the section headers. Even as the design of Abril shifts to different genres, the letterforms still feel harmonious. Montserrat, a free font available on Google Fonts, is used for navigation set entirely in uppercase with a touch of letterspacing.

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 20th 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 August here.

Johannes Mutter

Hoefler & Co.’s Quarto and Ideal Sans make for a beautiful combination on Johannes Mutter’s site. Old Style serifs paired with humanist sans-serifs almost always look great together and this case is no exception. The type on the about page is set particularly well — the overlay effect on the “3” and “5” adds a nice touch of warmth and personality to the resume section, which otherwise might have felt a little sterile.

Ben Miles

Lacrima is a typewriter-inspired typeface from Milieu Grotesque that immediately feels much more distinctive than other typewriter faces such as Courier. Despite its unique design, it still remains surprisingly legible as a body face. It’s paired here with Platform, a geometric sans-serif from Commercial Type. The two column layout for the content helps keeps the body text at a comfortable line length for reading.

The Hugo

Tiempos Headline is a high contrast serif with tight spacing so it really shines when set at larger sizes like on this site. Larsseit, a grotesque from Type Dynamic, is used for body copy as well as navigation and captions where it is set in letterspaced uppercase, giving it an elegant feel. All of the type on this site is center aligned, which in most cases makes for poor readability, however, with the minimal amount of body copy here I think it works just fine.

XOXO Festival

Tiempos Text, compared to Tiempos Headline used in the site above, has less contrast and slightly looser spacing so it excels as a text face. The XOXO Festival site uses it as its sole typeface, mixing in the bold and italic styles to create contrast, rather than introducing a second typeface into the design.

Where to get Tiempos Text →

Baker

Graphik, a grotesque from Commercial Type, contrasts nicely with the two Scotch Roman serifs used here, Miller and Georgia. The testimonials on the homepage use proper quotation marks, apostrophes and dashes, which are absolutely crucial when setting large type like this. The “pro” version of Georgia contains additional weights not available in the standard system font version, and here the light weight is used to set the body copy. Using a light weight of any font for body copy can oftentimes be risky — although it looks fine on my Retina display, some displays don’t render the thin letterforms as well which can hinder legibility.

We Heart

The body text on this site takes a unique approach by mixing two typefaces together mid sentence — the copy is set in Futura but when italics are called for, the typeface changes to Freight Big. I think it’s an interesting idea as the italics of geometric sans-serifs (obliques in this case) usually don’t provide enough contrast to truly emphasize something as do true italics like those found in serif faces. So it has a functional as well as an aesthetic purpose, although I think it would have been nice to see Freight Big used throughout the site in other places a bit more to help tie it back into the design. The monospaced Letter Gothic is used for navigation, dates and captions.

Garbett Design

This site uses two typefaces from Grilli Type that couldn’t be more opposite — GT Walsheim and GT Sectra. GT Walsheim is based on precise, geometric forms while GT Sectra is a calligraphic design that is derived from a human hand holding a pen. Together they create a contrast that makes the design feel unique and engaging. The body text is set well with proper apostrophes and the two column layout keeps the paragraphs set at a readable measure.

Best Made Company

Filosofia is a beautiful typeface from Emigre that has been extremely popular in the print world since the late 1990s but this is the first time I’ve seen it used on the web. The design is an interpretation of Bodoni but one with less contrast to make it work as a body text face. It looks wonderful on the Best Made Company site paired with Tobias Frere-Jones’ Interstate. As much as I love the type on this site, I have to call out the straight quote in the screenshot above which should instead be using a proper apostrophe.

B&C Designers

Harriet is a serif type family from Okay Type that is available in a huge selection of display and text styles. The high-contrast, bold display style is used here and works nicely with Revisal, a humanist sans-serif from Type Dynamic. This is my first time encountering Revisal and I think it’s unique for a humanist design, looking a bit more clean and geometric than most. There are a lot of humanist sans-serifs on Google Fonts that are starting to feel a little overused (such as Lato and Open Sans), so kudos to B/C for going with something a little more distinctive and less-used.

The Mark

The Mark is a sophisticated, upscale NYC hotel and the type on their site perfectly complements that image by using three classy serif typefaces — Americana, Bodoni and Times New Roman. I think it’s interesting that the logo shown on the site looks to be using a customized version of Americana while the logo shown on the front of the building in the photo looks to be using just straight up, non-customized Americana. The body text is set in Times New Roman, a typeface that is much-maligned due to it being a default system font. I think on this site it is actually a great choice as it feels right at home with the site’s typographic aesthetic and works well as a readable body face unlike Americana or Bodoni which are both more suitable for display usage.

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 21st 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 September here.

The Forecaster

The Forecaster site does an excellent job of evoking a classic newspaper with its use of Garamond and Alternate Gothic. The additional use of Helvetica Neue and Georgia, however, feels a little out of place with this aesthetic. The site is already loading the regular, bold and italic styles of Garamond so it may have made for a more cohesive design to just stick with Garamond throughout rather than introducing the second serif with Georgia. But other than that, the type on this site is really well done. The logo is set in uppercase bold Futura which feels like it can be paired with anything.

Brandtpunt

I love how the homepage of Brandtpunt is entirely type-driven without an image to be found. Freight Display and Freight Text are paired, showing you can’t go wrong using a superfamily. The large numbers are set in Lust, an ultra-curvy, high-contrast serif from Positype. The Freight superfamily actually includes an optical size that is even more high contrast than Freight Display, known as Freight Big, however, even its contrast pales in comparison to Lust’s. The Futura-esque Sofia is used for body text and subheaders.

Opera Philadelphia

I think it’s interesting how the body text on this site is set in Futura, rather than Caslon which is considered a classic book face. The Futura text actually reads pretty well though as it is set with generous line spacing. My only nitpick about this site is the few places where the type is overlaid on top of photos and becomes unreadable. This style of type treatment is always risky – it may look good in the designer’s comp, however, once the client starts adding their own photos, it can quickly fall apart.

Alldayeveryday

Friz Quadrata is a distinctive typeface that you probably recognize from its prominent use in the TV show Law & Order as well being used in the logos of a slew of punk rock bands including Bad Religion and Black Flag. It’s paired here with Brown, a popular geometric sans-serif from Lineto. The body text is actually set with slightly loose letterspacing and although it’s usually considered a bad practice to letterspace lowercase, in this case I think it adds a breezy, laid back aesthetic to the design.

No Divide

Something about Mark Simonson’s Grad typeface makes it beg to be tracked tightly. I used it on an old version of my portfolio and I remember setting it rather tightly similar to how it is on this site. The body text here is set justified which you don’t see too often on the web as it creates nice, even columns but comes at the expense of uneven word spacing. In this case, I think it still remains quite readable and adds a touch of elegance to the layout. FontFont’s FF Good Headline is used for the nav and headers.

Teamweek

Chunky, high-contrast serifs are super popular at the moment, however, this heavy cut of Romain from Swiss Typefaces doesn’t seem to be used that much on the web. The same can be said for FF Bau – quirky grotesques like this are trendy right now but FF Bau is far from overused. So I applaud Teamweek for digging a bit deeper and pairing two typefaces that aren’t being used by every other site out there. I think it definitely helps to create a more distinct and memorable brand.

Lovers

ITC Clearface is a 1970s-evoking typeface that seems to be making a comeback as of late. It’s paired here with Atlas Grotesk, a fairly neutral neo-grotesque that balances well with the flamboyant nature of ITC Clearface. Props to the designers for correctly using smart quotes and apostrophes which you can see in the image above.

Vrge

This is another site that prominently features type set on top of photos, although on this site the designers have done an excellent job of darkening the photos to ensure adequate contrast for legibility. I’m surprised more sites don’t take this approach of pairing a serif and a sans-serif from the same superfamily – Freight Sans and Freight Big go together wonderfully as they share the same basic skeleton and have similar proportions.

IFWE

I’ve always loved the italics of Baskerville – they contrast so much with the roman and are so ornate they almost feel like a swash style. The IFWE site makes prominent use of them which adds a graceful, sophisticated touch to the design. Avenir is set in bold and tracked tightly for the headers. Seeing it set like this reminds me of Gotham and Proxima Nova, which I’m sure Avenir was a big influence on.

Pronoun

This is yet another site this month featuring a heavy, high-contrast serif which shows how popular they are becoming. Pronoun uses a black weight of Caslon for headers and a regular weight for body copy. Caslon is a classic book face (“When in doubt, go with Caslon”) so it’s an appropriate choice for a book publishing platform. A condensed cut of Suisse Int’l from Swiss Typefaces is used with generous letterspacing – often condensed sans-serifs can benefit from a small amount of added spacing.

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 22nd 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.

Buca Boot

Eksell Display is the only typeface that famed Swedish designer Olle Eksell ever completed. It’s a striking and unique design – the top of the lowercase f looks like a flame blowing in the wind and the lowercase r doesn’t look like any other I can recall seeing. Going with a unique typeface like this is a sure way to make a brand stand out and be memorable. The sans-serif, Edmondsans, is a quirky cross between a grotesque and a geometric and feels like a perfect match with Eksell Display.

Meatpacking District

The new identity for NYC’s Meatpacking District neighborhood melds two typefaces together – Platform and Romana. If Romana looks familiar that’s because it’s the typeface I use for the Typewolf logo and headers in this article. The website does an excellent job of carrying through the dual font identity, although the use of Arial for body copy does feel a little blah. Neither Platform nor Romana would really work as body text though, so I understand why they went with a system font.

Turo

RelayRides recently rebranded themselves as Turo with a new identity and website. I really dig how the new site turned out as it is very type-focused. The website does a great job of setting out a system for using type and then sticking with it consistently. The large headlines are set in Freight Display, a condensed cut of Plantin is set in uppercase for the subheaders and the body text uses Colophon’s new grotesque, Basis Grotesque.

Grand Ferdinand

The website for the Austrian hotel Grand Ferdinand keeps making me think of Wes Anderson’s The Grand Budapest Hotel. Something about it shares the same classy meets eccentric quality. I think Radim Peško’s distinctive serif, Larish Alte, reallys helps give it that feel. Galaxie Copernicus is used for body copy and complements Larish Alte nicely. Effra is set in uppercase for subheaders and a fourth typeface, Hoefler & Co.’s Knockout also makes an appearance set in uppercase as well.

Julien Renvoyé

I remember using ITC Conduit quite a bit on various design projects in the mid-2000s. I hadn’t seen it used as a web font before so I was stoked to see it used on this site. It’s one of those typefaces that, for whatever reason, designers tend to set in uppercase more often than lowercase. It’s an intentionally crude looking typeface but pairing it here with Minion gives it a surprisingly elegant feel.

Science Friday

This is the first site I’ve featured on Typewolf that uses Egyptienne, a slab serif by the legendary Adrian Frutiger. His Avenir typeface is used everywhere but other than Univers you don’t really see his other typefaces used all that much as web fonts which is a shame. The use of Egyptienne immediately gives the design a more distinctive feel as it looks quite a bit different than other popular slabs such as Sentinel and Adelle. If the use of Proxima Nova on this site looks a little off to you, it’s because they are implementing the alternate character version – notice the single-story a and the curvy tails on the letters l and y.

The Macro

When I think of Y Combinator I can’t help but think of Hacker News and its Reddit-esque, designed-by-a-programmer-in-1997 aesthetic. So I was pretty surprised to see how beautiful and well-designed their new publication The Macro is. It’s clean and modern with a strong focus on typography. The articles, set in Avenir, are a pleasure to read with a narrow line length and generous line height. This is the first site I’ve featured on Typewolf that uses New Caledonia which is a popular book serif. It’s interesting that New Caledonia is used here as a display face for the article titles and pull quotes rather than as a body face. Avenir is highly readable though for a sans-serif and New Caledonia looks refined at large sizes so I think this approach definitely works.

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 23rd 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.

American Imagery Bank

With flat design all the rage, it’s kind of refreshing to see a site that uses a little bit of background texture. It seems to add a touch of warmth to the type. I dig the combo of Futura and Refrigerator Deluxe here – both are geometric sans-serifs but they are different enough to provide sufficient contrast even when they are both set in all caps next to each other. Century Schoolbook has a mostly geometric skeleton so it’s a nice serif to pair with the two geometric sans-serifs.

Lapham’s Quarterly

This site does an excellent job of taking a simple typographic palette – just Caslon and uppercase Freight Sans – and making it go a long way. Lighter shades of Caslon are used strategically to place emphasis on the article headlines and the use of italic and uppercase Caslon helps create even more typographic contrast. Smart quotes and apostrophes are used properly which is important for such a literary site.

Sway Water

The Sway Water site really shows off how far free fonts have come. All four of the fonts used here – Playfair Display, Droid Sans Mono, Karla and Montserrat – are from the Google Fonts library. Normally using four different typefaces in a design can be a bit too much but here it seems to fit the playful and colorful aesthetic of the site.

Tasting Table

I’m used to seeing GT Sectra set in the lighter weights and more high contrast Fine and Display cuts, so seeing it set here in the regular cut in bold made me not recognize it at first. It definitely feels less sharp and trades in some of the scalpel knife qualities in favor of a more classic broad nib pen look. FF Mark seems to be growing in popularity as a more friendly, humanist alternative to Futura and it makes a great pairing with GT Sectra. The brush script face, Quick, makes an appearance as well for headers.

Lu Yu

I dig how the type on Lu Yu’s site is set in both normal and reversed (dark and white) against a colored background. It’s a great trick to create contrast and make type pop out for emphasis. The serifs Freight Big and Freight Text are both pretty common typefaces but this is the first time I’ve encountered the geometric sans-serif Filson. It feels similar to Futura on first glance but the curvy tail on the t and R make it stand out.

Scientific American

Brunel is a serif typeface created by the guys from Commercial Type before they had actually partnered to form their type foundry. It’s not available for purchase through their site but Scientific American were able to get their hands on it for their recent redesign. It looks wonderful on the new site which takes a clean, type-driven approach. Much of the type on the site is set centered which adds a formal touch. Benton Sans is set with generous letterspacing for the navigation and auxiliary text. Even though Brunel contains styles for setting text, the body copy is set in Georgia, which actually pairs quite nicely with Brunel. One nitpicky thing that I have to point out is that the screenshot above is using a hyphen for a date range rather than a proper en dash. But really that isn’t much to complain about as the type on this site is truly top notch.

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. And remember to visit Typewolf whenever you are in the need of typography inspiration.

Welcome to the third annual edition of the ten most popular web fonts of the year as featured on Typewolf. Based on font usage data from 365 websites featured over 2015, these are the ten fonts that were used the most often. You can check out the previous year’s lists for 2014 and 2013 as well.

While reviewing the data for this year, I noticed something a little disconcerting: this year’s top ten list is almost identical to the top ten list from 2014. Other than swapping out Franklin Gothic with Brown, these are exactly the same ten fonts that were featured the most on Typewolf last year.

I curate all the sites featured on Typewolf – so I may be partially to blame for this – however, the sites I feature tend to be a solid representation of what is popular in the design community. About one-third of the sites featured are submissions that people send to me while the remaining two-thirds are sites that I find featured on other popular design gallery sites, Designer News, Twitter, etc. Overall, I think this list generally shows what fonts are most popular with designers at the moment.

So in the spirit of hopefully making type a little more diverse on the web, I decided to list four alternatives for each of the ten fonts featured here. The alternatives all fit a similar aesthetic yet aren’t used quite as much. They may be worth looking into if you want to stand out a little from the crowd.

As always, this is an independent source of data that includes all fonts regardless of where the fonts can be purchased (including indie foundries that don’t make their fonts available on popular services such as MyFonts and Typekit).

Ok, on to the top ten!

10) Circular

Spotify rebranded in 2015 and started using Lineto’s Circular throughout their website. Although their new shade of green garnered quite a bit more attention than their new typeface, I feel like this was a huge moment for Circular, where it finally went from being an underground favorite to a mainstream hit. Mint and Airbnb had previously rebranded with Circular but the use on Spotify felt like the tipping point. I imagine we will see it used much more in 2016. Similar to Circular, the alternatives below have geometric skeletons combined with more grotesque-like characteristics. They each feature a double-story a and a single-story g.

Where to get Circular →

Fonts You Can Try Instead of Circular

9) GT Walsheim

Fashionable London-based art and design mag, It’s Nice That, rebranded using GT Walsheim in 2015 which is a testament to its popularity with designers. Many other designer portfolio sites and agencies jumped on the GT Walsheim bandwagon as well. The typeface feels like a more friendly version of Futura, so if that is your thing, check out these other four alternatives below.

Where to get GT Walsheim →

Fonts You Can Try Instead of GT Walsheim

8) Brandon Grotesque

Brandon Grotesque was #1 on last year’s list but this year it has fallen to #8. I think maybe it is finally starting to feel a little played out. It seems ubiquitous on the web – everyone from web hosting companies to tech magazines to schools to fashion brands have been using it these last few years, so it really doesn’t feel as unique as it once did. Some of the alternatives below are worth looking into if you are looking for something more distinctive.

Where to get Brandon Grotesque →

Fonts You Can Try Instead of Brandon Grotesque

7) Caslon

As the lone serif typeface on this list, Caslon feels a little out of place. There are many other classic serifs that everyone loves, such as Garamond and Minion, but for some reason it is Caslon that keeps making an appearance over and over again on Typewolf. I honestly can’t tell you why. Maybe designers are following When in doubt, use Caslon a little too religiously.

Where to get Caslon →

Fonts You Can Try Instead of Caslon

6) Avenir

Avenir is almost universally mentioned as a favorite amongst designers so I’m really not surprised that it made the top ten list again this year. Adrian Frutiger sadly passed away in 2015 but Avenir will live on forever.

Where to get Avenir →

Fonts You Can Try Instead of Avenir

5) Brown

Brown is another typeface that fits the “friendly Futura” description, although it feels quite a bit different than GT Walsheim above. There really weren’t any big brands that I’m aware of that started using Brown on their sites in 2015, however, it continues to be popular with the more artsy crowd.

Where to get Brown →

Fonts You Can Try Instead of Brown

4) Gotham

Gotham was #8 last year and this year it moved up to #4. It’s one of the most iconic typefaces of the last decade and continues to be popular on the web. Other typefaces from Hoefler & Co. like Sentinel and Whitney have been popular as well, however, I’m surprised by the relative absence of Archer on the web. I didn’t feature a single site using Archer in 2015 which is shocking as Archer is seemingly everywhere in the offline world.

Where to get Gotham →

Fonts You Can Try Instead of Gotham

3) Proxima Nova

It’s no surprise that Proxima Nova made the list again this year. It just edged out Gotham to take the #3 position. I keep thinking that Proxima Nova will fall out of favor, yet every year designers continue using it.

Where to get Proxima Nova →

Fonts You Can Try Instead of Proxima Nova

2) Aperçu

Aperçu is a really unique typeface that bounces between genres. Colophon describes it as a mix of ITC Johnston, Gill Sans, Neuzeit and Franklin Gothic. It’s the one sans-serif on this list that deviates the most from the geometric sans genre. Norwegian Air rebranded using Aperçu in late 2015 so it feels like it’s starting to hit the mainstream.

Where to get Aperçu →

Fonts You Can Try Instead of Aperçu

1) Futura

The mother of all the geometric sans-serifs featured above, Futura was the most popular font featured on Typewolf by a landslide. There were almost twice as many sites using it as second place. Futura is readily available on Typekit which I’m sure has a little to do with its popularity. I think it’s neat that a typeface from 1927 dominates the web in 2015. Over the years there have been many typeface releases touted as “improvements” to Futura, with more contemporary proportions and larger x-heights, yet designers continue to reach for the original. There are many, many alternatives to Futura, however, the four typefaces below are a good place to start.

Where to get Futura →

Fonts You Can Try Instead of Futura

The Year of the Geometric Sans-Serif

I’m going to make the understatement of the century: geometric sans-serifs are popular at the moment. Out of the ten fonts on this list there was only one serif featured, with the rest being sans-serifs. Although some of the typefaces such as Aperçu and Avenir deviate slightly into humanist territories, pretty much all of these sans-serifs could be described as geometric.

Why Are Geometric Sans-Serifs So Popular Right Now?

It’s difficult to explain broad cultural trends so I’m not going to even attempt to do that. However, a more mundane theory that could at least apply to type on the web, is that geometric sans-serifs feel more “exclusive” and therefore more “cool.”

For whatever reason there aren’t many geometric sans-serifs available on Google Fonts. Most of the popular ones fall into the humanist genre, such as Open Sans and Lato. There aren’t really any standard system fonts that are geometric either (although that is now changing with San Francisco and Roboto).

So if you are using a geometric sans-serif on your site, there is a good chance you had to pay money to use it. Having to pay money for something makes it more exclusive and unique. Brands that have a lot of resources to invest into design don’t mind paying money for nice type – especially if it will make them stand apart from “cheaper” competitors. This exclusivity could be one theory as to why geometric sans-serifs are so popular right now.

People are just sick of Helvetica could be another perfectly valid theory as well.

Predictions for 2016

I imagine geometric sans-serifs will remain popular for the next several years at least. The one thing I’ve learned about trends in type is that it takes years to notice any major cultural shifts. It’s not like neo-grotesques are all of a sudden hot one year and then become uncool the next. Type trends move slowly.

I think we’ll continue to see more serifs used in 2016. Serifs such as GT Sectra, Lust, Quarto, Portrait, Freight Text and Tiempos Text seem to be gaining in popularity but didn’t quite make the top ten this year. Sans-serifs have traditionally rendered better than serifs on computer screens due to their simpler structure, however, with higher density displays becoming more common, I think serifs are due for a big comeback on the web in the coming years.

I also would like to think that we’ll see a more diverse use of type on the web in 2016. There are thousands and thousands of quality typefaces out there so I’m hoping designers will dig a little deeper during the type selection process. The alternatives listed above are a good place to start and for the more adventurous, browsing Typewolf’s Site of the Day section may be a good way to discover some hidden gems.

Keep Up With the Latest in Web Typography for 2016

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, Facebook, Pinterest and Tumblr.

Thanks for reading and have a wonderful 2016.

This is the 24th 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.

Dreams Incarnated

Apercu may have been the second most popular font of the year on Typewolf, but I’m still encountering clever and interesting uses of it. Its quirky characters create a stark contrast with the sharp, angular forms of Noe Display. The triangular serifs in Noe Display play off nicely with the triangular shapes in the illustrations, creating a nice harmony between the type and imagery.

Matthew Anderson

Nocturno Display is another typeface with heavy, triangular serifs, but compared to Noe Display, its serifs are less angular and more concave. Matthew Anderson pairs it here with the monospaced typeface Nitti from Bold Monday. The blockquotes use proper quotation marks, apostrophes and dashes which are important when setting large type like used here.

Library of America

Arnhem is one of my favorite body text typefaces and it was created with editorial usage in mind, so it’s a great choice for such a literary site. It’s set here for both the headlines and body copy, with Calibre from Klim Type Foundry used for auxiliary text. The color scheme is almost entirely grayscale except for small splashes of type set in red, which helps to draw the eye down the page.

ilovecreatives

Romana is the same serif typeface I use on Typewolf, so it’s always interesting seeing it used on another site. It’s set mostly in uppercase on the ilovecreatives site and it takes on quite a different feel than when set in mixed case – I love how the sharp leg of the uppercase R reaches below the baseline. Lasiver, a geometric/humanist hybrid from Type Dynamic, makes for a nice combo with Romana.

One Day Out

Realtime Rounded is a monospaced typeface that has never been featured on Typewolf before, so it’s cool to see a brand pushing the boundaries a bit and going with something not commonly used. The rounded corners help give it a more friendly and less techy feel compared to other monospaced fonts. The entire site uses just a single typeface but the designers did an excellent job of mixing things up by using different weights and sizes. The section headers set in uppercase screened against the background is a nice touch.

Where to get Realtime Rounded →

Penguin Random House UK

The recent redesign of the Penguin Random House UK website uses two typefaces designed by Jeremy Mickel, Shift and Fort. Shift is the same typeface used in the Penguin Random House logo, so it’s great to see it carried throughout the rest of the design which really helps to unify the brand. The type is set really well overall, however, there are a few places where the body copy line length gets a little wide for comfortable reading, especially on a large monitor. I love the logo but it’s super fuzzy on my Retina display – creating a 2x version implementing srcset would be a quick and easy fix. Other than those two nitpicks, I think this redesign is very well done.

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 25th 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.

Phillip Fivel Nessen

Orpheus is a distinctive serif typeface that I have never seen used on the web before, even though it’s freely available to anyone with a Typekit plan. So kudos to Phillip Fivel Nessen for digging a little deeper and going with something that not everyone else is using. It definitely makes his brand stand out. The body type set in Sofia runs a little on the small side but it creates a dramatic contrast with the huge headline type.

Valio Con 2016

Playfair Display is one of the most popular Google Fonts but unfortunately I’ve seen it used way too often for setting body copy, which isn’t its intended use. Here on the Valio Con 2016 site, it’s used how it was intended to be used—for setting large display type. It pairs nicely with the body copy set in Texta, which feels kind of like a more quirky version of Avenir. Lodgecode, an uppercase-only sans with a distinctive R, is used for the buttons and large headers.

Typographics 2016

The heavy stencil cut of Eames Century Modern makes for an excellent branding typeface; it’s an extremely unique design that was inspired by the bent plywood furniture made famous by the design duo of Charles and Ray Eames. The letterforms are overlaid to create the colorful background image in the header. Mallory, the first release from Tobias Frere-Jones since his split from H&FJ, is paired with it for the body copy and navigation.

Shady Characters

Shady Characters is a website (and book) about the history of punctuation marks. The site was designed by the author, Keith Houston, who is actually a software developer by trade and not a designer. The site looks gorgeous though and the typography is flawless, which proves true the saying “web design is 95% typography.” The text is set in Satyr paired with its “unfaithful companion”, Faunus, used for headlines. The two typefaces both have a worn, organic look which perfectly complements the historical subject matter.

Mono Mono

I first came across the Mono Mono site posted on a forum where most of the comments were about how “unusable” the site is. And I have to agree that it is pretty hard to use. But it’s also interesting, engaging and doesn’t look like every other site out there. And it’s for a cutting-edge graphic design studio, not an insurance company, so the whole point is to stand out and do something different. The main font used is Harbour, which mixes elements from both blackletter and Latin type. Work Sans, a nice grotesque from Google Fonts, is used on the “info” page.

MIT Technology Review

The MIT Technology Review site was recently redesigned by Upstatement and they did an amazing job of creating consistency between the print and online version of the magazine. They could have just used Helvetica and Georgia, but instead went with Neue Haas Grotesk and Miller, which appears to be what is used in the print version. Georgia and Miller are actually very similar as they were both designed by Matthew Carter, but Georgia was designed for low-resolution screens and lacks the detail and refinement of Miller, which is especially noticeable on high-density displays. The text version of Miller is used for body text and the display version makes an appearance on the headlines in the “Business Reports” section. You can see how closely the type matches between online and print in the screenshot above.

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

Wealthsimple

Chunky, 1970s-looking serifs like Caslon Graphique have become really trendy in the last few years, especially when combined with geometric sans-serifs like Futura. It’s a pretty hip look for a wealth management company, but their brand looks to be directed towards young people, so it feels like a good fit. I like how they carry the same Caslon Graphique type from their logo throughout the site in the headlines. I also like how they set their name as Wealthsimple rather than Wealth Simple or WealthSimple—I’ve always thought that using just one word creates a stronger brand and avoids the problem of awkward capitalization in the middle of the name.

Sheridan Life

Notice anything odd about the type in the above screenshot? Look closely at the large italic type in the quote. And then compare it to the small italic type in the quote attribution. Does something look off? Chronicle Display from Hoefler & Co. has gorgeous italics but unfortunately you are looking at faux italics in the quote. True italics in serifs have a flowing, calligraphic appearance, rather than looking like they were just simply skewed at an angle. An easy way to spot faux italics is to look at the lowercase f—most italic serifs will have a descender on the f. I really love this site but just thought the faux italics were worth pointing out. Everything in the design is ultra clean and minimal and Avenir pairs beautifully with Chronicle.

Arts Access Victoria

This site has quite a bit of type set on top of photos but fortunately the designers have created a nice system for darkening and tinting the photos to ensure the overlaid text is still readable. So even if the client ends up choosing poor photos later, it still shouldn’t create any legibility issues. GT Sectra and GT Walsheim are polar opposites—GT Walsheim is fun and quirky while GT Sectra feels more serious and sinister—but they pair surprisingly well together.

La Revolución

Choosing such a distinctive and underused typeface like Granite is a dead-simple way to create a unique and memorable brand. This high-contrast slab stands out and grabs your attention much more than a commonly used slab like Clarendon ever would. The serif paired with it, Calendas Plus, is actually available as a free font with a “pay what you want” model to get the complete family.

Malditos

If the serif typeface used here, Stanley, reminds you of Times New Roman, that’s because it wears its influences on its sleeve and is in fact named after the creator of Times, Stanley Morison. It differs quite a bit from Times though and features sharper triangular serifs. Univers pairs well with it as neo-grotesques tend to pair well with serifs in the Transitional genre. The scrolling banner text (WE ARE MALDITOS!) is a bit obnoxious but I think that is entirely intentional.

Pitchfork

I’ve been a daily reader of Pitchfork since 2000, so it’s been interesting to watch the site evolve over the past 15+ years. Their last redesign was in 2011, so this has been a long overdue update.

The use of Klim Type Foundry’s Tiempos Headline and Tiempos Text is a welcome replacement of the default system fonts that Pitchfork have been using forever. The sans-serif, Walfork, is actually a customized version of GT Walsheim that Grilli Type created just for Pitchfork. Walfork features a single-story a and does away with the curvy tail on the y that helped give GT Walsheim so much personality. But I see how those features could draw too much attention and potentially be distracting.

There are a couple of small things about the redesign that bother me, such as the tiny type on the homepage (it’s been forever since I’ve seen 10px type used on the web) and the use of dumb quotes everywhere rather than smart quotes, but overall I really love how this turned out. The drop caps on the articles are a nice touch and the layout feels open and inviting with the prominent use of whitespace.

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 27th 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.

Nurture Digital

Abril Fatface, the high-contrast serif seen in this screenshot, is actually a free font available on Google Fonts. It’s part of a larger type family created by TypeTogether but only the fatface cut is available on Google Fonts. The contrast is so high that it only works at large sizes so it’s paired here with another member of the Abril family that works better at smaller sizes. Dalton Maag’s “Helvetica killer”, Aktiv Grotesk, rounds out the design.

Wrong Wrong

The type on the Wrong Wrong homepage feels a bit chaotic, with article headlines switching between a sans-serif and serif seemingly at random, in both uppercase and lowercase. The chaos is balanced by the article pages, which take on a more traditional typographic layout, with type set entirely in Tramuntana, a classy Renaissance inspired face. The sans-serif seen in the screenshot above is Dia, an odd grotesque from Schick Toikka that gets wider as the weights get heavier.

Techies

Futura is the most popular font on Typewolf, so I’m happy to point out this isn’t Futura used on the Techies site—it’s actually FF Super Grotesk, known as the “East German Futura.” It’s actually quite different from Futura when you look closely, with a much smaller x-height and slightly less geometric letterforms. Usually, it’s a typographic faux pas to letterspace lowercase type, but the spaced FF Super Grotesk in the titles helps give off a more dramatic appearance. The site only loads a single font file from the Tiempos Text family for the body text which is great for performance but inevitably leads to faux italics which you can spot throughout the articles.

Brand Nieuwe Conference

GT Sectra was chosen for this year’s Amsterdam BNConf identity because of the letterform’s resemblance to the sharp turns of Amsterdam’s historic canals as seen on a map. It’s a pretty clever concept and it’s always nice to hear the reasons behind typeface selection. Font Bureau’s Titling Gothic was chosen to pair with it because “it’s not a geometric sans”, which is most likely a stab at how ridiculously popular geometric sans-serifs are becoming. The navigation and footer text set on top of the background art is pretty unreadable in places but luckily the solid color hover effect solves the problem, although on touch devices, relying on a hover effect might not always be a good idea.

Préface

Drury Lane is a quirky typeface that the designer describes as “slightly clumsy yet eager to please.” The capital letters feel a tad heavier than the lowercase which gives it a wobbly feel. But it makes for a great branding face due to its uniqueness and feels like a great typeface choice for this French café.

Where to get Drury Lane →

City Observatory

I tend to have a preference for sites that make good use of color rather than sites that just stick with black text on a white background. I think color really makes type come alive and text can still be plenty legible even if it isn’t set on a pure white background. The City Observatory site is a great example of mixing type with color—I love the treatment of colored type set on a lightened color background. Commercial Type’s Publico is used as the sole typeface throughout the design but unfortunately, this is another site this month that doesn’t load any italic styles, so there are a few places where faux italics are popping up.

Where to get Publico →

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 28th 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.

MSDS Studio

I wasn’t even aware that a monospaced version of Century Schoolbook existed until I saw this site. At first, I just thought it was a version of Century Schoolbook with bad kerning due to the weird spacing around the uppercase i characters. Monospaced fonts often have spacing issues—especially noticeable around narrow letters—which can give them a crude appearance. Here, I think the crude look is intentional. The monospaced and proportional versions of Century Schoolbook create an interesting contrast, with the monospaced uppercase letters feeling like they were stamped out by a typewriter. The page titles are set in Compacta and fade in and out over top of the content, which is a nice touch.

NYC Pride

Leitura Display, from DSType, is a high contrast design with tight spacing, so it looks great set at large sizes for the headlines on the NYC Pride site. Avenir is used everywhere else and contrasts nicely due to its low stroke contrast. The line height on the text underneath the title on the homepage is set a little tight and the type set in uppercase would probably benefit from some added letterspacing, but overall the typography on this site is top notch.

Deborah Zoe Photography

Engravers is a popular typeface that I’ve seen a lot in print, but this is the first time I’ve seen it used as a web font. It naturally pairs well with Sweet Sans as both typefaces share similar squat, wide letterforms. In the places where Engravers spans more than a line of text, it starts to become a little hard to read due to its high contrast, but it makes up for that with the dramatic emotion it exudes. The beautiful script face Tangier is used sparingly for subheaders and adds a delicate touch to the design.

Andrea Mata

I love the contrast here between the large type set in Nocturno Display and the small type set in Caslon. Both typefaces belong to the Old Style genre, so they work well together, but the flared serifs of Nocturno are distinctive enough to make the typefaces still contrast with one another. The navigation is set in Nevis, a free font that shares a lot in common with Gotham. The kerning in Nevis isn’t great (“CONTACT” looks like “CONT ACT”), so the design may have been better off just sticking with Caslon and Nocturno.

Mindwork

Each psychological condition on the Mindwork site has a clever typographic treatment applied to it—the L in Loneliness is set apart from the rest of the letters and the D in Depression is rotated upside down to form a frowny face. Attempting this kind of cleverness can be dangerous as inevitably there will be a word that you can’t think of a good concept for, but I think the designer here was able to pull it off admirably. The uppercase type is all set in Galano Grotesque, a geometric sans from René Bieder. The body copy is set in Galaxie Copernicus with slight letterspacing added—usually it’s a typographic faux pas to letterspace lowercase but with the small amounts of copy set at a large size, I think it works okay.

Papazian

This is another site this month with letterspaced lowercase, although in this case it may not be intentional. If I had to guess, I would say the uppercase type had letterspacing added to make it more readable and then the lowercase body copy inherited that style inadvertently. Especially since there are sections where the letterspacing on the body copy is removed. But that nitpick aside, I really dig the type on this site. AW Conqueror Didot is a beautiful face with such dramatic stroke contrast that it almost feels like a stencil cut, but it’s usually not used for more than a few words, so it still remains legible. Gotham pairs perfectly with it as geometric sans-serifs always look good with serifs from the Modern genre.

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 29th 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.

Photoshop Etiquette

Bookmania, Mark Simonson’s Bookman revival, contains over 680 swash characters and you can see a nice handful of them used here on the Photoshop Etiquette site. The retro type perfectly complements the early-1960s evoking illustrations. Uppercase Futura is used as well, which helps with this whole vintage aesthetic. I’m glad the designer chose to set the body copy with Bookmania, rather than Futura, as it works well as a text face when set without the ornate swashes.

Ugmonk

Larish Neue is a distinctive serif that is full of quirks, making it an excellent choice as the main display face for the Ugmonk rebrand. Moderat, a clean geometric sans from Tightype, contrasts nicely with the asymmetrical shapes of Larish Neue. Both Larish Neue and Moderat are better suited for display usage, so the default system font Georgia is used for body copy. A more unique serif than Georgia probably could have been chosen but that would require loading in additional fonts for normal, italic, bold and bold italic which could make the site a little too webfont heavy.

Good Bytes

The chunky super weight of FF Bau is used for the large headlines here set in uppercase. A second typeface, Calibre, is used for the smaller uppercase headers, most likely because the super weight of FF Bau is too thick to remain legible at smaller sizes. The line length of the body copy set in Aperçu Mono expands with the width of the browser window, so on large screens it becomes a little difficult to read comfortably, but with the minimal amounts of copy used it isn’t too big of an issue.

Field Notes

The From Seed page on the Field Notes site features a showcase of vintage promotional booklets from the agricultural industry that clearly shows the roots of the iconic Field Notes typographic aesthetic which is based around Futura bold. It’s a great page to bookmark and revisit next time you are craving some vintage type inspiration. The new Field Notes site redesign pairs Century Schoolbook with Futura which is a fine choice as it perfectly matches their brand aesthetic and serifs in the Modern or Rational genre naturally pair well with geometric sans-serifs.

Pocket Penguins

Mrs Eaves is one of the first serifs I learned to identify early in my design career and has been a favorite of mine since. It contains beautiful ligatures which you can see on the st in the above screenshot. Fonts from Emigre are now available on Typekit so I imagine we’ll be seeing Mrs Eaves used a lot more on the web. The type on the Pocket Penguins site closely matches the type on their book covers, although the Futura on the book titles looks to be set a little tighter than on the site.

Collected Coffee

Fivethousand Fingers is one of my favorite studios as they always do amazing work with a strong focus on typography. Their latest project for Collected Coffee looks absolutely gorgeous and uses just a single typeface, Calluna. The vivid blue type really makes the design in my opinion—without it, the identity would just feel a little too stark and generic. Sometimes just adding a splash of color to type can make a huge difference.

Where to get Calluna →

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 30th 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.

AIGA Design Conference

Just a single monospaced family, Suisse Int’l Mono, is used on the 2016 AIGA Design Conference site, but they manage to get a lot of mileage out of it. When set in uppercase with wide tracking, the typeface loses some of its monospaced feel and comes across more like a traditional neo-grotesque. Type is set vertically in places to create even more typographic contrast. The split color layout adds boldness to the design, yet the type still remains legible.

Where to get Suisse Int’l Mono →

An Interesting Day

Larish Neue is a quirky serif from Radim Peško that contrasts starkly with Atlas Grotesk, a more traditional grotesque from Commercial Type. Both typefaces feature squat descenders which helps tie them together. The use of color is really great on this site as well—it shows that colored type on a colored background can still be perfectly readable.

Inside Intercom

The blog section of Intercom pulls in the use of Akkurat from the rest of the site but adds in the serif typefaces Tiempos Headline and Tiempos Text, which gives the blog more of a newspaper feel. I think they did an awesome job with this, but there are a few things worth mentioning. First, the line length on the articles is a little long, coming in around 100 characters, which is a bit over the 66 character “ideal.” Second, there are prominent faux italics throughout the articles, which shows that it’s always a good idea to load italic (and oftentimes bold and bold italic) styles whenever you are setting large amounts of body copy.

Oliving the Life

This is yet another site this month with excellent use of color. The serif Cheltenham exudes vintage warmth when set against the soft pastel backgrounds. Theinhardt balances it out with a more modern touch. The logo looks like real hand lettering but is actually set in Madina Script, which is an impressive accomplishment for a script face. Proper apostrophes are used throughout the site as well.

Fictive Kin

Fictive Kin use two typefaces from Grilli Type—the calligraphic serif GT Sectra and the rounded, monospaced GT Pressura Mono. Typically, a calligraphic serif would be used as a display face and a monospaced font would be used for auxiliary text, but this design takes the exact opposite approach—GT Pressura Mono is featured prominently as the main typeface, while GT Sectra is used sparingly for accents. It’s an interesting approach that makes the design feel fresh and unique. The multi-colored link underlines add a nice splash of color and keep the white-on-black homepage from feeling too stark.

Oak

The Oak site brings even more monospaced goodness to this month’s favorite sites with its use of Input Mono. Input Mono is known as an excellent programming font (it’s actually available as a free download to use privately in your coding app), but here it is used as the main text face. It reads surprisingly well for the short amounts of copy on the site and even the blog section, with its longer articles, still reads perfectly well. The bold weight of Klim Type Foundry’s Tiempos Headline adds a nice human touch that prevents the design from feeling too much like a computer terminal.

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 31st 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 July here.

Binary Cargo

Grad is a really nice serif from Mark Simonson that is available on Typekit, but for some reason just doesn’t seem to be used that much on the web. So it’s great to see it featured so prominently on the Binary Cargo site. It’s combined here with Colophon’s Aperçu and Aperçu Mono. The use of color is excellent and really helps make the type pop. My only nitpick with the site is the use of straight quotes rather than proper apostrophes, which you can see in the above screenshot.

Helms Workshop

Shift is unique for a slab serif in that the lighter weights feel like a typewriter face while the heavier weights take on the appearance of an Egyptian slab. The middle weights are used here, so it feels like something in between. The sans-serif Arquitecta is paired with Shift, set entirely in all caps. The type on the case study pages is set well with proper dashes and apostrophes, however, the paragraphs stretch to the full width of the browser window, which makes the line length a little long for comfortable reading on large screens.

Southbound 2016

This is my first time encountering the typeface Fabrik, so at first I thought there was something wrong with the font rendering on the site due to the way the bowls on the lowercase e and a are sliced off. But it turns out that design feature is intentional. It’s a strange effect that is pretty distracting, however, it is also memorable, which is sometimes what you want for display type. Simplon Mono, from Swiss Typefaces, is paired with it and works a little better for body copy.

Magpie

Normally I’m not a huge fan of type set on top of photos as it usually ends up becoming illegible unless the chosen photo is perfect. But for the most part, this site does an excellent job of ensuring enough contrast between the photos and type for the text to remain readable. I love the use of Hera Big—its quirky curves and prominent ball serifs make it perfect for a branding face. The body text, set in Avenir, has quite a bit of letterspacing applied to it. I’m not sure if that is intentional or just CSS inheritance gone awry.

Full Force Wolf Horse

Full Force Wolf Horse have pretty much the best name for a studio I’ve ever heard. The copywriting on the site is brilliant as well and plays off the whole wolf/horse thing—“Wolves hunt in packs. Horses also hunt in packs. Both animals are quality team players (and vicious killers).” MPI Sardis, a calligraphic sans-serif that is similar to Lydian, is used for the logo and section intros, while the rest of the type is set with Calibre. I think it would have been nice to see MPI Sardis used at least a little on the homepage as well to help tie it into the design more.

Anchor & Orbit

The Anchor & Orbit site is one of my favorite sites that I’ve featured on Typewolf in quite awhile. The type perfectly complements the mood set by the warm colors and simple line art. The headers use P22 Underground set in uppercase with generous letterspacing and Caslon is used for the larger headlines and body text. Old Style typefaces like Caslon almost always pair well with humanist sans-serifs like P22 Underground. Inconsolata, a monospaced font that is available for free on Google Fonts, is used for the small amounts of auxiliary text. The logo is set in Cotoris—I had thought the uppercase R was customized but it turns out it’s just using a stylistic alternate that is part of the font. Typefaces that include sets of alternate glyphs are always great choices for logos as they allow you to really customize the type for a unique look.

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 32nd 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 August here.

Kettle

FatFrank is a fat, blocky sans-serif from Dutch foundry Regular Bold Italic. Like most heavy faces, it contains tiny counters, so it works best when set at large sizes like it is here. Freight Sans is used for body copy and makes for a much more appropriate text face. Lacrima Senza, a vintage typewriter slab serif from Milieu Grotesque, is used for auxiliary text and contrasts nicely with the other two sans-serifs.

Christa Laib

Acta Headline is a display face, which means it was designed to be set at large sizes. It’s used for headlines here but also as a text face on the article pages. At text sizes, the stroke contrast is a little high and the spacing is a little too tight, so it’s not ideal for body copy. The Acta family does include a text version, however, that would entail loading additional fonts files which would add to the page weight. The body text is still set really well, with a perfect line length and line height, so it reads very nicely despite the fact that it’s using a display face. Pitch, a monospaced font from Klim Type Foundry, makes an appearance for dates and other small UI elements.

Dismissal Help

This site has a rather unique style for links—the linked text switches to Franklin Gothic in contrast to the surrounding text which is set in the serif Leitura News. Usually changing fonts in mid-sentence doesn’t work, however, in this case the x-heights match up perfectly, so the change feels fluid and seamless. It’s a nice touch that makes the type feel a bit more distinctive.

Maurizio Ilpiac Piacenza

Work Sans and Alegreya are arguably two of the best fonts on Google Fonts, so it’s nice to see the two coming together on Maurizio’s site. Work Sans has been blowing up lately and seems like it is heading towards overuse, however, Alegreya has been around for years and still feels under the radar. The huge headline type is set in the chunky, black weight of Work Sans and really shows off all the small details and quirks of the typeface.

Linecheck

Knockout, from Hoefler & Co., is an eclectic sans-serif family that is available in nine widths and four weights, with each style given a boxing-themed name such as Junior Flyweight. The Linecheck site makes excellent use of the varying widths by jumping between the condensed and extended styles, creating a lively design using only a single typeface family. When set in uppercase, Knockout remains legible down to some pretty tiny sizes—parts of the homepage are set at 10px and still read well. The paragraph type is set justified which produces mixed results—the margins look nice and even but the word spacing can feel a bit erratic at times.

Where to get Knockout →

Stephanie Gonot

Stephanie Gonot’s photography features bold, saturated colors and the design of her site follows through with that aesthetic. Trio Grotesk has soft, rounded corners with wide proportions and generous spacing which gives it a sense of playfulness that complements the vibrant colors. The client list runs into a common layout issue—when the list items wrap onto two lines, they appear as separate items. For example, when Bloomberg Businessweek wraps to two lines, Bloomberg and Businessweek look like different clients. The solution to this is to tighten the line height while increasing the padding between items. Although in this situation, that may not be ideal as the list would no longer have vertical spacing that is consistent with the other boxes. This shows there are always compromises in typography.

Where to get Trio 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.

The recent relaunch of Google Fonts prompted me to revisit their library with the hopes of uncovering some new and interesting typeface pairings. These are my five favorites that I discovered.

This collection focuses on newer and less commonly used typefaces, rather than Google Fonts staples like Open Sans and Merriweather. Each of these five pairings includes a headline face that should be used at large sizes and a body face with a large x-height, low contrast and included italics. I also write about why these typefaces work well together, so it is more than just a collection of pretty fonts.

1) Cormorant Garamond & Proza Libre

The Cormorant family is a more lavish and extravagant take on the classic Garamond types, created with display usage in mind. Cormorant contains “scandalously small counters”, so it’s not recommended as a text face. The Cormorant Garamond variation includes larger counters but still works best in a display setting. Proza Libre is a humanist sans-serif that was specially designed to render well on screens, so it’s an ideal partner for Cormorant. Humanist sans-serifs naturally pair well with Old Style serifs and both designs have a strong calligraphic feel that ties them together.

2) Libre Franklin & Libre Baskerville

American Gothics like Franklin Gothic and Transitional faces like Baskerville have been paired together for over 100 years, so these libre revivals make for a classic combination. Both were designed by Pablo Impallari from the ground up to be optimized for use on screen. Libre Baskerville reads well and Libre Franklin contains an impressive nine weights which make it versatile as a headline face. This is a perfect combination for evoking an established and traditional feel.

3) Trirong & Rubik

Rubik is far from a classic book face with its heavyset geometric skeleton and rounded corners, but it actually reads fairly well for body text—the x-height is large, the letterforms render clearly and it includes normal, italic, bold and bold italic styles. I wouldn’t set a book with it, but it can work for short blocks of text on the web. Trirong shares a similar geometric skeleton with a vertical axis and wide proportions, so it feels harmonious next to Rubik. The italic of Trirong is a bit more distinctive than the roman, so it may be the better option for display usage.

4) Work Sans & Taviraj

Work Sans does not contain italics, unfortunately, so that pretty much rules it out for any kind of serious text setting. But it contains plenty of character and personality to shine as a headline face, especially in the heavier weights. Taviraj, from Thai foundry Cadson Demak, is better suited as a text face and its wide proportions play well with the wide spacing in Work Sans. The almost teardrop terminals on the a and g add a friendly touch that plays off the quirky letterforms of Work Sans.

5) Eczar & Gentium Basic

Pairing two serif typefaces is often considered bad practice, but I think this is a case where we can get away with breaking the rules of typography. Eczar and Gentium Basic share an extremely similar structure, yet they are different enough to still contrast with one another. Notice how the shapes of the letterforms follow the same basic skeleton—the angle of the beak of the e is even similar. Yet each typeface plays to different strengths—the shapes of Gentium Basic are simpler which make it clearer at small sizes; Eczar is more complex with dramatic calligraphic features that are more noticeable at large sizes. Together, they perfectly complement each other and allow for much more expressive typography than if you were to use either of the typefaces alone.

If you dig through the Google Fonts library, I’m sure you can find many more perfect pairs like I found above. Be sure to check out my curated collection of Google Fonts to discover more of my favorite open-source typefaces.

This is the 33rd 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 September here.

The Vision Mission

Noe Display has been popular as of late but this is the first time I’ve seen the beautiful italic cut used. The sharp, triangular serifs are still present in the italic but are slightly toned down to give the letters more of a flowing, cursive look. The body text is set in Colophon’s open-source Space Mono. Normally, monospaced fonts don’t read well for body copy, however, the narrow line length here keeps things easily readable.

Turncoats

Grilli Type’s calligraphic serif GT Sectra is the sole type family used on the Turncoats site, with the heavy, super weight used for the large headers. The paragraphs have an ideal line height, however, the line height in the headers looks to be a little too much, with some pretty big gaps between the lines. Large headers usually need much tighter line spacing and can sometimes even need to be set with negative leading. A gradient background that reads well with both white text and black text set on top is always a challenge to design, but when successful like this, creates a dramatic composition.

Where to get GT Sectra →

Klépierre

The headlines on this site are actually set with negative leading, meaning the line height is less than 1.0. This keeps the space between lines nice and tight, but can lead to ascenders and descenders colliding (which unfortunately occurs in the main headline at the top of the page). Sometimes playing with the line wraps can help avoid the collisions, but other times it’s unavoidable when the line height is this tight. Lyon Display is used throughout, including the small amounts of paragraph text. For a display face, it still reads pretty well at smaller sizes.

Where to get Lyon Display →

The Creative Independent

The Creative Independent is one of the few sites I’ve featured on Typewolf that relies entirely on system fonts, using only Georgia and Courier. It’s still common to see sites use Georgia for body text, but here Georgia is used as a display face as well. Using standard fonts like these typically leads to a bland, generic design, however, the dramatic use of color gives the type new life. Text doesn’t need to be set in black on a white background to be readable, which this site perfectly demonstrates.

The Wing

The easiest way to ensure harmony between typefaces is to go with a superfamily. Bianco Serif shares a similar skeleton with Bianco Sans, but with added wedge serifs. The letterforms are different enough to contrast with one another, but the basic shapes still harmonize. The compressed cut of Bureau Grot is used sparingly for the headers and differs enough from the other two typefaces to add even further typographic contrast.

Anyways

I’m really impressed by the clever type pairing on the Anyways site. Fakt is a grotesque that includes a geometric-style single-story a as a stylistic alternate, which is enabled here. It’s combined with the seldom used Infant version of Plantin, which includes a single-story a as well. The two single-story a’s create an immediate harmony between the two typefaces. A geometric sans with a single-story a, such as Futura, wouldn’t have paired as well with Plantin, so using a grotesque with a stylistic alternate was a pretty clever solution.

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 34th 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.

Playful

I almost didn’t feature this site on Typewolf because the site’s typography ranges from borderline unreadable to completely unreadable due to the fact that all the type is set on top of photos. That being said, I still really love this design. I think it could be argued that the bold, colorful photography is meant to overpower the type, as that is what this agency specializes in. Either way, it makes a huge visual impact. Ed Benguiat’s gorgeous ITC Tiffany is used throughout in medium and heavy weights.

Where to get ITC Tiffany →

LRNCE

I’ve noticed that the condensed cuts of Garamond have been making a bit of a comeback lately. Before switching over to Myriad in the early 2000s, Apple had been using a customized version of Garamond condensed as their main branding face since the early 1980s. I think this gives the typeface a retro charm that is appealing to designers who fondly recall the vintage Apple ads. This site definitely evokes that retro feeling, while the addition of Radim Peško’s Fugue Mono adds a modern touch to the design.

True Photo Journal

Folio is a neo-grotesque that was released at the same time as Helvetica and Univers but never quite reached the same level of success. It’s used as the sole typeface on the True Photo Journal site, where it immediately appears distinctive from the overused Helvetica—the x-height is smaller and the letterforms are less even, which gives the typeface a slightly quirky feel that is more akin to the early grotesques that predated Helvetica.

Where to get Folio →

Leeza Pritychenko

Leeza Pritychenko’s site could probably be classified as brutalist—it looks intentionally raw and unpolished. The use of Nimbus Sans mixed mid-sentence with Romana looks harsh, but the x-heights actually match up pretty well and the copy is set with proper apostrophes and dashes, so the typography really isn’t all that brutal. This whole aesthetic may turn some people off, but the design is unique and about as far from a Bootstrap template as possible.

Sam Dallyn

Akkurat is a sans-serif from Lineto that feels like a mix between DIN and Helvetica—the letter shapes are uniform but the tail on the lowercase l and the double-story g make it feel less static compared to typical geometric sans and neo-grotesque designs. Likewise, Sam Dallyn’s site is clean and stark but features a creative use of a grid that zigzags down the page, which gives it a similar dynamic quality. The paragraphs on the about page are set with indents rather than line breaks, which adds a more print-like feel to the layout.

Where to get Akkurat →

Kinfolk

The recent Kinfolk redesign utilizes two contemporary typefaces from Klim Type Foundry—Domaine Text and Feijoa—combined with a classic Futura-inspired geometric sans, Twentieth Century. Domaine Text is the same typeface I use for body text on Typewolf, but on the Kinfolk site it is used as a display face for headlines rather than as a text face. For a text face, it still has quite a bit of character when set at large sizes. The type on the article pages is set well with a narrow line length that is easy to read, recalling a magazine layout more so than a typical online article.

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.