How to implement max-font-size?
font-size: 3vw;
means that the font size will be 3% of the viewport width. So when the viewport width is 1200px - the font size will be 3% * 1200px = 36px.
So a max-font-size of 36px can be easily implemented using a single media query to override the default 3vw font-size value.
Codepen demo (Resize Browser)
div { font-size: 3vw;}@media screen and (min-width: 1200px) { div { font-size: 36px; }}
<div>hello</div>
Is there such a thing as min-font-size and max-font-size?
No, there is no CSS property for minimum or maximum font size. Browsers often have a setting for minimum font size, but that’s under the control of the user, not an author.
You can use @media
queries to make some CSS settings depending on things like screen or window width. In such settings, you can e.g. set the font size to a specific small value if the window is very narrow.
Implement a max-font-size style rule with CSS/javascript/jquery
function fontResize(){
var size = $(window).width()/100;
if ( size < 13 )
$('.features').css('font-size', size + 'px');
}
Responsive font size in CSS
The font-size
won't respond like this when resizing the browser window. Instead they respond to the browser zoom/type size settings, such as if you press Ctrl and + together on the keyboard while in the browser.
Media Queries
You would have to look at using media queries to reduce the font-size at certain intervals where it starts breaking your design and creating scrollbars.
For example, try adding this inside your CSS at the bottom, changing the 320 pixels width for wherever your design starts breaking:
@media only screen and (max-width: 320px) {
body {
font-size: 2em;
}
}
Viewport percentage lengths
You can also use viewport percentage lengths such as vw
, vh
, vmin
and vmax
. The official W3C document for this states:
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
Again, from the same W3C document each individual unit can be defined as below:
vw unit - Equal to 1% of the width of the initial containing block.
vh unit - Equal to 1% of the height of the initial containing block.
vmin unit - Equal to the smaller of vw or vh.
vmax unit - Equal to the larger of vw or vh.
And they are used in exactly the same way as any other CSS value:
.text {
font-size: 3vw;
}
.other-text {
font-size: 5vh;
}
Compatibility is relatively good as can be seen here. However, some versions of Internet Explorer and Edge don’t support vmax. Also, iOS 6 and 7 have an issue with the vh unit, which was fixed in iOS 8.
Setting min and max font size for a fixed-width text div that accepts variable text
Add an event listener to some changing property and then change the font size accordingly.
document.getElementById("testInput").addEventListener("keyup", function(){ var inputText = document.getElementById("testInput").value; document.getElementById("test").innerHTML = inputText;if(inputText.length > 10){ document.getElementById("test").style.fontSize = "8px"; }else if(inputText.length > 5){ document.getElementById("test").style.fontSize = "10px"; }else{ document.getElementById("test").style.fontSize = "12px"; } });
<input id="testInput"><div id="test"></div>
Related Topics
Select Menu Option Border None
CSS Background-Position Not Working in Mobile Safari (Iphone/Ipad)
Urls Within CSS Files Broken with Grails Resources Plugin 1.2.7
How to Delay the Start of a CSS Animation
Media Queries - Mobile VS Desktop Browser
Google Font Not Working on Safari
Using Modulus in CSS Calc Function
How to Have Different CSS When I Print or Print Preview
CSS Background Image Url Failing to Load
Bootstrap Navbar List Items/Links Not Showing
CSS Reset That Sets Everything to Default Values
How to Apply Child:Hover But Not Parent:Hover
Select Specific Element Before Other Element
How to Right Align Div Elements