Font Size and Font Family

In CSS, we can set the font size and font family for text elements using the font-size and font-family properties, respectively.

These properties allow us to control the appearance and style of text on our web page.

Font Size (font-size):

Specifies the size of the font. We can use various units like pixels ("px"), ems ("em"), rems ("rem"), percentages ("%"), points ("pt"), or keywords like small, medium, large, etc.

Example:

p {
    font-size: 16px; /* Font size of 16 pixels */
}

Font Family (font-family):

Specifies the font family to be used for text.

Example:

body {
    font-family: Arial, sans-serif; /* Use Arial font, fall back to sans-serif if Arial is not available */
}

h1 {
    font-family: sans-serif; /* when we use different font-family on specific tags as well */
}

h2 {
    font-family: Arial  /* when we use different font-family on specific tags as well */
}

We can specify multiple font families as a fallback in case the preferred font is not available on the user's system.

Example:

h1 {
    font-weight: 100; /* 100 font weight */
    font-weight: 200; /* 200 font weight */
    font-weight: 300; /* 300 font weight */
    font-weight: 400; /* 400 font weight */
    font-weight: 500; /* 500 font weight */
    font-weight: 600; /* 600 - 900 more boldness started  */
    font-weight: bold; /* Bold font weight */
    font-weight: bolder; /* Bolder font weight */
}

Font Weight (font-weight):

Example:

em {
    font-style: italic; /* Italic font style */
}

Specifies the weight of the font, such as "normal", "bold", "lighter", "bolder", or a numerical value like "400" for normal and "700" for bold.

Example:

p {
    font-variant: small-caps; /* Display text in small caps */
}

Font Style (font-style):

Specifies the style of the font, such as "normal", "italic", or "oblique".

Font Variant (font-variant):

Specifies whether the text should be displayed in normal or small caps. Values include "normal" and "small-caps".

These properties give you control over the appearance and style of text on your web page, allowing you to create visually appealing and readable content.

It's important to choose appropriate font sizes and font families to ensure good readability and accessibility for your users.

<-- Height/width Properties

Cursor Properties -->