<![CDATA[Typewolf]]> Blog https://www.typewolf.com/blog The Typewolf blog takes a deep dive into the latest in web typography en Jeremiah Shoaf Copyright 2017 2017-07-28T03:52:41-04:00 <![CDATA[The Typographic Details Behind Typewolf’s Favorite Sites of June 2017]]> https://www.typewolf.com/blog/favorite-sites-of-june-2017 https://www.typewolf.com/blog/favorite-sites-of-june-2017 This is the 41st 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.

Pavel Kedich

Pavel Kedich

Morion is a quirky serif that combines razor-sharp terminals with a decorative Art Nouveau influence. It’s paired here with the sans-serif Fabrik, used in navigation and captions, which adds a contemporary touch to the design. The typographic grid on this site is unique in that the headlines are aligned with the paragraph indent rather than flush left. This helps break up the grid and makes the layout feel a little more dynamic and engaging.


B4XVI

B4XVI

Using extended widths of typefaces is starting to become a hallmark of the brutalist design trend. Here, an extended cut of Helvetica Neue is mixed mid-sentence with Perpetua Titling. The cap heights of both typefaces match up nicely, so the effect isn’t too jarring.


The Ringer’s 2017 NBA Draft Guide

The Ringer’s 2017 NBA Draft Guide

Timmons NY is a condensed sans-serif that features angular corners in place of curves. This style of typeface always gives off a sporty, athletic vibe—the lack of curves feels masculine and the condensed proportions would make a last name fit well on the back of a jersey. So it’s definitely an appropriate typeface choice for this NBA draft guide. The tall and narrow structure of the letterforms makes reading difficult, so the typeface is used sparingly with GT Pressura Mono making up the bulk of the text on the site.


Restate Media

Restate Media

I love this effect of combining two contrasting styles of design. Space Mono feels futuristic, with the dashed line dividers further adding to the techy, computer terminal aesthetic. Caslon feels classy and refined. Together these two styles create a dissonance that feels right at home with the sarcastic tone of the site’s copy.


A Constellation

A Constellation

Orpheus is a serif typeface available on Typekit that sees little use compared to other more popular serifs on the service. It makes for a distinctive headline face on this style blog. It’s paired with Garamond for body text and P22 Underground for navigational elements.

Almost all of the type on this site is center aligned, which originates with the logo (set in Albertus). Once you decide to center align a logo, then it feels natural to center align the navigation as well. Then headlines start to look better centered. And on and on, all the way down the page. Fortunately, the centering stops with the body text in the longer articles, which switches to a standard flush left setting. Centered text looks elegant but can become tiresome to read when used in longer form content. I think this site strikes a nice balance.


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.

]]>
2017-07-03T00:00:00-04:00
<![CDATA[The Typographic Details Behind Typewolf’s Favorite Sites of May 2017]]> https://www.typewolf.com/blog/favorite-sites-of-may-2017 https://www.typewolf.com/blog/favorite-sites-of-may-2017 This is the 40th 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.

Twin Pickles

Twin Pickles

Hawthorn is a typeface that falls squarely in the “evil serif” genre with its razor-sharp, blade-like letterforms. It’s the only font used here and is strong enough on its own to create a solid brand with not much else needed. Rather than a pure white background, the type is set on a lightly tinted green background which helps create cohesion with the bright green used in the logo.


The Hill

The Hill

The Hill uses Commercial Type’s Graphik almost exclusively throughout their site. Hoefler & Co.’s Chronicle Display makes a brief appearance in the footer, however, that appears to be the only place it is used. The logo looks like it is set in Chronicle Display (or something very similar), so it may have been nice to bring the serif typeface into the design a bit more. That would help to create a little more unity between the logo and the rest of the type on the site.


The Pudding

The Pudding

A few months ago, I wrote about how Canela, a typeface that isn’t quite a serif and isn’t quite a sans-serif, has been blowing up lately. Since then, it’s continued to become even more popular with four more sites on Typewolf using it. It’s paired here with the serif Publico and sans-serif Atlas Grotesk—all from Commercial Type. The type on this site is unique in that there isn’t really a consistent template used between the articles. The content focuses on data visualization and each article seems to be individually art directed to best match the visuals. Some of the pages even have their own unique type choices, using fonts from both Google Fonts and H&Co.


Romance Journal

Romance Journal

High-contrast sans-serifs are making a comeback and Optima is considered a classic of the genre. It works nicely here with the subdued photography to help create a solemn mood. An extended cut of GT America is set in uppercase for the subheaders—usually it’s standard practice to add letterspacing to uppercase type, but the uppercase here actually has slightly negative letterspacing which is odd. I imagine that the font is already so wide that a tighter setting just felt more appropriate.


