Skip to main content

CSS Font Size

In CSS, the font-size property is used to set the size of text content. You can specify the font size in various units such as pixels, ems, rems, percentages, and more. By adjusting the font size, you can control the visual appearance of text on your web page, making it larger or smaller as needed.

Syntax​

The font-size property in CSS has the following syntax:

index.css
selector {
  font-size: value;
}
  • selector: The CSS selector that targets the text content you want to apply the font size to.
  • value: The size of the text content. This can be specified in various units such as pixels (px), ems (em), rems (rem), percentages (%), and more.
  • The font-size property can be applied to any HTML element that contains text content, such as headings, paragraphs, and spans.
  • The font-size property affects the size of the text content but does not change the size of the element itself. It only adjusts the appearance of the text within the element.
Note

The default font size for most browsers is 16px. If you do not specify a font size for text content, it will be displayed at the browser's default size.

Examples​

1. Setting the Font Size in Pixels​

You can set the font size of text content using pixels (px) as the unit of measurement. In the following example, we set the font size of a paragraph to 16px:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Size Example</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <p class="text">This is a paragraph with a font size of 16px.</p>
</body>
</html>
http://127.0.0.1:5500/index.html

This is a paragraph with a font size of 16px.

2. Setting the Font Size in Em Units​

You can also set the font size using ems (em) as the unit of measurement. The em unit is relative to the font size of the parent element. In the following example, we set the font size of a paragraph to 1.5em, which is 1.5 times the font size of its parent element:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Size Example</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div class="parent">
    <p class="text">This is a paragraph with a font size of 1.5em.</p>
  </div>
</body>
</html>
http://127.0.0.1:5500/index.html

This is a paragraph with a font size of 1.5em.

Note

When using em units, the font size of an element is calculated relative to the font size of its parent element. If the parent element does not have a specified font size, the browser's default font size (16px) is used as the reference.

3. Setting the Font Size in Percentages​

You can specify the font size using percentages (%) as a relative unit of measurement. In the following example, we set the font size of a paragraph to 150%, which is 1.5 times the default font size:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Size Example</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <p class="text">This is a paragraph with a font size of 150%.</p>
</body>
</html>
http://127.00.1:5500/index.html

This is a paragraph with a font size of 150%.

4. Setting the Font Size Using Rem Units​

You can also use rems (rem) as a relative unit of measurement for font size. The rem unit is relative to the font size of the root element (<html>). In the following example, we set the font size of a paragraph to 1.5rem, which is 1.5 times the font size of the root element:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Size Example</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <p class="text">This is a paragraph with a font size of 1.5rem.</p>
</body>
</html>
http://127.00.1:5500/index.html

This is a paragraph with a font size of 1.5rem.

Note

When using rem units, the font size of an element is calculated relative to the font size of the root element (<html>). This makes it easier to maintain consistent font sizes across your web page.

5. Setting the Font Size Using Keywords​

You can also use keywords to specify the font size. Common keywords include small, medium, large, and x-large. In the following example, we set the font size of a paragraph to large:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Size Example</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <p class="text">This is a paragraph with a font size of large.</p>
</body>
</html>
http://127.00.1:5500/index.html

This is a paragraph with a font size of large.

6. Setting the Font Size Using Viewport Units​

You can also use viewport units (vw, vh, vmin, vmax) to specify the font size relative to the size of the viewport. In the following example, we set the font size of a paragraph to 5vw, which is 5% of the viewport width:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Size Example</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <p class="text">This is a paragraph with a font size of 5vw.</p>
</body>
</html>
http://127.00.1:5500/index.html

This is a paragraph with a font size of 5vw.

Note

Viewport units (vw, vh, vmin, vmax) are relative to the size of the viewport. Using viewport units allows you to create responsive designs where text scales based on the size of the viewport.

7. Setting the Font Size Using Absolute Units​

You can also use absolute units such as in (inches), cm (centimeters), mm (millimeters), pt (points), and pc (picas) to specify the font size. In the following example, we set the font size of a paragraph to 12pt:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Size Example</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <p class="text">This is a paragraph with a font size of 12pt.</p>
</body>
</html>
http://127.00.1:5500/index.html

This is a paragraph with a font size of 12pt.

8. Setting the Font Size Using Custom Units​

You can define custom units for font size using CSS variables. In the following example, we define a custom unit called --custom-size and set the font size of a paragraph using this custom unit:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Size Example</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <p class="text">This is a paragraph with a custom font size.</p>
</body>
</html>
http://127.00.1:5500/index.html

This is a paragraph with a custom font size.

Conclusion​

The font-size property in CSS allows you to control the size of text content on your web page. By specifying the font size using different units of measurement, you can adjust the appearance of text to suit your design requirements. Experiment with different font sizes to find the right balance between readability and aesthetics for your web content.