0
0
CSSmarkup~5 mins

Font size in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Font size controls how big or small text appears on a webpage. It helps make text easy to read and looks good on different devices.

To make headings larger than normal text for clear titles.
To adjust paragraph text so it is comfortable to read on phones and computers.
To highlight important words by making them bigger.
To create a consistent look by setting the same size for all body text.
To improve accessibility by increasing font size for users with vision difficulties.
Syntax
CSS
selector {
  font-size: value;
}

The value can be in units like rem, em, px, or percentages.

Using relative units like rem or em helps make your design responsive and accessible.

Examples
Sets paragraph text to 16 pixels, a fixed size.
CSS
p {
  font-size: 16px;
}
Makes heading 1 twice the root font size, scaling with user settings.
CSS
h1 {
  font-size: 2rem;
}
Increases font size by 20% compared to the parent element.
CSS
span.highlight {
  font-size: 120%;
}
Sets font size equal to the parent or browser default size.
CSS
body {
  font-size: 1em;
}
Sample Program

This example shows a big heading, normal paragraph text, and smaller text for less important details. The font sizes use rem units to scale nicely on different devices.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Font Size Example</title>
  <style>
    body {
      font-size: 1rem;
      font-family: Arial, sans-serif;
      padding: 1rem;
    }
    h1 {
      font-size: 2.5rem;
      color: #2a7ae2;
    }
    p {
      font-size: 1rem;
      color: #333333;
      max-width: 40rem;
      line-height: 1.5;
    }
    .small-text {
      font-size: 0.75rem;
      color: #666666;
    }
  </style>
</head>
<body>
  <h1>Welcome to Font Size Demo</h1>
  <p>This paragraph uses the default font size of 1rem, which is easy to read on most screens.</p>
  <p class="small-text">This smaller text shows how you can make less important info smaller but still readable.</p>
</body>
</html>
OutputSuccess
Important Notes

Avoid using only px units because they do not scale well on different devices or user settings.

Use rem for consistent sizing based on the root font size, improving accessibility.

Test your font sizes on small and large screens to ensure readability everywhere.

Summary

Font size controls how big text appears on a webpage.

Use relative units like rem or em for better accessibility and responsiveness.

Adjust font size to improve readability and highlight important content.