Fonts with less CSS

For Mismiy’s sample blog I wanted to create just enough of stylesheet to be readable without going overboard with fancy font stuff.

I don’t want to include font files in the repo, and I don’t want to use fonts hosted elsewhere, such as Google fonts, since that probably involves imposing tracking cookies on my readers, so instead we can use old-timey font stacks using fonts that should already installed on the reader’s computer.

Fonts for text

For text I use one of my favourites from the days when the PostScript 35 were all the fonts we had access to: Palatino (Hermann Zapf, 1949).

font-family: "Palatino Linotype", "Palatino", "Palladio", "URW Palladio L", "Book Antiqua", serif;

Palatino is a classic old-style, calligraphy-inspired text face. It is legible (originally designed for fairly challenging printing conditions), and prettier than Times New Roman and Century Schoolbook. Palladio is URW’s clone, which may be present on Gnu/Linux systems; Book Antiqua is Monotype’s unlicensed clone, popularized by Microsoft’s bundling it with Windows.

Headings are in contrast a conventional Helvetica-style font stack, so:

font-family: "Helvetica Neue", "Arial Nova", "Helvetica", "Arial", sans-serif;

I am following suggestions in a ctrl.blog article that we can assume Helvetica will be mapped on to Nimbus Sans or Liberation Sans on Linux systems, so I do not need to exhaustively list the Helvetica-alike fonts.

Fonts for code

These blog posts often deal with computer code so we need a distinctly different face for that. It does not have to be monospace: If you aren’t writing Fortran, you don’t need to line text up in columns, so if your editor supports variable-width fonts, why not take advantage of them? Variable-width fonts for code were a feature of Smalltalk systems 45 years ago, so this is not a new idea.

After a bit of experimentation with the fonts ubiquitous at least on commercial operating systems, I find myself using Verdana (designed by Matthew Carter for Microsoft). This is a bit surprising given I have always found Verdana kind of clunky and oversized, but it has features that make it better for code than Helvetica or Arial, such as more open counters on letters like c, and serifs on I and 1.

On the other hand, the enormous x-height makes it look swollen next to Palatino. So I have used font-size-adjust to scale it down:

code {
  font-family: "Verdana", "DejaVu Sans", "Vera Sans", sans-serif;
  font-size-adjust: 0.469;  /* x-height of Palatino. */
}

For the sake of including Gnu/Linux systems I need to add alternatives like DejaVu and Vera Sans (Jim Lyles et al.). They aren’t clones but they have the same design brief as Verdana.

I originally tried Tahoma and preferred its slightly more condensed glyphs, but it requires a bit of letter spacing that would have looked wrong on the DejaVu or Vera fallbacks.

Update (2024-06-22). Turns out font-size-adjust still has only limited availability, so for now I am using font-size: 0.85em, which experiment shows to be about right for matching Palatino.

Conclusion

These are not necessarily the fonts I would use to create a personal site: there you are free to provide downloadable fonts more recently designed, with screens and web pages in mind. But for the minimal blog of this scrap of software, Palatino, Helvetica, and Verdana will do.