-1

I see someone able to use em or % instead of px to auto size the font. I tried both of them, but it doesn't work for my scenario.

m4n0
  • 29,823
  • 27
  • 76
  • 89
Khcoo Allyn
  • 19
  • 2
  • Possible duplicate - http://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container?rq=1 – Paulie_D Jul 04 '15 at 06:38

2 Answers2

1

You can use vw which is the ratio of the viewport width.

.text {
  font-size: 5vw; /* 5/100th of the view port width */
}
<div class="text">I am variable</div>

Or you can use this plugin if you need a wider browser support, uses JS though: FitText

m4n0
  • 29,823
  • 27
  • 76
  • 89
  • This lack serious browser support though. Shouldn't be used. – Chrillewoodz Jul 04 '15 at 06:28
  • Yup. But I see this will be the solution for the modern browsers. Future typography will be based on this. – m4n0 Jul 04 '15 at 06:34
  • Viewport units are IE9 and up...I'd call that pretty good support myself - [**CanIUse.com**](http://caniuse.com/#feat=viewport-units) – Paulie_D Jul 04 '15 at 06:36
  • it's not bad support, there's a gap with the stripped down mobile browsers too, which represent quite a high %, but, it's not difficult to use css to provide a fallback as rules are applied one by one in the order they are found in source, with the later one over-riding the earlier, see http://stackoverflow.com/a/31217741/1249829 – Toni Leigh Jul 04 '15 at 08:39
1

As @Manoj Kumar said you can use vw but it's only supported for IE9 and up, if you want to cover more browsers you should also use a fall back by putting font-size in em before the vw.

.text {
  font-size: 3em; /* Whatever is equivalent to 5vw */
  font-size: 5vw; /* 5/100th of the view port width */
}
Chrillewoodz
  • 27,055
  • 21
  • 92
  • 175