Exploring Font Properties in CSS: Styling Text with Font-Family, Size, Weight, Style, and More

Font properties in CSS allow you to control the appearance and styling of text on a web page. They enable you to define various aspects of the font used, such as its family, size, weight, style, and more. Here are the key font properties in CSS:

font-family: Specifies the font face or typeface to be used. You can provide multiple font names, separated by commas, to define fallback options in case the desired font is not available.
font-size: Sets the size of the font. It can be specified using absolute units like pixels (px) or relative units like percentages (%). Common values include pixels (e.g., 16px) or relative units (e.g., 100%).
font-weight: Determines the thickness or boldness of the font. It can be set to values like "normal", "bold", or specified using numeric values (e.g., 400, 700) for finer control.
font-style: Defines the style of the font, such as "normal" (default), "italic", or "oblique". Italic and oblique styles slant the characters to give them a distinct appearance.
font-variant: Modifies the appearance of the font by enabling small caps or other variations. It can be set to values like "normal", "small-caps", or "all-small-caps".
font-stretch: Controls the width or condensedness of the font. It can be set to values like "normal", "condensed", "expanded", or specific keywords like "ultra-condensed" or "ultra-expanded".
font-synthesis: Determines how missing font styles or weights are synthesized by the browser. It can be set to values like "weight", "style", "none", or "all" to control the synthesis behavior.
font-display: Specifies how the web font is displayed while it is being loaded. It helps control the text's fallback behavior until the custom font is fully loaded. Values include "auto", "swap", "block", "fallback", and more.

Font Family

The font family of a text is set with the font-family property.
The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font, and so on.
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

Example

.serif {
  font-family: "Times New Roman", Times, serif;
}

.sansserif {
  font-family: Arial, Helvetica, sans-serif;
}

.monospace {
  font-family: "Lucida Console", Courier, monospace;
}

Output

Font weight

In CSS, the font-weight property is used to control the thickness or boldness of the text. It allows you to specify the weight of a font by using different keywords or numeric values.

Here are the common ways to set the font-weight property:

Keywords: CSS provides several predefined keywords to set the font weight:
1. normal: This is the default value and represents the regular font weight.
2. bold: Sets a bold font weight.
3. bolder: Increases the font weight relative to the parent element's font weight.
4. lighter: Decreases the font weight relative to the parent element's font weight.
Numeric Values: You can also use numeric values to define the font weight. The range of values typically varies from 100 to 900, with increments of 100. Some commonly used numeric values include:
1. 100: Thin or hairline font weight.
2. 400 (or normal): Represents the regular font weight.
3. 700 (or bold): Indicates a bold font weight.
4. 900: Represents an extra bold or black font weight.

It's worth noting that the availability of different font weights depends on the specific font family being used. Not all font families have multiple weights available, and the visual effect of changing the font weight may vary across fonts.

Here's an example that demonstrates the usage of font-weight property:

i {
  font-weight: bold;
}

h1 {
  font-weight: 300;
}

p {
  font-weight: bolder;
}

Output

In the above example, the <i> elements will have a bold font weight, the <h1> elements will have a lighter font weight (300), and the <p> elements will have a font weight increased relative to their parent's font weight.

By adjusting the font-weight property, you can control the visual weight of the text, allowing for emphasis, contrast, and better typographic hierarchy in your web pages.

Font Style

The font-style property is mostly used to specify italic text.

This property has three values:

normal - The text is shown normally
italic - The text is shown in italics
oblique - The text is "leaning" (oblique is very similar to italic, but less supported)

Example

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

Font Variant

The font-variant property specifies whether or not a text should be displayed in a small-caps font.

In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.

Example

p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}

Font stretch

In CSS, the font-stretch property allows you to control the width or condensedness of a font. It defines how wide or narrow the characters in a font appear. The font-stretch property is useful for adjusting the overall appearance of text, especially when working with variable fonts that provide different width variations.

Here are the common values that can be used with the font-stretch property:

Keywords: CSS provides several predefined keywords to set the font stretch:
1. normal: This is the default value, which represents the normal width of the font.
2. condensed: Condenses the font, making it narrower than normal.
3. expanded: Expands the font, making it wider than normal.
4. ultra-condensed:Further narrows the font compared to the condensed value.
5. ultra-expanded: Further widens the font compared to the expanded value.
Numeric Values: The font-stretch property also allows you to use numeric values to define the width of the font. Numeric values range from 1 to 9, where 1 represents the narrowest width, 9 represents the widest width, and 5 represents the normal width.
1. 1: Represents the narrowest font stretch.
2. 5 : Represents the normal or default font stretch.
3. 9 : Represents the widest font stretch.

