Longreads
  • Home
  • Editors’ Picks
  • Features
  • Topics
  • Best Of 2020
  • Store
  • Become a Member
  • Log In
  • Weekly Email
  • Twitter
  • Facebook
Support Us
Log In Store Support Us
Editors’ Picks Features Topics Best Of 2020
Longreads

Art Director Kjell Reigstad on How We Refined Longreads’ Typography and Logo

Posted by Kjell Reigstad

Over the past eight years, Longreads has gone from sharing links on Twitter to publishing our own in-depth, investigative stories. I’ve served as art director since the very beginning — and while we’ve grown substantially in scope and focus, the visual aspects of the brand have largely stayed consistent.

The core of the Longreads visual style has always been simple, traditional typography, paired with a healthy amount of whitespace. I’ve made small tweaks to that formula through the years, but have made a point to keep the general feel the same. In that vein, I recently implemented some small adjustments to the brand font and logotype that I’d like to share.


Updating the Longreads Logotype

The Longreads logo was originally set in Mrs. Eaves. That was a suitable (and slightly trendy) solution back in the mid-2000’s, but it has felt a little dated to me lately.

After some exploration, I swapped Mrs. Eaves out with something new, and also made some subtle adjustments. Here’s a comparison:

logo-comparison.png

 

The new version uses Hoefler Text instead of Mrs. Eaves. Hoefler Text is much less clunky and severe than Mrs. Eaves, but it shares that “literary” feel that’s so crucial to the Longreads brand.

While making that change, I also adjusted the size balance between the “L” mark and the text. In the previous iteration, the mark was proportionally pretty big compared to the size of the text. To help balance the logo, “Longreads” was set in bold: the extra weight was added to offset the extra-large L mark. Unfortunately, the bold text felt a little heavy-handed to me. By finding a more balanced, natural relationship between the mark and the text, we’re able to use a lighter, more elegant text weight instead.


Font updates on Longreads.com

Moving on from there, I cleaned up typography across the entire Longreads site.

Up until recently, Longreads used Crimson Text as its primary typeface. Crimson Text is a beautiful, open-source typeface. It is also a custom webfont, which means it had to be sent from our servers to your device the first time you visited our site. It’s not a ton of extra page load (only an additional ~66kb, more if there is bold text on the page), but every little bit of data saved helps. The majority of our readers visit Longreads on their mobile devices, so we try to optimize for that experience however we can.

Aside from the extra load time, I’d also had some minor qualms with Crimson Text as a typeface. As a quick example, the letterspacing is a little weird around the number 1.

Ideally, I wanted to switch to a font that felt similar to Crimson Text, but didn’t require the extra loading time — something that was already installed by default on most devices. I tried out a number of options, and eventually decided to replace Crimson Text with Palatino. It was designed by Hermann Zaph, the same gentleman who designed everyone’s favorite dingbats font. When I was younger, I considered Palatino a little unrefined, but it’s been growing on me.

Sidenote: I used Palatino a lot back when I was in high school — the point sizes are a little taller than Times New Roman, so if my paper was a little shorter than it was supposed to be, I’d sometimes switch to Palatino so it’d look longer.

Palatino looks good in context, and makes sense for a number of nitpicky reasons. Here’s what I like about it for Longreads:

  • Palatino and Crimson Text are both old-style faces that reference the late-Renaissance era of typographic design. The general feel for Palatino is similar enough to Crimson Text that it won’t be a jarring change for our visitors.
  • Palatino isn’t exceedingly fussy. Compared to Times (or even Crimson Text), the proportions in the letterforms are generously balanced and everything’s a bit more rounded. This makes it really comfortable to read.
  • The sharper serifs on Palatino seem a bit more serious, which I think is more on-brand for Longreads. We’re fairly serious people (usually).
  • Palatino is present on almost all of our devices. In rare cases where it’s not available, we have fallbacks in place.

Here are a couple visual comparisons:

comparison.png

Palatino’s letterforms are wider and slightly more rounded than Crimson Text’s. This makes for a more solid, comfortable read. (Also, Palatino does have a fairly ugly P, but I can look past that).

comparison-2.png

In the context of Our Picks, the font change is very subtle.

You can also compare the two via the dropdown menu in this demo:

In addition to the typeface change, I did some text size cleanup. We used to have a few areas where sizes weren’t following our typographic scale:

Longreads-Text

 

I audited the site to find those outliers, and brought them back into line with the rest. While doing so, I also enlarged some of our smallest text so that it’s more readable everywhere. Nobody likes to read small type.

All of these changes have been live for a few weeks now. The goal was for a subtle update, so ideally you haven’t actually noticed much of a change! If anything, I hope the site feels just slightly faster, refined, and comfortable to read.

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • Click to share on Pocket (Opens in new window)
  • Click to share on Instapaper (Opens in new window)
  • Click to email this to a friend (Opens in new window)

Like this:

Like Loading...
September 25, 2017
Categories: Design, Longreads News
Tags: art director, logo, readability

Get the Longreads Weekly Email

Sign up to get the week’s best Longreads delivered to your inbox every Friday afternoon.

Friends: We Need Your Help to Fund More Stories

We want to dramatically increase our story fund this year, but we can't do it without your support. Every dollar you contribute goes to writers and publishers who spend hours, weeks, and months reporting and writing outstanding stories. Now is the time to join us.
Become a Member

Related

Support Longreads

  • Become a Longreads Member for just $3 per month
  • Follow us on Twitter
  • Follow us on WordPress.com
  • Follow us on Facebook
  • Follow us on Instagram
  • Get the Longreads Weekly Email
wordpress-logo

Proudly powered by WordPress

Create your own site at WordPress.com arrow-right

Home About Membership FAQ Submissions Privacy Policy Privacy Notice for California Users Do Not Sell My Personal Information Press RSS Feed
Part of the Automattic family.
© 2021 Longreads
get_longreads_user_info: false
Cancel

 
Loading Comments...
Comment
    ×
    loading Cancel
    Post was not sent - check your email addresses!
    Email check failed, please try again
    Sorry, your blog cannot share posts by email.
    %d bloggers like this: