CSS Fonts - Tutsocean

The CSS font properties allows you to set various styles for fonts likes font family, size and boldness, variant, etc. of a text.

Font Properties

The CSS provide several properties for styling fonts of the text content, like: font-family,font-style, font-variant, font-weight and font-size. The following section will describe you each one of these properties one by one.

Font Family

The font-family CSS property allows you to set a prioritized list of font family name and/or generic family name for the text content of a selected element.

The font-family property can hold several font names as a fallback system. List the font that you want first, then any fonts that might fill in for the first if it is not available. You should end the list with a generic font family which are five â€” serif, sans-serif,monospace, cursive and fantasy. A font family declaration might look like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example of CSS font-family</title>
  <style type="text/css">  
    p {
        font-family: "Times New Roman", Times, serif;
    }
  </style>
</head>
<body>
  <p>This is a paragraph.</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Example of CSS font-family</title>

p {

font-family: "Times New Roman", Times, serif;

}

</style>

</head>

<body>

<p>This is a paragraph.</p>

</body>

</html>

Note:If the name of a font family is more than one word, it must be in quotation marks, like "Times New Roman", "Courier New", "Trebuchet MS" etc.

Font Style

The font-style property sets the font style for the text content of an element.

The possible values for this property are: normal, italic or oblique.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example of CSS font-style</title>
  <style type="text/css">  
    p.one {
        font-style: normal;
    }
    p.two {
        font-style: italic;
    }
    p.three {
        font-style: oblique;
    }
  </style>
</head>
<body>
  <p class="one">This is a normal paragraph.</p>
  <p class="two">This is a paragraph with italic font style.</p>
  <p class="three">This is a paragraph with oblique font style.</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Example of CSS font-style</title>

p.one {

font-style: normal;

}

p.two {

font-style: italic;

}

p.three {

font-style: oblique;

}

</style>

</head>

<body>

<p class="one">This is a normal paragraph.</p>

<p class="two">This is a paragraph with italic font style.</p>

<p class="three">This is a paragraph with oblique font style.</p>

</body>

</html>

Note:At first glance both oblique and italic styles appear the same thing, but there is difference. The italic style uses an italic version of the font while oblique text on the other hand is simply a slanted version of the normal font.

Setting Font Size with Keywords

By setting a keyword font size on the body element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly. An absolute size is specified using one of the following keywords:xx-small, x-small, small, medium, large, x-large, xx-large.

A relative size is specified using one of the following keywords: smaller, larger.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example of setting font size with keywords</title>
  <style type="text/css">  
    body {
        font-size: large;
    }
    h1 {
        font-size: larger;
    }
    p {
        font-size: smaller;
    }
  </style>
</head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
  <div>This is normal text.</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Example of setting font size with keywords</title>

body {

font-size: large;

}

h1 {

font-size: larger;

}

p {

font-size: smaller;

}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<div>This is normal text.</div>

</body>

</html>

Setting Font Size with Pixels

Setting the font size in pixel values (e.g. 12px, 16px, etc.) is a good choice when you need the pixel accuracy. However, the results may vary to some extent across the browsers, since they use different algorithms to achieve the similar effect.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of setting font size with pixels</title>
<style type="text/css">
    body {
        font-size: 16px;
    }
    h1 {
        font-size: 24px;
    }
    p {
        font-size: 14px;
    }
</style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is normal text.</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Example of setting font size with pixels</title>

body {

font-size: 16px;

}

h1 {

font-size: 24px;

}

p {

font-size: 14px;

}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<div>This is normal text.</div>

</body>

</html>

Defining the font sizes in pixel is not very accessible, because a user cannot change the font size from the browser settings. For instance, users with limited vision may wish to set the font size larger than the size specified by you. Therefore, you should avoid using the pixels values for font sizes if you wish to create an inclusive design.

Tip:The text can be resized in all browsers using the zoom tool. However, this feature resizes the entire page, not just the text.

Setting Font Size with Em

The em unit refers to the font size of the parent element.

The size of an em value is dynamic. When defining the font-size property, an em is equal to the size of the font that applies to the parent of the element.

If you set a font-size of 20px on the body element, then 1em = 20px and 2em = 40px.

If you haven’t set the font size anywhere on the page, then it is the browser default, which is probably 16px. So, by default 1em = 16px, and 2em = 32px.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example of setting font size with em</title>
  <style type="text/css">
    h1 {
        font-size: 2em;
    }
    p {
        font-size: 0.875em;
    }
  </style>
</head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
  <div>This is normal text with browser default font size.</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Example of setting font size with em</title>

h1 {

font-size: 2em;

}

p {

font-size: 0.875em;

}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<div>This is normal text with browser default font size.</div>

</body>

</html>

Using the Combination of Percentage and Em

The solution to achieve the similar effect in all browsers is to set a default font-size in percentage for the body element. A popular technique is to set the font-size for the body to 62.5% (that is 62.5% of the default 16px), which equates to 10px, or 0.625em.

Now you can set the font-size for any elements using em units, with an easy-to-remember conversion, by dividing the px value by 10. This way 10px = 1em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em, and so on. See the example below:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example of setting font size with em</title>
  <style type="text/css"> 
    body {
        font-size: 62.5%;
    }
    h1 {
      font-size: 3em;
    }
    p {
        font-size: 1.6em;
    }
  </style>
</head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
  <div>This is normal text with browser default font size.</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Example of setting font size with em</title>

body {

font-size: 62.5%;

}

h1 {

font-size: 3em;

}

p {

font-size: 1.6em;

}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<div>This is normal text with browser default font size.</div>

</body>

</html>

Font Weight

The font-weight property specifies the weight or boldness of the font.

The possible values of font-style property are: normal, bold, bolder, lighter, 100, 200,300, 400, 500, 600, 700, 800, 900 and inherit.

The numeric values 100–900 specify the font weights, where each number represents a weight darker than its predecessor. 400 is same as normal & 700 is same as bold.
The bolder and lighter values are relative to the inherited font weight, while the other values are absolute font weights.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example of CSS font-weight</title>
  <style type="text/css">
    p {
        font-weight: bold;
    }
  </style>
</head>
<body>
  <p>This is a paragraph in bold font.</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Example of CSS font-weight</title>

p {

font-weight: bold;

}

</style>

</head>

<body>

<p>This is a paragraph in bold font.</p>

</body>

</html>

Since most of the fonts are only available in a limited number of weights; often they are available only in normal and bold. If the font isn’t available in the specified weight, an alternate will be chosen that is the closest available weight.

Font Variant

The font-variant property allows the text to be displayed in a special small-caps variation.

Small-caps or small capital letters are slightly different to normal capital letters, in which lowercase letters appear as smaller versions of the corresponding uppercase letters.

The possible values for the font-variant property are normal, small-caps and inherit.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example of CSS font-variant</title>
  <style type="text/css">
    p {
        font-variant: small-caps;
    }
  </style>
</head>
<body>
  <p>This is a paragraph.</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Example of CSS font-variant</title>

p {

font-variant: small-caps;

}

</style>

</head>

<body>

<p>This is a paragraph.</p>

</body>

</html>