| Upper case | Lower case | Numbers | Font | ||
|---|---|---|---|---|---|
| ACGIJQRUW | acgijqruw | 14569 | Century Gothic | ||
| ACGIJQRUW | acgijqruw | 14569 | URW Gothic Book | ||
| ACGIJQRUW | acgijqruw | 14569 | Questrial | ||
| ACGIJQRUW | acgijqruw | 14569 | Muli (variable) | ||
| ACGIJQRUW | acgijqruw | 14569 | Helvetica Neue | ||
| ACGIJQRUW | acgijqruw | 14569 | Helvetica | ||
| ACGIJQRUW | acgijqruw | 14569 | Arial | ||
| ACGIJQRUW | acgijqruw | 14569 | sans-serif | ||
| ACGIJQRUW | acgijqruw | 14569 | Verdana | ||
| ACGIJQRUW | acgijqruw | 14569 | Georgia | ||
| ACGIJQRUW | acgijqruw | 14569 | Times New Roman | ||
| ACGIJQRUW | acgijqruw | 14569 | Times | ||
| ACGIJQRUW | acgijqruw | 14569 | serif | ||
| ACGIJQRUW | acgijqruw | 14569 | Courier | ||
| ACGIJQRUW | acgijqruw | 14569 | Courier New | ||
| ACGIJQRUW | acgijqruw | 14569 | monospace | ||
| ACGIJQRUW | acgijqruw | 14569 | Fira Code | ||
| ACGIJQRUW | acgijqruw | 14569 | System font |
After many years of using Century Gothic and its clone URW Gothic Book for my website muada.com, 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.
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!
Fira Code seems like a fairly regular modern fixed with font. But don't be deceived: it uses ligatures to make source code more readable. A ligature is when two (or more?) letters are displayed as one "glyph" that is slightly different than the simple combination of the first and the second. In the case of Fira Code, when you load (for instance) some HTML, Javascript or C code, this:
www != === <= >= <> && || -> 0xFF
will display as this:
www != === <= >= <> && || -> 0xFF
Note that the actual characters are still the same, so it even works on plain text files. It's just that the font rendering engine detects the combination of letters and shows a replacement glyph rather than the individual letters. And it's still monospace. See Github for more info.
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.