I want to set a minimum font size to every element in my HTML page.
For example if there are elements with font-size less then 12px, then they will change to 12px.
But if there are elements with font-size grater then 12px, they will not change.
Is there any way to do it with CSS?
Looks like I'm a bit late but for others with this issue try this code
p { font-size: 3vmax; }
use whatever tag you prefer and size you prefer (replace the 3)
p { font-size: 3vmin; }
is used for a max size.
Judging by your above comment, you're OK doing this with jQuery — here goes:
// for every element in the body tag
$("*", "body").each(function() {
// parse out its computed font size, and see if it is less than 12
if ( parseInt($(this).css("font-size"), 10) < 12 )
// if so, then manually give it a CSS property of 12px
$(this).css("font-size", "12px")
});
A cleaner way to do this might be to have a "min-font" class in your CSS that sets font-size: 12px, and just add the class instead:
$("*", "body").each(function() {
if ( parseInt($(this).css("font-size"), 10) < 12 )
$(this).addClass("min-font")
});
Use a media query. Example: This is something im using the original size is 1.0vw but when it hits 1000 the letter gets too small so I scale it up
@media(max-width:600px){
body,input,textarea{
font-size:2.0vw !important;
}
}
This site I m working on is not responsive for >500px but you might need more. The pro,benefit for this solution is you keep font size scaling without having super mini letters and you can keep it js free.
CSS Solution:
.h2{
font-size: 2vw
}
@media (min-width: 700px) {
.h2{
/* Minimum font size */
font-size: 14px
}
}
@media (max-width: 1200px) {
.h2{
/* Maximum font size */
font-size: 24px
}
}
Just in case if some need scss mixin:
///
/// Viewport sized typography with minimum and maximum values
///
/// @author Eduardo Boucas (@eduardoboucas)
///
/// @param {Number} $responsive - Viewport-based size
/// @param {Number} $min - Minimum font size (px)
/// @param {Number} $max - Maximum font size (px)
/// (optional)
/// @param {Number} $fallback - Fallback for viewport-
/// based units (optional)
///
/// @example scss - 5vw font size (with 50px fallback),
/// minumum of 35px and maximum of 150px
/// @include responsive-font(5vw, 35px, 150px, 50px);
///
@mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
$responsive-unitless: $responsive / ($responsive - $responsive + 1);
$dimension: if(unit($responsive) == 'vh', 'height', 'width');
$min-breakpoint: $min / $responsive-unitless * 100;
@media (max-#{$dimension}: #{$min-breakpoint}) {
font-size: $min;
}
@if $max {
$max-breakpoint: $max / $responsive-unitless * 100;
@media (min-#{$dimension}: #{$max-breakpoint}) {
font-size: $max;
}
}
@if $fallback {
font-size: $fallback;
}
font-size: $responsive;
}
The font-min-size and font-max-size CSS properties were removed from the CSS Fonts Module Level 4 specification (and never implemented in browsers AFAIK). And the CSS Working Group replaced the CSS examples with font-size: clamp(...) which doesn't have the greatest browser support yet so we'll have to wait for browsers to support it. See example in https://developer.mozilla.org/en-US/docs/Web/CSS/clamp#Examples.
AFAIK it's not possible with plain CSS,
but you can do a pretty expensive jQuery operation like:
$('*').css('fontSize', function(i, fs){
if(parseInt(fs, 10) < 12 ) return this.style.fontSize = "12px";
});
Instead of using the Global Selector * I'd suggest you (if possible) to be more specific with your selectors.
It will work perfectly with 50px. Which will act as a static and thus as min-width.
font-size: calc(50px + 5vw);
CSS has a clamp() function that holds the value between the upper and lower bound. The clamp() function enables the selection of the middle value in the range of values between the defined minimum and maximum values.
It simply takes three dimensions:
try with the code below, and check the window resize, which will change the font size you see in the console. i set maximum value 150px and minimum value 100px.
$(window).resize(function(){_x000D_
console.log($('#element').css('font-size'));_x000D_
});_x000D_
console.log($('#element').css('font-size'));h1{_x000D_
font-size: 10vw; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.*/_x000D_
font-size: max(100px, min(10vw, 150px)); /* Browsers that do not support the "clamp ()" function will take this value. */_x000D_
font-size: clamp(100px, 10vw, 150px);_x000D_
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<center>_x000D_
<h1 id="element">THIS IS TEXT</h1>_x000D_
</center>In CSS3 there is a simple but brilliant hack for that:
font-size:calc(12px + 1.5vw);
This is because the static part of calc() defines the minimum. Even though the dynamic part might shrink to something near 0.
As of mid-December 2019, the CSS4 min/max-function is exactly what you want:
(tread with care, this is very new, older browsers (aka IE & msEdge) don't support it just yet)
(supported as of Chromium 79 & Firefox v75)
https://developer.mozilla.org/en-US/docs/Web/CSS/min
https://developer.mozilla.org/en-US/docs/Web/CSS/max
Example:
blockquote {
font-size: max(1em, 12px);
}
That way the font-size will be 1em (if 1em > 12px), but at least 12px.
Unfortunatly this awesome CSS3 feature isn't supported by any browsers yet, but I hope this will change soon!
Edit:
This used to be part of CSS3, but was then re-scheduled for CSS4.
As per December 11th 2019, support arrived in Chrome/Chromium 79 (including on Android, and in Android WebView), and as such also in Microsoft Chredge aka Anaheim including Opera 66 and Safari 11.1 (incl. iOS)
.class {
font-size: clamp(minimum-size, prefered-size, maximum-size)
}
using this you could set it up so prefered and max values are 5vw but the minimum is 15px or something so it won't go over 5vw but if 5vw < 15px it will stick to 15px
Source: Stackoverflow.com