How to change font size depending on width of container?
Last Updated :
03 Aug, 2021
There are various ways of putting some text in a container and having some size to fill that container.
There are different methods such as using CSS and jQuery which are explained below.
Using CSS property (Viewport width): The vw is a CSS property, to create responsive typography in the HTML file. The viewport is a browser window size. The “text-size” can be set with a “vw” units and you can find an exact number where the text pretty closely fits the container and doesn’t break as you resize the browser window.
1vw = 1% of viewport width. If the viewport is 100cm wide, 1vw is 10cm.
Example:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>
How to change font size
depending on the width
of container?
</title>
<style>
h1 {
font-size: 8vw;
color: green;
font-weight: bold;
}
p {
font-size: 3vw;
}
</style>
</head>
<body>
<h1>Geeks for Geeks</h1>
<p>
Resize the browser window
to see how the font size
changes.
</p>
</body>
</html>
|
Output:
- On Desktop:
- On iPad:
Using CSS property (Media Queries): You can also use media queries to change the font size of an element on specific screen sizes. The @media rule, which makes it possible to define different style rules for different media types.
Example:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>
How to change font size
depending on width of
container?
</title>
<style>
h1 {
color: green;
}
@media screen and (min-width: 601px) {
h1 {
font-size: 80px;
}
p {
font-size: 40px;
}
}
@media screen and (max-width: 600px) {
h1 {
font-size: 40px;
}
p {
font-size: 20px;
}
}
</style>
</head>
<body>
<h1>Geeks for Geeks</h1>
<p>
Set the <em>font-size</em> of "h1"
to "40px" and <em>paragraph</em> to
"20px", when the window's width is
"600px" wide or less and when it
is "601px" or wider, set the
<em>font-size</em> to "80px" and
<em>paragraph</em> to "40px".
Resize the browser window to
see the effect.
</p>
</body>
</html>
|
Output:
- On Desktop:
- On iPad:
Using FitText jQuery plugin: There is a jquery plugin that can make font-sizes flexible on the responsive layout, namely FitText. For instance, one can use the plugin to do scalable text sizes with respect to the container’s width.
Example:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>H
ow to change font size
depending on width of c
ontainer?
</title>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1>Geeks for Geeks</h1>
<p>
Resize the browser window
to see how the font size
scales.
</p>
<script type="text/javascript" src=
</script>
<script type="text/javascript">
textFit(document.querySelector("h1"));
</script>
</body>
</html>
|
Output:
- On Desktop:
- On iPad:
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...