Typography Snippets

June 16, 2017

Design

Snippets

These are just raw notes on Typography. They aren’t necessarily organized in any specific way, this is more of a board to place things I learn about the topic. I used to have these unorganized within the notes app on my phone, but by placing them here I hope that someone else can use them too. If you have any questions on the notes or a question on a particular snippet feel free to reach out to me using the form at the bottom of this page.

Newest Font Downloads:

Solid Pairings:

Web Rules relating to typography

The following is a great way to use the CSS clamp() function to set dynamic text:

.element {
   font-size: clamp(16px, (1rem + 5vw), 50px);
}

Solid Typographic Scale – 12, 14, 16, 20, 34

Leading between heading and paragraph should be either 40 or 32

Between 50-65 characters per line is perfect

Every letter of the alphabet must be distinct enough from each other to avoid confusion

Ideal line length is between 10 and 12 words

Rounded and pointed letters appear shorter when set at the same size as the other letters, thats why they are slightly bigger in a font

An ampersand is an E and a T combined

Fonts with big round Os and tails are more human like and friendly because they resemble the human face

Fonts that are more rectilinear conjure up thoughts of technology and coldness

When writing a love letter use Humana Serif Light

Fonts used most regularly:

Highly Visible Fonts:

Worst Fonts:

Typeface Classifications

Albertus

Avenir

Baskerville

Bembo

Bickham Script

Bodoni

Caslon

Cooper Black

Didot

Franklin Gothic

Frutiger

Futura

Garamond

Gill Sans

Helvetica

Minion

Mrs. Eaves

Optima

Rockwell

Sabon

Univers

@joekotlan on Twitter