Font Properties

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

css
Kopioi koodi
9
1
2
3
4
5
6
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.

css
Kopioi koodi
9
1
2
3
selector::first-letter {
 /* some styles */
}

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