Lessons Learned from Medium.com’s Typography
It’s been said that web design is 95% typography. So as a web designer, getting the typography right is over half the battle.
Today with the growing popularity of web fonts and modern CSS techniques this task has become easier, but it’s always good to learn more with something so critical.
Medium has changed their body copy to Freight Text Pro with the titles and sans-serif text changed to JAF Bernino Sans. And with each change their website just keeps getting better.
Medium launched in 2012 using FF Meta Serif and Myriad, and then switched to FF Tisa and Freight Sans in 2013 and later that same year moved to JAF Bernino Sans and Freight Text.
FF Meta Serif and Myriad were the texts of choice in 2012. FF Tisa Web Pro accommodates a wider spectrum of article types while minimizing, more than its predecessor, the conflict of its presentation with the context of the article.
While 2013’s Freight Sans gave a better visual experience than 2012, the bolded title text didn’t quite match up with the body text, breaking the entire aesthetic appeal.
Later in the year Medium moved to JAF Bernino Sans and Freight Text which became the perfect combination: crisp titles and inviting with JAF Bernino Sans and Freight Text is easy on the eyes when reading blocks of text from articles.
This is just a prime example of the evolution of best practices for digital type design. The combination of fonts for headings and body, as well as background is immensely important: it may define how long a potential customer will stay on your website.
There are many tools to identify the fonts of a site, here’s a list of some good ones.
The headings in your site are very important because most visitors only read headlines on the Internet. Attention spans have shortened and if you can’t ensnare your audience with the headline alone, they’re more likely to leave than stay and read the body text – even if it’s a well-written article.
According to a Smashing Magazine study from 2013, 51% of headings use sans-serif and just over 47% choose to use serif. Serif fonts have become increasingly popular in the last few years mainly due to the belief that they stand out in headlines and offer site visitors a readable structure.
On the issue of popularity, the two most popular serif fonts for headlines are Georgia and Chaparral Pro while the two most popular sans-serif fonts for headlines are Arial and Freight Sans Pro.
The body of your website makes up the most important part of your content—even if fewer people read that than the actual headings and headlines on webpages. Unlike the near tie between serif and sans-serif fonts in headings, the clear winner when it comes to body copy is serif.
According to the same study, a whopping 61.5% of websites utilize serif fonts in their body copy but a paltry 36.5% use sans-serif fonts for their body copy.
Let’s look at how this breaks down even further. The most frequently used serif fonts for body copy are Georgia and Chaparral Pro, almost mirroring the proportions for headings. On the sans-serif front, the most frequently used sans-serif fonts for body copy are Arial and Helvetica.
It’s noteworthy that the study also determined the majority of websites currently don’t use any standard fonts as their main typeface. Some 39% of the body copy and 66% of the headlines in the websites looked at in the study didn’t use standard fonts.
One theory for this somewhat surprising find is that services like Fontdeck and Typekit make it easier than ever for brands to set themselves apart in a unique way from their competitors.
On Backgrounds
Currently the dark-on-light arrangement is popular for typography. For instance, some websites are experimenting with dark-gray text on beige background. In such a scheme, the contrast is less pronounced yet still provides readers with a comfortable reading experience that facilitates easy scanning of every line.
Unsurprisingly when it comes to body copy, the old favorite of black text on a white background is still the gold standard.
Besides being very easy to read because of sharp contrast, the black-on-white effect also harkens back to the classic color format of newspapers which also explains its widespread popularity on the Internet.
As Darrel Andrews of MlmBarracks.com says, “Loading times, typography, style, layout, design etc, are all things that are important to your site’s overall conversion rate.”
Since text is a major component of every website, having the right font for your website’s heading and body is of utter importance. Getting people to interact and buy what you’re selling, whether it’s shirts, cookies, stories or adspace means everything in business.
Medium.com knows this rule well and uses it pragmatically on their site every day.
Read More at Lessons Learned from Medium.com’s Typography
