Tipografía fluida | Programar Plus

Yendo directo al código, aquí hay una implementación funcional:

html {
  font-size: 16px;
}
@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  }
}
@media screen and (min-width: 1000px) {
  html {
    font-size: 22px;
  }
}

Vale la pena mirar nuestra publicación más reciente Simplified Fluid Typography para obtener un tamaño de letra práctico, sujeto y basado en la ventana gráfica.

Eso escalaría font-size desde un mínimo de 16 px (en una ventana de 320 px) hasta un máximo de 22 px (en una ventana de 1000 px). Aquí hay una demostración de eso, pero como Sass @mixin (que cubriremos más adelante).

Consulte el ejemplo de base de lápiz de tipo fluido w Sass de Chris Coyier (@chriscoyier) en CodePen.

Sass se usó solo para hacer que esa salida sea un poco más fácil de generar, y el hecho de que hay una pizca de matemáticas involucrada. Vamos a ver.

Usando unidades de ventana y calc(), podemos hacer que el tamaño de fuente (y otras propiedades) ajuste su tamaño en función del tamaño de la pantalla. Entonces, en lugar de tener siempre el mismo tamaño o saltar de un tamaño a otro en las consultas de medios, el tamaño puede ser fluido.

Aquí están las matemáticas, crédito Mike Riethmuller:

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

La razón por la que las matemáticas son un poco complicadas es que estamos tratando de evitar que el tipo sea más pequeño que nuestro mínimo o más grande que nuestro máximo, lo cual es muy fácil de hacer con las unidades de visualización.

Por ejemplo, si queremos nuestro tamaño de fuente en un rango donde 14px es el tamaño mínimo en el ancho de ventana más pequeño de 300px y donde 26px es el tamaño máximo en el ancho de la ventana gráfica más grande de 1600px, entonces nuestra ecuación se ve así:

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

El texto cambia de forma fluida al ancho de la ventana gráfica.

Vea el Pen JEVevK de Programar Plus(@ css-tricks) en CodePen.

Para bloquear esos tamaños mínimos y máximos, es útil usar esta matemática en las consultas de medios. Aquí hay algo de Sass para ayudar …

En Sass

Podrías hacer una mezcla (bastante robusta), como esta:

@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}

@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
  $u1: unit($min-vw);
  $u2: unit($max-vw);
  $u3: unit($min-font-size);
  $u4: unit($max-font-size);

  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
    & {
      font-size: $min-font-size;
      @media screen and (min-width: $min-vw) {
        font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
      }
      @media screen and (min-width: $max-vw) {
        font-size: $max-font-size;
      }
    }
  }
}

Que usas así:

$min_width: 320px;
$max_width: 1200px;
$min_font: 16px;
$max_font: 24px;

html {
  @include fluid-type($min_width, $max_width, $min_font, $max_font);
}

Aquí hay otro de los ejemplos de Mike, logrando un ritmo fluido perfecto:

Ampliación de la idea a los encabezados con escala modular

Escala modular, lo que significa que cuanto más espacio disponible, más dramático es el tamaño diferente. Quizás en la ventana gráfica más grande, cada encabezado en la jerarquía es 1.4 veces más grande que el siguiente, pero en el más pequeño, solo 1.05x.

Ver vista:

“Tipo de fluido” i̶n̶s̶p̶i̶r̶e̶d̶ robado de @MikeRiethmuller ahora vive @CodePen blogs. Incluyendo “Escala modular fluida!” pic.twitter.com/0yJk8Iq8fR

– Chris Coyier (@chriscoyier) 27 de octubre de 2016

Con nuestro mixin Sass, se ve así:

$mod_1: 1.2; // mobile
$mod_2: 1.5; // desktop

h1 {  
  font-size: $mod_1*$mod_1*$mod_1*$mod_1 *1rem; 
  @include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font);
}
h2 {  
  font-size: $mod_1*$mod_1*$mod_1 *1rem; 
  @include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font);
}
h3 { 
  font-size: $mod_1*$mod_1 *1rem;
  @include fluid-type($min_width, $max_width, $mod_1*$mod_1 *$min_font, $mod_2*$mod_2 *$min_font);
}

Otra lectura

  • Tipografía flexible con bloqueos CSS de Tim Brown

  • Obtenga el equilibrio correcto: texto de visualización receptivo de Richard Rutter
  • Ejemplos de tipos de fluidos por Mike Riethmuller

(Visited 11 times, 1 visits today)