|Upper case||Lower case||Numbers||Font|
|ACGIJQRUW||acgijqruw||14569||URW Gothic Book|
|ACGIJQRUW||acgijqruw||14569||Times New Roman|
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!
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.