MSDN Documentation

Styling Text and Typography in CSS3

This tutorial explores the rich capabilities of CSS3 for controlling the appearance of text and the overall typography of your web pages. We'll cover fundamental properties and delve into newer, more powerful features that allow for sophisticated text styling.

Font Properties

The font property is a shorthand that allows you to set various font-related properties at once. Key individual properties include:

• font-family: Specifies the font for an element. You should always provide a fallback font.

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

• font-size: Sets the size of the font. Values can be absolute (e.g., px, pt) or relative (e.g., em, rem, %).

  font-size: 16px;
  font-size: 1.2em;
  font-size: 1.5rem;

• font-weight: Defines the boldness of a font. Common values are normal, bold, and numeric values from 100 to 900.

  font-weight: normal;
  font-weight: bold;
  font-weight: 700;

• font-style: Sets the style (e.g., normal, italic, oblique).

  font-style: italic;

• line-height: Sets the spacing between lines of text. Can be a unitless number (multiplier of font size), a length, or a percentage.

  line-height: 1.5; /* 1.5 times the font-size */
  line-height: 24px;

Advanced Typography Features

CSS3 introduced several features to enhance typographic control:

text-decoration Enhancements

Beyond simple underlines, CSS3 offers more control:

• text-decoration-line: Specifies the type of decoration (e.g., underline, overline, line-through, none).
• text-decoration-color: Sets the color of the decoration.
• text-decoration-style: Defines the style of the decoration (e.g., solid, wavy, dotted, dashed).
• text-decoration-thickness: Sets the thickness of the decoration.

These can be combined into a shorthand text-decoration property.

text-decoration: underline wavy red 2px;

text-shadow

Apply shadows to text for emphasis or stylistic effects. It takes x-offset, y-offset, blur-radius, and color.

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

Web Fonts (@font-face)

Use custom fonts by defining them with the @font-face rule. This allows you to use fonts not typically available on user systems.

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/mycustomfont.woff2') format('woff2'),
       url('fonts/mycustomfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.custom-text {
  font-family: 'MyCustomFont', sans-serif;
}

word-wrap and overflow-wrap

Control how words break when they overflow their container. overflow-wrap is the standard property, while word-wrap is an alias.

.long-word-container {
  width: 200px;
  overflow-wrap: break-word; /* or word-wrap: break-word; */
}

text-overflow

Indicates how to signal that text has been clipped to prevent the user from seeing it. Often used with white-space: nowrap; and overflow: hidden;.

.truncate-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* Displays "..." */
}

CSS Variables for Typography

Leverage CSS Custom Properties (variables) to manage font families, sizes, and line heights consistently across your project.

:root {
  --base-font-family: 'Segoe UI', sans-serif;
  --heading-font-family: 'Segoe UI Semibold', sans-serif;
  --base-font-size: 1rem;
  --heading-scale: 1.5;
}

body {
  font-family: var(--base-font-family);
  font-size: var(--base-font-size);
}

h1, h2, h3 {
  font-family: var(--heading-font-family);
  line-height: 1.2;
}

h1 { font-size: calc(var(--base-font-size) * var(--heading-scale) * 2); }
h2 { font-size: calc(var(--base-font-size) * var(--heading-scale) * 1.5); }
h3 { font-size: calc(var(--base-font-size) * var(--heading-scale)); }

Key Takeaway: Thoughtful typography significantly impacts user experience. Use a combination of standard properties, advanced features, and web fonts to create readable and visually appealing text.

Continue to the next section to explore CSS3 Colors and Gradients.