Here's an example that demonstrates the usage of the font-stretch property:

h1 {
  font-stretch: condensed;
}

p {
  font-stretch: expanded;
}

span {
  font-stretch: 7;
}

In the above example, the <h1> elements will have a condensed font stretch, the <p> elements will have an expanded font stretch, and the <span> elements will have a custom font stretch using the numeric value 7.

It's important to note that the effectiveness of the font-stretch property may vary depending on the font family being used. Not all fonts have multiple width variations available, so the visual effect may differ.

By adjusting the font-stretch property, you can control the width of the text and achieve different visual effects to enhance the overall typography of your web pages.

Font Synthesis

In CSS, the font-synthesis property is used to control how missing font styles or weights are synthesized by the browser when a requested font is not available. It determines whether the browser should attempt to simulate the missing font styles or weights using available alternatives.

The font-synthesis property accepts the following values:

none: This value disables font synthesis. If the requested font style or weight is not available, the browser will not attempt to simulate it, and the text will be displayed using the closest available font.
weight: This value enables font weight synthesis. If the requested font weight is not available, the browser will try to synthesize a similar font weight by adjusting the thickness of the available font.
style: This value enables font style synthesis. If the requested font style (italic or oblique) is not available, the browser will attempt to synthesize it by slanting the characters of the available font.
style weight: This value enables both font weight and style synthesis. If both the requested font style and weight are not available, the browser will try to synthesize them using the available font.

Here's an example that demonstrates the usage of the font-synthesis property:

h2{
  font-synthesis: weight;
}

span {
  font-synthesis: style;
}

p {
  font-synthesis: style weight;
}

In the above example, the <h2> elements will enable font weight synthesis, the <span> elements will enable font style synthesis, and the <p> elements will enable both font weight and style synthesis.

It's important to note that font synthesis is a browser-dependent feature, and the effectiveness of font synthesis may vary across different browsers and operating systems. Some browsers may not support font synthesis, or the synthesized results may not match the exact appearance of the requested font.

By utilizing the font-synthesis property, you can control how missing font styles or weights are handled by the browser, providing fallback options and enhancing the visual consistency of your web typography.

Font Display

In CSS, the font-display property is used to specify how a web font should be displayed and rendered while it is loading. It allows you to control the behavior of fallback text and minimize the impact of font loading on the overall user experience.

The font-display property accepts the following values:

auto: This is the default value. It allows the browser to choose the most appropriate behavior for font display. The exact behavior may vary depending on the browser implementation.
block: This value blocks rendering of text until the custom font is fully loaded. It prevents text from being displayed in a fallback font, resulting in a blank space until the web font is available.
swap: This value enables an immediate fallback font to be displayed while the custom font is loading. It ensures that text is visible and readable even before the custom font is fully loaded. Once the custom font is loaded, it is then applied to the text.
fallback: This value is similar to swap but provides a short duration to load the custom font. If the custom font can't be loaded within the specified time, it falls back to the fallback font. This value is useful for providing a better user experience in case the custom font takes longer to load.
optional: This value is similar to auto, but it hints to the browser that the custom font is optional. If the font can be loaded quickly, it is used; otherwise, a fallback font is used. This value is useful for ensuring that the page content remains visible even if the custom font is not available or takes too long to load.

Here's an example that demonstrates the usage of the font-display property:

@font-face {
  font-family: 'Wix Madefor Text';
  src: url('Wix-Madefor-Text.ttf2') format('ttf2'),
       url('Wix-Madefor-Text.ttf') format('ttf');
  font-display: swap;
}

h1 {
  font-family: 'Wix Madefor Text', sans-serif;
}

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tutor Joes</title>
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
    <style>
        h1{
            font-family: 'Pacifico', cursive;
            font-weight:normal;
            font-variant: small-caps;
            color:red;
        }
        p{
            font-style:italic;
            font-size: 25px;
        }
        span{
            font: bold 12pt Arial; 
        }
    </style>
</head>
<body>
    <h1>CSS Font Properties</h1>
    <p>
      <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, 
      placeat eius! Error deserunt eaque sed non, laboriosam quaerat veritatis
      </span>veniam possimus? Facilis corporis quae at alias esse optio sint 
      dignissimos.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, 
      placeat eius! Error deserunt eaque sed non, laboriosam quaerat veritatis
      veniam possimus? Facilis corporis quae at alias esse optio sint 
      dignissimos.
    </p>
    
</body>
</html>