🎓 A1Learner
🔍

CSS Font Style and Size

Three font properties control the tilt, thickness and size of text. Font-style tilts text, font-weight thickens it and font-size sets its size.

Tilt the intro text

The font-style property tilts the text. The value italic gives the tilt.

.intro {
  font-style: italic;
}

Make the box heading bold

The font-weight property sets the thickness of the text. The value bold gives thick text.

h2 {
  font-weight: bold;
}

Set sizes in pixels and percent

The heading gets a fixed size in pixels. The demo paragraph gets 150 percent of its parent size.

h1 {
  font-size: 40px;
}
#demo {
  font-size: 150%;
}

Example

.intro {
  font-style: italic;
}
h2 {
  font-weight: bold;
}
h1 {
  font-size: 40px;
}
#demo {
  font-size: 150%;
}

Key points

  • Font-weight also takes numbers from 100 to 900.
  • Higher weight numbers give thicker text.
  • A font-size in percent is worked out from the size of the parent element.
  • Sizes in percent can scale when the base size changes.
  • The value normal resets font-style and font-weight.
  • Font-size sets how large the text is.

In this example, the intro paragraph is tilted with italic style. The heading inside the box is made bold. The main heading is set to 40 pixels. The demo paragraph is set to 150 percent, which works out to 24 pixels.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

Which property makes text bold?