css font size

Font Size

In CSS, Font size property can change the font size of font. We can give value of Font-size using 5 different units.

Font Size units in CSS

  • Pixels (px)
  • Em(em)
  • Points (pt)
  • percentage (%)
  • rem (rem)

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

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

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

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

Font size 16px

Font size 1 em

Font size 100%

Font size 12pt

Font size 1rem


    <div style="font-size:100%">
        <p>Font size 16px </p>
        <p>Font size 1em </p>
        <p>Font size 100% </p>
        <p>Font size 12pt </p>
        <p>Font size 1rem </p>
    </div>    		    
		    
		

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

Font size 16px

Font size 1 em

Font size 100%

Font size 12pt

Font size 1rem


    <div style="font-size:200%">
        <p>Font size 16px </p>
        <p>Font size 1em </p>
        <p>Font size 100% </p>
        <p>Font size 12pt </p>
        <p>Font size 1rem </p>
    </div>    		    
		    
		


Line-Height

Css Line-height property defines the actual height of a line. It can be used in px or n

Line-height in px is fixed, whereas n is relative. 1 means 100% of font-size, 2 means 200% of font-size.

Line Height 1

Line Height 2

Line Height 16px

Line Height 20px

Line Height 24px

Line Height 30px


    <div>
        <p style="line-height:1">Line Height 1 </p>
        <p style="line-height:2">Line Height 2 </p>
        <p style="line-height:16px">Line Height 16px </p>
        <p style="line-height:20px">Line Height 20px </p>
        <p style="line-height:24px">Line Height 24px </p>
        <p style="line-height:30px">Line Height 30px </p>
    </div>    		    
		    
		

Font Weight

In CSS, Font weight is used to give Bold or Bolder appearance to font. Various value of font-weight are

Font Weight values

  • Normal
  • Bold
  • Bolder → same like bold
  • 100 → same like normal
  • 200
  • 300
  • 400
  • 500
  • 600 → same as bold
  • 700
  • 800 → slightly bolder than bold
  • 900 → maximum allowed value

Usually we use Bold and Normal as all font families doesn't differentiate between bold and normal.


<p style="font-weight:bold"> Font weight bold </p>
<p style="font-weight:bolder"> Font weight bolder </p>
<p style="font-weight:normal"> Font weight normal </p>
<p style="font-weight:100"> Font weight 100 </p>
<p style="font-weight:500"> Font weight 500 </p>
<p style="font-weight:700"> Font weight 700 </p>
<p style="font-weight:900"> Font weight 900 </p>

How Different font weight look on a webpage

Font weight bold


Font weight bolder


Font weight normal


Font weight 100


Font weight 500


Font weight 700


Font weight 900



Font Style

In CSS, Font style is used to gives italics appearance. Various value of font-style are

  • Italic
  • Normal
  • Oblique

<p style="font-style:normal"> Font style normal </p>
<p style="font-style:italic"> Font style italic </p>
<p style="font-style:oblique"> Font style italic </p>

How Different font style look on a webpage

Font style normal


Font style Italic


Font style Oblique



Font Family

In CSS, Font family specify the font we are using. It can be

  • Arial
  • Helvetica
  • Times new roman
  • Georgia
  • Serif
  • San-Serif
  • Cursive
  • Open Sans
  • Algerian
  • Monospace

We can also write two different font together in a group. This tell the browser that if one font is unavailable, use another one.


<p style="font-family:arial"> Font family Arial  </p>
<p style="font-family:helvetica"> Font family Helvetica </p>
<p style="font-family:sans-serif"> Font family sans-serif </p>
<p style="font-family:"Times New Roman""> Font family Roman </p>
<p style="font-family:georgia"> Font family Georgia </p>
<p style="font-family:serif"> Font family Serif </p>
<p style="font-family:arial, helvetica"> Font family Arial and helvetica </p>

How Different font look on a webpage

Font family Arial

Font family Helvetica

Font family Sans-Serif

Font family Roman

Font family Georgia

Font family Serif

Font family Arial and Helvetica