font-size as big as possible to fit windows width

Question

Is there any trick to set the font-size as big as possible so that the text will always fit the windows width?

I tried to use vw but I'm sure CCS is much more rich than that.

.font{
font-family:Arial;
font-size:7vw;
display:table;
height:100vh;
width:100vw;
}

.inner{
display:table-cell;
vertical-align:middle;
text-align:center;

}

<div class=font>
<div class=inner>abcdefghijklmnopqrstuvwxyz</div>
</div>

Thanks in advance.

_“but I'm sure CCS is much more rich than that”_ - it isn’t, not in this particular regard. For a text of a static length you might be able to find an approximately working value using a unit such as `vw`, but if you need this for dynamic text of unknown length, then the only thing you can do is use a script that starts with a small font size and increases it in steps, checking how long the text still “fits.” — misorude, Oct 16 '18 at 08:11
Question is old, but take a look in here -> https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container — Sebastian Thadewald, Oct 16 '18 at 08:12

Puka · Answer 1 · 2018-10-16T09:38:14.030

Well, your code is already pretty smart. I really don't see any improvements we could build on.

You should definitely check this question, pointing to a Jquery plugin that seems to be really handy: Auto-size dynamic text to fill fixed size container.

So, let's take it as the first solution:

body {
  margin: 0;
}

.font {
  font-family: Arial;
  font-size: 49vw;
  display: table;
  height: 100vh;
  width: 100vw;
  margin: 0;
}

.inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

<div class=font>
  <div class=inner>glee</div>
</div>

