Tamaño de fuente sensible en CSS

He creado un sitio usando la cuadrícula Zurb Foundation 3 . Cada página tiene un gran 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 -->

Cuando cambio el tamaño del navegador al tamaño móvil, la fuente grande no se ajusta y hace que el navegador incluya un desplazamiento horizontal para acomodar el texto grande.

Me di cuenta de que en la página de ejemplo de Zurb Foundation 3 Typography , los encabezados se adaptan al navegador a medida que se comprime y expande.

¿Me estoy perdiendo algo realmente obvio? ¿Cómo logro esto?

El font-sizeno va a responder como esto al cambiar el tamaño de la ventana del navegador. En su lugar, responden a la configuración de tamaño de zoom / tipo del navegador, como si presiona Ctrly +juntos en el teclado mientras está en el navegador.

Preguntas de los medios

Tendría que mirar el uso de consultas de medios para reducir el tamaño de fuente en ciertos intervalos donde comienza a romper su diseño y crear barras de desplazamiento.

Por ejemplo, intente agregar esto dentro de su CSS en la parte inferior, cambiando el ancho de 320 píxeles para donde su diseño comience a romperse:

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

   body { 
      font-size: 2em; 
   }

}

Longitudes de porcentaje de ventana gráfica

También puede utilizar longitudes de ventana gráfica porcentuales tales como vw, vh, vminy vmax. El documento oficial del W3C para esto dice:

Las longitudes de porcentaje de ventana gráfica son relativas al tamaño del bloque contenedor inicial. Cuando se cambia la altura o el ancho del bloque contenedor inicial, se escalan en consecuencia.

Nuevamente, a partir del mismo documento W3C, cada unidad individual se puede definir de la siguiente manera:

Unidad vw: igual al 1% del ancho del bloque contenedor inicial.

Unidad vh: igual al 1% de la altura del bloque contenedor inicial.

Unidad vmin: igual a la menor de vw o vh.

Unidad vmax: igual a la mayor de vw o vh.

Y se usan exactamente de la misma manera que cualquier otro valor CSS:

.text {
  font-size: 3vw;
}

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

La compatibilidad es relativamente buena como se puede ver aquí . Sin embargo, algunas versiones de Internet Explorer y Edge no admiten vmax. Además, iOS 6 y 7 tienen un problema con la unidad vh, que se solucionó en iOS 8.

Puede usar el valor de la ventana gráfica en lugar de ems, pxs o pts:

1vw = 1% del ancho de la ventana gráfica

1vh = 1% de la altura de la ventana gráfica

1vmin = 1vw o 1vh, lo que sea menor

1vmax = 1vw o 1vh, lo que sea mayor

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

De CSS-Tricks: tipografía de tamaño de ventana gráfica

He estado buscando formas de superar este problema y creo que he encontrado una solución:

Si puede escribir su aplicación para Internet Explorer 9 (y posterior) y todos los demás navegadores modernos que admiten CSS calc (), unidades rem y unidades vmin. Puede usar esto para lograr texto escalable sin consultas de medios:

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

Aquí está en acción: http://codepen.io/csuwldcat/pen/qOqVNO

Use mediaespecificadores CSS (eso es lo que usan [zurb]) para un estilo receptivo:

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

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}

Si no le importa usar una solución jQuery, puede probar el complemento TextFill

jQuery TextFill cambia el tamaño del texto para que quepa en un contenedor y hace que el tamaño de fuente sea lo más grande posible.

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

Hay varias formas de lograr esto.

Use una consulta de medios , pero requiere tamaños de fuente para varios puntos de interrupción:

body
{
    font-size: 22px;
}

h1
{
    font-size: 44px;
}

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

Utilice dimensiones en % o em . Simplemente cambie el tamaño de fuente base, y todo cambiará. A diferencia del anterior, puede cambiar la fuente del cuerpo y no h1 cada vez o dejar que el tamaño de fuente base sea el predeterminado del dispositivo y el resto en em:

1. "Ems" (em) : El "em" es una unidad escalable. Un em es igual al tamaño de fuente actual, por ejemplo, si el tamaño de fuente del documento es 12 pt, 1 em es igual a 12 pt. Los Ems son de naturaleza escalable, por lo que 2 em equivaldrían a 24 pt, .5 em equivaldrían a 6 pt, etc.
2. Porcentaje (%) : la unidad de porcentaje es muy parecida a la unidad "em", salvo algunas diferencias fundamentales. En primer lugar, el tamaño de fuente actual es igual al 100% (es decir, 12 pt = 100%). Mientras usa la unidad de porcentaje, su texto permanece totalmente escalable para dispositivos móviles y para accesibilidad.

Ver kyleschaeffer.com / ....

CSS 3 admite nuevas dimensiones que son relativas al puerto de vista. Pero esto no funciona en Android:

1. 3.2vw = 3.2% del ancho de la ventana gráfica
2. 3.2vh = 3.2% de la altura de la ventana gráfica
3. 3.2vmin = Menor de 3.2vw o 3.2vh

4. 3.2vmax = Mayor de 3.2vw o 3.2vh

   body
   {
       font-size: 3.2vw;
   }

Ver CSS-Tricks ... y también mira ¿Puedo usar ...

Hay otro enfoque para los tamaños de fuente receptivos: usar unidades rem.

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

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.2rem;
}

Más adelante en las consultas de medios, puede ajustar todos los tamaños de fuente cambiando el tamaño de fuente 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 que esto funcione en Internet Explorer 7 e Internet Explorer 8, deberá agregar una reserva con unidades px:

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

Si estás desarrollando con Less , puede crear un mixin que haga los cálculos por usted.

Soporte de unidades rem - http://caniuse.com/#feat=rem

La solución "vw" tiene un problema cuando va a pantallas muy pequeñas. Puede establecer el tamaño base y subir desde allí con calc ():

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

Esto se implementa en parte en la fundación 5.

En el archivo _type.scss tienen dos conjuntos de variables de encabezado:

// 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 el nivel medio, generan tamaños basados ​​en el primer conjunto de variables:

@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; }
}

Y para pantallas pequeñas, es decir, pequeñas pantallas, usan un segundo conjunto de variables para generar 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; }

Puede usar estas variables y anular en su archivo scss personalizado para establecer los tamaños de fuente para los tamaños de pantalla respectivos.

También se puede hacer un tamaño de fuente sensible con este código JavaScript llamado FlowType :

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

FlowType: tipografía web receptiva en su máxima expresión: tamaño de fuente basado en el ancho del elemento.

O este código JavaScript llamado FitText :

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

FitText: hace que los tamaños de fuente sean flexibles. Use este complemento en su diseño receptivo para cambiar el tamaño de sus titulares en función de la proporción.

Si está utilizando una herramienta de construcción, pruebe con la mochila.

De lo contrario, puede usar variables CSS (propiedades personalizadas) para controlar fácilmente los tamaños de fuente mínimos y máximos de esta manera ( demostración ):

