Text formatting properties

Text Styling Properties

Text styling is an indispensable part of web design, and CSS3 provides a rich set of properties to control the display effects of text. From font selection to spacing adjustments, and from decorations to shadows, these properties allow developers to precisely control how text is presented.

Font Properties

The font-family property defines the font family of the text. Multiple fonts can be specified as fallbacks to ensure good display across different devices.

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

font-size controls the size of the text and supports various units:

h1 {
  font-size: 2em; /* Relative unit */
}
p {
  font-size: 16px; /* Absolute unit */
}

font-weight sets the thickness of the font:

strong {
  font-weight: 700; /* Equivalent to bold */
}

font-style is used to set italic text:

em {
  font-style: italic;
}

Text Decoration and Transformation

The text-decoration property can add underlines, overlines, strikethroughs, and other decorations:

a {
  text-decoration: none; /* Remove link underline */
}
.del {
  text-decoration: line-through;
}

text-transform controls text case conversion:

.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}

Text Alignment and Spacing

text-align sets the horizontal alignment of text:

.center {
  text-align: center;
}
.justify {
  text-align: justify;
}

line-height defines line spacing, which greatly affects readability:

article {
  line-height: 1.6; /* Unitless value relative to the current font size */
}

letter-spacing and word-spacing control character and word spacing, respectively:

.heading {
  letter-spacing: 1px;
}
.spaced {
  word-spacing: 0.5em;
}

Text Shadow and Overflow

text-shadow adds shadow effects to text:

h2 {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

text-overflow handles text that overflows its container:

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Advanced Typography Features

CSS3 introduces the @font-face rule, allowing the use of custom fonts:

@font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2');
}

font-feature-settings enables OpenType font features:

.oldstyle {
  font-feature-settings: "onum";
}

The hyphens property controls hyphenation:

p {
  hyphens: auto;
}

Vertical Alignment and Writing Mode

vertical-align controls the vertical alignment of inline elements:

img.icon {
  vertical-align: middle;
}

writing-mode changes the text direction:

.vertical-text {
  writing-mode: vertical-rl;
}

Text Rendering Optimization

The text-rendering property provides rendering hints:

body {
  text-rendering: optimizeLegibility;
}

font-smooth controls font anti-aliasing:

body {
  -webkit-font-smoothing: antialiased;
}

Multi-column Text Layout

CSS3's multi-column layout can create newspaper-like text arrangements:

.multicol {
  column-count: 3;
  column-gap: 2em;
  column-rule: 1px solid #ddd;
}

Text Selection Styling

The ::selection pseudo-element can customize the style of selected text:

::selection {
  background: #ffb7b7;
  color: #000;
}

Variable Fonts

CSS3 supports variable fonts, allowing multiple weights and widths from a single font file:

@font-face {
  font-family: 'VariableFont';
  src: url('font.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
}

.variable {
  font-family: 'VariableFont';
  font-weight: 650;
  font-stretch: 110%;
}