CSS Typography

Typography plays a crucial role in web design. It’s all about choosing the right font, size, and color to make your text look beautiful and legible. In this post, we’ll cover some essential typographic rules in CSS, with code examples and simple explanations. 🤓

1. Font Family 🖋️

The font-family property is used to set the font for an HTML element. You can use any font family available on the user’s device or any web font. Here’s an example:

body {
    font-family: "Open Sans", sans-serif;
}

In this example, we’re setting the font family for the body element to “Open Sans”. If “Open Sans” is not available on the user’s device, the browser will use a sans-serif font as a fallback. 🌟

2. Font Size 📏

The font-size property is used to set the size of the font. Here’s an example:

h1 {
    font-size: 3em;
}

In this example, we’re setting the font size for the h1 element to 3em, which means it will be three times the size of the current font size. 📈

3. Line Height 📏

The line-height property is used to set the height of a line of text. Here’s an example:

p {
    line-height: 1.5;
}

In this example, we’re setting the line height for the p element to 1.5, which means the height of each line will be one and a half times the size of the font. 📝

4. Font Weight 💪

The font-weight property is used to set the weight of the font. Here’s an example:

h2 {
    font-weight: bold;
}

In this example, we’re setting the font weight for the h2 element to bold. You can also use numeric values, such as 400 for normal and 700 for bold. 💪

5. Text Transform 🌟

The text-transform property is used to transform text to uppercase, lowercase, or capitalize. Here’s an example:

button {
    text-transform: uppercase;
}

In this example, we’re setting the text transform for the button element to uppercase, which means all the text inside the button will be in uppercase letters. 🚀

Putting it all together..

Let us develop a mini project that has all the CSS we have just learnt.

See the Pen Untitled by bmutebi (@bmutebi) on CodePen.

And that’s it! These are some essential typographic rules in CSS that can help you make your text look beautiful and legible. Remember, typography is an art, so have fun experimenting with different fonts, sizes, and colors! 😎