Man Repeller

Man Repeller

The Man Repeller redesign features bright colors combined with elegant typography. A condensed style of Chronicle Display is used for the headlines—condensed faces always work well for headlines as they allow more words to fit comfortably per line. Knockout is used for the logo as well as subheaders and auxiliary text. As much as I love the typography, I think the body text suffers from a few flaws—faux italics are used, the line length is a little too wide and there is an unusually large gap between paragraphs which breaks up the reading flow.


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.

]]>
2017-06-01T00:00:00-04:00
<![CDATA[The Typographic Details Behind Typewolf’s Favorite Sites of April 2017]]> https://www.typewolf.com/blog/favorite-sites-of-april-2017 https://www.typewolf.com/blog/favorite-sites-of-april-2017 This is the 39th 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.

Story

Story

Caxton is one of those typefaces that I like to describe as evil—something about its heavy, concave serifs makes it feel rather forbidding. It’s balanced here by the warm colors which make the design feel a bit more open and inviting. The headers using Graphik are set tightly with negative letterspacing, a treatment that tends to give neo-grotesques more of a retro-1970s feel.


Increment

Increment

Increment is a new publication from Stripe with gorgeous illustrations and beautifully-set typography. The headlines are set in Px Grotesk, a unique neo-grotesque that features abrupt, right angles. The body text, using Tiempos Text, is set with obvious attention to detail—proper dashes, apostrophes and quotation marks are used and they even implement hanging quotes on the blockquotes on this page.


Santa Fe Institute

Santa Fe Institute

I think high-contrast, calligraphic sans-serifs like Chap are going to be the next big trend in type. They seem to be gaining in popularity and this style of typeface feels so much fresher than the quotidian neo-grotesques that dominate design at the moment. I love the type on this site but I’m not too sure about the pairing of Chap with DIN. Sometimes pairing two sans-serifs together can work, however, in this case, the aesthetic of the two typefaces doesn’t really match. DIN tends to feel modern and techy, while Chap has more of an organic, human feel. Chap actually reads pretty well as a text face, so perhaps they could have gotten away with using a single typeface family throughout rather than introducing a second sans-serif.


XXXI

XXXI

The XXXI site uses a single type family and an innovative technique where different fonts are loaded depending on the screen width. The expanded width of GT America is loaded on desktops, but on smaller screen sizes, the compressed width is loaded. This technique makes more efficient use of the screen real estate available on different device sizes. In the future, this technique will be accomplished using variable fonts, but for now this is a pretty cool solution and hopefully a preview of what we’ll see more of in the coming years.


wildness

wildness

Cormorant is a newish family on Google Fonts, so it hasn’t really spread across the web too much. It was designed as a display face and is described as having “scandalously small counters.” This makes it a poor choice for body copy as small counters tend to fill in at text sizes. However, the Cormorant family is available in several variations and the version used here, Cormorant Garamond, was designed with slightly larger counters and is thus more suitable as a text face. The body text here actually reads pretty well. The line height is set with generous spacing which feels appropriate for a literary journal, as open spacing slows down reading and gives type more of a poetic feel.


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.

]]>
2017-05-03T00:00:00-04:00
<![CDATA[The Typographic Details Behind Typewolf’s Favorite Sites of March 2017]]> https://www.typewolf.com/blog/favorite-sites-of-march-2017 https://www.typewolf.com/blog/favorite-sites-of-march-2017 This is the 38th 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.

Dallas Pierce Quintero

Dallas Pierce Quintero

Times New Roman has been experiencing a bit of a renaissance on the web —it went from being a boring, default choice to a fashionable typeface over the span of just a few years. Life, the typeface used here, shares a very similar aesthetic with Times but differs in a few small details—notice the ball terminal on the ear of the g and a more calligraphic r. I love when designs appear to be going after a trendy look but differ in the subtle details. Recta, the sans-serif used here, fits that definition as well. It feels like a contemporary neo-grotesque/geometric sans but actually has a lot more history to it as it came out in 1958, right after Helvetica.


The Bureau of Investigative Journalism

The Bureau of Investigative Journalism

This site is probably on the upper limit of what’s acceptable as far as using too many fonts—I count ten individual font files being downloaded—but the type is gorgeous. The lack of banner ads really gives the type room to breath, compared to most news sites. Tiempos, a Times-inspired contemporary serif from Klim Type Foundry, is used in both the text and display versions. Bebas Neue, the condensed sans used in the headlines, is a free font but one that you really don’t see used as much as it’s not on Google Fonts. Grilli Type’s GT America makes an appearance as well, adding to the font count. But despite the number of fonts used, the design still manages to feel cohesive.


