Responsive font according to text size

I think you can recreate the element that makes up the name of the song, and get its width in pixels. If your width is greater than the width of your container, you can resolve to create a <marquee> .

To apply the re-creation of the element simply remove one of the existing .som , and then pull the new element to the same container.

Note: The width of the span is being broken by the container itself, preventing the comparison of its width with that of its container. Some style would solve that.

Remembering that you do not need to re-create the marquee / span element.

Example how to pre-store marquee / span:

var span = document.createElement('span');

span.className = 'som';
/* Desaplica a largura fixa de 300px: */
span.width = 'auto';

var marquee = document.createElement('marquee');
marquee.className = 'som';

Example of updating the song name:

/* Remove o marquee por precaução: */
marquee.remove();

var nomeDaMúsica = 'Nome da música';

var container = document.querySelector(
    '.player .caixa-status'
);

span.textContent = nomeDaMúsica;

// Para obter a largura renderizada do span vai ser necessário
// adicioná-lo ao container (obs.: se ele já estiver adicionado
// ele não duplica, de acordo com meu navegador):
container.appendChild(span);

var largura = som.offsetWidth;

if (largura > container.offWidth) {
    /* Transforma o elemento span em marquee: */

    span.remove();

    marquee.textContent = nomeDaMúsica;
    container.appendChild(marquee);
}

I tried to review your case using javascript . You can adapt it according to your project using other languages if possible.

• First choose a limit for the size of music titles
• Retrieve the title of the song
• If the size exceeds the limit, apply a specific font
• If not, keep the default font.

To test the script, just change the Music Title in the HTML code (the text in the span mark)

function Adapfont(limit){
  var titulo_da_musica = document.getElementById("t").innerText ;
  
  if(titulo_da_musica.length > limit){
     document.getElementById("t").style.fontSize = "large";
  }else{
     document.getElementById("t").style.fontSize = "xx-large";
  }
}
var limit = 20 ;
Adapfont(limit);

<div>
    <span class="titulo-musica" id="t">Titulo da Musica</span>
</div>

SUGGESTION :

Another solution for your case would be to limit the number of characters in the title of the song.

Issue 1

Well, I misread the question and ended up responding to responsiveness by viewport . At the risk of having negative feedback, I'll leave my answer, even wrong , because it can be helpful.

You can achieve responsiveness in typography using only CSS.

First, you can use the in or % :

body {
    /**
    Faz a fonte ficar 2 vezes maior que o normal
    **/
    font-size: 2em;
    /**
    Fonte 95% do tamanho do normal
    font-size: 95%;
    **/
}

Or, combine these font types with media queries , or use the media queries with the font sizes for each screen size:

/**
    Tela com até 600px
**/
@media (max-width: 600px){
    body{
        font-size: 10px;
    }
}

/**
    Tela com até 959px, maior que 600px
**/
@media (max-width: 959px){
    body{
        font-size: 14px;
    }
}
/**
    Tela com 960px +
**/
@media (min-width: 960px){
    body{
        font-size: 14px;
    }
}

The best CSS solution

Use the unit vw

body{
    font-size: 8vw;  
}