<![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 2018 2018-01-22T10:48:31-05:00 <![CDATA[The Typographic Details Behind Typewolf’s Favorite Sites of December 2017]]> https://www.typewolf.com/blog/favorite-sites-of-december-2017 https://www.typewolf.com/blog/favorite-sites-of-december-2017 This is the 47th 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.

Designer That Reads

Designer That Reads

This site is set entirely in Romana with everything center-aligned all the way down the page. The designer implements a super simple trick here that has a huge impact on the site’s typography—rather than letting text flow freely, manual line breaks (<br>) are inserted to break up the lines into readable chunks. This prevents awkward line wrapping and words floating by themselves. I definitely wouldn’t recommend using this technique on paragraphs, however, for large display type like this (and especially for centered text), it can be a nice touch that improves the flow of reading.


Civilization

Civilization

Larish Neue is a chunky serif with thick stems and heavy, bracketed serifs. Its quirky letter shapes pair nicely with the eccentric forms of Gill Sans, especially with the letter a which feels top-heavy in both typefaces. The quotes here are set well with proper quotation marks and em dashes, although the uppercase text below the quote attribution may benefit from a slight amount of added letterspacing.


Pre_Invent

Pre_Invent

Tacite is a distinctive typeface with long, spindly serifs that give off an evil sort of vibe. All of the type here is set tightly, with the paragraphs using a line height of just 1.2, which is much lower than the oft-recommended value of 1.5. This tightness gives the layout an uneasy, claustrophobic feeling which may very well be what the designers are intending to evoke.


Holiday Correspondence Aid

Holiday Correspondence Aid

A wide cut of the sans-serif Druk is paired here with an italic cut of the Old Style serif Quarto. Mixing typefaces in mid-sentence is a challenge, but the designers here did an admirable job. The x-height of Quarto matches up perfectly to the cap height of Druk, which creates an even texture to the paragraph.


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. Join my monthly email update list if you’d like to be notified when it is published.

Learn How to Get Truly Gorgeous Typography

I’ve distilled everything I’ve learned from writing these articles over the last four years into a single, definitive resource—the Flawless Typography Checklist. Read it straight through as a complete master course and then continue to use the checklist as a tool on every design project to ensure your type will always be flawless.

Email 03

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

Sweet Studio

Sweet Studio

Big Caslon, a Caslon revival from Matthew Carter, was inspired by the display faces of William Caslon and is intended for use at large sizes only due to its high stroke contrast. It’s used for headlines here paired with the grotesque FF Bau for body copy. The logo text is offset at an angle onto two lines, which plays off the angular, rotating shapes used throughout the rest of the design.


Trstn

Trstn

Times New Roman is available in condensed styles, but that isn’t what is used here. Instead, this site breaks one of the traditional rules of typography: don’t artificially distort type. The Times font used here is simply the default system font, set in bold with negative letterspacing and then stretched with CSS using scaleY. The use of Arial is distorted as well, this time being squished down. The letters look completely unnatural and deformed, but I thought it was an interesting technique to get a unique look using only system fonts.


Witten Kitchen

Witten Kitchen

Apart from the body text set in FF Mark, nearly all of the type on this site is set in uppercase. It’s common to see uppercase text used for navigation, however, setting headlines in uppercase is more rare, as it can make reading more difficult. In this case, I think the headlines are short enough to get away with this treatment without impacting the readability too much. The uppercase headlines also create a nice rectangular shape that makes the gradient overlay effect on the text more prominent, which is a key part of the site’s branding, as it mirrors the gradient in the logo. The distinctive logo is using Commercial Type’s gorgeous Dala Prisma face, while the headlines are using Austin, also from Commercial Type.


Kickstarter

Kickstarter

My first impression of the Kickstarter redesign was that it was a little bland. The homepage is pretty much stark black-and-white and the font sizes are uniformly small, which doesn’t give any real hierarchy to the content or convey any sense of personality. Clicking around the site, though, I discovered there is more interesting design within.

The interior pages, such as the About and Jobs pages, have much more character with their bold use of color and large type. The body text is set in Cooper, a type family that recalls graphic design of the 1970s. Cooper is famous for its bubbly black weight, however, the light weight is used here, giving the design a warm, slightly retro feel. Maison Neue, a trendy sans from Milieu Grotesque, is paired with Cooper, adding a more contemporary touch.

On a technical note, only a single style of Maison Neue and Cooper are loaded, which leads to numerous instances of faux bold and faux italic throughout the site. Faux bold tends to look blotchy and fuzzy, as you can see on the navigation of the interior pages. Loading just a single font style may save bandwidth, but it usually isn’t worth the potential tradeoff of poor type rendering.


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. Join my monthly email update list if you’d like to be notified when it is published.

Learn How to Get Truly Gorgeous Typography

I’ve distilled everything I’ve learned from writing these articles over the last four years into a single, definitive resource—the Flawless Typography Checklist. Read it straight through as a complete master course and then continue to use the checklist as a tool on every design project to ensure your type will always be flawless.

Email 03

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

Taylor Franklin

Taylor Franklin

This is the first use of Louize I’ve featured on Typewolf, but I’m sure we will see more of it in the future. It’s a beautiful typeface with an inscriptional quality similar to the ultra-popular Canela. The display version is used here which shows off some of the distinctive quirks of the face such as the diamond-shaped dots on the letter i and the unusual a with its small bowl and wide aperture.


Biannual

Biannual

A common logo design technique I’ve noticed lately is setting the brand name in a font and then artificially skewing it to the left, almost like a reverse italic. It’s a quick way to give type a weird, offbeat appearance. Biannual uses that trick here for their logo set in Lydia. Lydia is a contemporary interpretation of Lydian, a calligraphic sans from 1938, but with more condensed proportions. It’s combined here with Arial Black, which when used at large sizes like this, actually looks quite a bit different than Helvetica—notice how the terminals are angled rather than straight like in Helvetica.


Chrissie Abbott

Chrissie Abbott

This is the style of designer portfolio site that Dropbox seemingly drew inspiration from for their recent redesign (see below), with its colored text set in an extended grotesque on top of a colored background. However, in this case the design feels much more appropriate as the harsh colors perfectly match the style of work in the designer’s portfolio. This type of aesthetic isn’t for everyone, but I’m sure it attracts the type of clients the designer wants, which is the whole point of a portfolio. The grotesque used here, Titling Gothic, has been around since 2005, so it’s a bit older than some of the other wide-bodied grotesques that have been popular with designers lately like GT America, Druk and Sharp Grotesk.


Dropbox

Dropbox

My eyes hurt seemed to be the typical response to the new Dropbox redesign. People either love the colored-text-on-a-colored-background look or hate it with a passion. I personally dig the new look, but I can understand the negative reaction—it’s a strange aesthetic for a cloud storage service. It feels more like a trendy designer portfolio site (see above) than a tech company. But at least it doesn’t look like a Stripe knockoff with zero personality like almost every other Silicon Valley startup. The unconventional look makes Dropbox stand out from their competitors and it got people talking, so it is a successful design in that regard.

As far as the type, this is the question I had: if their new brand typeface, Sharp Grotesk, is as versatile as touted with its 259 individual styles, then why is the body text set in Atlas Grotesk, an entirely different sans-serif family? My guess is that the woodtype-inspired Sharp Grotesk just had too much personality and quirks when used at text sizes, leading the designers to go with something a little more conservative for the body copy.


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. Join my monthly email update list if you’d like to be notified when it is published.

Learn How to Get Truly Gorgeous Typography

I’ve distilled everything I’ve learned from writing these articles over the last four years into a single, definitive resource—the Flawless Typography Checklist. Read it straight through as a complete master course and then continue to use the checklist as a tool on every design project to ensure your type will always be flawless.

Email 03

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

Inside the Head

Inside the Head

Center-aligned text is often misused on the web, but in this instance it’s entirely appropriate as this is a poetry project. The poem text is set in the display cut of Farnham, as opposed to the text version, yet it still reads perfectly well for the short poems. Windsor, the lumpy serif used for the headers, was originally released in 1905 but seems to firmly recall the 1960s and 1970s as it was popular on album and book covers from that era. It has a warm, vintage feeling, especially in the bolder weights where the rounded corners make it feel soft and friendly. Poppins, a geometric sans-serif that is freely available on Google Fonts, is set in uppercase for the navigation, contrasting nicely with the other two typefaces.


LNM

LNM

Amerigo is an inscriptional typeface with flared stroke endings designed by the famed Dutch designer Gerard Unger. It was released in 1986, but for some reason has been popping up out of nowhere on Typewolf lately, with three uses in the last month. It looks somewhat similar to Albertus but feels much smoother due to the less angular counters. It looks beautiful on the LNM site set against the solid blocks of color and even reads nicely for a few paragraphs of text. Post Grotesk, a sans-serif that fits somewhere between a neo-grotesque and an early pre-Helvetica grotesque, is used for the rest of the copy where its clean forms balance with the dramatic appearance of Amerigo.


Misfit Juicery

Misfit Juicery

Elephant is an unusual sans-serif that applies geometric shapes to the “irregular” grotesque genre, resulting in super quirky letterforms. The quirkiness of the shapes isn’t as prominent in the uppercase (the lowercase g from Elephant is one of the most unique letters I’ve ever seen), which is how the typeface is used on this site. It still feels pretty distinctive though and helps create a memorable brand for this juice company. The rest of the site is set in Monospace 821, which is essentially a monospaced version of Helvetica. Setting body text in a monospaced font isn’t usually the best option for readability, however, the copy on this site is pretty minimal, so it’s not much of an issue.


The Cut

The Cut

Canela is probably the most fashionable typeface of the moment, with 18 uses on Typewolf in less than a year. The light weight is used for the headlines here, where it looks elegant and refined. Calligraphic sans-serifs like Chap are also pretty fashionable right now, so it makes for a nice pairing with Canela for the navigation and bylines. The bylines, which you can see an example of in the above screenshot, have added letterspacing which is generally considered a typographic faux pas for lowercase text. Sometimes adding letterspacing to smaller lowercase text can make it more readable, but in this case it may just be inadvertently inheriting the spacing from the uppercase style.

The body copy uses Georgia which feels a little uninspired—once you scroll down away from the headlines, some of the branding is lost and the design starts to feel more like a generic blog template. However, Georgia always reads well and it saves needing to load additional body copy fonts which often requires regular, italic, bold and bold italic styles.


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. Join my monthly email update list if you’d like to be notified when it is published.

Learn How to Get Truly Gorgeous Typography

I’ve distilled everything I’ve learned from writing these articles over the last four years into a single, definitive resource—the Flawless Typography Checklist. Read it straight through as a complete master course and then continue to use the checklist as a tool on every design project to ensure your type will always be flawless.

Email 03

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

Tom Ross

Tom Ross

This site is more type-focused than your typical photographer’s portfolio which helps to set the mood before the visitor actually explores any of the photos. The logo is set in Introspect, a hippie-esque font that was popular in the 1970s—it’s actually the same font used in the Albertsons grocery store logo, but here it’s artificially skewed to the left in a reverse italic style which makes it less recognizable. Extended cuts of fonts have been trending lately, but we usually see neo-grotesques used like Helvetica Neue and Nimbus Sans. So seeing something from the gothic genre, like Trade Gothic used here, is a bit different.


Mile-End

Mile-End

I almost didn’t recognize the display face used here as Gill Sans—the ultra bold style is so different from the rest of the family that it no longer feels like Gill Sans. When font weights get super heavy like this, all kinds of compromises need to be made to prevent the counters from filling in and to keep the letterforms legible. The dot on the i is tiny and the distinctive lowercase double-story g is changed to a single-story version.

Normally mixing another sans-serif with Gill Sans wouldn’t provide enough contrast, however, here Basis Grotesque provides more than enough of contrast with the fat Gill Sans. The body text is set justified which you don’t see all that often on the web. It creates a nice even edge for the text but comes at the expense of inconsistent word spacing, especially without hyphenation.


Linda Huang

Linda Huang

Linda Huang has an amazingly good collection of book covers in her portfolio which shows type being used in all kinds of clever and creative ways. The font used on her site, The Stroke Sans, is unique as well. It draws on similar calligraphic influences as Frauen, the font I used for my own personal portfolio, but combines that style with a “computer-generated” pen stroke. Notice the unusual connecting strokes on the letters w and M. It’s definitely a distinctive font, however, the kerning looks to be a little off—notice the gaps in the words graphic and covers in the above screenshot.


Sarah Sampsel

Sarah Sampsel

Most designers are aware that the optimal line length for reading is between 45 and 75 characters, however, it still seems most sites have paragraphs that are much wider than that recommendation. So it’s refreshing to see a site that sticks to the lower end of that range. The two column grid helps with this, but rather than draw a line all the way down the middle of the page, the content breaks out from the grid which makes the layout feel more dynamic. The headlines are set in Canela, paired with Freight Text for body copy and uppercase Freight Sans for smaller headers.


TASTE

TASTE

Upstatement always does awesome design work and their new site for TASTE is no exception. The type pairings here are really well thought out. The serif Tusar is used for the large titles. Tusar has lots of character but isn’t very body text friendly due to its quirks such as the tight aperture on the letter a. Domaine Text has similar proportions to Tusar but reads much better, so it’s paired with Tusar for body text. GT Eesti rounds out the design, set entirely in uppercase. Together the three type families feel very cohesive, with everything sharing a similar sophisticated, early twentieth century aesthetic.


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. Join my monthly email update list if you’d like to be notified when it is published.

Learn How to Get Truly Gorgeous Typography

I’ve distilled everything I’ve learned from writing these articles over the last four years into a single, definitive resource—the Flawless Typography Checklist. Read it straight through as a complete master course and then continue to use the checklist as a tool on every design project to ensure your type will always be flawless.

Email 03

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

Seals

Seals

Tré Seals’ site uses five typefaces (six if you count what appears to be Obsidian used for the “S” logo), all from Hoefler & Co: Ideal Sans for the navigation, Ringside for the headers, Surveyor for pullquotes, Tungsten for dates and Operator for body text. Is that too many fonts? Maybe. But I absolutely love the design. It feels engaging. It feels like a brand. It doesn’t look exactly like every other site on the internet. This falls more in line with the Bethany Heck school of thought, which essentially comes down to use as many fonts as you want, just be consistent and use each font for a specific purpose. The web would be a much more interesting visual medium if designers went with this advice.


Wealthfront

Wealthfront

A geometric sans paired with a chunky, high-contrast serif. This isn’t groundbreaking stuff, but for a financial services company it feels pretty fresh. Glosa Display from DSType has never been featured on Typewolf before, so it’s a little more distinctive compared to other high-contrast serifs we see used all the time like Freight Display. Calibre from Klim Type Foundry feels like it is starting to become the new Circular—I’ve been seeing it everywhere lately and it fits that similar “geometric sans that doesn’t look like Futura” description.


Creme Guides

Creme Guides

It is becoming rare for the sites I feature here to use solely Google Fonts, but this site is a nice exception. There are still good fonts on the free service, even if they are becoming a bit cliché and overused. Cormorant was created as a display face, but the designer created a variant called Cormorant Garamond with larger counters to make it suitable as a text face. That’s the version used here and it reads decently despite how delicate the letterforms are. Montserrat is paired with it set in uppercase for the headers.


Brandless

Brandless

Neutral is a sans-serif that was designed to be “free of all connotations or associations,” which the designer admits is an impossible task. But it does look about as plain and neutral as a font can get, at least based on my own personal cultural associations. It’s the perfect choice for a brand that doesn’t want to be a brand. But the absence of a brand is still in itself a brand—and a pretty strong and memorable one in this case.


The Century Foundation

The Century Foundation

When I first saw this site I thought it looked like the work of AREA 17, one of my favorite agencies, and sure enough, that is who designed it. It feels similar to their work for Scientific American and Library of America: flawless type, ample whitespace, contrasting colors—just good graphic design. Two optical sizes of Matthew Carter’s Miller are used—the display version for headlines and the text version for body copy, as you would expect. H&Co’s Verlag rounds out the design, set in slightly letterspaced caps.


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. Join my monthly email update list if you’d like to be notified when it is published.

Learn How to Get Truly Gorgeous Typography

I’ve distilled everything I’ve learned from writing these articles over the last four years into a single, definitive resource—the Flawless Typography Checklist. Read it straight through as a complete master course and then continue to use the checklist as a tool on every design project to ensure your type will always be flawless.

Email 03

]]>
2017-08-03T00:00:00-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. Join my monthly email update list if you’d like to be notified when it is published.

