JSFiddle - React, Tailwind, and code Playground

HTML

<button id="bttn">Уменьшить размер текста на 50%</button>
  <h1>Привет</h1>
  <h1>этот</h1>
  <h1>текст</h1>
  <h1>будет</h1>
  <h1>уменьшен</h1>

CSS

button{
    width: 520px;
    height: 60px;
    font-size: 2rem;
    font-family: fantasy;
    border-radius: 15px;
    margin: 5px;
  }
  h1{
    font-family: fantasy;
    background-color: rgb(238, 244, 253);
    width: 160px;
    text-align: center;
    margin: 5px;
    padding: 5px;
  }

JavaScript

var but = document.getElementById('bttn');
        but.addEventListener('click', function(){
          var arr = document.body.children;
          for (let i = 0; i < arr.length; i++) {
            arr[i].style.fontSize = parseFloat(window.getComputedStyle(arr[i]).fontSize.replace(/[^\d]/g, '')) / 2 + 'px';
          }
        });