07 - CSS Fonts

Font

The actual definition of font defines it as a set of displayable text characters with particular size, weight and style.

CSS provides us with a great property called “font” which can be used to manipulate the font of an HTML Element. 

The font property can be used as a shorthand property for setting the style, weight, size and variant of an HTML element. We also have exclusive font properties to set the above mentioned like:

  • font-style
  • font-family
  • font-variant
  • font-weight
  • font-size

Font-style

This property of font is used to set the style of font. We have three values for this property.

The possible values for this property are,

Normal: The text is rendered in normal font.

Italic: The text is rendered in Italics

Oblique: This style is similar to italic but the style of font is leans less when compared to italics.

<html>
<head>
    <style>
    p.normal {
    font-style: normal;
    }
    p.italic {
    font-style: italic;
    }
    p.oblique {
    font-style: oblique;
    }
    </style>
</head>
<body>
    <p class="normal"> The style of the Font is Normal.
    </p>
    <p class="italic"> The style of the Font is Italic.
    </p>
    <p class="oblique"> The style of the Font is Oblique.
    </p>
</body>
</html>

The output of the above program would be:

Font-family

This property is used to change the face of the font.

Font-Families are generally categorized into two types. They are,

Generic Family: Types of fonts which look similar are grouped under 3 categories.

  • serif: These type of fonts have serifed endings , the ends are flared.

                     Eg: Serif 

  • sans-serif: These type of fonts have strokes that have plain endings.

                     Eg: Sans-Serif                  

  • monospace: Characters with same width falls under this group.

                 Eg: Monospace

Family Name:

The family name can be specified by using a specific font family like Arial, Times New Roman etc.

The font family property can hold many font names. CSS provided us with this option because browsers may not extend full support to all font families. Priority will be given to the font family specified first, if that fails then it goes to the second one. Different font families are separated with a comma.

An important point to note is that, always specify a generic family name (serif, sans-serif or monospace) at the end of the list of font families, so that browser can pick an available font from the font family.

An Example:

<html>
<head>
    <style>
    p.serif {
        font-family: "Times New Roman", Georgia, serif ;
    }
    p.sansserif{
        font-family: "Verdana", sans-serif;
    }
    h4{
        font-family: monospace;
    }
    </style>
</head>
<body>
    <h4> CSS-FONT FAMILY</h4>
    <p class="serif"> This paragraph is in Times New Roman.
    </p>
    <p class="sansserif"> The paragraph is in Verdana.
    </p>
</body>
</html>

 The output of the above program would be,

Font-Variant

Font variant property is used to convert normal font to small caps or vice versa.

<html>
<body>
    <p style="font-variant: small-caps;">
    The variant of this family is set to small caps.</p>
    <p style="font-variant: normal;">
    The variant of this family is set to Normal.</p>
</body>
</html>

The output of the above program would be:-

Font-weight

The thickness (weight) of the font is specified using this property.

The possible values for this property are enumerated in the table below,

Value

Description

normal

This is the default value. Font-weight is normal.

bold

The characters are displayed in bold.

bolder

Defines thicker characters.

lighter

Defines lighter characters

number(multiples of 100)

Defines thick to thin characters. Minimum value is 100 and maximum value 900. Font weight 400 is equivalent to normal and 700 is same as bold.

initial

Sets the property to its default value.

inherit

Inherits the value from its parent element.

Example:-

<html>
  <body>
    <p style="font-weight: normal;">
    This paragraph has normal font weight.</p>
    <p style="font-weight: bold;">
    This paragraph has bold font weight.</p>
    <p style="font-weight: bolder;">
    This paragraph has bolder font weight.</p>
    <p style="font-weight: lighter;">
    This paragraph has lighter font weight.</p>
    <p style="font-weight: 600;">
    This paragraph has 600 font weight.</p>
    <p style="font-weight: 900;">
    This paragraph has 900 font weight.</p>
  </body>
</html>

The output of the above program would be:-

Font-size

This property sets the size of the font for different HTML Elements.

The value can be specified by using values, percentages or reserved key words.

The following are the various possible values for the font-size property

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

The exact sizes are not defined but they are mapped to specific font sizes by browsers. But, one thing is for sure that each value in the list must be larger than or equal to the value that precedes it.

Other values used are,

  • larger
  • smaller

These values will make the font-size relatively smaller or larger than the inherited value.

Some other possible values for font-size are,

Length:

 This value sets the font size to fixed length specified in pixels or points or percentages or cm.

 All the above mentioned values must be non-negative.

In addition to the above values we also have two other values,

Inherit: This value inherits the property from its parent element

Initial: This value sets the property to initial value.

An example program:

<html>
<head>
    <style>
    p.small {
        font-size: xx-small;
    }
    p.larger {
        font-size: larger;
    }
    p.point {
        font-size: 26pt;
    }
    p.percent {
        font-size: 200%;
    }
    </style>
</head>
<body>
    <p class="small"> Font size in xx-small</p>
    <p class="larger">Larger font size</p>
    <p class="point"> Font size in 26 pt </p>
    <p class="percent"> Font size in 200 percent</p>
</body>
</html>

The output of the above program would be:-

Shorthand Property

All the above mentioned properties can be combined into one property called font.

Example,

<p style="font: oblique small-caps 26pt  verdana"> This example demonstrates the short hand property of font.</p>

The output of the above program would be:

Working with Em

When setting the font sizes, the designers prefer working with em values rather than pixels.

Moreover, em is recommended by W3C as a unit of length for font-size.

The measurement for em is as follows,

1 em= current font size of the browser

The default font size of the browser is 16px.So, 1 em is equivalent to 16 pixels.

So, now you have successfully learnt about the basic things about font in CSS. Go ahead, and explore more in the next chapter CSS-Text.

Like us on Facebook