Is there such a thing as min-font-size and max-font-size?

Question

I'm trying to make a font in a div responsive to the browser window. So far, it has worked perfectly, but the parent div has a max-width of 525px. Resizing the browser further will not make the font stop resizing. This has made me wonder if there is such a thing as min-font-size or max-font-size, and if such a thing does not exist, if there is a way to achieve something similar.

I thought that using percentages at font-size would work, but the bit of text won't scale accordingly to the parent div. Here's what I have:

The CSS for the parent div:

.textField{
    background-color:rgba(88, 88, 88, 0.33);

    width:40%;
    height:450px;

    min-width:200px;
    max-width:525px;

    z-index:2;
}

The CSS for the piece of text in question:

.subText{
    position:relative;
    top:-55px;
    left:15px;

    font-family:"news_gothic";
    font-size:1.3vw;
    font-size-adjust:auto;

    width:90%;

    color:white;

    z-index:1;
}

Solution 1

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.

Solution 2

You can do it by using a formula and including the viewport width.

font-size: calc(7px + .5vw);

This sets the minimum font size at 7px and amplifies it by .5vw depending on the viewport width.

Solution 3

It works well with CSS.

I went through the same issues and fixed it as follow.

Use a fixed "px" size for maximum size at a specific width and above. Then for different smaller widths, use a relative "vw" as a percentage of the screen.

The result below is that it adjusts itself at screens below 960px but keep a fixed size above. Just a reminder, not to forget to add in the html doc in header:

<meta name="viewport" content="width=device-width">

Example in CSS:

@media all and (min-width: 960px) {
h1{
    font-size: 50px;
  }
}

@media all and (max-width: 959px) and (min-width: 600px) {
h1{
    font-size: 5vw;
  }
}

@media all and (max-width: 599px) and (min-width: 50px) {
h1{
    font-size: 6vw;
  }
}

Solution 4

I am coming a bit late here, I don't get that much credit for it, I am just doing a mix of the answers below because I was forced to do that for a project.

So to answer the question : There is no such thing as this CSS property. I don't know why, but I think it's because they are afraid of a misused of this property, but I don't find any use case where it can be a serious problem.

Whatever, what are the solutions ?

Two tools will allow us to do that : media queries ans vw property

1) There is a "fool" solution consisting in making a media query for every step we eant in our css, changing font from a fixed amount to another fixed amount. It works, but it is very boring to do, and you don't have a smooth linear aspect.

2) As AlmostPitt explained, there is a brillant solution for the minima :

font-size: calc(7px + .5vw);

Minimum here would be 7px in addition to 0.5% of the view width. That is already really cool and working in most of cases. It does not require any media query, you just have to spend some time finding the right parameters.

As you noticed it is a linear function, basic maths learn you that two points already find you the parameters. Then just fix the font-size in px you want for very large screens and for mobile version, then calculate if you want to do a scientific method. Thought, it is absolutely not necessary and you can just go by trying.

3) Let's suppose you have a very boring client (like me) who absolutely wants a title to be one line and no more. If you used AlmostPitt solution, then you are in trouble because your font will keep growing, and if you have a fixed width container (like bootstrap stoping at 1140px or something in large windows). Here I suggest you to use also a media query. In fact you can just find the amout of px size maximum you can handle in your container before the aspect become unwanted (pxMax). This will be your maximum. Then you just have to find the exact screen width you must stop (wMax). (I let you inverse a linear function on your own).

After that just do

@media (min-width: [wMax]px) {
    h2{
        font-size: [pxMax]px;
    }
}

Then it is perfectly linear and your font-size stop growing ! Notice that you don't need to put your previous css property (calc...) in a media query under wMax because media query are considered as more imnportant and it will overwrite the previous property.

I don't think it is useful to make a snippet for this, as you would have trouble to make it to whole screen and it is not rocket science afterall.

Hope this could help others, and don't forget to thank AlmostPitt for his solution.

Solution 5

This is actually being proposed in CSS4

Working draft at the W3C

Quote:

These two properties allow a website or user to require an element’s font size to be clamped within the range supplied with these two properties. If the computed value font-size is outside the bounds created by font-min-size and font-max-size, the use value of font-size is clamped to the values specified in these two properties.

This would actually work as following:

