CSS font-size Property

CSS font-size property specifies the size or height of the font.

The font size can be set using keywords like ‘small’, ‘medium’, ‘large’, or using any valid CSS length formats such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. See the example below:

Example:

.p1{
  font-size: 16px;
}
.p2{
  font-size: large;
}
.p3{
  font-size: x-large;
}

The font size can also be specified in em units. The em is a relative unit of measurement. Here, the element’s font size is calculated from its parent element’s font size.

For example, if the parent element has a font-size: 15px; and its child has a font-size: 1.5em; It means,

The child element’s font-size = 1.5em = 1.5*(parent element font-size) = 1.5*15px = 22.5px

Example:

.parent{
  font-size: 15px;
}
.child{
  font-size: 1.5em;
}

The font size can also be specified using rem units. The rem is also a relative unit of measurement. Here, the element’s font size is calculated from the root element’s font size, which is the <html> element itself. The root element(<html>) has a default font size of 16px for most of the browsers.

So, if an element has a font-size: 1.5rem; This means:

The element’s font-size = 1.5rem = 1.5*(root element font-size) = 1.5*16px = 24px

Example:

p{
  font-size: 1.5rem;
}

The another relative unit is percentage(%). Here, element’s font-size is calculated from the parent element’s font-size.

For example, if the parent element has a font-size of 25px and the child element has a font-size of 80%. This means,

the child element’s font-size = 80% of parent’s font-size = 80*25px/100 = 20px

Example:

.parent{
  font-size: 25px;
}
.child{
  font-size: 80%;
}

CSS Syntax

The font-size property has the following syntax:

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

Property Values

The font-size property accepts the following values:

xx-smallSets the font size to xx-small.
x-smallSets the font size to x-small.
smallSets the font size to small.
mediumThis is the default value. Sets the font size to medium size.
largeSets the font size to large.
x-largeSets the font size to x-large.
xx-largeSets the font size to xx-large.
smallerSets the font size to smaller.
largerSets the font size to larger.
lengthSpecifies the font size in any valid CSS length formats such as ‘px’, ’em’, ‘rem’, ‘cm’, etc.
%Specifies the font size in %. The percentage value is calculated from the parent element’s font size.
initialSets the font-size property to its default value(medium).
inheritInherits the font-size property from the parent element.

General Info

Default Valuemedium
InheritedYes
JavaScript Usageelement.style.fontSize = “20px”;

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment