Responsive font according to text size

Question

How can I make a source responsive according to the size of the text? I have a website: radioturn.com.br

The name of the song is constantly updated, I would like to remove the mark and let it stand still, however, some songs are too big and do not fit in the father div.

How can I do that?

I don’t want to use text-overflow.

Answer 1

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 larger than the width of your container, you can resolve to create a <marquee>.

To apply the recreation of the element simply remove one of the .som and then pull the new element into the same container.

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

Remember that you do not need to re-create the Marquee/span element.

Example of 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 how to update 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);
}

Answer 2

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

• First choose a limit to the size of song titles
• Restore the song title size
• If the size exceeds the limit, apply a specific font
• If not, keep the standard source.

To test the script just change the Titulo da Musica In the code HTML ( the text in span )

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 song title.

Answer 3

Issue 1

Well, I misread the question and ended up answering about responsiveness according to the viewport. At the risk of a negative vote, I’ll leave you my answer, even wrong, because it might be useful.

---

You can achieve responsiveness in typography using CSS only.

First, you can turn to the unit in or to %:

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

Or even, combine these types of sources with media queries or still 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;  
}