Typographic Tweaks for Longreads

During the 7 years I’ve been involved with Longreads, we’ve gone from sharing links on Twitter to publishing our own in-depth, investigative stories. While we’ve grown substantially in scope and focus, the brand has largely stayed consistent.

The core of the Longreads brand 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 worked on some small adjustments to the brand font and logotype that I’d like to share.

---

Switching Longreads.com to a System Font

We’ve been making the switch to system fonts on many Automattic tools: all the sans-serifs you see in the WordPress.com dashboard and apps are system fonts, and the Independent Publisher 2 theme ships with system fonts by default. We’ve been making these changes primarily because they cut down on load time, which can be a huge benefit to visitors, especially on mobile.

Longreads currently uses Crimson Text as its primary typeface. Crimson Text is open-source (🎉), but it is a custom webfont, which means it has to be loaded in the first time someone visits our site. It’s not a ton of extra load (~66k, more if there is bold text on the page), but every little bit of data saved helps. Considering we’re such a typography-heavy brand, I also have some minor qualms with Crimson Text — for instance, letterspacing is a little weird around the number 1.

Ideally, I wanted to switch to a system font that felt similar to Crimson Text, but didn’t require the extra loading time. I tried out a number of options, and eventually decided to replace Crimson Text with Palatino. It has wide support across devices, and was designed by Hermann Zaph, the same gentleman who designed everyone’s favorite dingbats font. I used to think Palatino was 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. 😁 💯)

When it comes down to it, 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. 🙂
• That extra-tall quality I liked from my high school papers also works in our favor here: when I swapped Palatino in, I found the line height was immediately more comfortable than Crimson Text’s.
• Palatino is present on almost all of our devices. In rare cases where it’s not available, we’ll have fallbacks in place*.

Here are some visual comparisons:

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

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

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

---

Updating the Longreads Logotype

I also decided it was about time to update our logotype. The Longreads logo is currently set in Mrs. Eaves. That was all the rage back in the mid-aughts (I’m looking at you, WordPress logo), but it feels a little dated nowadays. 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.

I also adjusted the size balance between the mark and the text. Previously, the mark was pretty big, and the text was pretty tiny. That negatively impacted the readability at small sizes.

In the previous iteration, the small text needed to be bold to visually balance with the giant logo mark. This left our text feeling a little clunky. Now that the size balance is more natural, we can move to a medium weight.

The final adjustment was to the mark itself. Like many brands, Longreads has had two versions of our logo: one for normal usage, and a second version optimized for tiny sizes. In our case, the small version has a thicker outer ring, and some proportions are little more pronounced. The new version of the logo uses the small logo everywhere. With the combination of the new text/mark size balance and the use of the small logo, we’d be able to use the exact same logo in more places.

Keep an eye for these updates! They’ll be rolling out throughout the next few weeks.

---

*Android is a special case: it only ships 3 fonts, so it’s a bit of an outlier when it comes to traditionally “web safe” fonts. Droid Serif looks nice though, and falling back to that on Android will align the site with other typography throughout the OS. 

**A quick note: I didn’t use Palatino here because Palatino looks a little bouncy when it’s in all-caps — that didn’t seem to suit us very well. I would’ve liked to use Hoefler Text everywhere on the site, but the system font support for it isn’t universal. I also think the italic style of Hoefler Text is a little too fussy/flowery for us. Besides, I like it when a logo is set in a different face than the brand font (provided they don’t clash of course) — it helps make the logo unique and special.