how to set font size based on container size

Question

I have a container that has a   width and height  so it scales depending on external factors  I would like the font inside the container to be a constant size relative to the size of containers  Is there any good way to do this using CSS  The font-size  x  would only scale the font according to the original font size  which would be 100

User · Answer

I used Fittext on some of my projects and it looks like a good solution to a problem like this.

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

User · Answer

You may be able to do this with CSS3 using calculations  however it would most likely be safer to use JavaScript    Here is an example  http   jsfiddle net 8TrTU   Using JS you can change the height of the text  then simply bind this same calculation to a resize event  during resize so it scales while the user is making adjustments  or however you are allowing resizing of your elements

User · Answer

I had a similar issue but I had to consider other issues that  apaul34208 example did not tackle  In my case    I have a container that changed size depending on the viewport using media queries Text inside is dynamically generated I want to scale up as well as down   Not the most elegant of examples but it does the trick for me  Consider using throttling the window resize  https   lodash com     x000D   x000D  var TextFit   function    x000D   var container       container    x000D    container each function    x000D      var container width     this  width    x000D        width offset   parseInt   this  data  width-offset     x000D          font container     this  find   font-container    x000D    x000D       if   width offset  gt  0     x000D           container width -  width offset  x000D         x000D                   x000D      font container each function    x000D        var font container width     this  width    x000D            font size   parseFloat    this  css  font-size      x000D   x000D        var diff   Math max container width  font container width  - Math min container width  font container width   x000D    x000D        var diff percentage   Math round    diff   Math max container width  font container width      100    x000D         x000D        if  diff percentage     0   x000D            if   container width  gt  font container width     x000D              new font size   font size   Math round    font size   100     diff percentage    x000D              else if   container width  lt  font container width     x000D              new font size   font size - Math round    font size   100     diff percentage    x000D              x000D          x000D          this  css  font-size   new font size    px    x000D          x000D        x000D    x000D   x000D    function    x000D    TextFit    x000D      window  resize function    x000D     TextFit    x000D        x000D      x000D   container   x000D    width 341px  x000D    height 341px  x000D    background-color  000  x000D    padding 20px  x000D     x000D    font-container   x000D    font-size 131px  x000D    text-align center  x000D    color  fff  x000D     x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div class  container  data-width-offset  10  gt  x000D    lt span class  font-container  gt   5000 lt  span gt  x000D   lt  div gt  x000D   x000D   x000D    https   jsfiddle net Merch80 b8hoctfb 7

User · Answer

You can also try this pure CSS method   font-size  calc 100  - 0 3em

User · Answer

I ve given a more detailed answer of using vw with respect to specific container sizing in this answer  so I won t just repeat my answer here   In summary  however  it is essentially a matter of factoring  or controlling  what the container size is going to be with respect to viewport  and then working out the proper vw sizing based on that for the container  taking mind of what needs to happen if something is dynamically resized   So if you wanted a 5vw size at a container at 100  of the viewport width  then one at 75  of the viewport width you would probably want to be  5vw    75    3 75vw

User · Answer

It cannot be accomplished with css font-size  Assuming that  external factors  you are referring to could be picked up by media queries  you could use them - adjustments will likely have to be limited to a set of predefined sizes

User · Answer

If you want to scale it depending on the element width  you can use this web component  https   github com pomber full-width-text  Check the demo here  https   pomber github io full-width-text   The usage is like this      lt full-width-text gt Lorem Ipsum lt  full-width-text gt

User · Answer

Here is the function   document body setScaledFont   function f      var s   this offsetWidth  fs   s   f    this style fontSize   fs          return this      Then convert all your documents child element font sizes to em s or     Then add something like this to your code to set the base font size   document body setScaledFont 0 35   window onresize   function         document body setScaledFont 0 35       http   jsfiddle net 0tpvccjt

User · Answer

If you want to set the font-size as a percentage of the viewport width  use the vwunit    mydiv   font-size  5vw      The other alternative is to use SVG embedded in the HTML  It will just be a few lines  The font-size attribute to the text element will be interpreted as  user units   for instance those the viewport is defined in terms of  So if you define viewport as 0 0 100 100  then a font-size of 1 will be one one-hundredth of the size of the svg element   And no  there is no way to do this in CSS using calculations  The problem is that percentages used for font-size  including percentages inside a calculation  are interpreted in terms of the inherited font size  not the size of the container  CSS could use a unit called bw  box-width  for this purpose  so you could say div   font-size  5bw     but I ve never heard this proposed

User · Answer

Another js alternative   Working Example  fontsize   function          var fontSize       container   width     0 10     10  of container width         container h1   css  font-size   fontSize        window  resize fontsize     document  ready fontsize     Or as stated in torazaburo s answer you could use svg  I put together a simple example as a proof of concept   SVG Example   lt div id  container  gt       lt svg width  100   height  100   viewBox  0 0 13 15  gt           lt text x  0  y  13  gt X lt  text gt       lt  svg gt   lt  div gt

[javascript] how to set font size based on container size?

Examples related to javascript

Examples related to css

Examples related to font-size