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
| Value | Description |
|---|---|
<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-large | Sets the font size to a relative size. |
larger, smaller | Increases 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
| Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |