How to set min-font-size in CSS

Question

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?

Solution 1

No. While you can set a base font size on body using the font-size property, anything after that that specifies a smaller size will override the base rule for that element. In order to do what you are looking to do you will need to use Javascript.

You could iterate through the elements on the page and change the smaller fonts using something like this:

$("*").each( function () {
    var $this = $(this);
    if (parseInt($this.css("fontSize")) < 12) {
        $this.css({ "font-size": "12px" });   
    }
});

Here is a Fiddle where you can see it done: http://jsfiddle.net/mifi79/LfdL8/2/

Solution 2

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.

Solution 3

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)

Solution 4

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:

1. Minimum value.
2. List item
3. Preferred value Maximum allowed value.

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(){
    console.log($('#element').css('font-size'));
});
console.log($('#element').css('font-size'));

h1{
    font-size: 10vw; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.*/
    font-size: max(100px, min(10vw, 150px)); /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(100px, 10vw, 150px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
  <h1 id="element">THIS IS TEXT</h1>
</center>

Solution 5

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.

View more solutions

Comments

[nrofis]

Is there a simple way to find with jQuery elements with size less then 12px?

[mifi79]

@nrofis - sure, see the edit to my answer above. Cheers!

[Avand Amiri]

Iterating over ALL the elements on a page and changing a CSS property seems like a really bad idea from a performance stand point. I'm not an expert on what triggers reflows but you could inadvertently be reflowing the page a lot with this approach. I do not recommend this approach.

[dudewad]

I'm with @AvandAmiri - this is a bad approach in the sense that this kind of thinking leads to many other solutions like this on a page, which then leads to non-performant sites and even memory leaks that will crash your app. The true answer to this is (until font-size max becomes a legitimately usable thing) is to tighten up architecture - design and implement a good system that just does things properly. There should be no font sizes on a page that are "accidental".

[Anders Lindén]

But font sizes that are specified with vw should be accompanied with a min font size or else they become so small in xs.

[nHaskins]

@AndersLindén In that case, set a minimum font size in a media query, for instance, if you don't want your font size to go below 10px: p{ font-size: 1vw } @media (max-width: 1000px){ p{ font-size: 10px } }

[Chaim]

vmax and vmin are actually used to specifiy values relative to the viewpoint/page size. The min and max refer to the minimum/maxium viewport not the min or max of the font size - which is what the op was asking. (e.g. if height is larger than width of the viewport than vmax is equal to 100vmax = height of viewport and 100vmin = width of viewport)

[Admin]

fantastic hack!

[Luke Taylor]

I love you. This is awesome.

[Adam Wallner]

@StefanSteiger, you can use media queries for this: (a)media (max-width: 610px)...

[supernifty]

Brilliant! Exactly what I needed. Thank you!

[iamnotsam]

Great method: I made a codepen for this but for height. Change 'vh' to 'vw' to see how this works with width. codepen.io/iamnotsam/pen/JWXVxM

[NominalAeon]

I tend to use vh for font-sizes and this trick just revolutionized my life. Amazing.

[Tom Wyllie]

Although this is a nice hack, I'd say this isn't truly a solution as it affects the font-size when the size is above minimum, so you have to put up with that extra 12px (in this case) at all times.

[sidonaldson]

if you use stylus and want a helper to set a size font-size "calc(%s + (%s - %s))" % (minSize size baseFontSize)

[Michael]

wait, so if you have an element with (say) width:10vw; min-width:1in then you can't prevent the font size from continuing to shrink even though the element isn't getting any smaller???!

[Michael]

ugh. this ties the element to the resolution of the window, does it not? which means that in the general you would need a separate media query for each element on the page.

[Michael]

seriously, why do standards committees always remove the stuff that would actually make my job doable!?

[Thomas]

This won't allow dynamic resize of the window, you'll have to refresh the page to see changes.

[j.j.]

@Michael, the CSS WG removes stuff mostly because lack of implementer's interest or priority. It needs two independent implementations to get a CSS feature in a final W3C Recommendation. There is no point in writing a paper and nobody wants to push it into real world software. So you should ask browser vendors ...

[Corey Alix]

Great find! Can use with css variables to set min/max. Example: :root { --responsive-font-size-primary: min(2em, max(0.5em, 5vmin)); } making usage simple: font-size: var(--responsive-font-size-primary);

[Stefan Steiger]

@Corey Alix: Cool, just noticed support for that has arrived as per December 11th, 2019. Thread with care, all non-Chromium based browsers don't support it just yet. But support for it in Chrome is very cool news.

[Stefan Steiger]

@Michael: Good news - it's now implemented ! (per mid-December 2019)

[Alexey]

I believe this is not what the OP asked about. I believe the question was about adding a single declaration to override all other declarations when the font sizes are smaller than a given one.

[Stefan Steiger]

What's the result of $this.css("fontSize"), if somebody has a font-size of 10% ?

[amirdaraee]

this is amazing

[sidgeon smythe]

min and max are supported in most browsers now.

[Nivethan]

as of 2022 this should be the answer to set min, max values to font-size like we do for height and width

[user3035649]

Makes everything bigger with no regard to the maximum threshold. The original poster asked to increase font sizes for only those that are 12px or less.

[David Martins]

This should be the approved answer.