CSS font-size Property

Posted in CSS Tutorial

Updated on Oct 03, 2024

By Mari Selvan

👁️ 24 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The font-size property in CSS is used to set the size of the font for an element's text content. It is a crucial property for controlling the visual appearance and readability of text on web pages.

By adjusting the font size, you can create a hierarchy of text elements, making your content more accessible and visually appealing.

💡 Syntax

The syntax for the font-size property is simple. You can specify the font size using various units.

Syntax

Copied

element {
  font-size: value;
}

Here, value can be specified in different units such as pixels (px), em, rem, percentages (%), points (pt), and others.

🎛️ Default Value

The default value of the font-size property is medium, which typically translates to 16px in most browsers.

🏠 Property Values

Value	Description
Keywords	xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller
Absolute units	px (pixels), pt (points), cm (centimeters), mm (millimeters), in (inches)
Relative units	em, rem, % (percentage), vw (viewport width), vh (viewport height)

📄 Example

In this example, we'll set the font size of a paragraph to 20 pixels.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS font-size Example</title>
  <style>
    p {
      font-size: 20px;
    }
  </style>
</head>
<body>
  <h1>Paragraph with Custom Font Size</h1>
  <p>This paragraph has a font size of 20 pixels.</p>
</body>
</html>

🖥️ Browser Compatibility

The font-size property is supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is one of the fundamental CSS properties and has wide-ranging support across different platforms and devices.

🎉 Conclusion

The font-size property is essential for web developers to control the size of text on their websites.

By using this property, you can enhance the readability and visual hierarchy of your content, making it more accessible and engaging for users. Experiment with different units and values to find the perfect balance for your website's design.