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.
| Font | Type of font | On Mac | modern font that has been drawn with the screen in mind.? |
|---|---|---|---|
| Akzidenz Grotesque | on MAc | ||
| Avenir | Yes (& Avenir Next) | ||
| Avant Garde | |||
| Bell Gothic | |||
| Bodoni | |||
| Bembo | |||
| Caslon | |||
| Clarendon | |||
| Courier | |||
| Monospace Din Mittelschrift | |||
| Franklin Gothic | |||
| Frutiger Futura | |||
| Geometric Sans | |||
| Garamond | Serif | ||
| Gill Sans | Sans | ||
| Gotham | |||
| Helvetica | |||
| Letter Gothic | |||
| Memphis | |||
| Meta | |||
| OCRB | Monospace | ||
| Rockwell | |||
| Sabon | |||
| Trade Gothic | |||
| Trajan | |||
| Univers |
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.)
More styles & weights = better, especially when considering mobile
Optimized and redesigned for screen
Inconsolata (better then Courier or Courier New)
serif-vs-sans-the-final-battle
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
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.
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
Introduction to Variable fonts
upcoming in 2019, offers lots of flexibility & CSS transitions. Limited fonts available.
Benefits
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.)
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.ttfDo 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.