KADUNEW

Como deixar suas fontes responsivas

—

por

Kadu Oliveira
em

Querendo deixar as fontes do seu site responsiva? FitText.js é um pequeno script feito em javascript, que permite o redimensionamento automático de textos (tipografia responsiva) quando a janela do navegador é redimensionada. Utilize esses script no seu layout fluído e tenha suas fontes responsivas.

Exemplo

Scripts

Script para usar com jQuery: jquery.fittext.js
Script somente com JS: fittext.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
  jQuery("#fittext").fitText();
</script>


<h1 id="fittext">Squeeze with FitText</h1>

Alterando proporção da fonte

Por padrão fitText() deixa seu texto fluído 1/10 da largura do seu elemento. Podemos alterar essa proporção da seguinte forma:

$("#responsive_headline").fitText(1.2); 
$("#responsive_headline").fitText(0.8);

Tamanho máximo e mínimo da fonte

Utilizando minFontSize e maxFontSize podemos definir um tamanho de fonte máximo e um tamanho de fonte mínimo.

jQuery("#responsive_headline")
  .fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' }
   )

Caso não utilize jQuery

Se você não utiliza jQuery no seu projeto e quer redimensionar suas fontes pode baixar um script que não precisa da biblioteca jQuery para funcionar. Para utilizar o script é basicamente a mesma coisa. Veja o exemplo:

<script type="text/javascript" src="fittext.js"></script>
<script>
  window.fitText( document.getElementById("responsive_headline") );
  window.fitText( document.getElementById("responsive_headline"), 1.2 );
  window.fitText( document.getElementById("responsive_headline"), 0.8 ); 
</script>

Com uso do FitText.js fica fácil ter fontes responsivas.

Referências:

Siga-me no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.

LinkedIn0
Google+0