<![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-06-20T23:19:33-04:00 <![CDATA[The Typographic Details Behind Typewolf’s Favorite Sites of May 2018]]> https://www.typewolf.com/blog/favorite-sites-of-may-2018 https://www.typewolf.com/blog/favorite-sites-of-may-2018 This is the 52nd 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.

Jonesy

Jonesy

The 1970s-evoking Windsor typeface continues to be popular here on Typewolf. It gives off a warm, vintage aesthetic which feels like a perfect fit for a brand selling high-waisted underwear. The serif Plantin is used for the text set at smaller sizes where Windsor might be a little too ornate for optimal legibility. Calibre, a geometric sans from Klim, is paired with the two serifs, making the overall design feel a touch more modern and contemporary.


Cup of Couple

Cup of Couple

The Cup of Couple site uses four type families, but it doesn’t feel like too many as each typeface is used in a consistent way for a specific purpose. Displace, a high-contrast calligraphic sans, is used for the page headers. The article headlines use Perpetua Titling, a display cut of Perpetua that is available in uppercase only. Franklin Gothic is used for navigation and the body text is set in Garamond. Everything except the body copy is set entirely in uppercase which creates even more contrast between the text areas.


Swallowtail Tea

Swallowtail Tea

Louize Display is an inscriptional typeface from French foundry 205TF that is somewhat similar in style to the ultra trendy Canela from Commercial Type. It isn’t used nearly as much though, so it feels a bit more fresh and distinctive. The monospaced cut of GT Pressura is an unusual pairing choice as it feels more techie and industrial compared to the classical look of Louize, but I think it still works nicely.


Texas Monthly

Texas Monthly

Condensed typefaces make for excellent headline choices as they allow for a larger font size while fitting more words per line compared to a standard-width face. The end result is a more efficient use of space with less awkward line breaks. The Texas Monthly site uses Grifinito, a compressed member of R-Typography’s Grifo family, for the main titles with the regular width used for the smaller headers. Hoefler & Co.’s Ringside and Chronicle Text round out the design, used as workhorse faces for navigation and body text.


Stay Tuned for Next Month’s Post

I’ll be publishing a new type-driven design roundup post like this at the beginning of every month. 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 five 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-06-03T00:00:00-04:00
<![CDATA[The Typographic Details Behind Typewolf’s Favorite Sites of April 2018]]> https://www.typewolf.com/blog/favorite-sites-of-april-2018 https://www.typewolf.com/blog/favorite-sites-of-april-2018 This is the 51st 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.

Checkout.com

Checkout.com

GT Super was officially released by Grilli Type just a few weeks ago, but some designers have been able to get their hands on the font early as there have been uses on Typewolf going all the way back to mid-2017. My prediction is that this typeface is going to blow up this year. It ticks all the boxes of what is trending with designers right now—high contrast, 1970s-evoking and sharp, blade-like serifs. The Checkout.com brand feels a bit corporate to adopt this look, but it shows that this style is going mainstream.

You might notice that the body text on this site (as shown in the paragraph in the screenshot above) is set pretty tight—the letters and words all seem kind of smushed together. However, it’s not the CSS letter-spacing or word-spacing causing this but the particular version of Neue Haas Grotesk being used. Rather than using the text optical size, everything is set in the display optical size which has tighter spacing built-in. I’m not sure of the reasoning behind this decision, as the type is set pretty small and definitely not used at the kind of large display sizes that would warrant the tighter setting.


Herb

Herb

Eksell Display is somewhat similar to GT Super, mentioned above, with its razor-sharp serifs and general all-around evil appearance. It was originally drawn by someone who was a graphic designer rather than a type designer, which no doubt contributes to its oddball, off-kilter appearance. The body text is set in Commercial Type’s Styrene family which reads surprisingly well despite its quirky features, such as the overly wide crossbars on the t and f, as well as the prominent curve on the J.


Gaimo

Gaimo

SangBleu Empire, a member of the SangBleu collection from Swiss Typefaces, is yet another typeface that may fall into the “evil serif” category with letters that look like they could be used as weapons. It’s a very distinctive typeface that helps create a strong identity for the Gaimo shoe brand. The pairing with Roboto feels out of place though—it makes me think of Google and their suite of products, as well as generic website templates that rely on the Google Fonts service. Another member of the SangBleu family could perhaps have been used instead to create a more unique visual identity.


Dwell in Other Futures

Dwell in Other Futures

Beatrice Display is a coming-soon release from Sharp Type, so there isn’t much information available on it yet. I’ve noticed lately that foundries have been making their upcoming releases available early to select designers, perhaps to create buzz ahead of the official launch. I’ve seen designers fawning over Beatrice on Twitter, so this strategy may be working.

I think this typeface has a visceral appeal to designers due to its striking visual qualities—the ultra high contrast, hairline horizontal strokes and the dot on the i that is just a straight line. It feels very avant garde. Its real-world usefulness, however, is probably quite limited. The hairline strokes completely disappear at small sizes—even at large sizes they are barely there. But that won’t stop designers from reaching for it in situations where aesthetics and emotional response trump pure readability.

A much more neutral and legible typeface, Programm, is paired here with Beatrice Display. Programm is a sans-serif that originated in the 1960s and has since been revived through Dinamo Standards, a branch of Swiss foundry Dinamo that focuses on revivals and interpretations of forgotten typefaces.


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

Sophie Haig

Sophie Haig

I thought this was Times New Roman at first, but it’s actually Riccione, a design that is super similar to Times but with wider proportions and thinner, sharper serifs. They could have saved a webfont download by just using the default system font instead. However, it does add a slightly different feel to the design, so maybe it is indeed worth the extra bandwidth. A wide cut of Titling Gothic is paired with the serif, adding a contemporary touch to the layout.


11 Honoré

11 Honoré

Canela continues to be wildly popular with fashion brands—it’s beginning to feel like the twenty-first century version of Optima. Size-inclusive clothing company 11 Honoré make use of the lighter cuts here for their logo and site design.

Some of the type is a little on the small size, particularly the thin weights of Canela, which feature delicate strokes that can become brittle if used at too tiny of a size. Smaller type tends to look more elegant though, especially when contrasted next to a larger heading. An expanded cut of Favorit is used at sizes as small as 9px, but it holds up decently due to its sturdy strokes and wide letterforms.


Mr. Leight

Mr. Leight

This is another site using the fashionable Canela, but this time a heavier, less-delicate cut is used. The logo looks to be loosely based on Canela as well, but with some strokes erased and triangular shapes tacked on. ITC Avant Garde Gothic is paired with it, used at a tiny size for maximum contrast with the large headlines.


Paradiso

Paradiso

So we are four-for-four this month on designs using the trendy peachy-pink color. I’m not sure if I specifically seek out this color to feature or if it’s just too popular as to become unavoidable. But hey, it’s a nice color and much more interesting than the default black text on a white background…

The Paradiso site is all over the place with its type choices. Windsor gives off a laid-back 70s vibe. Europa feels sleek and modern, but it’s set with generous letterspacing, which gives the geometric sans a more open and friendly feel. The use of Optima adds a refined, classy touch. And Graphite, an upright script face based off an architect’s pencil, seems to be scrawled randomly throughout just for fun. It’s a lot of type to take in, but it makes the entire design engaging and full of personality.


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

Creative Leadership Salon

Creative Leadership Salon

Antique Olive is a unique typeface in that it has reverse stroke contrast, meaning the horizontal strokes are thicker than the vertical strokes. This is the opposite of standard typefaces, which gives the letterforms a wonky, off-balanced feel. Here, a condensed cut is set entirely in uppercase which makes the reverse contrast not quite as noticeable. The “evil serif” Romana is paired with it, which starkly contrasts with the quirkiness of Antique Olive.


Smalls

Smalls

Nimbus Sans, a Helvetica-inspired neo-grotesque, is the sole type family used on the Smalls website. The navigation and subheaders use an extended cut set in uppercase, which helps create hierarchy and breaks up the “sameness” of using a single font.

The lowercase text has added letterspacing, which is usually considered a typographic faux pas. I’ve noticed other sites doing this lately and it feels like it is starting to become somewhat of a trend. To me, this loose typesetting gives designs an almost childlike quality, feeling friendly and open like a learn-to-read book.


Book of the Month

Book of the Month

Kris Sowersby of Klim designed Untitled Serif to be a neutral book face that blends into the background. So it is interesting to see it used here as a prominent display face. Graphic designers always end up using typefaces in ways not originally intended by type designers. Grilli Type’s GT America is used for the rest of the site, while the logo is set in Farnham Display italic, showing off some of the gorgeous swash characters.


WePresent

WePresent

ITC Clearface continues to be popular as of late—it made an appearance on the recent Chobani rebrand and has been featured quite a bit on Typewolf recently. I feel like it’s losing some of its retro associations and starting to feel contemporary again. I credit OKREAL with helping to revitalize this typeface, as their influential site design from 2014 made prominent use of it (in addition to being one of the first sites to do the whole colored-text-on-a-colored-background thing).

The WePresent site may have possibly been inspired by OKREAL but manages to do its own unique thing. The headlines mix in the sans-serif Fakt mid-sentence, giving a distinctive look to the story titles. And I love how some of the stories are individually art directed with their own custom color palettes. The body text is set beautifully in a readable line length with proper apostrophes, quotation marks and dashes used throughout.


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

Penguin Modern

Penguin Modern

The Penguin Modern book covers are probably the single best use I’ve ever seen of ITC Avant Garde Gothic’s extensive ligatures. The typesetting really shows off some of the more exuberant letter combinations and everything lines up in such a typographically pleasing way. This level of exact typographic control would be difficult to accomplish using pure CSS, so it looks like this was integrated using SVG images rather than text.


Post Typography

Post Typography

A design studio with typography in their name better have type that is on point and these guys certainly do. I really dig the typographic grid on the about page—the body text is offset from the headline with an indent, which helps keep the line length readable while also giving the layout a more dynamic feel. The headlines and body copy are set in Okay Type’s serif Harriet, with prominent use of the beautiful italic cut, while the subheaders are set with Process Type’s sans-serif Colfax in letterspaced all-caps. This type system is used consistently throughout the site, giving the design a cohesive feel.


Grayes

Grayes

Canela and GT America are probably the two hottest typefaces from 2017, but their use here comes across as classy and professional rather than trendy. Canela feels inherently fashionable, especially in the lighter weights, with its subtle, delicately flared serifs.

The screenshot above shows an awkward line break with a single word floating by itself that could have been prevented with a simple trick: manually add a <br> tag between a and point. This would balance out the two lines of text and would read much better. With dynamic content spit out of a CMS this isn’t always feasible to implement, but it could be worth training writers on the client-side to watch out for weird line wraps like this.


Bond

Bond

This is the first use of Basic Sans I’ve featured on Typewolf, which is surprising as it’s a trendy-looking grotesque that is available to anyone with a Typekit plan. It’s paired here with Schick Toikka’s calligraphic sans-serif Chap. Combining two sans-serifs isn’t usually recommended, but these two are different enough from each other to create sufficient contrast. The layout is built entirely around Lisa Tegtmeier’s gorgeous illustrations, with the color of the type matching up perfectly with the bold colors from the artwork.


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 five 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-02-01T00:00:00-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 five 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 five 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 five 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 five 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 five 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