Colors and typography

Colors

Color and type are most of what users actually perceive as design, and on a team they arrive as exact values ("the brand gold is #d4af37"), so you need to read and write these formats fluently.

Three common ways to write the same color:

h1 {
  color: rgb(212, 175, 55);  /* red, green, blue: 0 to 255 each */
  color: #d4af37;            /* hex: the same three numbers in base 16 */
  color: gold;               /* one of about 140 named colors */
}

Hex is the one you will see everywhere: #RRGGBB, two hex digits (00 to ff, meaning 0 to 255) per channel. #000000 is black, #ffffff is white, #ff0000 is pure red.

Two properties use colors constantly:

• color sets the text color.
• background-color (or the shorthand background) fills the area behind the element.

Need transparency? rgba(0, 0, 0, 0.5) adds a fourth number: opacity from 0 (invisible) to 1 (solid).

Typography

body {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.5;
}

• font-family is a fallback list: the browser tries Georgia, then Times New Roman, then whatever serif font it has. Always end with a generic family (serif, sans-serif, or monospace).
• font-size: 16px is the browser default. Body text should rarely go below it.
• line-height: 1.5 sets the space between lines as a multiple of the font size. Values between 1.4 and 1.6 read best.
• font-weight: bold (or numbers 100 to 900) and text-align: center round out the daily set.

Set these once on body and nearly every element inherits them. Inheritance is part of the cascade, coming next lesson.