For Good Measure

For Good Measure

Sofia is a Futura-esque geometric sans available on Typekit that is starting to feel a bit overused. However, the condensed styles are used here which immediately makes the design feel fresh. Going with a less commonly used width or weight is a good trick to make your typography feel a little more distinctive.


Shotview

Shotview

Helvetica Neue is a huge family available in a wide range of widths and weights, however, we almost always just see the standard styles used on the web, as that is what is commonly available as a default system font. The extended cut is used here—it’s not the most readable font but the text on the site is pretty minimal. The serif Weiss is paired with it, set entirely in uppercase. Weiss is unique in that it features a top heavy s that almost feels like it is upside down.


Offscreen

Offscreen

When I first saw the recently redesigned Offscreen, I felt a little disappointed in the type choice. Going with a single typeface—and a neo-grotesque at that—felt a little bland. However, the design has since really grown on me. Acumin has a simple, plain elegance to it and the more I look at it, the more I notice little peculiarities that make it differ from typical neo-grotesques such as the stroke on the J  that terminates vertically rather than horizontally. Apparently, the typeface worked really well for the constraints of printing in a compact magazine format as well.


Maisonette

Maisonette

In the almost four years of running Typewolf, I don’t think I have ever seen a new typeface blow up as quickly as Canela has. Since its release in 2016, it’s been featured ten times on Typewolf (and I have received many, many other site submissions using it). It’s a beautiful typeface that fits somewhere between a serif and a sans-serif design. It really seems to have struck a chord with designers at the moment. As Canela was created as a display face, Plantin is paired with it here for body text. The addition of GT Walsheim adds a playful touch which keeps the design from looking too serious, which feels appropriate for a children’s brand.


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.

]]>
2017-04-05T00:00:00-04:00
<![CDATA[The Typographic Details Behind Typewolf’s Favorite Sites of February 2017]]> https://www.typewolf.com/blog/favorite-sites-of-february-2017 https://www.typewolf.com/blog/favorite-sites-of-february-2017 This is the 37th 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.

Healthyish

Healthyish

The Healthyish site combines two of the biggest trends in type at the moment—chunky, 1970s-evoking serifs and geometric sans-serifs. The fact that it’s used on a food/cooking site shows that this style is breaking through into the mainstream. ITC Grouch is set super tight with negative letterspacing—so tight that the letters are actually touching—which adds to that 1970s retro feel. Futura is paired with it while the open-source Crimson Text is used for body copy.


Typographics 2017

Typographics 2017

Each year, the site for the annual Typographics conference tries to do something unique with type and the latest iteration is no exception. Type Supply’s Ohm is set flickering and flashing to play off the typeface’s neon sign concept. One interesting thing about the site is that the headers set in Ohm swap out to a “dotted” style of Graphik on smaller screens, presumably because it’s easier to read when set small, yet still works with the flashing sign concept.


Serra

Serra (NSFW)

For a company that specializes in pot and pot accessories, Serra has surprisingly classy branding. The calligraphic sans Lydian is set entirely in uppercase and the geometric sans Neusa pairs very nicely with it as both share similar condensed proportions. However, Neusa is also used for body text where it doesn’t work quite as well—the body text inherits the letterspacing from the uppercase styles and feels a little awkward to read due to the wide spacing.


Flinders Hotel

Flinders Hotel

ITC Lubalin Graph is a fairly popular slab serif font in the print world but this is the first time I’ve seen it used on the web. The design is essentially the same as ITC Avant Garde Gothic but with added slab serifs, so it pairs well with other geometric sans-serifs like Proxima Nova. This is another site this month that makes the typographic faux pas of letterspacing lowercase text—the small paragraphs of Proxima Nova look like they are inheriting the letterspaced styles from the uppercase. Uppercase type usually reads better with increased letterspacing but lowercase type almost never does.


October

October

October is a new spinoff of Pitchfork that focuses on beer culture rather than music. It was developed by the same creative team behind Pitchfork, which shows, as it definitely shares a related aesthetic with previous projects of theirs. The serif Romana is used for headlines (which is the same font I use for the Typewolf logo) and the body text is set in Akkurat. Overall, I really love the type, but this wouldn’t be Typewolf if I didn’t point out the improper apostrophes used in the headlines, which you can see in the screenshot above.


Brand New

Brand New

I first saw the Brand New redesign mentioned on Designer News, where the almost universal reaction was negative. I was kind of surprised because I really dig the new look—I think they did something bold and unconventional with the type, and a site that is entirely about branding should have a strong brand.

