Fonts on our website
Our website’s CSS is over a decade old and was hacked together. At the time of writing it specifies the following font-styles:
- .post
- “Helvetica Neue”, Helvetica, Verdana, Arial, sans-serif;
- h1, h2, …
- ‘Helvetica Neue’, Arial, sans-serif;
There are two problems with this. The first is the use of Helvetica Neue. This is a commercial license, and we’ve never once seen our website using that font, as won’t have most people.
The second is that headings and posts have different fallback fonts. The main body text will fall back to Helvetica and very likely find that, whereas headings will fall back to Arial. Mixing fonts isn’t a great idea.
Even worse, neither selector matches the text on the home page, which uses the browser’s default font. In our case, that’s a serif font, so now we’re mixing 3 fonts, as well as serif and sans-serif.
Another point worth noting is the meaning of “Helvetica” as well as “Arial”. Neither font will exist with that name on a Linux system. Many fonts can fill the place of Helvetica, such as TeX Gyre Heros or Liberation Sans (or, in fact, Arial). They all look slightly differently, and different users will have different fonts available. In our specific case, Helvetica resolves to TeX Gyre Heros, and Arial to Liberation Sans.
Going forward, we’ll set the font-style on the <html> element. Had we decided to stick with sans-serif fonts, we’d specify “Helvetica, sans-serif” as the font families. We could’ve also tried to ship Tex Gyre Heros as a web font, but that would’ve involved some work, and we probably only liked this font because it’s what we’re used to. Whatever the user’s OS decides is Helvetica would’ve looked good enough, anyway. However, we decided to use a serif font instead, and picked Merriweather, which is available on Google Fonts.