<![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-01-16T10:12:44-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
<![CDATA[The Typographic Details Behind Typewolf’s Favorite Sites of September 2016]]> https://www.typewolf.com/blog/favorite-sites-of-september-2016 https://www.typewolf.com/blog/favorite-sites-of-september-2016 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

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

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

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

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

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.


Stephanie Gonot

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.


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

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

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

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

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

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

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.

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

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.


An Interesting Day

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

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

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

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

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.

]]>
2016-08-03T00:00:00-04:00
<![CDATA[The Typographic Details Behind Typewolf’s Favorite Sites of June 2016]]> https://www.typewolf.com/blog/favorite-sites-of-june-2016 https://www.typewolf.com/blog/favorite-sites-of-june-2016 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

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

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

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

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

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

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.


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

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

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

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

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

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

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.

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

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

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

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

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

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


City Observatory

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.


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-05-03T00:00:00-04:00