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

Question

I am trying to make a font in a div that matches the browser window. So far, it worked fine, but the parent div has max-width of 525px . Resizing the browser will not change the font size. It 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 like that.

I thought using percentages in font-size would work, but a bit of text would not scale according to the parent div. Here is what I have:

CSS for parent div:

 .textField{ background-color:rgba(88, 88, 88, 0.33); width:40%; height:450px; min-width:200px; max-width:525px; z-index:2; } 

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; } 

I searched for quite a while on the Internet, but to no avail.

Answer 1

No, there is no CSS property for the minimum or maximum font size. Browsers often have an option for the minimum font size, but this is under the control of the user, not the author.

You can use @media queries to make some CSS settings depending on the type of screen or the width of the window. In such settings, you can, for example, set the font size to a certain small value if the window is very narrow.

Answer 2

This works well with CSS.

I looked at the same problems and fixed it as follows.

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

Below is the result: it adjusts on screens below 960 pixels, but keeps a fixed size higher. Just a reminder, don't forget to add the document in the header in the html:

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

CSS example:

 @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; } } 

Hope this helps!

Answer 3

You can do this using the formula and including the width of the viewport.

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

This sets the minimum font size to 7px and enhances it by .5vw depending on the width of the viewport.

Good luck

Answer 4

I'm a little late here, I'm not very grateful for that, I just collect the answers below because I was forced to do this for the project.

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

Whatever the solutions?

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

1) There is a "stupid" solution, consisting in creating a media query for each step that we use in our css, changing the font from a fixed amount to another fixed amount. It works, but it is very boring, and you do not have a smooth linear aspect.

2) As almost Pitt explained, for lows there is a gloss solution:

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

The minimum here will be 7px in addition to 0.5% of the width of the view. This is already really cool and works in most cases . It does not require any multimedia queries, you just need to spend some time looking for the right parameters.

As you noticed, this is a linear function, basic mathematicians will find out that two points already find your parameters. Then just correct the font size in px that you want for very large screens and for the mobile version, and then figure out if you want to make a scientific method. Thought this is absolutely unnecessary, and you can just try it.

3) Suppose you have a very boring client (for example, I) who absolutely wants the name to be one line and no more. If you used the AlmostPitt solution, you have problems because your font will grow, and if you have a container with a fixed width (for example, when loading in 1140px or in large windows). Here I suggest you also use a media query. In fact, you can simply find the maximum maximum pixel size that you can process in your container before this aspect becomes undesirable (pxMax). This will be your maximum. Then you just need to find the exact width of the screen you should stop (wMax). (I will let you invert the linear function yourself).

After that just do

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

Then it is perfectly linear and your font stops growing! Note that you do not need to put your previous css (calc ...) property in a wMax media request, because the media request is considered more important and it will overwrite the previous property.

I don’t think it’s useful to make a fragment for this, since it will be difficult for you to make it full screen, and this is not a science rocket.

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

Answer 5

The backpack is brilliant, but you don't have to resort to creating tools like Gulp or Grunt, etc.

I did a demo using CSS Custom Properties (CSS Variables) to easily control the minimum and maximum sizes.

Same:

 * { /* Calculation */ --diff: calc(var(--max-size) - var(--min-size)); --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */ } h1 { --max-size: 50; --min-size: 25; font-size: var(--responsive); } h2 { --max-size: 40; --min-size: 20; font-size: var(--responsive); } 

Answer 6

I got some smooth results with them. It flows smoothly between 3 width ranges, like a continuous piecewise function.

 @media screen and (min-width: 581px) and (max-width: 1760px){ #expandingHeader { line-height:5.2vw; font-size: 5.99vw; } #tagLine { letter-spacing: .15vw; font-size: 1.7vw; line-height:1.0vw; } } @media screen and (min-width: 1761px){ #expandingHeader { line-height:.9em; font-size: 7.03em; } #tagLine { letter-spacing: .15vw; font-size: 1.7vw; line-height:1.0vw; } } @media screen and (max-width: 580px){ #expandingHeader { line-height:.9em; font-size: 2.3em; } #tagLine { letter-spacing: .1em; font-size: .65em; line-height: .10em; } } 

Answer 7

You can use Sass to control the minimum and maximum font sizes. Here is a brilliant decision by Eduardo Bukas.

https://eduardoboucas.com/blog/2015/06/18/viewport-sized-typography-with-minimum-and-maximum-sizes.html

 @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; } .limit-min { @include responsive-font(3vw, 20px); } .limit-min-max { @include responsive-font(3vw, 20px, 50px); } 

Answer 8

It is really suggested in CSS4

Working draft at W3C

Quote:

These two properties allow the website or user to require that the font size of the elements be clamped within the range supplied with the two properties. If the font size of the computed value is outside the boundaries created by font-min-size and font-max-size, the font-size usage value is clamped to the values ​​specified in these two properties.

This will work as follows:

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

This would mean that the font size would be 5% of the width of the viewport, but not less than 10 pixels and never be more than 18 pixels.

Unfortunately, this feature has not yet been implemented (even on caniuse.com).