CSS Fonts

Fonts are the most significant components we see on any website, so, while building a website, choosing the correct/suitable font is very important. Fonts enhance the visual appearance of any website and the use of appropriate font helps in increasing the readability and effectiveness of any website.

Generic Font Families in CSS

There are five types of font families in CSS i.e. Serif, Sans-serif, Monospace, Fantasy, and Cursive. All these font families are used to specify the appearance/shape of the fonts:

1. Serif fonts have small stylish strokes at the edge of the letters
2. Sans-serif fonts have plain letters, no stroke. These fonts are easily readable.
3. Monospace fonts are fixed-pitch, fixed-width letters. Mostly used to represent the programming code
4. Cursive fonts are very much similar to human writing
5. Fantasy fonts have decorative/fancy look

Visual Difference of Generic Font Families

Following snippet will provide a guideline to understand the shapes difference of generic font families

Various Types of Generic Font Families

The below-given figure presents the different types of each Generic font family:

CSS Font Properties

In CSS the text’s appearance can be modified in multiple ways like selecting the font style, font family, font color, font size, etc. As the correct use of font has a great impact on the text and the reader’s experience, therefore CSS provides numerous font properties that can be used to customize the look of fonts. This write-up will target the following font properties:

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

Let’s start with the font family.

CSS Font Family

This property is used to specify the font family for any HTML Element e.g. “Arial”, “Times New Roman”, etc. Or we can use a generic font family e.g. Serif, Cursive, etc.

Example

The below-given example utilizes the serif fonts for the <h3> element and cursive fonts for the <p> elements:

HTML

CSS

The above piece of code displays the following output:

CSS font-style

To define some specific style for an HTML element the font-style property is used. The font-style property can have a normal, oblique, or italic value.

Example

In the below piece of code, the font style of <h3> element is changed to italic style:

HTML

CSS

The above snippet shows the following result:

The oblique, normal values can be used for the font-style property, the oblique value will produce results very similar to the italic style.

CSS font-variant

It can take a value “small-caps” which converts tle letters into small capital letters(uppercase but smaller in size).

Example

The below-given code will demonstrate the effect of font-variant property on the <p> element:

HTML

CSS

The above code will provide the following result:

CSS font-size

The font-size property is sussed for setting the size of the text and the value for font size can be specified as either small, large, medium, etc., or in terms of px, em, %, etc.

The below-given code specify the font-size for the <p> element as extra-large:

HTML

CSS

The above snippet generates the following result:

The output verifies that the text of <p> elements is larger than the normal font size.

CSS font-weight

The font-weight property is used to set the font-weight in terms of some specific values like bold, normal, lighter, etc. It can determine the weight in terms of a numeric value like 100, 200, 300, etc. The greater value specifies a bolder/thicker font while the smaller value represents thinner font.

The following piece of code sets font-weight for the <p> element using “bolder” value:

HTML

CSS

The above snippet produces the following output:

font Shorthand Property in CSS

CSS provides a shorthand property for all the above-mentioned properties. Using shorthand “font” property we can set the font style, family, variant, etc. in a single line.

The below-given example demonstrates how to use font shorthand property in CSS:

HTML

CSS

The above-given snippet specifies the font-weight, font-size, and font-family in one declaration using font shorthand property:

The above output verifies that the shorthand property successfully sets the font weight, size, and family for the <p> element.

Conclusion

The font families determine the shape of fonts, while font-style, font-weight, font-size, and font-variant properties determine the style, weight, size, and small-caps effect of the fonts respectively. All these functionalities can be performed on the fonts in a single declaration using shorthand “font” property.

This write-up presents a comprehensive overview of what are CSS fonts, generic font families, and how to set the font’s style.