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:
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:
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:
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.
Get the Longreads Weekly Email