A Brief History Of Web Typography
This doesn’t exactly look like a post from your average JavaScript blog, but it just so happens that I have an affinity for typography. In fact, my first ever tech post was about setting up custom fonts with @font-face a decade ago. So this one is the result of me trying to tickle my nostalgia bone hoping it would be of value though.
It’s a satirical retrospective of sorts, if I say so myself. So take it with a grain of salt, but I’m confident I can cover some of the most important milestones of web typography. I’ve been there Since the Arial and Verdana days to the Open-Sans-for-everything era, leading to the plethora of options we have today.
2000s System Fonts
These were the days where we did, with what we had. It was mainly Arial, Verdana and Tahoma for the sans serif category, and pretty much Times New Roman and Georgia for serifs. I remember googling “web safe fonts” each time I worked on a new website. That’s what they used to call them because they come installed in most operating systems.
Even with the limited choice, popular companies succeeded in creating their distinguishable look and feel online. When you think about facebook, Tahoma and the royal blue color immediately come to mind. Whenever you saw Lucida Grand, you knew it’s Apple. Google was and is still -for some reason- abusing Arial.
I liked Verdana. It felt more modern than Arial at the time, and was less goofy than Tahoma. But mostly It was just easier to work with than the others. It was the font you couldn’t go wrong with.
The Brave And Short-lived Days Of Clumsy Custom Fonts
Toward the last years of the 2000s, custom fonts started getting traction. But it was a bit cumbersome, another nail in the coffin, we had to host yet another asset and include them with yet another CSS declaration. Besides, the choice was still restricted, not that many free quality fonts. And afraid of piracy, type makers refused to license their typefaces for the web. Apart from a few license agreements to some services for third-party hosted web fonts, like Typekit, which is the one I was and still am using to this day. However, it was acquired and rebranded by Adobe, and then killed as a standalone service to only be provided with their cloud packages, because Adobe.
Although those were paying services, It was for me one of the best things that happened to web typography in this period. They used to be the netflix of web fonts. An affordable repertoire of drop-in premium typefaces. I was subscribed to a $49/year plan, which was nothing like the bazillion dollar -per font per weight- licenses of big type makers such as Hoefler & co and the likes.
Enter Google Fonts
This is the beginning of the decade after, what I called the Open Sans era. Right before Google released their free fonts service, I remember I used to download the font files for Open Sans from Font Squirrel, and self-host them on whatever little space remained on my pitiful shared hosting. The part I hated the most but I couldn’t help myself.
So it was not really democratized until Google Font hapenned. That and the flat design movement that was popularized by Apple, we started to see the first wave of modernization where websites started to look cleaner and flatter.
Open Sans is still Google Fonts’ second most popular font, second to the ugliest font ever, Roboto. I don't know what people see in it, but I’d like to think it’s mostly due to Android using it as their default.
System Fonts Strong Comeback
Then out of nowhere, all major operating systems -windows and apple- had released their official system fonts, which were in my opinion, more beautiful than any other open source font out there. Need I say more than they were adopted in less than a jiffy like we all saw? Every other website now uses the system font. With the exception of big brands who have always afforded the expensive stuff.
I don’t know if you’ve noticed, I didn’t talk about the trends of typography style wise. Like when all websites used to be in thin Sans Serif typefaces, then sometime later came the bold serif movement, then back to Sans Serif etc…it’ because I’m less versed in design, So only brought up the infrastructure and technological aspect.
When In Doubt, Use Inter!
And last but not least, It can look a bit out of place but this font deserves an honorable mention. It’s highly praised by web makers, which is the community I’m most accustommed to. It sort of became their motto the last couple of years that when in doubt, you have to use Inter. And it’s with no doubt, one of the best open source fonts that has ever been released. Plus, it has the added benefit of unifying the design across operating systems, for most of us who use the defaults.
Speaking of open source fonts, there’s now a lot of options among this delightful category. Generally, each now and then, some big tech company releases their custom font to the masses. Which are premium looking typefaces but free. Just recently, Github released Mona and Hubot Sans, two smoking hot fonts.