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:

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

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 »


Liked this post? Share it!