CSS - font-size



Font size refers to the height of the characters in relation to the text's baseline. Larger fonts are typically used for headlines or titles to grab attention, while smaller fonts are suitable for body text or captions to ensure readability.

The font-size property affects the size of an element's text.

Possible Values

  • Absolute size keywords: These values are based on the default size of uesr's font-size (medium). It includes:

    • xx-small

    • x-small

    • small

    • medium

    • large

    • large

    • x-large

    • xx-large

    • xxx-large

  • Relative size keywords: These values are relatively larger or smaller to the font-size of the parent element. It includes:

    • larger

    • smaller

  • <length>: These are predefined positive <length> value. It includes em, ex, rem, px, in, etc.

  • <percentage>: A positive <percentage> value, relative to the font-size of the parent element.

  • math: It is the computed value of font-size for math elements relative to the font-size of the parent element.

Applies to

All the HTML elements.

DOM Syntax

object.style.fontSize = "12pt";

CSS font-size - Basic Example

Here is an example:

<html>
<head>
</head>
<body>
   <p style="font-size: large;">Font-size is large.</p>
   <p style="font-size: medium;">Font-size is medium.</p>
   <p style="font-size: small;">Font-size is small.</p>
   <p style="font-size: smaller;">Font-size is smaller.</p>
   <p style="font-size: xx-small;">Font-size is xx-small.</p>
   <p style="font-size: 30px;">Font-size is 30pixels.</p>
   <p style="font-size: 50%;">Font-size is 50%.</p>
   <p style="font-size: 5vmin;">Font-size is 5vmin.</p>
</body>
</html>
Advertisements