CSS font-size Property

CSS font-size Property

The font-size property in CSS controls the size of the text, affecting readability and layout. It can be defined using various units such as px, em, rem, %, and more.

1. Syntax

selector {
  font-size: value;
}

2. Property Values

Value	Description
<length>	Defines size in absolute units (e.g., px, cm, mm, in).
<percentage>	Relative to the parent element’s font size (100%, 150%).
smaller / larger	Adjusts size relative to a parent element.
xx-small to xx-large	Predefined keyword sizes.

3. Example Usage

A. Using Pixels (px)

p {
  font-size: 16px;
}

✅ Sets text to 16 pixels.

B. Using Relative Units (em, rem)

p {
  font-size: 1.2em;  /* 1.2 times the parent’s font size */
}
h1 {
  font-size: 2rem;  /* 2 times the root element’s font size */
}

✅ rem ensures consistent scaling based on the root font size.

C. Using Percentage (%)

p {
  font-size: 120%;
}

✅ Sets size to 120% of the parent’s font size.

4. Choosing the Best Unit

Unit	Best Used For
px	Fixed, precise sizing.
em	Relative to the parent element.
rem	Relative to the root (html) element.
%	Relative to parent font size.

5. Using font-size Responsively

body {
  font-size: clamp(14px, 2vw, 18px);
}

✅ Ensures the font size adapts based on screen width (2vw = 2% of viewport width).

6. Browser Support

✅ Fully supported in all modern browsers.