I love the use of H&Co’s Operator—it’s a humanist design that was inspired by typewriter fonts but is actually proportional rather than fixed width. It’s such an unusual font that it will really contrast with anything, but here they are pairing it with Mercury, a classic serif from the H&Co catalog. I would have loved to see the italic styles of Operator used, as they take on a quirky cursive form which is rare for typewriter-inspired fonts. But the type here is probably distinctive enough as is. I applaud Armin and Bryony for doing something different and not just slapping a geometric sans on the site and calling it a day.


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.

]]>
2017-03-02T00:00:00-05:00
<![CDATA[The Typographic Details Behind Typewolf’s Favorite Sites of January 2017]]> https://www.typewolf.com/blog/favorite-sites-of-january-2017 https://www.typewolf.com/blog/favorite-sites-of-january-2017 This is the 36th 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.

Purchase College Graphic Design BFA Program

Purchase College Graphic Design BFA Program

Some people will probably find it ironic that the site for a graphic design BFA program uses lowly Arial as its sole typeface. I’m not sure if they are purposefully using it in an ironic manner or if they just wanted a fast loading site without having to deal with web fonts, but the type choice actually feels pretty fresh. Arial seems to be used way less often than Helvetica these days, so it comes across as much more distinctive, especially at display sizes. The terminals in Arial are angled rather than straight like in Helvetica, so it recalls older grotesques like Akzidenz Grotesk and Monotype Grotesque more so than neo-grotesques.


Xavier Hufkens

Xavier Hufkens

This is another site this month that uses a single typeface throughout the entire design. Bell is a Transitional serif from the eighteenth century that features a beautiful italic which you can see used for the artwork titles in the headlines. The numbers in Bell are rather ornate and are set at three-quarters of the cap height, which makes them almost feel like small caps. There is no bold weight used on this site which shows it’s possible to get sufficient contrast using only roman and italic.


Matthew Boblet

Matthew Boblet

The flashing and flickering type on Matthew Boblet’s site isn’t meant to be read as much as it’s meant to make a purely visceral impression. The logo is set with Wilhelm Klingspor Gotisch, an elaborate blackletter face, which combined with Romana, feels especially evil. An outlined cut of Eurostile is set with a soft glow, which adds in a dark, sci-fi sort of vibe. The design feels more like an art installation than a website and perfectly demonstrates the emotional impact that typography can create.


The Design Office

The Design Office

The Design Office site feels like it is stepping outside of current trends and doing its own thing. The grid is unusual, with none of the elements feeling confined to neat columns. The page titles are set in a fixed position in the center of the layout with the other text floating on top. The type choices are pretty unique as well, using two of the less-trendy fonts from the Colophon catalog—the serif Archive and sans-serif Basis Grotesque.


The Avery Review

The Avery Review

As much as I love this site, I have to say that the typography is more creative and engaging than it is functional. The article pages are set with a line length that expands with the browser window, creating paragraphs that are too wide to read comfortably and the first-line paragraph indents are so unusually large that they become distracting. Maria isn’t ideal as a text face as it doesn’t contain italics and the author bios are set entirely in uppercase Perpetua Titling, which becomes difficult to read for anything that spans more than one line. That being said, I still really dig the general aesthetic and think the designers did a great job of creating something unique and memorable.


MailChimp 2016 Annual Report

MailChimp 2016 Annual Report

MailChimp went with a fun, 80s-inspired theme for their 2016 annual report and I think their type choices perfectly complement this look. Cooper Black is the quintessential retro font that brings to mind the late 1970s and early 1980s and Grilli Type’s GT Walsheim pairs surprisingly well with it. The oversized dots on GT Walsheim’s i’s play off the bubbly, rounded shapes of Cooper Black, while the curvy tails on GT Walsheim’s lowercase g and y always make me think of smiley faces, which further adds to the playfulness of this design.


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.

]]>
2017-02-02T00:00:00-05:00
<![CDATA[The Typographic Details Behind Typewolf’s Favorite Sites of December 2016]]> https://www.typewolf.com/blog/favorite-sites-of-december-2016 https://www.typewolf.com/blog/favorite-sites-of-december-2016 This is the 35th 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.

Foreign Policy

Foreign Policy

The type on the Foreign Policy site is a disparate mishmash of different aesthetics—Caslon is classy and dignified, Suisse Int’l is clean and modern, while Input Mono is contemporary and techy. There is also handwritten scribbled text scattered throughout the design. On most sites this would be too much randomness to take in, however, in this case, I think it perfectly complements the studio’s colorful design work, which is equally all over the place, never sticking to a single style.


