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:
- Serif fonts have small stylish strokes at the edge of the letters
- Sans-serif fonts have plain letters, no stroke. These fonts are easily readable.
- Monospace fonts are fixed-pitch, fixed-width letters. Mostly used to represent the programming code
- Cursive fonts are very much similar to human writing
- 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 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.
The below-given example utilizes the serif fonts for the <h3> element and cursive fonts for the <p> elements:
font-family:'Times New Roman', Times, serif;
The above piece of code displays the following output:
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.
In the below piece of code, the font style of <h3> element is changed to italic style:
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.
It can take a value “small-caps” which converts tle letters into small capital letters(uppercase but smaller in size).
The below-given code will demonstrate the effect of font-variant property on the <p> element:
The above code will provide the following result:
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:
The above snippet generates the following result:
The output verifies that the text of <p> elements is larger than the normal font size.
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:
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:
font: bold 30px Cursive;
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.
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.