1. css
  2. /properties
  3. /font-size

font-size

Definition

The font-size property in CSS is used to set the size of the font used in an element. The property takes a value that can be a size or a percentage and is used to determine the size of the font relative to the parent element.

Examples

Set the font size in pixels:

h1 {
  font-size: 24px;
}

Set the font size in ems:

p {
  font-size: 1.2em;
}

Set the font size in percentage:

body {
  font-size: 100%;
}

Values

ValueDescription
<length>Specifies the font size in pixels, points, ems, or other units.
<percentage>Sets the font size to a percentage of the parent element's font size.
small, medium, large, x-large, xx-largeSets the font size to a relative size.
larger, smallerIncreases or decreases the font size relative to the parent element's font size.

Best Practices

  • Use relative units such as em or rem to set font sizes, as this makes your design more flexible and accessible.
  • Consider using the font-size property in conjunction with other font properties, such as font-family and font-weight, to achieve the desired text appearance.
  • Test your font sizes on different devices and browsers to ensure that they are legible and display correctly.
  • Avoid using font sizes that are too small, as this can reduce readability and accessibility.
  • Use a consistent font size and hierarchy throughout your design to create a cohesive and professional look.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes