Tamanho da fonte responsivo em CSS

Eu criei um site usando a grade do Zurb Foundation 3 . Cada página possui uma grande h1:

body {
  font-size: 100%
}

/* Headers */

h1 {
  font-size: 6.2em;
  font-weight: 500;
}

<div class="row">
  <div class="twelve columns text-center">
    <h1> LARGE HEADER TAGLINE </h1>
  </div>
  <!-- End Tagline -->
</div>
<!-- End Row -->

Quando redimensiono o navegador para o tamanho móvel, a fonte grande não se ajusta e faz com que o navegador inclua uma rolagem horizontal para acomodar o texto grande.

Percebi que, na página de exemplo da Tipografia do Zurb Foundation 3 , os cabeçalhos se adaptam ao navegador conforme ele é compactado e expandido.

Estou perdendo algo realmente óbvio? Como faço para conseguir isso?

O font-sizenão responderá assim ao redimensionar a janela do navegador. Em vez disso, responder às configurações de tamanho navegador zoom / Tipo, como se você pressionar Ctrle +em conjunto no teclado enquanto no browser.

Consultas de mídia

Você precisaria usar consultas de mídia para reduzir o tamanho da fonte em determinados intervalos em que ele começa a interromper seu design e a criar barras de rolagem.

Por exemplo, tente adicionar isso dentro do seu CSS na parte inferior, alterando a largura de 320 pixels para onde quer que seu design comece a quebrar:

@media only screen and (max-width: 320px) {

   body { 
      font-size: 2em; 
   }

}

Comprimentos de porcentagem da janela de visualização

Você também pode usar o tamanho da porcentagem da janela de visualização , como vw,vh , vmine vmax. O documento oficial do W3C para esses estados:

Os comprimentos de porcentagem da viewport são relativos ao tamanho do bloco inicial. Quando a altura ou largura do bloco inicial é alterada, elas são dimensionadas de acordo.

Novamente, a partir do mesmo documento W3C, cada unidade individual pode ser definida como abaixo:

unidade vw - igual a 1% da largura do bloco inicial.

vh unit - Igual a 1% da altura do bloco inicial.

unidade vmin - igual ao menor de vw ou vh.

unidade vmax - igual ao maior de vw ou vh.

E eles são usados ​​exatamente da mesma maneira que qualquer outro valor CSS:

.text {
  font-size: 3vw;
}

.other-text {
  font-size: 5vh;
}

A compatibilidade é relativamente boa, como pode ser visto aqui . No entanto, algumas versões do Internet Explorer e Edge não oferecem suporte ao vmax. Além disso, o iOS 6 e 7 têm um problema com a unidade vh, que foi corrigida no iOS 8.

Você pode usar o valor da viewport em vez de ems, pxs ou pts:

1vw = 1% da largura da janela de visualização

1vh = 1% da altura da janela de visualização

1vmin = 1vw ou 1vh, o que for menor

1vmax = 1vw ou 1vh, o que for maior

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

Truques em CSS: Tipografia dimensionada para viewport

Venho estudando maneiras de superar esse problema e acredito que encontrei uma solução:

Se você pode gravar seu aplicativo para o Internet Explorer 9 (e posterior) e todos os outros navegadores modernos que suportam CSS calc (), unidades rem e unidades vmin. Você pode usar isso para obter texto escalável sem consultas de mídia:

body {
  font-size: calc(0.75em + 1vmin);
}

Aqui está em ação: http://codepen.io/csuwldcat/pen/qOqVNO

Use mediaespecificadores CSS (que é o que eles [zurb] usam) para um estilo responsivo:

@media only screen and (max-width: 767px) {

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}

Se você não se importa em usar uma solução jQuery, pode experimentar o plugin TextFill

O jQuery TextFill redimensiona o texto para caber em um contêiner e torna o tamanho da fonte o maior possível.

https://github.com/jquery-textfill/jquery-textfill

Existem várias maneiras de conseguir isso.

Use uma consulta de mídia , mas requer tamanhos de fonte para vários pontos de interrupção:

body
{
    font-size: 22px;
}

h1
{
    font-size: 44px;
}

@media (min-width: 768)
{
    body
    {
        font-size: 17px;
    }
    h1
    {
        font-size: 24px;
    }
}

Use dimensões em % ou em . Basta alterar o tamanho da fonte base e tudo mudará. Diferente da anterior, você pode alterar a fonte do corpo e não o h1 todas as vezes ou permitir que o tamanho da fonte base seja o padrão do dispositivo e o restante em:

1. "Ems" (em) : O "em" é uma unidade escalável. Um em é igual ao tamanho da fonte atual, por exemplo, se o tamanho da fonte do documento for 12 pt, 1 em será igual a 12 pt. Ems são escaláveis ​​por natureza, então 2 em seria igual a 24 pt, 0,5 em seria igual a 6 pt, etc.
2. Porcentagem (%) : a unidade de porcentagem é muito parecida com a unidade "em", exceto por algumas diferenças fundamentais. Em primeiro lugar, o tamanho da fonte atual é igual a 100% (ou seja, 12 pt = 100%). Ao usar a unidade de porcentagem, seu texto permanece totalmente escalável para dispositivos móveis e para acessibilidade.

Veja kyleschaeffer.com / ....

O CSS 3 suporta novas dimensões que são relativas à porta de visualização. Mas isso não funciona no Android:

1. 3.2vw = 3.2% da largura da janela de visualização
2. 3.2vh = 3,2% da altura da janela de visualização
3. 3.2vmin = Menor de 3.2vw ou 3.2vh

4. 3.2vmax = Maior de 3.2vw ou 3.2vh

   body
   {
       font-size: 3.2vw;
   }

Veja CSS-Tricks ... e também veja Can I Use ...

Há outra abordagem para tamanhos de fonte responsivos - usando unidades rem.

html {
    /* Base font size */
    font-size: 16px;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.2rem;
}

Posteriormente nas consultas de mídia, você pode ajustar todos os tamanhos de fonte alterando o tamanho da fonte base:

@media screen and (max-width: 767px) {
    html {
      /* Reducing base font size will reduce all rem sizes */
      font-size: 13px;
    }

    /* You can reduce font sizes manually as well */
    h1 {
        font-size: 1.2rem;
    }
    h2 {
        font-size: 1.0rem;
    }
}

Para fazer isso funcionar no Internet Explorer 7 e no Internet Explorer 8, você precisará adicionar um fallback com unidades de px:

h1 {
    font-size: 18px;
    font-size: 1.125rem;
}

Se você estiver desenvolvendo com Less , poderá criar um mixin que fará as contas para você.

Suporte a unidades rem - http://caniuse.com/#feat=rem

A solução "vw" tem um problema ao acessar telas muito pequenas. Você pode definir o tamanho da base e subir de lá com calc ():

font-size: calc(16px + 0.4vw);

Isso é parcialmente implementado na fundação 5.

No arquivo _type.scss, eles têm dois conjuntos de variáveis ​​de cabeçalho:

// We use these to control header font sizes
// for medium screens and above

$h1-font-size: rem-calc(44) !default;
$h2-font-size: rem-calc(37) !default;
$h3-font-size: rem-calc(27) !default;
$h4-font-size: rem-calc(23) !default;
$h5-font-size: rem-calc(18) !default;
$h6-font-size: 1rem !default;


// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(10) !default;
$h2-font-reduction: rem-calc(10) !default;
$h3-font-reduction: rem-calc(5) !default;
$h4-font-reduction: rem-calc(5) !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;

Para médias, eles geram tamanhos com base no primeiro conjunto de variáveis:

@media #{$medium-up} {
    h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
    h1 { font-size: $h1-font-size; }
    h2 { font-size: $h2-font-size; }
    h3 { font-size: $h3-font-size; }
    h4 { font-size: $h4-font-size; }
    h5 { font-size: $h5-font-size; }
    h6 { font-size: $h6-font-size; }
}

E para telas pequenas padrão, por exemplo, elas usam um segundo conjunto de variáveis ​​para gerar CSS:

h1 { font-size: $h1-font-size - $h1-font-reduction; }
h2 { font-size: $h2-font-size - $h2-font-reduction; }
h3 { font-size: $h3-font-size - $h3-font-reduction; }
h4 { font-size: $h4-font-size - $h4-font-reduction; }
h5 { font-size: $h5-font-size - $h5-font-reduction; }
h6 { font-size: $h6-font-size - $h6-font-reduction; }

Você pode usar essas variáveis ​​e substituir em seu arquivo scss personalizado para definir tamanhos de fonte para os respectivos tamanhos de tela.

Um tamanho de fonte responsivo também pode ser feito com esse código JavaScript chamado FlowType :

• http://simplefocus.com/flowtype/
• https://github.com/simplefocus/FlowType.JS

FlowType - Tipografia web responsiva da melhor forma possível: tamanho da fonte com base na largura do elemento.

Ou esse código JavaScript chamado FitText :

• http://fittextjs.com/
• https://github.com/davatron5000/FitText.js

FitText - Torna os tamanhos das fontes flexíveis. Use este plug-in em seu design responsivo para redimensionar com base em proporção seus títulos.

Se você estiver usando uma ferramenta de construção, tente Rucksack.

Caso contrário, você pode usar variáveis ​​CSS (propriedades personalizadas) para controlar facilmente os tamanhos mínimo e máximo de fonte da seguinte forma ( demo ):

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}

h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}

Eu vi um ótimo artigo do CSS-Tricks . Funciona muito bem:

body {
    font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw -
    [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

Por exemplo:

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

Podemos aplicar a mesma equação à line-heightpropriedade para que ela também seja alterada no navegador.

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}

Acabei de ter uma idéia com a qual você só precisa definir o tamanho da fonte uma vez por elemento, mas ele ainda é influenciado por consultas de mídia.

Primeiro, defino a variável "--text-scale-unit" como "1vh" ou "1vw", dependendo da janela de exibição usando as consultas de mídia.

Então eu uso a variável usando calc () e meu número multiplicador para o tamanho da fonte:

/* Define a variable based on the orientation. */
/* The value can be customized to fit your needs. */
@media (orientation: landscape) {
  :root{
    --text-scale-unit: 1vh;
  }
}
@media (orientation: portrait) {
  :root {
    --text-scale-unit: 1vw;
  }
}


/* Use a variable with calc and multiplication. */
.large {
  font-size: calc(var(--text-scale-unit) * 20);
}
.middle {
  font-size: calc(var(--text-scale-unit) * 10);
}
.small {
  font-size: calc(var(--text-scale-unit) * 5);
}
.extra-small {
  font-size: calc(var(--text-scale-unit) * 2);
}

<span class="middle">
  Responsive
</span>
<span class="large">
  text
</span>
<span class="small">
  with one
</span>
<span class="extra-small">
  font-size tag.
</span>

No meu exemplo, usei apenas a orientação da janela de exibição, mas o princípio deve ser possível com qualquer consulta de mídia.

O "FitText" do jQuery é provavelmente a melhor solução de cabeçalho responsivo. Confira no GitHub: https://github.com/davatron5000/FitText.js

Como em muitas estruturas, uma vez que você "sai da grade" e substitui o CSS padrão da estrutura, as coisas começam a quebrar à esquerda e à direita. Estruturas são inerentemente rígidas. Se você usar o estilo H1 padrão do Zurb junto com suas classes de grade padrão, a página da web deverá ser exibida corretamente no celular (ou seja, responsivo).

No entanto, parece que você deseja cabeçalhos 6.2em muito grandes, o que significa que o texto terá que encolher para caber dentro de uma tela móvel no modo retrato. Sua melhor aposta é usar um plug-in jQuery de texto responsivo, como FlowType e FitText . Se você quiser algo leve, verifique o meu plugin jQuery Scalable Text:

http://thdoan.github.io/scalable-text/

Uso da amostra:

<script>
$(document).ready(function() {
  $('.row .twelve h1').scaleText();
}
</script>

No Sass original real (não scss), você pode usar os mixins abaixo para definir automaticamente os parágrafos e todos os títulos 'font-size .

Gosto porque é muito mais compacto. E mais rápido de digitar. Fora isso, ele fornece a mesma funcionalidade. De qualquer forma, se você ainda deseja manter a nova sintaxe - scss, sinta-se à vontade para converter meu conteúdo Sass para scss aqui: [CONVERTE SASS TO SCSS AQUI]

Abaixo, dou-lhe quatro mixins Sass. Você precisará ajustar as configurações para suas necessidades.

=font-h1p-style-generator-manual() // You don’t need to use this one. Those are only styles to make it pretty.
=media-query-base-font-size-change-generator-manual() // This mixin sets the base body size that will be used by the h1-h6 tags to recalculate their size in a media query.
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) // Here you will set the size of h1 and size jumps between h tags
=config-and-run-font-generator() // This one only calls the other ones

Depois de terminar de jogar com as configurações, basta ligar para um mixin - que é: + config-and-run-font-generator () . Veja o código abaixo e os comentários para obter mais informações.

Eu acho que você poderia fazer isso automaticamente para uma consulta de mídia, como é feito para tags de cabeçalho, mas todos nós usamos consultas de mídia diferentes, portanto não seria apropriado para todos. Eu uso uma abordagem de design para dispositivos móveis, então é assim que eu faria isso. Sinta-se livre para copiar e usar este código.

Copie e cole essas mixagens em seu arquivo:

=font-h1p-style-generator-manual()
  body
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif // google fonts
    font-size: 100%
    line-height: 1.3em
  %headers
    line-height: 1em
    font-weight: 700
  p
    line-height: 1.3em
    font-weight: 300
  @for $i from 1 through 6
    h#{$i}
      @extend %headers


=media-query-base-font-size-change-generator-manual()
  body
    font-size: 1.2em
  @media screen and (min-width: 680px)
    body
      font-size: 1.4em
  @media screen and (min-width: 1224px)
    body
      font-size: 1.6em
  @media screen and (min-width: 1400px)
    body
      font-size: 1.8em

=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6)
  $h1-fs: $h1-fs // Set first header element to this size
  $h1-step-down: $h1-step-down // Decrement each time by 0.3
  $p-same-as-hx: $p-same-as-hx // Set p font-sieze same as h(6)
  $h1-fs: $h1-fs + $h1-step-down // Looping correction
  @for $i from 1 through 6
    h#{$i}
      font-size: $h1-fs - ($h1-step-down * $i)
    @if $i == $p-same-as-hx
      p
        font-size: $h1-fs - ($h1-step-down * $i)

// RUN ONLY THIS MIXIN. IT WILL TRIGGER THE REST
=config-and-run-font-generator()
  +font-h1p-style-generator-manual() // Just a place holder for our font style
  +media-query-base-font-size-change-generator-manual() // Just a placeholder for our media query font size
  +h1p-font-size-generator-auto($h1-fs: 2em, $h1-step-down: 0.2, $p-same-as-hx: 5) // Set all parameters here

CONFIGURE TODAS AS MIXINS ÀS SUAS NECESSIDADES - JOGUE COM ELE! :) E depois ligue para o topo do seu código SASS REAL com:

+config-and-run-font-generator()

Isso geraria essa saída. Você pode personalizar parâmetros para gerar diferentes conjuntos de resultados. No entanto, como todos usamos consultas de mídia diferentes, você precisará editar alguns mixins manualmente (estilo e mídia).

CSS GERADO:

body {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 100%;
  line-height: 1.3em;
  word-wrap: break-word; }

h1, h2, h3, h4, h5, h6 {
  line-height: 1em;
  font-weight: 700; }

p {
  line-height: 1.3em;
  font-weight: 300; }

body {
  font-size: 1.2em; }

@media screen and (min-width: 680px) {
  body {
    font-size: 1.4em; } }
@media screen and (min-width: 1224px) {
  body {
    font-size: 1.6em; } }
@media screen and (min-width: 1400px) {
  body {
    font-size: 1.8em; } }
h1 {
  font-size: 2em; }

h2 {
  font-size: 1.8em; }

h3 {
  font-size: 1.6em; }

h4 {
  font-size: 1.4em; }

h5 {
  font-size: 1.2em; }

p {
  font-size: 1.2em; }

h6 {
  font-size: 1em;

}

Eu uso essas classes CSS e elas tornam meu texto fluido em qualquer tamanho de tela:

.h1-fluid {
    font-size: calc(1rem + 3vw);
    line-height: calc(1.4rem + 4.8vw);
}

.h2-fluid {
    font-size: calc(1rem + 2vw);
    line-height: calc(1.4rem + 2.4vw);
}

.h3-fluid {
    font-size: calc(1rem + 1vw);
    line-height: calc(1.4rem + 1.2vw);
}

.p-fluid {
    font-size: calc(1rem + 0.5vw);
    line-height: calc(1.4rem + 0.6vw);
}

 h1 { font-size: 2.25em; } 
 h2 { font-size: 1.875em; }
 h3 { font-size: 1.5em; }
 h4 { font-size: 1.125em; }
 h5 { font-size: 0.875em; }
 h6 { font-size: 0.75em; }

Existem as seguintes maneiras pelas quais você pode conseguir isso:

1. Use rem para, por exemplo, 2,3 rem
2. Use em para, por exemplo, 2.3em
3. Use% para, por exemplo, 2,3% Além disso, você pode usar: vh, vw, vmax e vmin.

Essas unidades serão redimensionadas automaticamente, dependendo da largura e altura da tela.

Você pode tornar o tamanho da fonte responsivo se defini-lo em vw (largura da janela de exibição). No entanto, nem todos os navegadores são compatíveis. A solução é usar JavaScript para alterar o tamanho da fonte base, dependendo da largura do navegador e definir todos os tamanhos de fonte em%.

