0

What would be the best way to increase the size of a font to make it take full width of a screen or rather view width? A good example is the one gumroad are using: https://gumroad.com/ However they seem to have used it as an image rather than normal text, is it possible to do it with just normal text?

Parit Sawjani
  • 729
  • 8
  • 24
  • Are you dealing with static or dynamic text? – Henry Woody Mar 05 '22 at 19:58
  • Just static text, I'm looking at it in way that I wouldn't have trouble making it responsive as compared to an image which would be much easier to do e.g. adding the tried and tested max-width: 100% and height auto properties, hopefully that makes sense? – Parit Sawjani Mar 05 '22 at 20:01
  • Does this answer your question? https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container – Rani Giterman Mar 05 '22 at 20:04
  • 1
    Yeah pretty much use the above linked question. But short answer would be set the `font-size` in `vw` units and just experiment with the exact value until it's the width you need (will depend on the font-family and content). With a monospace font you can calculate the `font-size` dynamically as `100vw` divided by the number of characters. – Henry Woody Mar 05 '22 at 20:05
  • Yeah that was useful, thanks. So my solution came to this: `font-size: calc((100vw - 4.5rem) / 7)`, added a `white-space: nowrap` since my text was a bit longer, and some padding on each ends of the text. Worked like a charm. Thanks! – Parit Sawjani Mar 05 '22 at 20:15

1 Answers1

1

in gumroad its not a text its an image but if you want to control your font size you can use font-size: clamp(min size , 2vw, max size) for example font-size: clamp(14px, 2vw, 20px) you can read more here https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()

Mahmoud Abu-Attiya
  • 134
  • 5