CSS - font-size Property

Quiz

CSS font-size property sets the size of the font for an elements text. It can be defined using various units like pixels, ems, rems, percentages, or keywords, impacting text readability, layout, and overall design consistency across different devices and resolutions.

Syntax

font-size: medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | percentage | initial | inherit;

Property Values

Value	Description
medium	It sets the element's font size as medium.
xx-small	It sets the element's font size as xx-small.
x-small	It sets the element's font size as x-small.
small	It sets the element's font size as small.
large	It sets the element's font size as large.
x-large	It sets the element's font size as x-large.
xx-large	It sets the element's font size as xx-large.
smaller	It sets the element's font size as smaller.
larger	It sets the element's font size as larger.
length	The font size of the element is specified in length units (px, em, rems etc.)
percentage	The font size of the element is specified in percentage.
initial	It sets the property to its initial value.
inherit	It inherits the property from the parent element.

Examples of CSS Font Size Property

The following examples explain the font-size property with different values.

Font Size Property with Medium Value

To set a medium size to the element's font, we use the medium value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .font {
         font-size: medium;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-size property
   </h2>
   <p>
      This is sample text.
   </p>
   <p class="font">
      This text has a medium size.
   </p>
</body>

</html>

Font Size Property with XX-Small Value

To set a xx-small size to the element's font, we use the xx-small value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .font {
         font-size: xx-small;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-size property
   </h2>
   <p>
      This is sample text.
   </p>
   <p class="font">
      This text has a xx-small size.
   </p>
</body>

</html>

Font Size Property with X-Small Value

To set a x-small size to the element's font, we use the x-small value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .font {
         font-size: x-small;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-size property
   </h2>
   <p>
      This is sample text.
   </p>
   <p class="font">
      This text has a x-small size.
   </p>
</body>

</html>

Font Size Property with Small Value

To set a small size to the element's font, we use the small value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .font {
            font-size: small;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-size property
   </h2>
   <p>
      This is sample text.
   </p>
   <p class="font">
      This text has a small size.
   </p>
</body>

</html>

Font Size Property with Large Value

To set a large size to the element's font, we use the large value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .font {
         font-size: large;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-size property
   </h2>
   <p>
      This is sample text.
   </p>
   <p class="font">
      This text has a large size.
   </p>
</body>

</html>

Font Size Property with X-Large Value

To set a x-large size to the element's font, we use the x-large value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .font {
         font-size: x-large;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-size property
   </h2>
   <p>
      This is sample text.
   </p>
   <p class="font">
      This text has a x-large size.
   </p>
</body>

</html>

Font Size Property with XX-Large Value

To set a xx-large size to the element's font, we use the xx-large value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .font {
         font-size: xx-large;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-size property
   </h2>
   <p>
      This is sample text.
   </p>
   <p class="font">
      This text has a xx-large size.
   </p>
</body>

</html>

Font Size Property with Smaller Value

To set a smaller size to the element's font, we use the smaller value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .font {
         font-size: smaller;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-size property
   </h2>
   <p>
      This is sample text.
   </p>
   <p class="font">
      This text has a smaller size.
   </p>
</body>

</html>

Font Size Property with Larger Value

To set a larger size to the element's font, we use the larger value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .font {
         font-size: larger;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-size property
   </h2>
   <p>
      This is sample text.
   </p>
   <p class="font">
      This text has a larger size.
   </p>
</body>

</html>

Font Size Property with Length Values

The font-size of an element can also be set using length values (e.g. px, rem, em etc.). This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .size1 {
         font-size: 2em;
      }

      .size2 {
         font-size: 25px;
      }

      .size3 {
         font-size: 3rem;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-size property
   </h2>
   <p>
      This is sample text.
   </p>
   <p class="size1">
      This text has a 2em size.
   </p>
   <p class="size2">
      This text has a 25px size.
   </p>
   <p class="size3">
      This text has a 3rem size.
   </p>
</body>

</html>

Font Size Property with Percentage Values

The font-size of an element can also be set using percentage values (e.g. 10%, 4% etc.). This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .size1 {
         font-size: 120%;
      }

      .size2 {
         font-size: 140%;
      }

   </style>
</head>

<body>
   <h2>
      CSS font-size property
   </h2>
   <p>
      This is sample text.
   </p>
   <p class="size1">
      This text has a 120% size.
   </p>
   <p class="size2">
      This text has a 140% size.
   </p>
</body>

</html>

Supported Browsers

Property
font-size	1.0	5.5	1.0	1.0	7.0

css_reference.htm

Print Page