Font Scaling Based on Width of Container Using CSS Last Updated : 15 Sep, 2024 Comments Improve Suggest changes Like Article Like Report 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 (vw) and media queries, you can create a more flexible and visually appealing layout.Syntax: element { font-size: #vw; // #vw is the font size // CSS Property}ApproachWe’ll look at two main methods to achieve font scaling based on container width:Using Viewport Width (vw) Units: This method scales the font size relative to the viewport width. 1vw is equal to 1% of the viewport’s width, making the font size adjust as the viewport changes.Using Media Queries: This method allows for more controlled and granular font scaling based on specific screen width ranges, making it suitable for different devices.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: 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: Note: Experiment with resizing your browser window to observe how the font size adjusts according to the viewport or container width. This approach ensures your text remains readable and appropriately sized on various devices and screen sizes. Comment More infoAdvertise with us Next Article Font Scaling Based on Width of Container Using CSS V Vishal Chaudhary 2 Follow Improve Article Tags : Web Technologies CSS Similar Reads How to disable a link using only CSS? To disable a link using CSS, pointer-events can be used, which sets whether the element in the page has to respond or not while clicking on elements. The pointer-events property is used to specify whether the element should respond to pointer events or not. The following example illustrates this app 3 min read What does the â+â (plus sign) CSS selector mean? The "+" (plus sign) CSS selector, known as the adjacent sibling selector, targets the first element that immediately follows another specified element in the HTML structure. It applies styles only to the directly adjacent sibling after the selected element. Note: The IE8 and earlier versions </DO 1 min read How to Vertically Center Text with CSS? Here are three different ways to Vertically center text in CSS. Vertically center text means aligning text to appear in the middle of its container element.1. Using display PropertyWe can use display: flex to make the container as a flexbox and then applying the align-items: center to vertically cen 2 min read How to horizontally center a div using CSS ? To make an HTML div center horizontally using CSS is quite easy. We can horizontally center any element using the below-mentioned approaches. Before centering a div horizontally we need to create a fixed-size div. We have given a border to the div so the centering of that div can be visible. Set the 2 min read Change an HTML5 input placeholder color with CSS The placeholder selector in the CSS pseudo-element is used to design the placeholder text by changing the text color and it allows to modify the style of the text. In most of the browsers, the placeholder (inside the input tag) is of grey color. In order to change the color of this placeholder, non- 2 min read How to Disable Text Selection Highlighting using CSS? The user-select property in CSS is used to disable text selection highlighting in CSS. This feature is useful when we need to disable the copy option of content.Syntaxuser-select: none;-webkit-user-select: none; /* Chrome, Opera */-webkit-touch-callout: none; /* Safari */-moz-user-select: none; /* F 2 min read How to Align Content of a Div to the Bottom using CSS? Here are different ways to align the content of a div to bottom using CSS.1. Using PositioningThe positioning involves setting the parent container to position: relative and the content to position: absolute with bottom: 0, which places the content at the container's bottom edge.Syntaxposition: abso 2 min read Displaying XML Using CSS XML stands for Extensible Markup Language. It is a dynamic markup language. It is used to transform data from one form to another form. An XML file can be displayed using two ways. These are as follows :- Cascading Style Sheet Extensible Stylesheet Language Transformation Displaying XML file using C 4 min read How to Include One CSS File in Another? Here are the methods to include one CSS file in another:Method 1. Using @import RuleThe @import rule allows you to import one CSS file into another, enabling modularity and reusability of styles.html<html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> 3 min read How to Change the Cursor into a Hand Pointer on Hover over list using CSS CSS offers a powerful property called "cursor" that controls the appearance of the mouse pointer when hovering over specific HTML elements. By assigning different values to this property, you can customize the cursor's behaviour. In our case, we'll be using the value "pointer" to trigger the classic 2 min read Like