Image couldn't load - you don't seem to have IPv6 connectivity

blog topics: BGP · IPv6 · more · writing: Ars Technica · BGP (O'Reilly, 2002) · publications · contact: Twitter · LinkedIn · email

Fun with fonts! (explanation below)

Upper case Lower case Numbers Font
ACGIJQRUWacgijqruw14569 Century Gothic
ACGIJQRUWacgijqruw14569 URW Gothic Book
ACGIJQRUWacgijqruw14569 Questrial
ACGIJQRUWacgijqruw14569 Muli (variable)
ACGIJQRUWacgijqruw14569 Helvetica Neue
ACGIJQRUWacgijqruw14569 Helvetica
ACGIJQRUWacgijqruw14569 Arial
ACGIJQRUWacgijqruw14569 sans-serif
ACGIJQRUWacgijqruw14569 Verdana
ACGIJQRUWacgijqruw14569 Georgia
ACGIJQRUWacgijqruw14569 Times New Roman
ACGIJQRUWacgijqruw14569 Times
ACGIJQRUWacgijqruw14569 serif
ACGIJQRUWacgijqruw14569 Courier
ACGIJQRUWacgijqruw14569 Courier New
ACGIJQRUWacgijqruw14569 monospace
ACGIJQRUWacgijqruw14569 System font

The quick brown fox jumps over the lazy dog.
012345678980 fi ! @ # $ € % ^ & * ( ) - = + ~ ; : , . ? ' " ’ “ ”

Clicks to 100-increments:
Use for precise settings:
font-weight: ;

Time to replace Century Gothic

After many years of using Century Gothic and its clone URW Gothic Book for my website, I felt it was time to reconsider that choice. So I went font hunting!

An important reason for choosing Century Gothic rather than something like Helvetica was that I really don't like the two story a. In my opinion, the one story a looks much better, but fonts with a one story a are relatively rare. This link has more info on the two story vs the one story a and g.


However, Century Gothic is a rather thin and wide font with some unusal shapes, so it's not ideal for reading lots of text. So I started looking for something different. One option that looked promising was Questrial. That one looks like something between Century Gothic and Helvetica. However, I don't really like the weird Q and t, and especially the j.


Then I ran into Muli. That's the font this page is in (until you start clicking on stuff at the top of the page). It has the a I like, a regular j and no other weird stuff, and it just looks nice, modern and readable, which just a hint of character without overdoing it. So unless something unexpected happens, this will be the new text font for this website.


I downloaded the font from Google Fonts. They encourage you to just link to their site. The advantage is that if people visit multiple sites with the same font, the font only needs to be loaded once. However, despite Google's best efforts (they really do seem to want to protect people's privacy here), I don't like leaking information to Google. I'm especially concerned about revealing links to private pages in the referer header. So I'm hosting a copy on my own server. It's an open font so the license allows this.

Variable weight fonts

But there is more. When I downloaded the font, there was a "variable" version as well as a bunch of different files for different weights. Turns out that it's now possible to create fonts that don't have a number of fixed weights such as light, regular, medium, bold, but the fonts can be created in such a way that the weight is variable. So I had to try that out, with the result being the two sliders that you see below.

With those sliders, you can adjust the HTML/CSS "font-weight" property. A normal font weight is 400. 100 is really thin, and 900 is very heavy, with 600 corresponding to normal bold. The first slider jumps in increments of 100, as interesting things happen at 400, 500, 600 et cetera. The second slider can be set to any value, and you can see that the weight of the Muli font will adjust smoothly as you adjust the slider. (Although with a jump at 600.)

Most fonts only have a regular and a bold weight, but on my Mac, Helvetica Neue and the system font (San Francisco) have additional weights, but they're not smoothly variable like Muli. I thought that was pretty cool so I cleaned up this page so other people can try this out. Have fun with fonts!

How it works

You can use the radio button to select the font the page is displayed in. Click the checkbox to hide a font (you'll need to reload the page to unhide). The sliders let you set the font weight property between 100, the thinnest, and 900, the heaviest. Note that if a font is unavailable on your system, you'll get the VT323 font instead.