Font styling is a key part of typography in CSS. This lesson shows you how to control the size, weight, and style of text. By adjusting these properties, you can create visual hierarchy and improve readability on your web pages.

These properties enable you to set the size of text, make it bold or light, and even change its style to italic. Together, they help give your text the desired appearance.

Syntax

Follow the code block below to set font size, weight, and style in CSS:

/* Set the font size */
font-size: value; /* e.g., font-size: 16px; or font-size: 1.5em; */

/* Set the font weight */
font-weight: value; /* e.g., font-weight: normal; or font-weight: bold; or a number like 400, 700; */

/* Set the font style */
font-style: value; /* e.g., font-style: normal; or font-style: italic; */

Explanation:

• font-size: Controls how large or small the text appears.
• font-weight: Determines the thickness of the text (e.g., normal or bold).
• font-style: Specifies whether the text is displayed normally or in italic.

Example 1: Styling a Heading

In this example, we style a <h1> element by setting its font size, weight, and style. The code demonstrates how to increase the size, make the text bold, and add an italic style.

Explanation:

• Font Size (32px): The <h1> text is larger, making it prominent.
• Font Weight (bold): The bold weight emphasizes the heading.
• Font Style (italic): The italic style adds a subtle flair to the text.

Example 2: Styling Text with Classes

In this example, we use a class to apply different font properties on paragraph text. One paragraph is set to have larger text with a lighter weight and another to have smaller text with normal weight.

Explanation:

• Class .large-light-italic:
  • font-size (24px): Makes the text noticeable.
  • font-weight (300): Gives a lighter appearance.
  • font-style (italic): Adds emphasis with an italic look.
• Class .small-normal:
  • font-size (14px): Provides a subtle and less prominent appearance.
  • font-weight (normal): Keeps the standard weight for clarity.
  • font-style (normal): The text remains in its standard form.

This lesson shows you how to control text appearance using CSS properties for font size, weight, and style. By applying these properties, you can enhance your content’s clarity and make your design more engaging.