Font scaling based on width of container using CSS
In this article, we are going to discuss how can we scale the font based on the width of the container. The font size can be set with the “vw” (viewport) unit, which means the viewport width. The viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm. That way the font size will follow the size of the browser window.
Syntax:
element {
font-size: #vw; // #vw is the font size
// CSS Property
}
Example 1: In this example, we are using viewport width as a value of font size.
html
<!DOCTYPE html>
< html >
< head >
< meta name = "viewport" content = "width=device-width, initial-scale=1" />
< title >Font Scaling</ title >
< style >
#container {
display: inline-block;
background-color: green;
padding: 0.5vw 1vw;
}
.divtext {
display: table;
color: white;
font-family: impact;
font-size: 4.2vw;
}
</ style >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< div id = "container" >
< div class = "divtext" >
Resize the browser window to see
how the font size scales.
</ div >
</ div >
</ body >
</ html >
|
Output:
Output
Example 2: In this example, we have used Media queries for responsive font size.
HTML
<!DOCTYPE html>
< html >
< head >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title >Font Scaling</ title >
< style >
h2 {
text-align: center;
}
div.example {
background-color: lightgreen;
padding: 20px;
text-align: center;
}
@media screen and (min-width: 601px) {
div.example {
font-size: 40px;
}
.a {
font-size: 25px;
text-align: center;
}
}
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
.a {
font-size: 18px;
text-align: center;
}
}
@media screen and (min-width: 800px) {
div.example {
font-size: 60px;
}
.a {
font-size: 35px;
}
}
</ style >
</ head >
< body >
< div class = "example" >
Font size automatically adjusting
according to the width of the container
</ div >
< p class = "a" >
Change the width of the browser window
to see the font scaling automatically according to the
container size.
</ p >
</ body >
</ html >
|
Output:
Output
Note: Change the size of the browser window to see the changes in the font size.
Last Updated :
29 Nov, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...