Learn How to Get Truly Gorgeous Typography

I’ve distilled everything I’ve learned from writing these articles over the last four years into a single, definitive resource—the Flawless Typography Checklist. Read it straight through as a complete master course and then continue to use the checklist as a tool on every design project to ensure your type will always be flawless.

Email 03

]]>
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. Join my monthly email update list if you’d like to be notified when it is published.

Learn How to Get Truly Gorgeous Typography

I’ve distilled everything I’ve learned from writing these articles over the last four years into a single, definitive resource—the Flawless Typography Checklist. Read it straight through as a complete master course and then continue to use the checklist as a tool on every design project to ensure your type will always be flawless.

Email 03

]]>
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. Join my monthly email update list if you’d like to be notified when it is published.

Learn How to Get Truly Gorgeous Typography

I’ve distilled everything I’ve learned from writing these articles over the last four years into a single, definitive resource—the Flawless Typography Checklist. Read it straight through as a complete master course and then continue to use the checklist as a tool on every design project to ensure your type will always be flawless.

Email 03

]]>
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. Join my monthly email update list if you’d like to be notified when it is published.

Learn How to Get Truly Gorgeous Typography

I’ve distilled everything I’ve learned from writing these articles over the last four years into a single, definitive resource—the Flawless Typography Checklist. Read it straight through as a complete master course and then continue to use the checklist as a tool on every design project to ensure your type will always be flawless.

Email 03

]]>
2017-04-05T00:00:00-04:00