How to make CSS Font Size Fit Container Effectively ?
Last Updated :
18 Mar, 2024
Making CSS font size fit a container effectively involves ensuring that the text scales appropriately based on the dimensions of the container. This is crucial for maintaining readability and a consistent user experience regardless of the device being used.
Using Viewport
We can use viewport units to set font sizes relative to the viewport size. This ensures that font sizes adjust according to the size of the viewport, making them responsive.
Syntax:
.class_name {
font-size: 4vw;
}Example: The below code will explain the use of the viewport units to make CSS font size fit container effectively.
HTML
<!DOCTYPE html>
<html>
<head>
<title>GFG</title>
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<style>
.responsive-text {
font-size: 4vw;
text-align: center;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="container">
<p class="responsive-text">
GeeksforGeeks is a leading platform that provides
computer science resources and coding challenges
for programmers and technology enthusiasts, along
with interview and exam preparations for upcoming
aspirants. With a strong emphasis on enhancing coding
skills and knowledge, it has become a trusted destination
for over 12 million plus registered users worldwide. The
platform offers a vast collection of tutorials, practice
problems, interview tutorials, articles, and courses, covering
various domains of computer science.
</p>
<p class="responsive-text">
Our exceptional mentors hailing from top
colleges & organizations have the ability
to guide you on a journey from the humble beginnings
of coding to the pinnacle of expertise.
Under their guidance watch your skills flourish
as we lay the foundation and help you conquer the
world of coding.
</p>
<p class="responsive-text">
Our brand is built on the pillars of expertise,
accessibility, and community. We strive to
empower individuals to enhance their programming
skills, to bridge the gap between academia and
industry, and provide a supportive community to
the learners. GeeksforGeeks is committed to promoting
technological advancement and providing opportunities
for growth in the ever-evolving field of computer science.
</p>
</div>
</body>
</html>
Output:
We can implement media queries to define specific font sizes for different screen sizes. This allows us to adjust font sizes based on the screen size of the device.
Syntax:
@media (max-width: screen_size_here) {
// CSS for defined screen size
}Example: The below code will explain the use of the media query to make font size responsive according to the screen size.
HTML
<!DOCTYPE html>
<html>
<head>
<title>GFG</title>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<style>
.responsive-text {
text-align: center;
border: 2px solid black;
}
/* Media query for screens smaller than 768px */
@media (max-width: 768px) {
p {
font-size: 14px;
}
}
/* Media query for screens between 768px and 992px */
@media (min-width: 768px) and (max-width: 992px) {
p {
font-size: 18px;
}
}
/* Media query for screens larger than 992px */
@media (min-width: 992px) {
p {
font-size: 30px;
}
}
</style>
</head>
<body>
<div class="container">
<p class="responsive-text">
GeeksforGeeks is a leading platform that provides
computer science resources and coding challenges
for programmers and technology enthusiasts, along
with interview and exam preparations for upcoming
aspirants. With a strong emphasis on enhancing coding
skills and knowledge, it has become a trusted destination
for over 12 million plus registered users worldwide. The
platform offers a vast collection of tutorials, practice
problems, interview tutorials, articles, and courses, covering
various domains of computer science.
</p>
<p class="responsive-text">
Our exceptional mentors hailing from top
colleges & organizations have the ability
to guide you on a journey from the humble
beginnings of coding to the pinnacle of
expertise. Under their guidance watch
your skills flourish as we lay the
foundation and help you conquer the
world of coding.
</p>
<p class="responsive-text">
Our brand is built on the pillars of expertise,
accessibility, and community. We strive to
empower individuals to enhance their programming
skills, to bridge the gap between academia and
industry, and provide a supportive community to
the learners. GeeksforGeeks is committed to promoting
technological advancement and providing
opportunities for growth in the
ever-evolving field of computer science.
</p>
</div>
</body>
</html>
Output:
Using CSS Clamp
We can utilize CSS Clamp to make text content flexible within containers. It takes three parameters: value1, value2, and value3. value1 represents the minimum allowed value, value2 is the preferred value, and value3 is the maximum allowed value.
Syntax:
clamp(value1, value2, value3)
Example: The below code will explain the use of clamp to make font size responsive according to the screen size within container.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>Font Size with Clamp</title>
<style>
body {
display: flex;
justify-content: center;
}
.container {
width: 80%;
border: 1px solid #ccc;
text-align: center;
}
/* Using clamp to adjust font size */
.text {
font-size: clamp(18px, 3vw, 26px);
}
</style>
</head>
<body>
<div class="container">
<p class="text">
This text will adjust its font size based
on the width of its container. Resize the
window to see the effect.
</p>
</div>
</body>
</html>
Output:
Similar Reads
How to Auto-Resize an Image to Fit a Div Container using CSS?
To resize an image or video to fit inside a div container, use the object-fit property for precise control over how the content fits. object-fit maintains the aspect ratio or stretches the content to fill the container.Common values include cover (fills the container, may crop) and contain (fits wit
3 min read
How to Change the Font Family & Size of Text in CSS ?
In CSS, the font family and size of the text can be customized to enhance the visual appearance of the text within the application. We can use various inbuilt properties offered by CSS to change font family and size. Below are the approaches to change the font family and size of text in CSS: Table o
3 min read
How to Change Font Size using CSS?
The CSS font-size property is used to change the font size of text. CSS font-size PropertyThe font-size property in CSS sets the size of the text of HTML elements. Values can be in pixels, percentages, em, rem etc. Syntax font-size: value;Example: We can use various font-size units like - em, smalle
2 min read
How to stretch div to fit the container ?
Stretching a child div to fit the full width and height of its parent container can be achieved through various CSS methods. Here are two effective methods to accomplish this: Method 1: Using 100% Width and HeightThis is the most simple approach. By setting the width and height properties of the chi
2 min read
How to Make Container Shrink to Fit Wrapped Child Elements?
Shrink-to-fit means a container adjusts its width to fit around its child elements as they wrap onto new lines. The container's size was reduced to the minimum required to contain the wrapped elements without leaving extra space, ensuring a responsive and flexible layout. ApproachContainer Setup: Th
2 min read
How to Change Font Style in CSS?
Font style is an important element that enhances the readability of the text. CSS provides several properties to change the text appearance and font style. The font style property allows you to define how the text should appear normal, italic, or oblique. Table of Content Different Methods to Change
3 min read
How to change font size depending on width of container?
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.
3 min read
How to Change Font-size and Color in HTML?
To change the font-size and color in HTML, a style tag with color and font properties is used. 1. Using Inline Style AttributeIn this approach, a style attribute is used in the tag for which we want to change the font size and color. Below are the properties that we will use inside the style attribu
2 min read
How to Change Font Size in HTML ?
To change the font size of any text we can use the CSS font-size Property, or some HTML keywords have some fixed font size but we change them by using this CSS property. We can use style attributes in the HTML. As we know, HTML has no <font> tag, so we are using CSS style to add font size. The
2 min read
Font Scaling Based on Width of Container Using CSS
Adjusting font size dynamically according to the width of the container can enhance the readability and aesthetic of your web content. This technique is particularly useful for responsive designs, where text needs to adapt to different screen sizes or container dimensions. By using viewport units (v
2 min read