CSS font-size Property

Description

The font-size CSS property is used to control the size of text within a web page. It specifies the dimension of the font in various units like pixels (px), ems (em), or percentages (%), allowing web developers to define the text's visual appearance. By adjusting the font-size, designers can create readable and aesthetically pleasing typography, ensuring that text content is appropriately sized and styled to enhance user experience and readability on different devices and screen sizes. Sets the size of the font within an element.

Initial value
medium
Applies to
All elements
Inherited
Yes
Computed value
Absolute length
Animatable
Yes
JavaScript syntax
object.style.fontSize

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

font-size: <absolute-size> | <relative-size> | <length> | <percentage> 

Values

  • <absolute-size>A set of keywords indicating predefined font sizes that scale according to font setting preferences or each browser's default values. From smallest to largest, possible values are xx-small, x-small, small, medium, large, x-large, and xx-large.
  • <relative-size>A set of keywords interpreted relative to the parent element's font-size - either smaller or larger.
  • <length>An absolute unit value: any of the standard css length units are allowed. Negative lengths are illegal.
  • <percentage>A percentage value specifies an absolute font size relative to the parent element's font-size.
  • inherit

Example

<p class="test">A paragraph with the font size as a percentage of the font size of the parent element (180%). </p> 
<p class="test2">A paragraph with a font size of 1.5em.</p>
<p class="test3">A paragraph with a font size of 16px. </p>
.test {
   font-size: 180%; 
}
.test2 {
   font-size: 1.5em;
}
.test3 {
   font-size: 16px;
}

Browser Support

The following table will show you the current browser support for the CSS font-size property.

Desktop
Edge Chrome Firefox Opera Safari
121171
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.11137

Last updated by CSSPortal on: 1st January 2024