* {
  /* 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);
}

Vi un gran artículo de CSS-Tricks . Funciona bien:

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

Por ejemplo:

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

Podemos aplicar la misma ecuación a la line-heightpropiedad para que también cambie con el 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)));
}

Se me ocurrió una idea con la que solo tienes que definir el tamaño de fuente una vez por elemento, pero todavía está influenciado por las consultas de los medios.

Primero, configuro la variable "--text-scale-unit" en "1vh" o "1vw", dependiendo de la ventana gráfica que use las consultas de medios.

Luego uso la variable usando calc () y mi número de multiplicador para font-size:

/* 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>

En mi ejemplo, solo utilicé la orientación de la ventana gráfica, pero el principio debería ser posible con cualquier consulta de medios.

"FitText" de jQuery es probablemente la mejor solución de encabezado sensible. Compruébelo en GitHub: https://github.com/davatron5000/FitText.js

Al igual que con muchos marcos, una vez que "salga de la cuadrícula" y anule el CSS predeterminado del marco, las cosas comenzarán a romperse de izquierda a derecha. Los marcos son inherentemente rígidos. Si tuviera que usar el estilo H1 predeterminado de Zurb junto con sus clases de cuadrícula predeterminadas, entonces la página web debería mostrarse correctamente en el móvil (es decir, sensible).

Sin embargo, parece que desea encabezados de 6.2em muy grandes, lo que significa que el texto tendrá que reducirse para poder caber dentro de una pantalla móvil en modo vertical. Su mejor opción es utilizar un complemento jQuery de texto receptivo como FlowType y FitText . Si desea algo liviano, puede consultar mi plugin jQuery de texto escalable:

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

Uso de la muestra:

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

En Sass original real (no scss), podría usar los siguientes mixins para establecer automáticamente los párrafos y todos los encabezados 'font-size .

Me gusta porque es mucho más compacto. Y más rápido para escribir. Aparte de eso, proporciona la misma funcionalidad. De todos modos, si todavía quieres seguir con la nueva sintaxis - scss, entonces puedes convertir mi contenido Sass a scss aquí: [CONVERTIR SASS A SCSS AQUÍ]

A continuación te doy cuatro Sass mixins. Tendrá que ajustar su configuración a sus necesidades.

=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

Después de que termine de jugar con la configuración, simplemente haga una llamada en un mixin, que es: + config-and-run-font-generator () . Vea el código a continuación y los comentarios para obtener más información.

Supongo que podría hacerlo automáticamente para una consulta de medios como se hace para las etiquetas de encabezado, pero todos usamos diferentes consultas de medios, por lo que no sería apropiado para todos. Utilizo un enfoque de diseño móvil primero, así que así es como lo haría. Siéntase libre de copiar y usar este código.

COPIE Y PEGUE ESTAS MEZCLAS A SU ARCHIVO:

=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

CONFIGURA TODAS LAS MEZCLAS A TUS NECESIDADES - ¡JUEGA CON ÉL! :) Y LUEGO LLÁMELO EN LA PARTE SUPERIOR DE SU CÓDIGO SASS REAL CON:

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

Esto generaría esta salida. Puede personalizar los parámetros para generar diferentes conjuntos de resultados. Sin embargo, debido a que todos usamos diferentes consultas de medios, algunos mixins tendrás que editarlos manualmente (estilo y medios).

CSS GENERADO:

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;

}

Utilizo estas clases de CSS y hacen que mi texto sea fluido en cualquier tamaño de pantalla:

.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; }

Existen las siguientes formas mediante las cuales puede lograr esto:

1. Use rem por ej. 2.3 rem
2. Use em por ejemplo 2.3em
3. Use% para, por ejemplo, 2.3%. Además, puede usar: vh, vw, vmax y vmin.

Estas unidades se personalizarán según el ancho y la altura de la pantalla.

Puede hacer que el tamaño de fuente responda si lo define en vw (ancho de ventana). Sin embargo, no todos los navegadores lo admiten. La solución es usar JavaScript para cambiar el tamaño de fuente base dependiendo del ancho del navegador y establecer todos los tamaños de fuente en%.

Aquí hay un artículo que describe cómo hacer tamaños de fuente receptivos: http://wpsalt.com/responsive-font-size-in-wordpress-theme/

He encontrado esta solución y me funciona muy bien:

/* 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)));
}

Una forma de resolver el problema de que el texto se vea bien tanto en el escritorio como en el móvil / tableta es fijar el tamaño del texto a unidades físicas como centímetros o pulgadas físicas, que no dependen del PPI de la pantalla (puntos por pulgada).

Según esta respuesta , a continuación se muestra el código que uso al final del documento HTML para un tamaño de fuente sensible:

<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>

En el código anterior, los elementos de una clase diferente tienen tamaños de fuente asignados en unidades físicas, siempre que el navegador / SO esté configurado correctamente para el PPI de su pantalla.

Una fuente de unidad física no siempre es demasiado grande ni demasiado pequeña, siempre que la distancia a la pantalla sea habitual (distancia de lectura de libros).

El tamaño del texto se puede establecer con una vwunidad, lo que significa el "ancho de la vista". De esa forma, el tamaño del texto seguirá el tamaño de la ventana del navegador:

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

Para mi proyecto personal utilicé vw y @meida. Funciona perfectamente

.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;
    }
}

Usa esta ecuación:

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

Para cualquier cosa mayor o menor que 1440 y 768, puede asignarle un valor estático o aplicar el mismo enfoque.

El inconveniente con la solución vw es que no puede establecer una relación de escala, digamos que un 5vw con una resolución de pantalla de 1440 puede terminar siendo 60px tamaño de fuente, su tamaño de fuente ideal, pero cuando reduce el ancho de la ventana a 768, puede terminar siendo 12px, no el mínimo que quieres.

Con este enfoque, puede establecer su límite superior e inferior, y la fuente se escalará en el medio.

Podemos usar calc () de css

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

La fórmula matemática es calc (minsize + (maxsize - minsize) * (100vm - minviewportwidth) / (maxwidthviewoport - minviewportwidth)))

Codepen

Me temo que no hay una solución fácil con respecto al cambio de tamaño de fuente. Puede cambiar el tamaño de fuente usando una consulta de medios, pero técnicamente no cambiará de tamaño sin problemas. Por ejemplo, si usa:

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

su font-sizehabrá 3em tanto para un 300 píxeles y una anchura de 200 píxeles. Pero necesita un font-sizeancho inferior de 200 px para lograr una respuesta perfecta.

Entonces, ¿cuál es la solución real? Solo hay una manera. Debe crear una imagen PNG (con un fondo transparente) que contenga su texto. Después de eso, puede hacer que su imagen responda fácilmente (por ejemplo: ancho: 35%; altura: 28px). De esta manera, su texto responderá completamente con todos los dispositivos.

Después de muchas conclusiones terminé con esta combinación:

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

    h2 {
        font-size: 4.3vw;
    }
}

prueba esto

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

lo obtuve de https://css-tricks.com/simplified-fluid-typography/

Aquí hay algo que funcionó para mí. Solo lo probé en un iPhone.

Ya sea que tenga h1, h2o petiquetas coloque esto alrededor de su texto:

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

Esto genera un texto de 22 puntos en una computadora de escritorio y aún se puede leer en el iPhone.

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