Let's consider the most common font-related properties.

selector {
  font-family: 'Montserrat' | 'Oswald' | 'Lato' |...; /* any font family */
  font-size: 12px | 0.5em | 0.8rem |...; /* it can be any value in px/em/rem units */
  font-weight: 400 | 500 | 700 | 900 |...; /* value 100 - 900 */
  font-style: normal | italic | oblique; /* only these values available */
}

Note

All examples will be demonstrated using the same text content to provide an opportunity to observe how the same text can be displayed differently.

font-family

The font-family property defines the font family or families that will be used for displaying text content. It is possible to specify a single font family name or a list of multiple font family names separated by commas.

font-size

The font-size property sets the font size for displaying text content. It can be a fixed size measured in px or a relative size measured in em or rem units.

font-weight

The font-weight property determines the weight or thickness of the font used to display text content. It can be specified as a numerical value (e.g., 300, 500, 700, ...) or as a keyword (e.g., lighter, normal, or bold).

font-style

The font-style property specifies the style of the font to be used for text content. This can be normal (the default value), italic, or oblique.

Pseudo-class ::first-letter

The first-letter pseudo-class selects and styles the first letter of a paragraph or heading. To use this pseudo-class, we need to put double :: after a selector and add the keyword first-letter.

selector::first-letter {
 /* some styles */
}

Let's run the next example to see how it works.

Summary

• font-family specifies the font or fallback fonts for text. You can list multiple fonts to ensure proper rendering;
• font-size defines the text size using absolute units (px) or relative units (em, rem);
• font-weight controls font thickness, either numerically (100–900) or with keywords like normal or bold;
• font-style determines the font's style, such as normal, italic, or oblique;
• Pseudo-class ::first-letter targets and styles the first letter of a text block, enabling creative typography effects.