DEV Community

Cover image for CSS Text Styling: Fonts, Size, Weight, Alignment & Decoration
Sharique Siddiqui
Sharique Siddiqui

Posted on

CSS Text Styling: Fonts, Size, Weight, Alignment & Decoration

#css #beginners #webdev #frontend

When it comes to web design, text is king. Most of what users consume on a website is textual content—headings, paragraphs, captions, buttons. Styling your text properly makes your site not only beautiful but also readable and accessible.

In this post, we’ll explore the essential CSS properties for text styling: fonts, size, weight, alignment, and decoration.

Choosing Fonts (font-family)

The font-family property defines which font should be used. You can use:

  • Web-safe fonts such as Arial, Verdana, Times New Roman.
  • Font stacks (a prioritized list in case a font isn’t available).
  • Custom fonts (via Google Fonts or @font-face).
Example: 
css
body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

Best practice: Always include a fallback font for better compatibility.

Controlling Size (font-size)

Setting font size is crucial for readability.

  • Use pixels (px) for precise, fixed sizes.
  • Use relative units (em, rem) for scalable, responsive typography.
Example: 
css
h1 {
  font-size: 2.5rem; /* Relative to root font size */
}

p {
  font-size: 1rem; /* Default ~16px */
}
Enter fullscreen mode Exit fullscreen mode

Managing Thickness (font-weight)

The font-weight property controls how bold or light the text appears.

  • Keywords: normal, bold, lighter
  • Numeric values: 100 (thin) → 900 (extra bold)
Example: 
css
h2 {
  font-weight: 700; /* bold */
}

span {
  font-weight: 300; /* light */
}
Enter fullscreen mode Exit fullscreen mode

Aligning Text (text-align)

The text-align property adjusts the horizontal alignment of text.

  • left → default alignment (for left-to-right languages)
  • right → aligns text to the right edge
  • center → centers text
  • justify → stretches text so each line is equal width
Example: 
css
p {
  text-align: justify;
}
Enter fullscreen mode Exit fullscreen mode

Adding Style with Decorations (text-decoration)

The text-decoration property lets you add (or remove) visual lines around text.

  • none → remove default decorations (common for links)
  • underline
  • overline
  • line-through
Example: 
css
a {
  text-decoration: none; /* Removes underline */
  color: royalblue;
}

span.discount {
  text-decoration: line-through; /* Strike-through old price */
}
Enter fullscreen mode Exit fullscreen mode

Bonus: Extra Text Styling Properties

  • line-height → controls vertical spacing between lines of text.
  • letter-spacing → adjusts space between characters.
  • word-spacing → adjusts space between words.
  • text-transform → changes case (uppercase, lowercase, capitalize).
  • text-shadow → adds creative glowing or shadow effects.
Example: 
css
h1 {
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 1px 2px 4px rgba(0,0,0,0.3);
}
Enter fullscreen mode Exit fullscreen mode

Final Thoughts

Text styling in CSS is more than just changing fonts—it’s about creating a visual hierarchy, maintaining readability, and enhancing user experience.
By mastering fonts, sizes, weights, alignment, and decoration, you can transform plain text into an engaging part of your web design.

Check out the YouTube Playlist for great CSS content for basic to advanced topics.

Please Do Subscribe Our YouTube Channel for clearing programming concept and much more ...CodenCloud

Top comments (0)