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      I have searched for quite a while on the internet  but to no avail

User · Answer

You can use Sass to control min and max font sizes. Here is a brilliant solution by Eduardo Boucas.

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

User · Answer

Please note that setting font-sizing with px is not recommended due to accessibility concerns    defining font sizes in px is not accessible  because the user cannot change the font size in some browsers  For example  users with limited vision may wish to set the font size much larger than the size chosen by a web designer    see https   developer mozilla org en-US docs Web CSS font-size   A more accessible approach is to set font-size  100  in the html  which respects user default size settings  and THEN using either percentages or relative units when resizing  em or rem   for example with a  media query    see https   betterwebtype com articles 2019 06 16 5-keys-to-accessible-web-typography

User · Answer

CSS min   and max   have fairly good usage rates in 2020  The code below uses max   to get the largest of the  variablevalue  and  minimumvalue  and then passes that through to min   against the  maximumvalue  to get the smaller of the two  This creates an allowable font range  3 5rem is minimum  6 5rem is maximum  6vw is used only when in between   font-size  min max  variablevalue    minimumvalue     maximumvalue    font-size  min max 6vw  3 5rem   6 5rem    I m using this specifically with font-awesome as a video-play icon over an image within a bootstrap container element where max-width is set

User · Answer

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

User · Answer

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      lt meta name  viewport  content  width device-width  gt    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          I hope it ll help

User · Answer

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

User · Answer

Rucksack is brilliant  but you don t necessarily have to resort to build tools like Gulp or Grunt etc   I made a demo using CSS Custom Properties  CSS Variables  to easily control the min and max font sizes   Like so            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

User · Answer

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    Good luck

User · Answer

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

User · Answer

I got some smooth results with these  It flows smoothly between the 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

User · Answer

Yes  there seems some restrictions by some browser in SVG  The developertool restrict it to 8000px  The following dynamically generated Chart fails for example in Chrome   Try http   www xn--dddelei-n2a de 2018 test-von-svt    lt svg id  diagrammChart       width  100        height  100        viewBox  -400000 0 1000000 550000       font-size  27559       overflow  hidden       preserveAspectRatio  xMidYMid meet   gt       lt g class  hover-check  gt           lt text class  hover-toggle  x  -16800  y  36857 506818182  opacity  1  height  24390 997159091  width  953959  font-size  27559  gt               lt set attributeName  opacity  to  1  begin  ExampShow56TestBarRect1 touchstart                   end  ExampShow56TestBarRect1 touchend  gt               lt  set gt               lt set attributeName  opacity  to  1  begin  ExampShow56TestBarRect1 mouseover                   end  ExampShow56TestBarRect1 mouseout  gt               lt  set gt              Heinz  -16800          lt  text gt           lt rect class  hover-rect  x  -16800  y  12466 509659091  width  16800  height  24390 997159091  fill  darkred  gt               lt set attributeName  opacity  to  0 1  begin  ExampShow56TestBarRect1 mouseover                   end  ExampShow56TestBarRect1 mouseout  gt               lt  set gt               lt set attributeName  opacity  to  0 1  begin  ExampShow56TestBarRect1 touchstart                   end  ExampShow56TestBarRect1 touchend  gt               lt  set gt           lt  rect gt           lt rect id  ExampShow56TestBarRect1  x  -384261  y  0  width  953959  height  48781 994318182                opacity  0  gt           lt  rect gt        lt  g gt   lt  svg gt

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

Examples related to html

Examples related to css

Examples related to fonts

Examples related to font-size