FRONTENDO
Emberhold Forge
0
0
CSS · Typography & Colors
New technique

Choosing a font

Good type is like a good hammer grip: nobody notices it until it's wrong.

You can't be sure a visitor has your favourite font, so font-family takes a font stack: a list, separated by commas. The browser walks down it and uses the first font that's available.

Font names with spaces or numbers need quotes. Leave them off a name like Source Sans 3 and the whole declaration becomes invalid: the browser drops the entire stack, fallbacks included, and shows its default font.

body {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-weight: 400;
}
strong { font-weight: 700; }
em { font-style: italic; }
  • End with a generic family - serif, sans-serif or monospace - as the safety net: some font of that kind always exists.
  • system-ui uses the operating system's own font: fast and familiar.
  • font-weight: 400 is normal, 700 is bold. font-style: italic slants the text.