I do not know much about typefaces, but do see Luc Devroye’s On Snot and Fonts for some entertaining history for laypeople. The 99pi episode on Fraktur/blackletter is a fun foray into the classic “German script”. An intriguing snapshot of how typesetting used to work, check out this 1897 type foundry catalogue.
Installing fonts on my computer
On macOS, tl;dr you can just double click on a font.
Or you can try to engage with a more complicated underlying infrastructure.
Certain useful fonts are packaged using
brew install --cask font-fira-code-nerd-font brew install --cask font-sauce-code-pro-nerd-font brew install --cask font-source-code-pro brew install --cask font-droid-sans-mono-nerd-font # etc
Installing fonts on my website
Long story. Here is a backgrounder.
Google fonts, among others, lists hundreds of sexy typographical options for beautifying my website. Can I use them? Yes. The underlying methods are complicated and boring. Like most web technologies there was a standards war and we are on the battlefield sifting through the damage for usable detritus.
I have two options, as a rule. Firstly I could link to a font hosted (typically) on some google server, (font linking) or I could host my own copy of a website (font embedding). The former is simple, fast, updates automatically and saves bandwidth, but does not work offline or in China, and leaks information to Google about my punters. The latter is tedious and manual but gives me more autonomy. Which is to say, neither is ideal. Maurits van der Schee summarizes the problems.
Font embedding is made especially tedious by the fact that there is just no obvious way to get embedded fonts set up from the convenient Google font overview websites which make it easy to do font linking. Maurits also summarises the solution if you want to embed:
Mario Ranftl (majodev) has created an extremely useful google-webfonts-helper (hosted on Heroku). If you want to know how you can find the source on Github (collecting stars). It makes it very easy to self-host your fonts. The steps:
- Go to google-webfonts-helper.
- Select one of the 682 fonts from the menu on the left.
- Copy-paste presented CSS code into your stylesheet in the directory
- Download the zip file using the big blue button.
- Unzip the files and upload them to your website in the directory
Thank you Mario, that is super! Alternatively, if you have your own fonts and need them in such a convenient zip file, you may try fontsquirrel.com’s Webfont Generator.
Fonts that ideally look good in monospace and make it easy to distinguish troublesome characaters such as
(My personal bugbear is distinguishing different quotes, e.g.
There is a website for this
where we can see various alternatives of note.
Google also maintain a web-font-oriented database.
Most OSes ships with a selection, maybe
Ubuntu Mono or
Inconsolata or such.
Or you can level up your OCD by using
which distributes cult developer-friendly fonts with extra glyphs for …
weird UI icons and such?
Codeface provides a gallery / repository of such fonts.
- Source Code Pro in the light variant is my favourite font for coding so far.
- Hack is a popular open source option.
- Roboto Mono is everywhere thanks to Google backing.
- Fira Code has fancy coding ligatures, which is a whole coding hipster thing.
- Anonymous Pro - A family of four fixed-width fonts designed with coding in mind.
- DejaVu Sans Mono - A font family based on the Vera Fonts.
- Inconsolata - A monospace font, designed for code listings and the like.
- Input - A flexible system of fonts designed specifically for code.
- Meslo - Customized version of Apple’s Menlo font.
- Operator Mono - A surprisingly usable alternative take on a monospace font (commercial).
- Powerline Fonts - Repo of patched fonts for the Powerline plugin. These all look suspiciously ot-of-date.
- Office Code Pro is based on Source Code Pro but tweaked “specifically for text editors and coding environments”. (seems to abandoned, and is missing Greek.)
- Mono Lisa is a pretty-looking font with many coding-relevant features, but at EUR69 I cannot be buying it right now instead of paying rent.
wget http://packages.sil.org/sil-repository.deb && sudo dpkg -i sil-repository.deb apt install font-sil-doulos
In addition to European letters used in many Western European languages, Japanese characters that including Kana glyphs and more than 5,300 Kanji glyphs, and major international phonetic symbols, operators, special symbols, etc. are also prepared.
All Latin glyph sets were completed with Basic Latin, Latin-1 Supplement, Latin Extended-A, and IPA Extensions. And most of Greek, Cyrillic, Vietnamese, and extended glyphs and symbols were prepared too.
Google’s Noto font famously aspires to support all languages and claims Sundanese, as does Prada, but I have not tested those languages myself. However, they provide essential emoji support on linux. On debian-systems
apt install fonts-noto
IBM’s Plex is their corporate logo font, made available to us all for practical application. It claims broad language support.
You can alter fonts! Programatically!
Schmelvetica is an example of how you can modify a font algorithmically, based on the manual parody Smelvetica, and presumably Hellvetica. Or, for a flakey but cute hack using machine learning, SVGVAE will algorithmically design fonts! For the moment, quirky nasty fonts.
Retro OCR fonts
Clara I bookmarked for reasons that I have now forgotten. But it has an evocative blurb:
The family includes italic, bold, bold italic, and small capitals, while the character set includes Greek, Cyrillic, ogham, phonetic and mathematical ranges, scribal abbreviations, and other specialist characters. The fonts also include some Opentype layout features (such as ligature substitution, small capitals, and old-style numerals), as well as some variant forms for particular languages.
BellTopo Sans, Sarah Bell’s font inspired by maps
interface, a UI font
Brutalita is an experimental font and editor, edit in your browser and download the font.
sudo apt-get install fonts-powerline
- Sparks is a font which uses converts numbers into miniature graphs.
What makes it different from traditional typography design is that it focuses on letterform distinction to increase character recognition, ultimately improving readability. We are making it free for anyone to use!