CSS font

The CSS font property is used to define custom/required font to provide excellent readers experience for our website. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      body{font: 1.2em/1.6 "Lucida Console", "Courier New", monospace;}
   </style>
</head>
<body>

   <h2>The font Property</h2>
   <p>This is an example of font property in CSS.</p>
   <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque repellat
      dolor asperiores saepe provident rem iste ratione tenetur laudantium possimus
      incidunt eum architecto sequi expedita animi, iure inventore voluptatem vero.
   </p>
   
</body>
</html>
Output

The font Property

This is an example of font property in CSS.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque repellat dolor asperiores saepe provident rem iste ratione tenetur laudantium possimus incidunt eum architecto sequi expedita animi, iure inventore voluptatem vero.

In above example, from the following CSS code:

font: 1.2em/1.6 "Lucida Console", "Courier New", monospace;

The 1.2em/1.6 refers to font-size/line-height. That is, 1.2em is the font-size, whereas 1.6 is the line-height. And "Lucida Console", "Courier New", monospace refers to font-family.

CSS font Syntax

The syntax of font property in CSS, is:

font: font-style font-variant font-weight font-size/line-height font-family|menu|message-box|caption|small-caption|status-bar|icon|initial|inherit;

Important - From all, the font-size and font-family are the two, that are required.

The font property can also be called/used as shorthand of these properties:

  • font-style - style the font of text
  • font-variant - define whether the text should be in small-caps or not
  • font-weight - make the text thicker or thinner
  • font-size/line-height - define the size of a font/used to define the height of all lines of selected element
  • font-family - define the font-family for the text, to make the text looks/appears more interactive

Here are the list of keywords that can also be used to define the font property:

  • menu - used to define font for the menu (drop-downs)
  • message-box - used to define font for the dialog boxes
  • caption - used to define font for the captioned text
  • small-caption - used to define smaller font for the captioned text
  • status-bar - used to define font for the status bar
  • icon - used to define font for the icon labels
  • initial - used to use the default value
  • inherit - used to use the value inherited by the parent element

CSS font Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .a{font: menu;}
      .b{font: message-box;}
      .c{font: caption;}
      .d{font: small-caption;}
      .e{font: status-bar;}
      .f{font: icon;}
   </style>
</head>
<body>

   <h2>font: menu</h2>
   <div class="a">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
   </div>

   <h2>font: message-box</h2>
   <div class="b">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
   </div>

   <h2>font: caption</h2>
   <div class="c">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
   </div>

   <h2>font: small-caption</h2>
   <div class="d">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
   </div>

   <h2>font: status-bar</h2>
   <div class="e">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
   </div>

   <h2>font: icon</h2>
   <div class="f">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
   </div>
   
</body>
</html>
Output

font: menu

Lorem ipsum dolor sit amet consectetur adipisicing elit.

font: message-box

Lorem ipsum dolor sit amet consectetur adipisicing elit.

font: caption

Lorem ipsum dolor sit amet consectetur adipisicing elit.

font: small-caption

Lorem ipsum dolor sit amet consectetur adipisicing elit.

font: status-bar

Lorem ipsum dolor sit amet consectetur adipisicing elit.

font: icon

Lorem ipsum dolor sit amet consectetur adipisicing elit.

The bad font may lead to loss in website traffic, because of bad user experience on reading the text available on website. Therefore, be sure to provide the best reading experience to your users, using the best font.

The only property with value that I can recommend is line-height with its value as 1.6. Rest of all the font related properties can be defined, based on you and your website.

CSS Online Test


« Previous Tutorial Next Tutorial »