CSS Font Properties

CSS can change Font Properties of HTML text elements, like font size, line height, font family, font weight, font style, font stretch, font variant, Font Family etc. Using these properties, we can change look of any html text element. In this article, we will learn all CSS Font Properties one by one.

CSS Font Properties List

• Font Size
• Line Height
• Font Weight
• Font Style
• Font Varient
• Font Stretch
• Font Family
• Font Property

​

 Font Size

Font size property in css can change the font size of fonts. By default, all html elements are having their own font size.

Default Font size of BODY is 16px, p tag is 1em and h1 tag is 2em.

The popular units for CSS fonts size are em and px. The Top 5 font-size font-size units are.

Font Size units in CSS

• Pixels (px) → As per height of screen pixals
• Em(em) → Relative to nearest parent.
• Points (pt) → Fixed unit n points
• percentage (%) → Relative to parent element.
• rem (rem) → relative to root parent ( HTML Tag)

Others units are pc (picas), cm (centimetres), mm (millimetres) and in (inches).

"em", "rem", and "%" are relative units, whereas px and pt are fixed.

em is relative to parent element, but rem is relative to html element only.

If Font Size of body or parent element is 100% or 16px the font size of p tag will be

16px = 1em =100% =12pt = 1 rem.

Default Font size of p tag

Font size 16px
Font size 1 em
Font size 100%
Font size 12pt
Font size 1rem
Font size 16px
Font size 100%
Font size 1rem

If font-size of parent element is more than 100% or 16px, em and % will change, but px, pt and rem remains same.

Font Size 200%

Font size 16px
Font size 1 em
Font size 100%
Font size 12pt
Font size 1rem
Font size 16px
Font size 100%
Font size 1rem

Font Size 300%

Font size 16px
Font size 1 em
Font size 100%
Font size 12pt
Font size 1rem
Font size 16px
Font size 100%
Font size 1rem

Font size 16px 

    
Font size 100% 
    
Font size 1rem