Web Typography

What are web safe fonts?

Web safe fonts are a small collection of fonts that were pre-installed on most computers in the past.

Before custom web fonts, developers could only use these web safe fonts in their websites. Anything else had to be displayed as an image.

What do the different font file formats `.svg`, `.eot`, `.ttf`, and `.woff` mean?

File Format	Browser/Device Support
`.svg`	Very old Safari (iOS and Desktop)
`.eot`	Internet Explorer
`.ttf`	Everything except Internet Explorer
`.woff`	Newer browsers

How do you embed a custom web font in CSS?

Specify the font-face and path to the .woff file using @font-face:

@font-face {
  font-family: 'Roboto';
  src: url('Roboto-Light-webfont.woff') format('woff'); 
}

Set the font-family property of elements to use the new font:

body {
  font-family: 'Roboto', sans-serif;   
}

What are the differences between font-weight numbers and human-friendly terms?

Number	Term
100	Thin
200	Extra Light
300	Light
400	Normal
500	Medium
600	Semi Bold
700	Bold
800	Extra Bold
900	Black

Most font families don’t supply a face for every single weight.

What is Google Fonts and how does it simplify using web fonts?

Google Fonts hosts web fonts and provides the @font-face code for you. This skips the steps of downloading font files and configuring @font-face yourself.

What are the two common solutions for separating paragraphs?

Use a first-line indent
Add a margin between paragraphs

What CSS properties control vertical text spacing?

margin-top
margin-bottom
padding-top
padding-bottom
line-height

Why is line-height called leading?

In metal typesetting, thin strips of lead were used between lines of text to increase spacing. So the size of the lead controlled the line-height.

What is a good rule of thumb for number of characters in a single line?

Limit lines to around 80 characters. This makes it easier to read.

What are some typography guidelines?

Use a font-size between 14px and 20px for body text
Use real italic fonts if possible
Only use underlines for hover states

References

Ref: https://www.internetingishard.com/html-and-css/web-typography/