Fonts in CSS

In CSS, fonts are used to style the text content of HTML elements, allowing you to change the appearance of the text on a webpage.

CSS provides several properties to control various aspects of font styling, such as the typeface, size, weight, and style of the text.

Common CSS Font Properties

  1. font-family: Specifies the typeface to be used for the text.
  2. font-size: Specifies the size of the font.
  3. font-weight: Specifies the weight (thickness) of the font.
  4. font-style: Specifies the style of the font (e.g., normal, italic).
  5. font-variant: Specifies whether or not to display the text in small caps.
  6. line-height: Specifies the height of the line box (distance between lines of text).
  7. font: A shorthand property for setting font-style, font-variant, font-weight, font-size, line-height, and font-family in one declaration.

font-family

The font-family property allows you to specify the typeface to be used for the text. You can list multiple fonts, and the browser will use the first available one.

<style>
    .font-family-example {
        font-family: "Arial", "Helvetica", sans-serif;
    }
</style>

<p class="font-family-example">
    This text uses the Arial font, and if it's not available, Helvetica, and finally, a generic sans-serif font.
</p>


font-size

The font-size property specifies the size of the font. You can use values like pixels (px), em units (em), percentages (%), and more.

<style>
    .font-size-example {
        font-size: 24px;
    }
</style>

<p class="font-size-example">
    This text is 24 pixels in size.
</p>


font-weight

The font-weight property controls the thickness or boldness of the text. Common values are normal, bold, bolder, lighter, and numeric values from 100 to 900.

<style>
    .font-weight-example {
        font-weight: bold;
    }
</style>

<p class="font-weight-example">
    This text is bold.
</p>


font-style

The font-style property allows you to make the text italicized, oblique, or normal.

<style>
    .font-style-example {
        font-style: italic;
    }
</style>

<p class="font-style-example">
    This text is italic.
</p>


font-variant

The font-variant property is used to display text in small caps or normal casing.

<style>
    .font-variant-example {
        font-variant: small-caps;
    }
</style>

<p class="font-variant-example">
    This text is in small caps.
</p>


line-height

The line-height property sets the height of the line box, affecting the vertical spacing between lines of text.

<style>
    .line-height-example {
        line-height: 1.5;
    }
</style>

<p class="line-height-example">
    This paragraph has a line height of 1.5, making the space between lines larger.
</p>


font (Shorthand Property)

The font shorthand property allows you to set multiple font-related properties in one line.

<style>
    .font-shorthand-example {
        font: italic small-caps bold 16px/1.5 "Times New Roman", serif;
    }
</style>

<p class="font-shorthand-example">
    This text uses the shorthand font property to apply multiple font styles at once.
</p>


Explanation of the Shorthand Example

  • italic: The text is italic.
  • small-caps: The text is displayed in small caps.
  • bold: The text is bold.
  • 16px/1.5: The font size is 16 pixels, and the line height is 1.5 times the font size.
  • "Times New Roman", serif: The text uses the Times New Roman font, and if it's not available, a generic serif font.

Summary

  • Fonts in CSS allow you to control the appearance of text on your web page.
  • Common properties include font-family, font-size, font-weight, font-style, font-variant, line-height, and the shorthand font.
  • Examples show how each property can be applied to style text in various ways.

Using these properties, you can create visually appealing and readable text that enhances the overall design and user experience of your website.