How to change the font size to fill the viewport?

Question

I would like a few lines of text to fill my view as much as possible. It should not be constantly adaptive (= normally updated when the viewport changes, it does not need to adapt along with the viewport when its size changes interactively)

I tried FitText.jsand BigText- they work fine to calculate the font size that will use the entire width of the width in the viewport. If the height is too small, the text does not fit (scroll bars appear)

I’m tired of using length in the viewport (in particular vmin), but when changing the font size to width, the value of vminmust be manually adjusted to find the desired width.

Is there a solution similar to FitTextor BigText, but which also takes into account the height of the viewport?

Answer 1

Maybe you should consider the css cc approach:

.textcontainer{
    font-size: 12px;
}

@media screen and (min-width: 768px){

    .textcontainer{
        font-size: 14px;
    }

}

@media screen and (min-width: 1200px){
    .textcontainer{
        font-size: 18px;
    }
}