Understanding and Using Font Properties

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

css
Code kopieren

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.

css
Code kopieren

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.