Computer >> Computer tutorials >  >> Programming >> CSS

Setting Font Size with Em in CSS


To set the font-size property in CSS, you can use em. This is beneficial when you need pixel accuracy for the text. By default 1em = 16px, and 2em = 32px.

Example

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   text-decoration: overline;
   text-decoration-color: yellow;
   font-size: 1.3em;
}
</style>
</head>
<body>
<h1>Examination Details</h1>
<p class="demo">Exam on 20th December.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

Output

Setting Font Size with Em in CSS

Example

Let us now see another example −

<!DOCTYPE html>
<html>
<head>
<style>
div {
   text-align: justify;
   text-justify: inter-word;
   color: white;
   background-color: gray;
   font-size: 1.5em;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<div>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </div>
</body>
</html>

Output

Setting Font Size with Em in CSS