How to scale font-size based upon div size?

Question

How to grow/shrink font-size based upon character count and panel-default size? For example, a lot of characters means font-size would be smaller or a smaller screen would also mean a smaller font-size. The font-size should fit the div.

css

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  margin: 0
}

.testing-here {
  font-size: 0;
}

.panel-default {
  box-sizing: border-box;
  border-style: none;
  position: relative;
  width: 50%;
  padding-bottom: 40%;
  overflow: hidden;
  background-color: #446CB3;
  border-radius: 0;
  display: inline-block;
  margin-bottom: 0px;
  border: 2.5px white solid;
}

.panel-body {
  color: white;
  text-align: center;
  position:absolute;
  font-size: 16px;
}

html

<div class="testing-here">
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example
    </div>
  </div>
</div>

Is there a way to do this without javascript?

No @ParthBhoiwala I think there is a way to do it without javascript. — AnthonyGalli.com, May 17 '16 at 20:16

score 1 · Answer 1 · edited Jun 19 '16 at 18:14

If your panels are sized from window's width, you may use vw units ( with all troubles coming with : too big or too small to read)

You can add media query to keep font-size inside a min and max size.

*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  margin: 0
}
.testing-here {
  font-size: 0;
}
.panel-default {
  box-sizing: border-box;
  border-style: none;
  position: relative;
  width: 50%;
  padding-bottom: 40%;
  overflow: hidden;
  background-color: #446CB3;
  border-radius: 0;
  display: inline-block;
  margin-bottom: 0px;
  border: 2.5px white solid;
}
.panel-body {
  color: white;
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;
  font-size: 5vw;
  /* will be 5% of window's width so 10% of panel's width */
}
@media (min-width: 1000px) {
  .panel-body {
    font-size: 50px;
  }
}
@media (max-width: 320px) {
  .panel-body {
    font-size: 16px;
  }
}

<div class="testing-here">
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example show me full page & resize window
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example font-size kept in between 16 and 50px max
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example
    </div>
  </div>
</div>

You may also use media query to keep font readable or only media queries at different break points

`vw` doesn't work well because of what you mentioned where it becomes too small or too big. — AnthonyGalli.com, May 17 '16 at 20:21
@AnthonyGalli.com , you need mediaqueries to overwrite font-size below & upper certain width see update snippet — G-Cyrillus, May 17 '16 at 20:23
Thanks. Worst case I'll go with that, but I was looking to have the font-size change in accord with the div. Problem with media queries is I want the text to stay contained within the div so if their is a lot of text then the text would be extra small in that div whereas if their is one word then that word would be large to fill the div size. Sorry if I didn't explain this well enough in the question. — AnthonyGalli.com, May 17 '16 at 20:38
@AnthonyGalli.com what you look for is too complex to be cared by CSS. you need to know the text and words lenght to find out where it will break a line, specifity of font-family used (monospace, else ?) , letter-spacing, word spacing, word-break or not, , does the user zoom the text and uses another font-family, etc ... You may have an average idea. Long time ago, i used a script replacing letters by image that could be resized after counting them (before time you could import font-family from a file) :) — G-Cyrillus, May 17 '16 at 21:21

How to scale font-size based upon div size?

1 Answers1