MakeW3web

Font size, weight, style, and family

Font size, weight, style, and family are important aspects of typography that help define the visual appearance of text on a website.

  • Font size: Refers to the size of the text, measured in points (pt) or pixels (px). Font size is often used to differentiate between different levels of content on a website, such as headings, subheadings, and body text.
Here's an example of how to set the font size in CSS:
h1 {
  font-size: 32px;
}

p {
  font-size: 16px;
}

In this example, the font size for the h1 heading is set to 32 pixels, while the font size for the p paragraph is set to 16 pixels.

  • Font weight: Refers to the thickness or boldness of the text. Font weight is often used to create contrast between different levels of content on a website.
Here's an example of how to set the font weight in CSS:
h1 {
  font-weight: bold;
}

p {
  font-weight: normal;
}

In this example, the font weight for the h1 heading is set to bold, while the font weight for the p paragraph is set to normal.

  • Font style: Refers to the appearance of the text, such as italic or normal. Font style is often used to add emphasis or provide visual interest to text on a website.

Here's an example of how to set the font style in CSS:

em {
  font-style: italic;
}

p {
  font-style: normal;
}

In this example, the font style for the em element (which is used to indicate emphasis) is set to italic, while the font style for the p paragraph is set to normal.

  • Font family: Refers to the typeface or font that is used for the text. Font family is often used to create a consistent visual style throughout a website.

Here's an example of how to set the font family in CSS:

body {
  font-family: Arial, sans-serif;
}

h1 {
  font-family: Georgia, serif;
}

In this example, the font family for the body text is set to Arial (a common sans-serif font), while the font family for the h1 heading is set to Georgia (a common serif font).

By adjusting the font size, weight, style, and family in CSS, web developers can create visually appealing and readable typography on their websites.

Was this page helpful?