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
How to change Font Size Depending on Width of Container?
Changing font size depending on the width of a container is essential for creating responsive typography that adapts to different screen sizes and devices. You can achieve this using CSS viewport units, media queries, or JavaScript plugins to ensure your text remains readable and visually appealing across all devices.
Syntax
/* Using viewport units */
selector {
font-size: vw;
}
/* Using media queries */
@media (max-width: value) {
selector {
font-size: value;
}
}
Method 1: Using Viewport Width (vw)
The viewport width (vw) unit represents 1% of the viewport's width. Using vw units allows font size to scale automatically with the container width, creating fluid typography that responds to screen size changes.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 80%;
margin: 20px auto;
padding: 20px;
border: 2px solid #333;
}
.container p {
font-size: 4vw;
color: #2c3e50;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<p>This text scales with viewport width</p>
<p>Resize your browser to see the effect</p>
</div>
</body>
</html>
Text that automatically scales with the browser width. The font size increases and decreases proportionally as you resize the browser window.
Method 2: Using Media Queries
Media queries allow you to define different font sizes for specific screen width ranges, giving you precise control over typography at different breakpoints.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.responsive-text {
padding: 20px;
background-color: #f8f9fa;
border-radius: 8px;
text-align: center;
font-size: 24px;
}
@media (max-width: 768px) {
.responsive-text {
font-size: 18px;
}
}
@media (max-width: 480px) {
.responsive-text {
font-size: 14px;
}
}
@media (min-width: 1200px) {
.responsive-text {
font-size: 28px;
}
}
</style>
</head>
<body>
<div class="responsive-text">
<p>This text changes size at breakpoints</p>
<p>Resize your browser to see different font sizes</p>
</div>
</body>
</html>
Text that changes to specific font sizes at different screen widths: 14px on phones, 18px on tablets, 24px on small desktops, and 28px on large screens.
Method 3: Using Container Query Units
Modern CSS supports container queries with units like cqw (container query width) that scale based on the actual container size rather than viewport size.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
container-type: inline-size;
width: 60%;
margin: 20px auto;
padding: 20px;
background-color: #e3f2fd;
border-radius: 10px;
}
.container-text {
font-size: 5cqw;
color: #1565c0;
text-align: center;
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<p class="container-text">Font scales with container width</p>
<p class="container-text">Not viewport width</p>
</div>
</body>
</html>
Text that scales based on the container's width specifically, providing more precise control than viewport units.
Conclusion
Responsive font sizing ensures optimal readability across devices. Use viewport units for simple scaling, media queries for precise control at breakpoints, or container queries for modern, container-specific typography solutions.
7K+ Views
