CSS Text Formatting

Text is the core of most web content. While default browser styling is functional, CSS text formatting properties give you the tools to create a professional, readable, and accessible experience. Beyond just changing colors, these properties allow you to control the rhythm, weight, and hierarchy of your typography.

Basic Text Properties

These are the fundamental properties you will use in almost every project to define the "look" of your content.

Color

The color property sets the foreground color of the text. You can use keyword names, HEX codes, RGB, or HSL values.

color: #333333; /* A dark charcoal for better readability than pure black */

Font Family

This defines which typeface the browser should use. Since you can't guarantee a user has a specific font installed, we use a "font stack."

font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;

Font Size

While px is common, modern web development favors relative units like rem or em for better scalability.

font-size: 1.1rem; /* Scalable size based on the root element */

Font Weight

This controls the thickness of the characters. You can use keywords or numeric values (100–900).

font-weight: 600; /* Semi-bold */

Font Style

Mainly used to apply italics. This is often used for citations, emphasis, or caption text.

font-style: italic;

Font Variant

This is often used for "Small Caps" effects, where lowercase letters are turned into smaller versions of uppercase letters.

font-variant: small-caps;

Text Align

Controls the horizontal alignment of the text within its parent container.

text-align: center; /* Common for headings or hero sections */

Advanced Text Properties

Once you have the basics down, these properties allow you to fine-tune the spacing and decoration of your text for a polished look.

Text Decoration

This is used to add or remove lines from text. It is most commonly used to remove the default underline from navigation links.

text-decoration: none; /* Removes underlines from <a> tags */

Text Transform

This is a powerful way to change the casing of text via CSS without changing the actual HTML content. This is great for "All Caps" headers.

text-transform: uppercase; /* FORCED UPPERCASE TEXT */

Text Shadow

Adds a drop shadow to characters. The values are: horizontal-offset vertical-offset blur-radius color.

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

Letter Spacing

Also known as "kerning," this adjusts the space between individual characters. It's often used to make large headings look more sophisticated.

letter-spacing: -0.5px; /* Tightens the text slightly */

Line Height

Perhaps the most important property for readability. It sets the distance between lines of text.

line-height: 1.6; /* A value between 1.5 and 1.7 is usually ideal for body text */

Text Indent

Indents the first line of a paragraph, a style commonly seen in traditional print media.

text-indent: 2em;

Word Spacing

Increases or decreases the space between words.

word-spacing: 5px;

White Space

Controls how the browser handles line breaks and spaces. nowrap is useful for UI elements like buttons where you never want the text to break onto two lines.

white-space: nowrap;

Text Overflow

Determines how to signal to the user that text has been "clipped" because it is too long for its container.

text-overflow: ellipsis; /* Adds "..." at the end of the text */

CSS Example

Here is a real-world example of how to combine these properties to style a clean, modern article paragraph:

article p {
    color: #2d3436;
    font-family: 'Segoe UI', Roboto, Helvetica, sans-serif;
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    text-align: left;
    /* Subtle letter spacing for a premium feel */
    letter-spacing: 0.01em;
}

article h1 {
    text-transform: capitalize;
    font-weight: 800;
    letter-spacing: -1px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

Additional Properties and Tips

Vertical Align

This property is often confusing. It doesn't center text inside a div. Instead, it aligns inline or inline-block elements (like images or spans) relative to the text around them.

vertical-align: middle; /* Aligns an icon to the middle of the text line */

Direction

Used to set the direction of text. This is vital for localized websites in languages like Arabic or Hebrew.

direction: rtl; /* Right-to-Left */

Unicode Bidi

This is used in conjunction with the direction property to handle text that contains both left-to-right and right-to-left characters.

unicode-bidi: bidi-override;

Font Stretch

If a font family has multiple widths (condensed, expanded), this property selects the appropriate version.

font-stretch: condensed;

By mastering these properties, you gain full control over the typography of your website. Remember that the goal of text formatting is not just to look good, but to make the content as easy to consume as possible for your users.