Making dynamic text in JavaScript

Question

I need to make dynamic text that will fit to the size of window and i have problem, the point is that for example xxx xxx xxx xxx xxx is bigger than iii iii iii iii iii and i dont know how to do that, here is my code

var p = document.getElementById('ptext'); 
var h1 = document.getElementById('h1text'); 
     
h1.setFont = function (font) { 
    var size = this.offsetWidth, 
    font_size = size * font; 
    this.style.fontSize = font_size + '%'; 
    return this 
}; 
  
p.setFont = function (font) { 
  var size = this.offsetWidth, 
  font_size = size * font; 
  this.style.fontSize = font_size + '%'; 
  return this 
}; 

let h1length = h1.innerText.length;
let plength = p.innerText.length;

let h1Size = 10 / h1length 
let pSize = 10 / plength  

h1.setFont(h1Size); 
p.setFont(pSize)

window.onresize = function () { 
    h1.setFont(h1Size); 
    p.setFont(pSize)
}