Text Formatting with CSS

Dive into CSS properties for text formatting, including font family, font size, font weight, text alignment, and line height.

⬅ Previous Next ➡

CSS Text Formatting

Text Formatting with CSS: An Overview

CSS (Cascading Style Sheets) provides powerful tools to control the appearance of text in your web pages. Proper text formatting is crucial for readability, accessibility, and overall visual appeal. With CSS, you can change the font, size, weight, alignment, line height, color, and many other aspects of your text. This allows you to create a consistent and engaging user experience.

Font Family

The font-family property specifies the typeface to be used for the text. You can specify a list of fonts, and the browser will try to use the first one available on the user's system. If none of the specified fonts are available, the browser will use its default font.

It's good practice to provide a fallback font (like serif, sans-serif, monospace, cursive, or fantasy) as a generic font family at the end of your font-family list.

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

In this example, the browser will try to use "Helvetica Neue" first. If it's not available, it will try "Helvetica", then "Arial", and finally the generic sans-serif font.

px: Fixed size in pixels.
em: Relative to the font size of the element's parent. 1em is equal to the parent's font size.
rem: Relative to the font size of the root element (html element). This is generally a better choice for overall site consistency.
pt: Points (typically used for print).
%: Percentage relative to the parent element's font size.

 h1 {
   font-size: 2em; /* Twice the size of the parent's font */
 }
 p {
   font-size: 16px;
 } 

Font Weight

The font-weight property determines the thickness or boldness of the text. Common values include normal, bold, lighter, bolder, and numeric values (100 to 900). 400 is typically equivalent to normal, and 700 is equivalent to bold.

 .bold-text {
   font-weight: bold;
 }
 h2 {
   font-weight: 600;  /* A bit bolder than normal */
 } 

Text Alignment

The text-align property controls the horizontal alignment of text within its containing element. Common values include left, right, center, and justify.

 .centered {
   text-align: center;
 }
 .justified {
   text-align: justify; /* Spreads the text to fill the width */
 } 

Line Height

The line-height property specifies the distance between the baselines of lines of text. A good line height improves readability. It can be specified as a number (a multiplier of the font size), a length (e.g., px, em), or a percentage.

Using a unitless number (e.g., 1.5) is generally recommended, as it inherits better across different font sizes.

 body {
   line-height: 1.5;  /* 1.5 times the font size */
 }
 .tight-spacing {
   line-height: 1.2;
 } 

Other Useful Text Formatting Properties

Besides the core properties, CSS offers many other features for text formatting:

text-decoration: Adds decorations like underlines, overlines, and strikethroughs.
text-transform: Changes the capitalization of text (e.g., uppercase, lowercase, capitalize).
letter-spacing: Adjusts the space between letters.
word-spacing: Adjusts the space between words.
color: Sets the text color.
white-space: Controls how whitespace is handled.
text-shadow: Adds a shadow effect to the text.

This is an example of formatted text. It uses the Arial font, is slightly larger than the default, is bold, justified, and has a line height of 1.8 for improved readability. This text also includes highlighted and small text examples. Proper formatting is crucial for a good user experience.