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

User · Answer

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.

User · Answer

It will work perfectly with 50px  Which will act as a static and thus as min-width   font-size  calc 50px   5vw

User · Answer

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   lt  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   lt  12         this  addClass  min-font

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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     lt  12             this css    font-size    12px                     Here is a Fiddle where you can see it done  http   jsfiddle net mifi79 LfdL8 2

User · Answer

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  lt  15px it will stick to 15px

User · Answer

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    Minimum value  List item 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    x000D   x000D    window  resize function    x000D      console log     element   css  font-size     x000D      x000D  console log     element   css  font-size     x000D  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    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt center gt  x000D     lt h1 id  element  gt THIS IS TEXT lt  h1 gt  x000D   lt  center gt  x000D   x000D   x000D

User · Answer

AFAIK it s not possible with plain CSS  but you can do a pretty expensive jQuery operation like   jsBin demo         css  fontSize   function i  fs     if parseInt fs  10   lt  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

User · Answer

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

User · Answer

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  amp  msEdge  don t support it just yet     supported as of Chromium 79  amp  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

[html] How to set min-font-size in CSS

Examples related to html

Examples related to css

Examples related to font-size