I stumbled upon a discussion about “90s fonts” on HN recently and since this blog has a bit of a retro theme going on as well I was quite interested and decided to do some further digging. In order to test this on my site I disabled ClearType—the brand name if you will of Microsofts font antialiasing—and set the font used to Arial and wow, that felt like pretty much the perfect combination. It had the same blocky look seen in the screenshots of the article and it just kind of felt like it fit perfectly in here.
Unfortunately, there seems to be no sane way of achieving this. If it were available, font-smooth feels like the only reasonable way to get the correct look but not only is it very much non-standard, the Firefox variant of it is only enabled on OS X making it not really fit for purpose.
Now the approach the original article ended up with was creating a new font which mimicked the rendering of that font on older versions of Windows, and while this looked quite good to me there were some problems identified in the discussion which made me feel that wouldn’t be an appropriate approach for this site. Also, from what I could tell, they didn’t make their font-files available, so that also put a bit of a damper on that thought—to be fair, I didn’t look at the source, maybe there was a simple note there with a license.
Someone mentions bitmap fonts being usable, but I didn’t really find anything to support this statement and rather more comments stating the opposite as well as the original article.
Idea #2: Importing bitmap font filesConvincing-looking 90s fonts in modern browsers
We couldn’t make vector fonts look pixelated, but could we get around this by importing authentic 90s bitmap font files instead? We had a Windows 98 disk image with all of the system fonts including MS Serif: a riff on Times New Roman in the bitmap .FON format dating back to Windows 1.x. Unfortunately, we quickly found out that CSS @font-face doesn’t work with .FON files, and none of the web-based font conversion tools that we could find would convert them to the vector formats that are usable with @font-face.
And even if they were useable there would be problems with scaling since bitmap fonts have one “native” size and anything else will not look all that good.
With all of this at hand, I concluded that there was no way for me to achieve this look in a way that would also be technically satisfying to myself so I then ended up spending some time hunting for other fonts which might satisfy my itch for a more retro look without necessarily being as authentic as this. I did find a style I find quite satisfying but in the end decided it’s probably better to leave well enough alone for now (there was also the slight matter of it being Mozilla’s core typeface, which made it feel somewhat wrong to use it). As far as I can tell the current fonts provide quite decent legibility and while they might not be retro still have a quite pleasant air about them making them nice to read.