CSS Font

Common ways of manipulating font properties in CSS include the following:


  • font-family
  • font-size
  • font-weight
  • font-style
  • font-variantEach is described in detail below:


    The font-family property specifies the type of the font.

    CSS Declaration Output
    p {font-family: verdana;} Font Family Verdana.
    p {font-family: arial;} Font Family Arial.
    p {font-family: impact;} Font Family Impact.


    The font-size property specifies the size of the font. The size can be numerical (length or percentage), or in text (possible values are “xx-large”, “x-large”, “large”, “medium”, “small”, “x-small”, and “xx-small”).

    CSS Declaration Output
    p {font-size:9px;} Font Size 9px.
    p {font-size:150%;} Font Size 150%.
    p {font-size:0.8cm;} Font Size 0.8cm.
    p {font-size:small;} Font Size small.
    p {font-size:large;} Font Size large.


    The font-weight property specifies the thickness of the font. Font weight can go from 100 to 900, with 900 being the thickest. One can also specify “bold”, “bolder”, or “normal”.

    Examples below:

    CSS Declaration Output
    p {font-weight: 100;} This is font weight 100.
    p {font-weight: 900;} This is font weight 900.
    p {font-weight: bold;} This is bold font weight.


    The font-style property specifies whether the font is italic or oblique.

    CSS Declaration Output
    p {font-style: italic;} This is font style italics.


    The font-variant property specifies whether the font will be displayed in small caps. Small caps mean that all letters will be displayed in the capital case, but the font size is smaller than usual. The possible values are ‘small-caps’ and ‘normal’. Let’s look at the example below.

    With the following CSS,

    span {

    the HTML code below,

    <span>initial in small caps</span> AND LATER IN LARGE CAPS.



    initial in small caps AND LATER IN LARGE CAPS.

Add your comment