css - Fonts and Typography

Typography is a crucial component of web design. CSS provides a variety of font properties for customizing text appearance.

a) Font Families

You can specify the font family used for text:

p {

  font-family: 'Arial', sans-serif;

}

It’s common to include a fallback font in case the primary font is unavailable.

b) Font Size

Font size can be defined using different units like px, em, %, and rem.

h1 {

  font-size: 24px;

}

px: Pixels, an absolute unit.

em: Relative to the parent element's font size.

rem: Relative to the root element’s font size.

c) Font Weight and Style

Font Weight: Adjusts the thickness of the text (e.g., normal, bold, lighter, or numeric values).

p {

  font-weight: bold;

}

Font Style: Applies styles like italic or normal.

em {

  font-style: italic;

}