Fonts: Dress Your Text - Scratch My Dev - Sébastien Viallemonteil

Today let’s dive into the wonderful world of fonts in CSS. Think of fonts as the clothes your text wears – they define the style and personality of your content. We’re going to explore the font properties that help you dress up your text in fun and exciting ways.

font-family - The Ultimate Wardrobe Imagine your text is getting ready for a grand event. The font-family property is like the wardrobe full of outfits. It decides which font your text should wear. You can specify a list of fonts in order of preference. For example:
```
p {
  font-family: Helvetica, Arial, sans-serif;
}
```
This tells the browser, “If you can find ‘Helvetica,’ great! If not, try ‘Arial.’ And if all else fails, go for a sans-serif font.”
font-size - Resizing the Text: The font-size property is like the size of your text’s clothes. You can make your text look bigger or smaller by changing this value. For instance:
```
h1 {
  font-size: 36px;
}
```
This increases the font size for <h1> headings to 36 pixels. You can use various units like pixels (px), ems (em), percentages (%) and more to resize your text.
font-weight - Adding Weight to Your Text: Ever wanted to make your text bold or light? The font-weight property is your solution. You can make your text appear bold or thin. Here’s an example:
```
p {
  font-weight: bold;
}
```
This CSS snippet tells the browser to make the text within <p> tags bold. You can also use values like normal, bolder, and lighter to control the weight.
font-style - Giving a Twist: The font-style property lets you add a touch of flair to your text. Want your text to appear italic? Just use this property:
```
p {
  font-style: italic;
}
```
Now, all the text inside <p> tags will have an italic style.
line-height - Spacing Things Out: The line-height property controls the space between lines of text. It’s like adjusting the space between dancers in a conga line. For example:
```
p {
  line-height: 1.5;
}
```
A line-height of 1.5 means the lines of text in your paragraph will be 1.5 times the height of the font.

Bonus: If needed, you can combine all of theses properties into one: font

section {
  font:
    italic bold 16px/1.5 Arial,
    sans-serif;
}

In this example:

italic sets the font style.
bold sets the font weight.
16px sets the font size.
1.5 sets the line height.
Arial is the preferred font family.
sans-serif is a generic font family used as a fallback in case the preferred font isn’t available.

The font property is incredibly useful when you want to specify multiple font-related properties for an element in a single line, simplifying your CSS code and making it more manageable. Note that only the size is mandatory when using the property font.

That’s it! These font properties are your creative toolkit to style your text and make it stand out on your web page. So go ahead, experiment with different fonts, sizes, weights, and styles to give your content its unique character. Dress up your text like a fashion designer and make your website look absolutely fabulous!

Photo of Amador Loureiro from Unsplash