.element {
    font-min-size: 10px;
    font-max-size: 18px;
    font-size: 5vw; // viewport-relative units are responsive.
}

This would literally mean, the font size will be 5% of the viewport's width, but never smaller than 10 pixels, and never larger than 18 pixels.

Unfortunately, this feature isn't implemented anywhere yet, (not even on caniuse.com).

View more solutions

Comments

[brandito]

First time I've seen vw used in fonts lol

[Toby van Kempen]

If I'm correct, the information in your link says that media queries will execute the specified CSS when a condition has been met, in this case of your link, the condition would be max-width:600px;. Am I correct or did I not correctly understand the information behind the link?

[BoltClock]

@Toby van Kempen: You are correct, however the max-width in this case refers to the screen viewport size, and not the size of an arbitrary element. If you need to change CSS depending on the style of some arbitrary element, then you won't be able to use media queries to do so. You'll need a script.

[Toby van Kempen]

@BoltClock So, @media refers to the browser window? How will it know that I want my font size to be, say, 20px when the parent div or browser window is of a specific size, in px?

[BoltClock]

@Toby van Kempen: It will always refer to the browser window - hence the "media" in "media queries".

[Toby van Kempen]

Ah, I see. So, if I'm correct, if I write @media (width:600px), it will run the script below @media once the browser width is equivalent to 600px?

[Toby van Kempen]

@BoltClock Thank you for your confirmation and explanation about these media queries.

[Francesco Frapporti]

+1. the need of the OP is perfectly met using media queries on window width/height. In his scenario he will achieve exactly the same result as setting a max-font-size. Anyway, I can still think at other use cases where the property would still be handy.

[user193661]

How is this different from the other answer?

[KaKa]

This should be the BEST answer!!

[ThN]

OMG!!! for the last 3 days I've been playing with numbers and different ways of doing this. Let me tell you nothing really worked like want it to. Then, I come across your answer, plugged in your answer into my css and "HORAYYYY" it works... Awesome answer Pitt. Thanks.

[Lazar Ljubenović]

A great trick for minimum font-size. I wonder if something similar can be done for maximum... Could have something to do with the idea that any negative would be treated as 0. Some nested calcs or something?

[roberrrt-s]

Invert it, so font-size: calc(12px - .5vw)

[THE JOATMON]

This does not work properly with LESS. I guess the calc() statement is processed when the LESS is compiled and resolves to a simple px value. Resizing does not recalculate. Ideas or thoughts?

[THE JOATMON]

Posted here: stackoverflow.com/questions/49500754/…

[Michael]

This does not seem like a valid general purpose solution. In one case I tested, I need a font size of 44px or 5vh, whichever is greater. But it is adding the two,often resulting in twice the required size !

[Michael]

Great. So I just have to stop working on this project for a few years until this gets implemented.... :'-(

[Michael]

Can you suggest a formula for finding the right values for calc() which return the same as max(*a*px,, *b*vw)? Because in my case, I can't tolerate a naive addition because the result is too large, but it sounds like you are suggesting I could somehow reduce a and b over the naive amounts - I am having trouble figuring the math out, and I need a general solution, not just a specific case.

[Alburkerk]

Only good explanation I came up with was with an image, so I can't help you via comments, I suggest you create a new question

[tibi]

why do you have 'all' in each row?

[GKFX]

@Michael You can achieve that using media queries. Work out by hand where the transition is (here it's at 44px = 5vh, so viewport height of 880px) then set up your media query for 44px font when viewport < 880px, .5vh otherwise.

[honk31]

@tibi all refers to the media type (or: WHERE to apply). options are all, screen, print & speech. all is default, so its kinda obsolete here. see mdn docs.

[Foo Bar]

@Jukka K. Korpela, will you update your answer to include the min(), max(), and clamp() functions? This question is highly ranked in searches, therefore providing complete, up-to-date information is important.

[todbott]

Yes! This works perfectly! What I wanted was a MAX font size, and this works perfectly, thank you.

[velkoon]

Fiiinally. Thank you for explaining what each of the numbers do better than the blog post I found on Google with the same formula. I was literally giving up when I was scrolling to the bottom of the page to find your answer. And thank goodness I don't have to add in all those ridiculous SASS variables and @media nonsense and whatever else