Font & Text Properties

CSS provides a variety of font and text properties to control the appearance of text on a web page. These properties help define the font type, size, weight, spacing, alignment, and decoration.

Common Font Properties:

• font-family – Sets the typeface (e.g., Arial, Times New Roman).
• font-size – Sets the size of the font (e.g., 16px, 1.2em).
• font-weight – Controls the boldness (e.g., normal, bold, 400, 700).
• font-style – Makes text normal, italic, or oblique.
• font-variant – Controls small caps (e.g., normal, small-caps).
• line-height – Sets the spacing between lines of text.

Common Text Properties:

• color – Sets the text color.
• text-align – Aligns text (e.g., left, center, right, justify).
• text-decoration – Adds decoration (e.g., underline, overline, none).
• text-transform – Changes case (e.g., uppercase, lowercase, capitalize).
• letter-spacing – Controls space between letters.
• word-spacing – Controls space between words.
• text-shadow – Adds shadow to text.
• white-space – Controls how white space is handled (e.g., nowrap, pre).

Example:

p {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  text-align: justify;
  text-decoration: underline;
}

Tip:

Use these properties to improve readability and enhance the visual appeal of your content. You can also use shorthand like font to combine multiple font settings in one line.

p {
  font: italic small-caps bold 16px/1.5 'Arial', sans-serif;
}

Example 1: Font Family

This is a paragraph with the font family set to Arial, then Helvetica, and a fallback to sans-serif.

Copy Code

p {
  font-family: "Arial", "Helvetica", sans-serif;
}
    

Example 2: Font Size

This is a paragraph with a font size of 16px. The heading (h1) has a font size of 2em, which is twice the root font size.

Copy Code

p {
  font-size: 16px;
}
h1 {
  font-size: 2em;
}
    

Example 3: Font Weight

This text is normal weight, while this strong text is bold, and the h1 has a font weight of 700 (bold).

Copy Code

p {
  font-weight: normal;
}
strong {
  font-weight: bold;
}
h1 {
  font-weight: 700;
}
    

Example 4: Font Style

This is italic text. Copy Code

em {
  font-style: italic;
}
.oblique-text {
  font-style: oblique;
}
    

Example 5: Text Color

This is blue text, and this heading is dark gray (#333). The highlighted text is red (rgb(255, 0, 0)).

Copy Code

p {
  color: blue;
}
h1 {
  color: #333;
}
.highlighted {
  color: rgb(255, 0, 0);
}
    

Example 6: Text Alignment

Left-aligned text.

Centered Heading

Copy Code

p {
  text-align: left;
}
h1 {
  text-align: center;
}
    

Example 7: Text Decoration

This link has no underline. This text is underlined.
Copy Code

a {
  text-decoration: none;
}
.underline {
  text-decoration: underline;
}
    

Example 8: Line Height

This paragraph has a line height of 1.5 times the font size, making the text more readable.

Copy Code

p {
  line-height: 1.5;
}
    

Example 9: Letter Spacing

This heading has tighter letter spacing.

This paragraph has 2px of letter spacing.

Copy Code

h1 {
  letter-spacing: -0.05em;
}
p {
  letter-spacing: 2px;
}
    

Example 10: Word Spacing

This paragraph has a word spacing of 0.2em, making the words slightly more spaced apart.

Copy Code

p {
  word-spacing: 0.2em;
}
    

Web Font Example (Google Fonts)

This heading uses the 'Roboto' font.

Copy Code

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
body {
  font-family: 'Roboto', sans-serif;
}
h1 {
  font-weight: 700;
}