Previous
Written by: rJTutorial Team | Last Updated:

CSS Text

In web design, content is king, and how that content looks is just as important as what it says. CSS provides a robust toolkit for styling text, allowing you to transform plain characters into a professional, readable interface. By mastering these properties, you can ensure your website is accessible, reinforces your brand identity, and guides the reader's eye effectively. Here's a breakdown of the essential CSS text properties you'll use every day:

  • Font Family (font-family): This property defines the typeface used for your text. Because not every user has the same fonts installed on their device, developers use a "font stack"—a list of fonts from most preferred to a generic fallback.
/* Use a specific font, with fallbacks for different operating systems */
body {
    font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Serif fonts are often used for a more traditional or formal feel */
.article-title {
    font-family: 'Georgia', 'Times New Roman', serif;
}
Best Practice: Always end your font stack with a generic family like sans-serif, serif, or monospace. This ensures the browser chooses its best available match if your specific choices aren't found.
  • Font Size (font-size): This sets the size of your text. While pixels (px) are common, modern web development favors relative units like rem or em to ensure the text scales correctly if a user changes their browser's default settings.
/* Using rem makes your site more accessible */
h1 {
    font-size: 2.5rem; /* Usually 40px based on a 16px root */
}

p {
    font-size: 1rem; /* Usually 16px */
}

.caption {
    font-size: 0.875rem; /* 14px equivalent */
}
Watch Out: Avoid using font sizes smaller than 12px for body text. Tiny text is difficult to read on mobile devices and creates accessibility barriers for users with visual impairments.
  • Font Weight (font-weight): This controls how thick or thin the characters appear. You can use keywords or numbers ranging from 100 (thin) to 900 (heavy). 400 is equivalent to "normal," and 700 is equivalent to "bold."
/* Standard bolding */
h2 {
    font-weight: 700;
}

/* Lighter weight for a modern, airy feel */
.subtitle {
    font-weight: 300;
}
Common Mistake: Setting a numeric weight like font-weight: 300; when the font file you loaded only includes 400 and 700. If the specific weight isn't available, the browser will try to "fake" it, which often looks blurry or distorted.
  • Text Color (color): This property changes the color of the foreground text. You have several options for values: predefined names (red), Hex codes (#FF5733), or functional notation (RGB or HSL).
/* Hex codes are the industry standard */
.main-heading {
    color: #2c3e50;
}

/* RGB is great when you need to adjust transparency (the 'a' in rgba) */
.faded-text {
    color: rgba(0, 0, 0, 0.6); /* Black at 60% opacity */
}
Developer Tip: Use HSL (Hue, Saturation, Lightness) for colors if you find Hex codes hard to memorize. It’s much more intuitive to change the "Lightness" value to make a color darker or lighter.
  • Text Alignment (text-align): This controls the horizontal positioning of text within its parent container. Common values are left, right, center, and justify.
.hero-title {
    text-align: center;
}

.price-tag {
    text-align: right;
}

/* Justify spreads text to touch both edges, like a newspaper */
.legal-print {
    text-align: justify;
}
Watch Out: Be careful with text-align: justify; on the web. It can create "rivers of white space" between words, which makes reading difficult, especially on narrow screens.
  • Text Decoration (text-decoration): Primarily used to add or remove lines on text. It’s most commonly used to remove the default underline from navigation links or to cross out items in a list.
/* Remove the default underline from a link */
.nav-link {
    text-decoration: none;
}

/* Add a line through for completed tasks */
.todo-completed {
    text-decoration: line-through;
}
  • Line Height (line-height): This defines the vertical space between lines of text. Increasing the line height (also known as "leading") can drastically improve the readability of long paragraphs.
/* A unitless value of 1.5 to 1.6 is usually ideal for body text */
p {
    line-height: 1.6;
}

/* Tight line height for headings to keep them compact */
h1 {
    line-height: 1.2;
}
Best Practice: Use unitless values (like 1.5) rather than pixels for line-height. This allows the line height to scale proportionally if the font-size is changed later.
  • Letter Spacing (letter-spacing): This property adjusts the tracking (the space between individual characters). It is often used to give uppercase headings a more premium or readable look.
/* Subtle spacing for all-caps buttons */
.btn-primary {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Tighten spacing for very large headings */
.mega-title {
    letter-spacing: -1px;
}

Mastering these text properties is one of the quickest ways to improve your front-end development skills. By combining font choices, appropriate sizing, and thoughtful spacing, you can turn a basic webpage into a polished, professional user experience. Experiment with these values in your next project to see how they impact the "feel" of your design.

Previous