Lesson 4 of 15

Typography

CSS Typography

Control how text looks with these properties:

h1 {
  font-family: Georgia, serif;    /* font stack */
  font-size: 2rem;                /* size */
  font-weight: bold;              /* 100-900 or bold/normal */
  font-style: italic;
  line-height: 1.5;               /* spacing between lines */
  letter-spacing: 0.05em;        /* space between letters */
  text-transform: uppercase;     /* uppercase, lowercase, capitalize */
  text-decoration: underline;    /* underline, none, line-through */
  text-align: center;            /* left, right, center, justify */
}

Font stacks list fallback fonts:

font-family: "Helvetica Neue", Arial, sans-serif;

Units:

  • rem — relative to root font size (16px by default)
  • em — relative to parent element's font size
  • px — absolute pixels

Your Task

Style headings and paragraphs with font-family, font-size, font-weight, and line-height.

CSS preview loading...
Loading...
Click "Run" to execute your code.