Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Using the combination of Percentage and Em in CSS
We can use a combination of percentage and em to specify the font-size of elements for better compatibility of font. This allows us to have uniform text across different browsers. Both percentage and em are relative measurements that scale based on their parent elements, making them ideal for responsive design.
Syntax
selector {
font-size: value;
}
Where value can be a percentage (e.g., 80%, 120%) or em unit (e.g., 1.2em, 2em). Percentages are relative to the parent element's font size, while em units are also relative to the parent's font size.
Example 1: Body with Percentage, Elements with Em
The following example sets the body font size using percentage and nested elements using em units −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 80%;
font-family: Arial, sans-serif;
}
p {
font-size: 2em;
margin: 10px 0;
}
span {
font-size: 4em;
font-style: italic;
color: #e74c3c;
}
</style>
</head>
<body>
<p>Reading <span>source code</span> written by others gives you opportunity to criticize the mistakes done in writing that code</p>
</body>
</html>
Text appears with the body at 80% of browser default, paragraph text at 2em (twice the body size), and the span "source code" at 4em in italic red styling.
Example 2: Container with Percentage, Nested Elements with Em
This example demonstrates how percentage and em units cascade through nested elements −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Georgia, serif;
margin: 20px;
}
div {
font-size: 120%;
background-color: #f8f9fa;
padding: 15px;
border-left: 4px solid #007bff;
}
h3 {
font-size: 1.5em;
color: #495057;
margin-top: 0;
}
p {
font-size: 2em;
color: #28a745;
margin: 10px 0;
}
</style>
</head>
<body>
<h3>Demo Heading</h3>
This is example text.
<div>
Examples are easier to understand with practical implementation
<p>This is another text just to display different ways to set font size in CSS.</p>
</div>
</body>
</html>
A webpage displays with styled text where the div container has 120% font size, and the nested paragraph appears larger due to the 2em multiplier applied to the div's already increased font size.
Key Benefits
| Unit | Relative To | Best Use Case |
|---|---|---|
| Percentage (%) | Parent element's font size | Setting base font sizes |
| Em | Parent element's font size | Scaling text within components |
Conclusion
Combining percentage and em units provides flexible, scalable typography that adapts across different devices and browsers. This approach ensures consistent relative sizing while maintaining accessibility and responsive design principles.
445 Views
