CSS Fonts

css font
CSS Font

CSS can change Font Properties of HTML 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 element. In this article, i will explain all CSS Font Properties one by one.

Font Size

In CSS, Font size property can change the font size of a font. Some famous values for font size are xx-small, x-small, small, smaller, medium, large, larger, x-large, xx-large. We can give value of font-size using 5 different units.

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

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% 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

    <div style="font-size:16px">
        <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>

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

    <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>

Font Size 300%

Font size 16px

Font size 1 em

Font size 100%

Font size 12pt

Font size 1rem

    <div style="font-size:300%">
        <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>


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 Normal

Line Height 1

Line Height 2

Line Height 16px

Line Height 20px

Line Height 24px

Line Height 30px

        <p style="line-height:normal">Line Height normal </p>
        <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>

Always prefer line height in numbers as numbers are relative. Line height is pixel is fixed.

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.

Font weight bold

Font weight bolder

Font weight normal

Font weight 100

Font weight 500

Font weight 700

Font weight 900

<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>

Font Style

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

  • Italic
  • Normal
  • Oblique

Font style Normal

Font style Italic

Font style Oblique

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

Font Variant

CSS Font varient is used to set variant of font we are using. Font variant small caps set all text in smaller size and all capitals. Various values of font variant are

  • Normal
  • Small-caps

Font variant normal.

Font variant small caps.

<p style="font-varient:normal"> Font style normal </p>
<p style="font-varient:small-caps"> Font style small caps. </p>

Font Stretch

CSS Font stretch is used to stretch the font if available. Like we can set condensed, expanded, extra condensed or extra condensed values of font stretch.

Various values for font stretch are
  • normal
  • condensed
  • semi-condensed
  • ultra-condensed
  • extra-condensed
  • expanded
  • semi-expanded
  • ultra-expanded
  • extra-expanded

Font stretch normal.

Font stretch condensed.

Font stretch semi condensed.

Font stretch extra condensed.

Font stretch ultra condensed.

Font stretch expanded.

Font stretch semi expanded.

Font stretch extra expanded.

Font stretch ultra expanded.

<p style="font-stretch:normal"> Font stretch normal </p>
<p style="font-stretch:condensed"> Font stretch condensed </p>
<p style="font-stretch:semicondensed"> Font stretch semi condensed </p>
<p style="font-stretch:extra-condensed"> Font stretch extra condensed </p>
<p style="font-stretch:ultra-condensed"> Font stretch ultra condensed </p>
<p style="font-stretch:expanded"> Font stretch expanded </p>
<p style="font-stretch:semi-expanded"> Font stretch semi expanded </p>
<p style="font-stretch:ultra-expanded"> Font stretch extra expanded </p>
<p style="font-stretch:extra-expanded"> Font stretch ultra expanded </p>

Font Family

In CSS, Font family specify the Font Typeface or Font Family we are using. These fonts are already embedded in our operating system. But in CSS3, we can embedded external fonts too.

Web Safe Fonts

  • Serif
  • Sans-Serif
  • Arial
  • Helvetica
  • Times new roman
  • Times
  • Georgia
  • Verdana
  • Courier
  • Open Sans
  • Monospace

Other Web Fonts

  • Cursive
  • Fantasy
  • Algerian

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

Font Family on Browsers

Font family Arial

Font family Helvetica

Font family Sans-Serif

Font family Roman

Font family Georgia

Font family Serif

Font family Arial, Helvetica and sans serif in group

<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, sans-serif"> Font family Arial, helvetica and sans serif in group. </p>

Font Property

CSS Font Property is used to group all font properties in one single property. Properties like font size, line height and font family are compulsory to add, rest all are optional.

css font
CSS Font Property

Font with size 16px, line height 18px and arial font.

Font with size 14px, line height 18px and arial font.

Font with size 14px, line height 1.4, bold and Cursive font.

Font with size 18px, line height 1.4, bold, italic, small caps, condensed and arial font.

<p style="font:16px/18px arial"> Font with size 16px, line height 18px and arial font.</p>

<p style="font:14px/18px arial"> Font with size 14px, line height 18px and arial font.</p>

<p style="font:bold 18px/1.4 cursive"> Font with size 18px, line height 1.4, bold  and Cursive font.</p>

<p style="font:small-caps condensed bold italic 18px/1.4 sans-serif"> Font with size 18px, line height 1.4, bold, italic, small caps, condensed and arial font.</p>