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
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 | |||||
12 | 1 | 1 | 7 | 1 |
Tablets / Mobile | |||||
18 | 4 | 10.1 | 1 | 1 | 37 |
Last updated by CSSPortal on: 1st January 2024