Aqui está um artigo descrevendo como criar fontes responsivas: http://wpsalt.com/responsive-font-size-in-wordpress-theme/

Eu encontrei esta solução e funciona muito bem para mim:

/* Fluid font size:
minimum font size at min. device width 300px = 14
maximum font size at max. device width 1600px = 26
*/

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

Uma maneira de resolver o problema de o texto ter uma boa aparência em computadores e dispositivos móveis / tablets é fixar o tamanho do texto em unidades físicas, como centímetros ou polegadas físicas, que não dependem do PPI da tela (pontos por polegada).

Com base nesta resposta , abaixo está o código que utilizo no final do documento HTML para um tamanho de fonte responsivo:

<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>
<script type='text/javascript'>
  var devicePixelRatio = window.devicePixelRatio || 1;
  dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
  dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;

  function setFontSizeForClass(className, fontSize) {
      var elms = document.getElementsByClassName(className);
      for(var i=0; i<elms.length; i++) {
          elms[i].style.fontSize = String(fontSize * dpi_y / 96) + "px";
      }
  }

  setFontSizeForClass('h1-font-size', 30);
  setFontSizeForClass('action-font-size', 20);
  setFontSizeForClass('guideline-font-size', 25);
  // etc for your different classes
</script>

No código acima, os itens de uma classe diferente recebem tamanhos de fonte atribuídos em unidades físicas, desde que o navegador / SO esteja configurado corretamente para o PPI de sua tela.

Uma fonte de unidade física nem sempre é muito grande e nem muito pequena, desde que a distância da tela seja normal (distância de leitura de livros).

O tamanho do texto pode ser definido com uma vwunidade, o que significa "largura da janela de exibição". Dessa forma, o tamanho do texto seguirá o tamanho da janela do navegador:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text

Para o meu projeto pessoal, usei vw e @meida. Funciona perfeitamente.

.mText {
    font-size: 6vw;
}

@media only screen and (max-width: 1024px) {
    .mText {
        font-size: 10vw;
    }
}


.sText {
    font-size: 4vw;
}

@media only screen and (max-width: 1024px) {
    .sText {
        font-size: 7vw;
    }
}

Use esta equação:

calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));

Para algo maior ou menor que 1440 e 768, você pode atribuir um valor estático ou aplicar a mesma abordagem.

A desvantagem da solução vw é que você não pode definir uma proporção de escala, digamos que um 5vw na resolução de tela 1440 pode acabar sendo do tamanho da fonte de 60px, o tamanho da fonte da sua ideia, mas quando você reduz a largura da janela para 768, pode acabar sendo 12px, não o mínimo que você deseja.

Com essa abordagem, você pode definir o limite superior e o limite inferior, e a fonte se dimensionará no meio.

Podemos usar calc () de css

p{
font-size: calc(48px + (56 - 48) * ((100vw - 300px) / (1600 - 300))) !important;
}

A fórmula matemática é calc (tamanho minimo + (tamanho maximo - tamanho minimo) * (100vm - largura da porta minview) / (largura de porta minview) / (maxwidthviewoport - minviewportwidth)))

Codepen

Receio que não haja uma solução fácil com relação ao redimensionamento de fontes. Você pode alterar o tamanho da fonte usando uma consulta de mídia, mas tecnicamente não será redimensionado sem problemas. Por exemplo, se você usar:

@media only screen and (max-width: 320px){font-size: 3em;}

você font-sizeserá 3em para uma largura de 300 e 200 pixels. Mas você precisa de menosfont-size largura a 200 px para obter uma resposta perfeita.

Então, qual é a solução real? Há apenas um caminho. Você precisa criar uma imagem PNG (com fundo transparente) contendo seu texto. Depois disso, você pode facilmente tornar sua imagem responsiva (por exemplo: largura: 35%; altura: 28px). Dessa forma, seu texto será totalmente responsivo a todos os dispositivos.

Depois de muitas conclusões, acabei com essa combinação:

@media only screen and (max-width: 730px) {

    h2 {
        font-size: 4.3vw;
    }
}

tente isso

html { font-size: min(max(16px, 4vw), 22px); }

consegui-lo em https://css-tricks.com/simplified-fluid-typography/

Aqui está algo que funcionou para mim. Eu só testei em um iPhone.

Se você tem h1, h2ou ptags de colocar isso em torno de seu texto:

<h1><font size="5">The Text you want to make responsive</font></h1>

Isso renderiza um texto de 22 pontos em uma área de trabalho e ainda é legível no iPhone.

<font size="5"></font>