CSS Font Size and Font Style, Guide with Examples and Output

CSS Font Size and Style

In CSS, the font-size and font-style properties are used to control the appearance of text, particularly its size and the way it is styled (italic, oblique, or normal). These properties help make text more readable, stylish, and responsive to different devices.

CSS font-size

The font-size property is used to set the size of the text. You can use keywords, length units, or relative values to define how large or small the text should appear.

Common Values for font-size

Type	Examples	Description
Keywords	small, medium, large, x-large, xx-small, xx-large	Predefined size names
Relative	larger, smaller	Relative to the parent element
Percent	150%, 200%	Percentage of parent font size
Length Units	16px, 1.5em, 1rem	Precise control using units

Example: font-size

<!DOCTYPE html>
<html>
<head>
  <title>CSS font-size Example</title>
</head>
<body>
  <p style="font-size: xx-small;">This font size is extremely small.</p>
  <p style="font-size: x-small;">This font size is extra small.</p>
  <p style="font-size: small;">This font size is small.</p>
  <p style="font-size: medium;">This font size is medium.</p>
  <p style="font-size: large;">This font size is large.</p>
  <p style="font-size: x-large;">This font size is extra large.</p>
  <p style="font-size: xx-large;">This font size is extremely large.</p>
  <p style="font-size: smaller;">This font size is smaller.</p>
  <p style="font-size: larger;">This font size is larger.</p>
  <p style="font-size: 200%;">This font size is 200%.</p>
  <p style="font-size: 20px;">This font size is 20 pixels.</p>
</body>
</html>

Output:

CSS font-style

The font-style property is used to define the style of the text, specifically for italic or oblique effects.

Values for font-style

Value	Description
normal	Standard, non-italicized text (default).
italic	Italicized font for emphasis.
oblique	Slanted text similar to italic, but les defined.

Example: font-style

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-size: 100%;
    }

    h2 {
      font-style: italic;
    }

    h3 {
      font-style: oblique;
    }

    h4 {
      font-style: normal;
    }
  </style>
</head>
<body>
  <h2>This heading is shown in italic font.</h2>
  <h3>This heading is shown in oblique font.</h3>
  <h4>This heading is shown in normal font.</h4>
</body>
</html>

Output: