Css Font Size

CSS font size

Created By: chatGPT

The font-size property in CSS is used to define the size of text in an element. It can be set using various units such as pixels, ems, rems, percentages, and more. Utilizing different units can give you better control over the typography of your website, making it responsive and more readable across devices.

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5em;
}

small {
    font-size: 75%;
}

@media (max-width: 600px) {
    p {
        font-size: 14px;
    }
}

To specify a font size using pixels, you can assign a numeric value followed by 'px'. Ems and rems are relative units that are based on the font size of the parent element (for em) or the root element (for rem). This makes them very useful for responsive designs.

body {
    font-size: 1rem; /* 16 pixels */
}

h2 {
    font-size: 1.5em; /* 24 pixels if body font size is 16px */
}

Using percentages can also be effective. A font size set at 100% corresponds to the current font size of the parent element, which allows for easy scaling.

div {
    font-size: 100%; /* Inherits size from parent */
}

span {
    font-size: 150%; /* 150% of the parent's font size */
}

In web design, it is common to use media queries to adjust font sizes for different screen sizes. This approach ensures that text remains readable on both large and small displays.

@media (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

@media (min-width: 601px) {
    body {
        font-size: 16px;
    }
}