What I could suggest (although it's pretty bad for semantics, screen readers...) is maybe experimenting with a background image and background-size: contain;. Be sure to use SVG text!

body {
  margin: 0;
}

.font {
  font-family: Arial;
  font-size: 6vw;
  display: table;
  height: 100vh;
  width: 100vw;
  margin: 0;
}

.inner {
  display: table-cell;
  background: center no-repeat;
  background-size: contain;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmc6c3ZnCiAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIKICAgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIKICAgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgdmlld0JveD0iMCAwIDExNy4xNDU0OCA2My44MzEwMDEiCiAgIHZlcnNpb249IjEuMSIKICAgaWQ9InN2ZzExIgogICBzb2RpcG9kaTpkb2NuYW1lPSJHbGVlX3RpdGxlX2NhcmQuc3ZnIgogICB3aWR0aD0iMTE3LjE0NTQ4IgogICBoZWlnaHQ9IjYzLjgzMTAwMSIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMC45Mi4zICgyNDA1NTQ2LCAyMDE4LTAzLTExKSI+CiAgPHN2ZzptZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTE3Ij4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9zdmc6bWV0YWRhdGE+CiAgPHN2ZzpkZWZzCiAgICAgaWQ9ImRlZnMxNSIgLz4KICA8c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICAgIGJvcmRlcm9wYWNpdHk9IjEiCiAgICAgb2JqZWN0dG9sZXJhbmNlPSIxMCIKICAgICBncmlkdG9sZXJhbmNlPSIxMCIKICAgICBndWlkZXRvbGVyYW5jZT0iMTAiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAiCiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjE5MTgiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iMTAzMCIKICAgICBpZD0ibmFtZWR2aWV3MTMiCiAgICAgc2hvd2dyaWQ9ImZhbHNlIgogICAgIGZpdC1tYXJnaW4tdG9wPSIwIgogICAgIGZpdC1tYXJnaW4tbGVmdD0iMCIKICAgICBmaXQtbWFyZ2luLXJpZ2h0PSIwIgogICAgIGZpdC1tYXJnaW4tYm90dG9tPSIwIgogICAgIGlua3NjYXBlOnpvb209IjIuOTE0ODUxMyIKICAgICBpbmtzY2FwZTpjeD0iMTQuNDYzOTY5IgogICAgIGlua3NjYXBlOmN5PSI4LjczMjc4NTgiCiAgICAgaW5rc2NhcGU6d2luZG93LXg9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjI1IgogICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ic3ZnMTEiIC8+CiAgPHN2ZzpwYXRoCiAgICAgZD0iTSAxNS4yMTg4LDE2LjcwNiBDIDYuODE1NiwxNi43MDYgMCwyNC4yOTg4IDAsMzMuNjQzNSBjIDAsOS4zNDQ3IDYuODE1NSwxNi45MDYzIDE1LjIxODgsMTYuOTA2MyA0LjkzNzUsMCA5LjMxNCwtMi42MzQ3IDEyLjA5MzgsLTYuNjg3NSB2IDYuNTYyNSBjIDAsNC4zNDkxIC0zLjk3NzgsNy44MTI1IC05LDcuODEyNSAtNC4xNTk5LDAgLTcuNjIzNywtMi4zNjk3IC04LjY4NzUsLTUuNjU2MyBIIDMuMDYyNiBjIDEuMjAwMSw2LjM0OTcgNy41OTExLDExLjI1IDE1LjI1LDExLjI1IDguNTA2NywwIDE1LjQ2ODgsLTYuMDM5NiAxNS40Njg4LC0xMy40MDYzIFYgMTcuNzA1OSBoIC02LjQ2ODggdiA1LjY1NjMgQyAyNC41MzIxLDE5LjMyMTUgMjAuMTQ3NywxNi43MDU5IDE1LjIxODgsMTYuNzA1OSBaIG0gMi41OTM4LDYuNTYyNSBjIDUuNjQ4NiwwIDEwLjIxODgsNC41NzAxIDEwLjIxODgsMTAuMjE4OCAwLDUuNjQ4NyAtNC41NzAxLDEwLjI1IC0xMC4yMTg4LDEwLjI1IC01LjY0ODcsMCAtMTAuMjE4OCwtNC42MDE0IC0xMC4yMTg4LC0xMC4yNSAwLC01LjY0ODYgNC41NzAxLC0xMC4yMTg4IDEwLjIxODgsLTEwLjIxODggeiIKICAgICBpZD0icGF0aDQiCiAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MSIKICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPgogIDxzdmc6cGF0aAogICAgIGQ9Im0gMzkuOTI4NiwwIHYgNDkuNDY4OCBoIDYgViAwIFoiCiAgICAgaWQ9InBhdGg2IgogICAgIHN0eWxlPSJmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjEiCiAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgLz4KICA8c3ZnOnBhdGgKICAgICBpZD0iZSIKICAgICBkPSJtIDY1LjI4MTMsMTYuODkzNSBjIC01LjM2MDY4LDAuMzcxNzM3IC0xMC40Njk4LDMuMzM0NyAtMTMuMzQzOCw4LjMxMjUgLTQuNTk4Myw3Ljk2NDUgLTEuODM5NSwxOC4yNDU1IDYuMTI1LDIyLjg0MzggNy45NjQ1LDQuNTk4MyAxOC4yMTQyLDEuODM5NSAyMi44MTI1LC02LjEyNSBsIC01LjUzMTMsLTMuMTg3NSBjIC0yLjg2MzUsNC45NTk3IC05LjEzNDAyLDYuNTgyMjMgLTE0LjA5MzgsMy43MTg4IC0yLjc5OTcyLC0xLjYxNjM3IC00LjUyNjQsLTQuMjkzNiAtNSwtNy4yMTg4IGggMjYuODEyNiBjIDAuNjQ3NiwtNi40NDYgLTIuNTMwODksLTEyLjgwNTAyNiAtOC4yODEzLC0xNi4xMjUgLTIuNjEzMzksLTEuNTA4ODI2IC01LjQ4NjgyLC0yLjIzOTE0OCAtOC4zMTI1LC0yLjI1IC0wLjQxNTg0LC0wLjAwMTYgLTAuODM3NTcsMC4wMDY5IC0xLjE4NzQsMC4wMzEyIHogbSAxLjE1NjMsNi4zNDM3IGMgMS43MzcxMSwtMC4wMDI2IDMuNDk3NiwwLjQ2NjcgNS4xMjUsMS40MDYzIDEuOTAwOSwxLjA5NzUgMy4zNDY4LDIuNzE2MyA0LjIxODgsNC41OTM4IEggNTcuMDkzOSBjIDAuMTI4OCwtMC4yNzUzIDAuMjUxMSwtMC41NDM4IDAuNDA2MywtMC44MTI1IDEuNzg5NywtMy4wOTk4IDQuOTAyODEsLTQuOTIyMTcxIDguMTg3NSwtNS4xNTYzIDAuMjYwNDMsLTAuMDE4NTYgMC41MjU3NSwtMC4wMzA5NiAwLjc0OTksLTAuMDMxMyB6IgogICAgIHN0eWxlPSJmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjEiCiAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgLz4KICA8c3ZnOnVzZQogICAgIHg9IjM0IgogICAgIHhsaW5rOmhyZWY9IiNlIgogICAgIGlkPSJ1c2U5IgogICAgIHN0eWxlPSJmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjEiCiAgICAgeT0iMCIKICAgICB3aWR0aD0iMTAwJSIKICAgICBoZWlnaHQ9IjEwMCUiIC8+CiAgPGRpdgogICAgIGlkPSJkaXZTY3JpcHRzVXNlZCIKICAgICBzdHlsZT0iZGlzcGxheTogbm9uZSIgLz4KICA8c2NyaXB0CiAgICAgaWQ9Imdsb2JhbFZhcnNEZXRlY3Rpb24iCiAgICAgc3JjPSJtb3otZXh0ZW5zaW9uOi8vYTAyOWVkZjktOWZhMS00YjhjLTlhZjYtZmIwNWUxMTM5YTFiL2pzL3dyc19lbnYuanMiIC8+Cjwvc3ZnOnN2Zz4K)
}

<div class=font>
  <div class=inner></div>
</div>

And, just in case, you may want to add word-break: break-all, to ensure that even if the font is not loaded correctly for whatever reason, the text is still readable.

font-size as big as possible to fit windows width

1 Answers1