CSS Fonts In-Depth

Fonts define the typography of a web page or website. The font has certain properties that you can control using CSS. In other words, CSS can change the typography of a website directly.

In this article, you will learn about fonts, the characteristics of the font, font-families, and properties that can be changed using CSS in detail.

What are the features of a font?

In typography, a font is a typeface with specific style, size , spacing and weight. You can describe a font using its features.

Here is a list of features shown in the above diagram.

• Cap Height is also known as the overall height of the capital letter.
• Ascender is the upward length of the letters like b, k, l.
• Descender is the downward length of the letters like q, g, y.
• X-height is the height of the letters without ascender or descender.
• The counter is the space inside the letter like q, p, o.
• A baseline is the line that touches descender.

There are two more properties of a font.

1. Leading – it is space between two lines of text or sentences. CSS usually control these with line-height property.
2. Kerning – it is space between two letters in a word. CSS controls this property using letter-spacing property.

What is a font-family?

Any change in the features of a font and the font will start looking different. That is why, there are so many font types. Fonts looking similar can be grouped into font familiy, then we can easily identify them.There are two types of font families.

Generic families

The members of generic font families look similar. They have one unique feature than separates them from other families.

For example,

• Sans-serif fonts
• Monospace fonts
• Cursive fonts

Each of the above types are different in their look and they are font families by themselves, but generic in nature.

Font Family

The second type of font family differentiate fonts based on specific features like height, letter spacing, boldness, but also retains the properties of generic family.

for example,

Sans-serif is a generic font family. The Ariel, Helvetica, and Verdana font family belong to Sans-serif.The features of Ariel, Helvetica and Verdana is different except that they retain the generic Sans-serif characters and letters.

Difference between Serif and Sans-serif fonts

The serif fonts and sans-serif fonts are the two popular types of fonts used in print and web. The other types are monospace and cursive fonts.The cursive types represent handwritten text or some stylish fonts. The monospace font has letters with equal space.

How CSS control Fonts ?

The CSS commands and properties control the look and feel of the web typography. It control the font and font properties in the HTML document.CSS uses following properties to control web typography.

• Font-family
• Font-style
• Font-size
• Font-weight
• Font-variant

Font-Family

CSS font-family will set the font family of the web page that use the CSS style. It  works on a fallback mechanism, meaning it takes multiple values and if web page cannot use a font, fallback to another font type.

Example for font-family:

h3 {
     font-family: Ariel, Helvetica, sans-serif;
}

In the above example, Ariel is rendered by the web page, if not fall back to Helvetica or any other font type that belong to Sans-serif. Hence, it is a good practice to add a generic font-family.

Font-Style

The font-style property decides how to display the text and there are three options.

1. normal
2. oblique
3. italic

For example, suppose we are changing font-style of a paragraph to oblique.

p  {
     font-style: oblique;
}

You can change the style of a header and display it in italic.

h2{
     font-style: italic;
}

Font-Size

This property is the most popular property used by web designers. The font-size changes the size of the font rendered on the web page.

There are three ways to set values for font-size.

1. px
2. em
3. %

We will demonstrate each one of them.

h1 {
     font-size: 14px;
}
h2{
     font-size: 10em;
}
h3{
     font-size: 5%;
}

The percentage (%) take relative percentage size to its parent container. If the parent container length is 100px; then the 5% of 100px will be 5px.

Font-weight

Sometimes you want to set the boldness for your font. The font-weight property would do that for you.It takes following values.

1. Normal
2. Bold
3. numeric values such as 300, 400, 700.

For example,

h1{
     font-weight: bold;
}

The resultant header text would appear slightly bolder than normal.

Font-variant

This property renders a different version of text than normal. Though the normal text is also a value for the font-variant property.

The font-variant takes the following values.

1. normal
2. small-caps

Suppose a paragraph is written with caps and small letters. The different variant of the paragraph would be small caps if we use the following CSS command.

p {
     font-variant: small-caps;
}

Thus, the CSS font property gives a powerful and extensive control over the web typography.