Web Development

Typefaces Fonts

Joost van der Laan
#typography
#fonts

Typefaces Fonts

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)

FontType of fontOn Macmodern font that has been drawn with the screen in mind.?
Akzidenz Grotesqueon MAc
AvenirYes (& Avenir Next)
Avant Garde
Bell Gothic
Bodoni
Bembo
Caslon
Clarendon
Courier
Monospace Din Mittelschrift
Franklin Gothic
Frutiger Futura
Geometric Sans
GaramondSerif
Gill SansSans
Gotham
Helvetica
Letter Gothic
Memphis
Meta
OCRBMonospace
Rockwell
Sabon
Trade Gothic
Trajan
Univers

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

www.typewolf.com/guides

www.typewolf.com/adobe-fonts

Variable 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.)

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/fonts

Move 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.ttf

Helvetica 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.

← Back to Blog