CIRQ

CIRQ

Champion Gothic is a sans-serif from Hoefler & Co. that was inspired by late nineteenth-century woodtype. This style of woodtype predates the idea of a cohesive type family—instead, each different weight and width would feel more like a unique, one-off design. Therefore, each width of Champion Gothic feels like the “normal” width, rather than a condensed or extended variation. The CIRQ site takes this concept and mixes the various widths of Champion Gothic mid-word, which creates a unique, jarring effect that grabs the reader’s attention. Egyptienne, a slab serif from Adrian Frutiger, is combined with Champion Gothic and used in a more straightforward manner, balancing out the quirky, irregular-shaped display type.


We Are Not Sisters

We Are Not Sisters

Maria is a mysterious sans-serif that is hard to dig up much information on. It looks a lot like Helvetica or Akzidenz Grotesk, but the uppercase design takes on a more geometric appearance. It’s combined here with Times New Roman—the brutalist font of choice—and often mixed with it in mid-sentence. The bright red text seems like it should be harsh on the eyes, but it’s actually quite readable on the warm, beige background.


Ward Heirwegh

Ward Heirwegh

This is another site this month that could possibly be described as brutalist. But this time it’s not using the brutalist-approved Times New Roman; instead, it features Nimbus Roman, a Times look-alike. As with the previous site, this design uses colors that could be described as “harsh” (the blue on green, specifically), but the text is still perfectly readable. Bold colors like these immediately create memorable brands, whether you want to call it brutalist or otherwise. An extended width of Univers is used for the navigation and prevents the serif from completely dominating the design.


Milk Street

Milk Street

I wouldn’t describe this design as brutalist or ultra-hip like the above sites—it just features solid typography that is beautifully executed (although the drop cap in the screenshot above looks a little undersized). The monospaced version of Klim’s Founders Grotesk and a condensed cut of DIN are set entirely in uppercase throughout, while the serif Minion is used for headlines and body text. Minion always works well as a classic serif choice—it has the Old Style appearance of Garamond but with more contemporary features such as a larger x-height and more open apertures. Freight Sans is used on the button labels, which may be an unnecessary additional typeface, as there are already three other typefaces used. But overall, this type looks gorgeous and refined and perfect for the Milk Street brand.


The Outline

The Outline

The Outline is one of my favorite sites to come along in awhile from a typographic perspective. The type looks more like a designer’s portfolio site than a typical online publication (although seeing the Cadillac advertisements everywhere keeps throwing me off—is this really their target audience?). There are four different typefaces used and each one is used purposefully. The evil-looking serif Eksell Display and the quirky sans-serif Maria serve as the main branding typefaces. Both typefaces are memorable but neither work well at small sizes—Eksell Display has too much stroke contrast while the apertures on Maria are way too tight. Portrait is introduced as a companion serif to Eksell and features similar sharp, triangular serifs but with way less stroke contrast. Likewise, Fakt is used as a companion sans to Maria and works better for body text with its more open apertures. Using four typefaces allows the best of both worlds—distinctive display type while still having text that functions adequately in non-display settings.


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.

]]>
2017-01-02T00:00:00-05:00
<![CDATA[The Typographic Details Behind Typewolf’s Favorite Sites of November 2016]]> https://www.typewolf.com/blog/favorite-sites-of-november-2016 https://www.typewolf.com/blog/favorite-sites-of-november-2016 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

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.


LRNCE

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

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.


Leeza Pritychenko

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

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.


Kinfolk

Kinfolk

The recent Kinfolk redesign utilizes two contemporary typefaces from Klim Type FoundryDomaine 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.

]]>
2016-12-01T00:00:00-05:00
<![CDATA[The Typographic Details Behind Typewolf’s Favorite Sites of October 2016]]> https://www.typewolf.com/blog/favorite-sites-of-october-2016 https://www.typewolf.com/blog/favorite-sites-of-october-2016 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

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

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.


Klépierre

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.


The Creative Independent

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 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

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.

]]>
2016-11-02T00:00:00-04:00
<![CDATA[Five Fresh Headline & Body Text Pairings on Google Fonts]]> https://www.typewolf.com/blog/google-fonts-combinations https://www.typewolf.com/blog/google-fonts-combinations 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.

Cormorant Garamond & Proza Libre

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.


Libre Franklin & Libre Baskerville

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.


Trirong & Rubik

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.


Work Sans & Taviraj

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.


Eczar & Gentium Basic

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.

]]>
2016-10-12T00:00:00-04:00