Jason Santa Maria wrote a book called On Web Typography. I’m reading it and adding here the stuff I want to remember.

The CSS em

“The em is the available height of each character’s canvas” (page 28)

Okay, how does line-height: 1em looks like then ?

body {
  background-color: #eee;
}
p {
  font-family: Verdana, sans-serif;
  font-size: 3rem; //set the 'em' default
  max-width: 10em; //I make sure I have at least two lines
  line-height: 1em;
}
span {
  background-color: rgba(0, 0, 0, 0.3);
  outline: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

So, line-height: 1em means that a q with a l under are going to touch each other.

What does font-weight: 400 means?

See the Pen What does `font-weight: 400` means ? by Pierre (@Marekje) on CodePen.

Hey, Helvetica has three weights ! One for titles, one for text and one for emphasis, which means I could make an entire website with it. Maybe it overused though…

On page 51, Santa Maria tells us he likes Chaparral. Lets look at it !. Woaow, four weights ! 300, 400, 600 and 700. Plus, I really like its feeling…

How to choose a font :

• Type for a moment

  For navigation or interface text, I look for typefaces that hold up well at small sizes. [A] simple sans serif. [he promotes] JAF Facit.

• Type to live with

(The screenshot on page 63 is a gorgeous page of text !)

Typefaces for longer reading should give a page an even texture (p62)

–> Not too much personality, specific features that sets the font apart from it peers.

“Sufficient x-height”
“Low or medium contrast”
“recognizable and distinct letterforms”
–> For body text, use a high x-height, it gives more space to the character, thus giving more space to convey the information (the letter shape).

–> Use lowercase numerals, because they integrate better with the text. Uppercase numerals would look like bold text.

• Methods for choosing typeface

Word association, comparison of real text, appropriateness

Proxima Nova’s straight lines contrast perfectly with the Mighty logo’s script lettering.

–> fontsinuse.com A website showing diverse fonts in the real world (even some chinese characters !).

Avoid ready-mades. (p.74)

Be careful with free fonts. (p.75)