Letter spacing
In this article we are going to learn about letter spacing property in css, how to increase or decrease space between letters of any word in a sentance.
We learnt about css in general, selectors css, positions in css, display in css, lists style in css, multiple css, fixed layout in css, liquid layout in css, links style in css, box shadow in css, text align in css, table style in css and text shadow in css so, we will be focusing on letter spacing.
Letter spacing
Letter spacing is a Cascading Style Sheet property used to increase or decrease space (kerning) or gap between letters or each letter of a word in a sentance.
Let us create a div element with 5px letter spacing property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.letter-spacing-example {
letter-spacing: 5px;
}
<style/>
</head>
<body>
<div class="letter-spacing-example">This is a div element with 5px letter spacing applied.</div>
</body>
</html>
So, we should have the following results.
Let us create another div element with 1px letter spacing property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.letter-spacing-example {
letter-spacing: 1px;
}
<style/>
</head>
<body>
<div class="letter-spacing-example">This is a div element with 1px letter spacing applied.</div>
</body>
</html>
So, we should have the following results.
Let us create two div elements with 5px and -5px letter spacing applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.letter-spacing-example1 {
letter-spacing: 5px;
float: left;
width: 45%;
}
.letter-spacing-example2 {
letter-spacing: -2px;
float: right;
width: 45%;
}
<style/>
</head>
<body>
<div class="letter-spacing-example1">This is a div element with 5px letter spacing applied.</div>
<div class="letter-spacing-example2">This is a div element with -2px letter spacing applied.</div>
</body>
</html>
So, we should have the following results.
Let us create two div elements with 3px and 0px letter spacing property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.letter-spacing-example1 {
letter-spacing: 3px;
float: left;
width: 45%;
}
.letter-spacing-example2 {
letter-spacing: 0px;
float: right;
width: 45%;
}
<style/>
</head>
<body>
<div class="letter-spacing-example1">This is a div element with 3px letter spacing applied.</div>
<div class="letter-spacing-example2">This is a div element with 0px letter spacing applied.</div>
</body>
</html>
So, we should have the following results.