Menu
CSS

letter-spacing

The letter-spacing property in CSS is used to adjust the space between characters in a text element. This can be particularly useful for enhancing readability or achieving a specific design effect.

 

Basic Usage

The letter-spacing property can be set using various units such as pixels (px), ems (em), or percentages (%). Here’s a simple example:

 

Using Pixels

p {
  letter-spacing: 2px;
}

 

Using Ems

p {
  letter-spacing: 0.1em;
}

 

Using Percentages

Although less common, you can use percentages to set letter-spacing.

p {
  letter-spacing: 10%;
}

 

Full Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CoderSmile Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to CoderSmile</h1>
    <h2>Getting Started</h2>
    <p>This guide will help you set up your development environment quickly and easily. Follow the steps below to get started.</p>
    <p>Whether you are a beginner or an experienced developer, having the right tools is crucial for efficient coding.</p>
</body>
</html>
<style>
/* styles.css */
body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

h1 {
  font-size: 32px;
  line-height: 1.3;
  letter-spacing: 1px; /* Adding letter-spacing */
}

h2 {
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: 0.5px; /* Adding letter-spacing */
}

p {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.05em; /* Adding letter-spacing */
}

</style>

Explanation

  • body: Sets a common font family and margin for the entire page.
  • h1: The main heading is set with a larger font size, a line-height of 1.3, and a letter-spacing of 1px to make the text more spaced out and readable.
  • h2: The subheading is slightly smaller, with a line-height of 1.4 and a letter-spacing of 0.5px.
  • p: Paragraph text is set to a comfortable font size (16px), a line-height of 1.6, and a slight letter-spacing of 0.05em to enhance readability.

 

CSS