Css Font Weight

CSS font weight

Created By: chatGPT

CSS Font-Weight is a property that defines the boldness or lightness of a font. It accepts several predefined keywords along with numeric values ranging from 100 to 900. The default is 400, which represents normal weight, while 700 is used for bold text. Here’s how you can use it:

p {
    font-weight: normal;
}

h1 {
    font-weight: bold;
}

strong {
    font-weight: 700;
}

.light {
    font-weight: 300;
}

.bolder {
    font-weight: 900;
}

You can also use numeric values to specify font weights more precisely. This is helpful for fonts that support varying weights. Example:

h2 {
    font-weight: 600;
}

em {
    font-weight: 200;
}

In practice, it's essential to remember that not all fonts support every weight. To ensure proper rendering, check your selected font’s available weights. Always consider accessibility and readability when deciding on font weight.

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

.title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}

.subtitle {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}

Responsive design can benefit from changing font weights based on screen size. For example, using media queries to adapt the font weight can enhance the visual hierarchy. Here's a simple example:

@media (max-width: 600px) {
    h1 {
        font-weight: 600;
    }
}

@media (min-width: 601px) {
    h1 {
        font-weight: 800;
    }
}