Is there any way to have text size change with window size?

Question

I need font-size to be relative to the windows size. Is there any way that I can do that?

Answer 1

Responsive Font Size The text size can be set with a vw unit, which means the "viewport width". Use vw instead of px or other unit

<h1 style="font-size:8vw;">Hello World</h1>
<p style="font-size:2vw;">Resize the browser window to see how the font size scales.</p>

Answer 2

There are a few types of values you can use. Instead of using px you could use vw or vh (view width/height). Which scales depending on screen size.

You can read more here CSS Units and here https://kyleschaeffer.com/css-font-size-em-vs-px-vs-pt-vs-percent

An alternate method would be to set up media queries with different font sizes at different breakpoints. https://css-tricks.com/books/volume-i/scale-typography-screen-size/

If you want to scale depending on the size of the container then there are libraries that do this. For example FitText

Answer 3

In your css file do:

:root { font-size: <your desired default size in absolute units> }

Then, whenever you set the font-size property somewhere else in your file you want to use the rem measurement (ex. if in :root font-size is 24px, 1rem means 24px).

And then just add media queries where you redifine :root {font-size: }