Generally speaking, there are two types of typography– expressive typography (type is visual, carries the meaning of the word and sometimes appears as physical shapes) and functional typography (type that is meant to be read). I will focus on the latter.
When starting out, it is best to learn the fundamentals of good design: hierarchy (primary, secondary and tierchiary reads), flow (how a person “reads” the layout by following the movement of their attention), legibility (in Western culture, type is read top to bottom, left to right so it’s important to arrange type accordingly), grouping (organizing blocks of type in intelligent and logical groups) and interest, achieved through contrast (scale, texture, color, density, negative space).
Skip 1 size: bold & thin, not bold & regular
Use any typeface you like as long as it’s one of the following: Akzidenz Grotesque, Avenir, Avant Garde, Bell Gothic, Bodoni, Bembo, Caslon, Clarendon, Courier, Din Mittelschrift, Franklin Gothic, Frutiger, Futura, Garamond, Gill Sans, Gotham, Helvetica, Letter Gothic, Memphis, Meta, OCRB, Rockwell, Sabon, Trade Gothic, Trajan and Univers.
Futur designers recommendations (youtube)
Click a sample or its Specimen link to inspect the typeface. The three design links in each row open documented projects on Fonts In Use, with images and font credits. The samples are images, so you do not need the fonts installed.
Frutiger and Futura have separate rows here. “Geometric sans” and “monospace” are categories, not additional typefaces; DIN Mittelschrift is proportional, not monospaced. Caslon is represented by Adobe Caslon. Bodoni and Garamond have several interpretations; those archive entries group uses whose exact revival is not always known. Treat their samples as an introduction to the family. Projects may combine the featured font with other typefaces.
On a narrow screen, scroll the table sideways to see the design links. Specimen images are served by Fonts In Use; the text links remain available if an image does not load.
Fonts on Mac
support.apple.com/nl-nl/HT208968
From the list: Avenir (& Avenir Next) Bodoni Courier (& Courier New) Futura (Futura Condensed) (NOT futura PT) Gill Sans Helvetica (& Helvetica Neue) Rockwell
Interesting: Apple also has Noto (google, very extensive, All LAnguages all countries, Ikea switched to it.)
Joost’s Notes
More styles & weights = better, especially when considering mobile
Optimized and redesigned for screen
For programming
Inconsolata (better then Courier or Courier New)
Sans Serif & Serif
serif-vs-sans-the-final-battle
Sans
Akzidenz Grotesque; Very old, predecessor of HElvetica Helvetica Neue: misses character of original Helvetica (Neue Haas Grotesk) Neue Haas Grotesk = Helvetica (1957) but also has a 2010 redesigned version for digital. Helvetica Now (2019) does something similar. Differences www.quora.com/What-if-any-are-the-significant-differences-between-Neue-Haas-Unica-and-Helvetica-Why-do-they-matter
Serif
Georgia reads better on screen than Garamond Georgia has a huge advantage over Garamond on-screen because it was designed to be displayed as such from the very beginning designforhackers.com/blog/garamond/
an impressive 326ppi. Now, we’re starting to get some display technologies that are approaching the quality of paper when it comes to displaying letterforms readably.
So, maybe some day Garamond can make its comeback.
Futura / Brandon
Brandon Grotesque is one of my favorites on this list. It’s also the closest to Futura, maybe that’s a pattern. I’ve discussed Brandon Grotesque before, when I layed out alternatives to Helvetica, which I do see as a slight oversight. Brandon is much closer to Futura than it is to Helvetica. It relatively retains the same shape and density. What makes Brandon different and distinctive, is the rounded corners of its ends, which is subtle as hell, I know, but rounded ends has incredible influence on a typeface. It makes Brandon friendlier and more approachable than Futura.
Serif typefaces tend to be thought of as classic and traditional, whereas sans-serif typefaces are thought of as more modern and contemporary. The fine details of serifs, especially the more delicate and high-contrast designs, don’t always display well on screens, especially at small sizes on low-resolution displays. I think all of this will change in the next few years though as high-resolution screens are becoming more common. Expect to see more delicate, high-contrast serifs being used on the web in the near future. www.typewolf.com/top-10-serif-fonts
Variable fonts
Introduction to Variable fonts
upcoming in 2019, offers lots of flexibility & CSS transitions. Limited fonts available.
Benefits
- flexibility
- File size - Monotype ran an experiment by combining 12 input fonts to generate eight weights, across three widths, across both the Italic and Roman styles. Storing 48 individual fonts in a single variable font file meant a 88% reduction in file size.
Avenir Next - Demo, removed from GitHub
www.monotype.com/resources/articles/variable-fonts-making-the-promise-a-reality/
Amstelvar Alpha (gebaseerd op Nederlandse ontwerpen)
Decovar (zeer decoratief, schildpadjes e.d.)
Install fonts Linux
Step 3 : Install the fonts On Linux systems, font binaries are generally installed in either the system font directory on the path /usr/share/fonts/ or in a user font directory that is frequently on one of the following paths: ~/.local/share/fonts/ or /usr/local/share/fonts. We’ll use the ~/.local/share/fonts/ path in this example. If the directory does not exist, create it with the following command:
mkdir ~/.local/share/fontsMove your font binaries to the destination directory with mv:
mv ttf/Hack-Regular.ttf ~/.local/share/fonts/Hack-Regular.ttf
mv ttf/Hack-Italic.ttf ~/.local/share/fonts/Hack-Italic.ttf $ mv ttf/Hack-Bold.ttf ~/.local/share/fonts/Hack-Bold.ttf
mv ttf/Hack-BoldItalic.ttf ~/.local/share/fonts/Hack-BoldItalic.ttfHelvetica Now
Do not download from obscure sites like en.bestfonts.pro, this is illegal. Support the creators of a font by buying a commercial license whe you are using it, for example on fonts.adobe.com, fonts.com etc.
2026 reflection
The section on variable fonts aged well. In 2020, variable fonts were still niche; by 2026, they are the default for web typography. This site now self-hosts Inter Variable (weight 400/500) as a licensed stand-in for Aeonik and IBM Plex Mono for monospace labels, both served as variable or static subsets via @fontsource packages rather than loaded from Google Fonts. The note about “more styles & weights = better, especially on mobile” turned out to be exactly what variable fonts deliver: one file, every weight, smaller total download.
What changed: the classic typeface list at the top now reads more like history than a recommendation. Good grotesques (Helvetica, Akzidenz) are still good, but the practical choice for most web projects has shifted to open-source variable families that are free to self-host. The advice about supporting font creators by buying licenses still stands for commercial typefaces, but the ecosystem of high-quality libre fonts has grown enough that you can build a professional type system without licensing costs.