Migra a fuentes variables

1. Introducción

Última actualización: 4/4/2022

269e1597309e5d7a.png

Adopta la variabilidad dinámica en tu IU con las fuentes variables, que mejoran la responsividad de los diseños y los temas, aumentan la accesibilidad y hacen que las apps sean más rápidas.

Qué aprenderás

  • Qué son las fuentes variables
  • Cómo puedes personalizar la tipografía con ellas
  • Cómo aplicar las fuentes variables a tus diseños
  • Cómo implementar las fuentes variables con la API de Google Fonts y CSS

Requisitos previos

Para este lab, nos basaremos en conceptos de diseño fundamentales.

  • Conocimientos de escalas tipográficas
  • Conocimientos de Figma
  • Conocimientos básicos de HTML y CSS

Requisitos

2. Primeros pasos

Configuración

Para comenzar, debes acceder al archivo de Designlab de Figma. Todo lo que necesitas para el lab está en él. Puedes descargar e importar el archivo, o duplicarlo desde la comunidad de Figma.

Primero, accede a Figma o crea una cuenta.

Duplicado de la comunidad de Figma

Ve al archivo Migra a fuentes variables o busca "Migrating to Variable fonts" en la comunidad de Figma. En la esquina superior derecha, haz clic en Duplicate para copiar el archivo a tus archivos.

2cb1a5f77aab6012.png

Diseño de archivo

Observa que el archivo es independiente y que comienza con una introducción. Cada sección se divide en una fila de mesas de trabajo que están vinculadas entre sí, con algunos conceptos básicos para la sección, seguidos de ejercicios. Las secciones y ejercicios se complementan entre sí y deben completarse de forma secuencial.

En este codelab, se explican esos conceptos y ejercicios con mayor detalle. Lee el codelab para obtener más información sobre las nuevas funciones de Material You.

Comenzando por la mesa de trabajo Intro, hay botones que vinculan las mesas de trabajo en orden. Para acceder al vínculo, haz clic en el botón.

289defd9d067d2f0.png

Busca una fuente variable

Antes de comenzar, debemos asegurarnos de contar con una fuente variable. Este archivo usa Roboto Flex, que ya está disponible en Figma, pero que también puedes descargar desde fonts.google.com

3. ¿Qué son las fuentes variables?

Las fuentes variables son un nuevo formato de fuente innovador que permite a los usuarios controlar la tipografía y los íconos. Roboto Serif y Roboto Flex son tipos de letra nuevos que se realizaron con la tecnología de fuentes variables y que ofrecen una amplia variedad de ejes. 64c74a7d7844423.png

Expresiones estéticas y ejes

Los diseñadores ya no están limitados a los estilos específicos de antes, como los estilos normal, negrita, cursiva, etc. Las variables de las fuentes variables se controlan a través de ejes o instancias. Si el diseñador de tipografías lo prefiere, cualquier variable del diseño de la tipografía se puede asignar a un eje que controla el usuario. Entre los ejes comunes se incluyen la cursiva, el tamaño óptico, la inclinación, el peso y el ancho. Estos cinco son los ejes registrados en CSS.

Beneficios

Las fuentes variables permiten contar con diversos estilos en un único archivo de fuente, lo cual hace que los sitios web sean más sustentables, más pequeños y más rápidos, y les ofrece a los diseñadores mayor control expresivo.

77346d3812d79acc.png

4. Usa las fuentes variables en el diseño

Modifica los ejes

Analicemos todos los parámetros (o ejes) que tenemos disponibles y su efecto. Selecciona la tipografía que aparece a la derecha y abre la ventana modal Type Details (ícono de signo más) para abrir los controles deslizantes de los ejes y revisar cada parámetro.

  1. El peso define el grosor de la letra. Ofrece un rango completo y continuo de grosores de trazo.

5f18f2f50f6dc4da.gif

  1. El ancho es la cantidad de espacio horizontal que ocupan los caracteres de un tipo de letra.

dddc87cccfcb47f9.gif

  1. Ajuste del estilo de vertical a inclinado, también conocido por los tipógrafos como el estilo “oblicuo”. Aunque es inusual, la inclinación puede darse hacia la izquierda, lo que se denomina un estilo “oblicuo inverso” o “invertido”.

1b7fbf03fcbf16dc.gif

  1. El grado es un modificador secundario del peso óptico de un tipo de letra y es independiente del eje de peso. Tanto el peso como el grado modifican el grosor de la letra, pero los ajustes de grado son mucho más detallados.

35705cb05c8df559.gif

  1. El tamaño óptico adapta el estilo a tamaños de texto específicos, que se indican con puntos. Por lo general, en los tamaños más pequeños, las letras se optimizan para mayor legibilidad, con espaciado holgado o trazos más gruesos con menos detalles. Por lo general, en los tamaños más grandes, las letras se optimizan para los títulos con trazos más delgados, formas más detalladas y anchos y pesos más extremos.

ed569d469ebd40d6.gif

Consulta la demostración de fuentes variables para probar los distintos ejes de las fuentes variables fuera de Figma.

5. Optimiza el estilo

Si trabajas con la guía de estilo de una marca, es posible que tengas una escala de tipografía establecida con restricciones tipográficas. El uso de fuentes variables no implica deshacerse de esa coherencia. Permite definir mejor la flexibilidad de la escala tipográfica (para casos de uso como el de aumentar el peso o el grado para los fondos oscuros) en un solo archivo.

ecb7c0b0056fc315.png

Si bien una escala tipográfica puede constar de más de una familia de fuentes, aquí solo usaremos una para personalizar una versión reducida de la escala tipográfica predeterminada de Material.

  1. Comencemos a personalizar la escala tipográfica en el texto del cuerpo, lo que nos permite establecer primero el tamaño de la tipografía de base del sitio y, luego, ajustar de forma óptica a partir de eso. La configuración predeterminada para el estilo cuerpo grande (body large) es 18 puntos y está seleccionada y configurada en Roboto Flex. El ajuste para obtener mayor legibilidad solía significar actualizar el tamaño y el peso de la fuente, lo que implicaba otro archivo de fuente, pero ahora se pueden ajustar algunos de los ejes. Ajusta los ejes de tamaño óptico, grado y peso.
  2. Continúa con el estilo etiqueta (label). Las etiquetas son más funcionales y se usan en contextos de menos espacio y más cortos, como los botones. Ajusta ópticamente el grado para permitir que la etiqueta aparezca de forma correcta en contenedores de botones y chips.
  3. Sigue con el ajuste de los estilos título (title), encabezado (headline) y gráfico (display). Los tres se usan para textos con un énfasis de mediano a importante, como los títulos de las páginas y las secciones. Los estilos título y gráfico pueden ser más expresivos debido a su tamaño y a un énfasis marcado. Puedes probar los diferentes ejes aquí.
  4. Con la tipografía seleccionada, haz clic en los 4 puntos y agregar (+) para configurar un estilo de texto que garantice una configuración tipográfica reutilizable y coherente.

Puedes generar la escala tipográfica predeterminada de Material como estilos de Figma con el Material Theme Builder o si duplicas el kit de diseño de M3.

6. Aplica la escala en la IU

Una vez configurada la escala tipográfica, vamos a aplicarla a los elementos de la IU para implementarla en el código. Evalúa cómo se pueden usar las fuentes variables para agregar más expresividad y legibilidad. Si configuraste estilos de Figma en el último ejercicio, estos se pueden aplicar y, luego, se pueden actualizar los ejes del estilo.

18efaa2c7bc6ecac.png

  1. Observa los elementos de la IU ubicados a la izquierda. La primera tarjeta contiene un tipo de planta, una descripción y algunas etiquetas de categoría, mientras que el resto de las tarjetas describen las instrucciones para el cuidado de la planta. El tipo de planta tiene un énfasis más marcado, así que usa el estilo "encabezado" (headline). Configúrala con el valor que configuramos anteriormente para el estilo de encabezado. Las tarjetas de cuidado también tienen un título, pero no tienen el mismo énfasis, por lo que las podemos configurar con el estilo "título" (title).
  2. Los detalles de la planta y el texto de las instrucciones se pueden configurar con el estilo "cuerpo grande" (body large), mientras que las categorías con el estilo "etiqueta grande" (label large).
  3. Experimenta con los distintos roles y ajusta los elementos de la IU y la escala para encontrar el equilibrio adecuado.

f646755b99db0161.png

7. Realiza la implementación en el código

789408aab925944f.png

La implementación de fuentes variables en el código con CSS es parecida a la de cualquier fuente web, ya que se usa un servicio de entrega de fuentes para cargar la fuente y personalizarla con las propiedades CSS.

Usaremos HTML básico y CSS para la implementación, no MWC ni ningún framework.

Fuentes variables de Google Fonts

Usa Google Fonts como tu servicio de entrega de fuentes para facilitar la implementación de muchas fuentes, incluidas las variables, en tu sitio web.

Ve a fonts.google.com para explorar qué fuentes variables están disponibles. En la búsqueda, marca Show only variable fonts para filtrar. Las fuentes variables incluyen una zona de pruebas en la parte inferior de la página, en la que puedes usar los controles deslizantes de cada uno de los ejes disponibles en la familia para configurarlos.

9ecb4721afd8faa2.png

Estilo con CSS

No todas las fuentes tienen la misma cantidad de ejes disponibles para personalizar. Actualmente, los valores de peso, ancho, inclinación, cursiva y tamaño óptico son los más comunes.

Estos se pueden configurar con las propiedades básicas de fuente CSS que existían antes de las fuentes variables. Si bien aún no se admite generalmente (a partir de mayo de 2022), todos los ejes se pueden configurar de manera confiable con la nueva propiedad font-variation-settings.

Axes

Abbreviation

CSS property

Weight

wght

font-weight

Width

wdth

font-stretch

Slant

slnt

font-style*

Italic

ital

font-style*

Optical Size

opsz

font-optical-sizing

* La inclinación (slnt) y cursiva (ital) en font-style no son confiables.

8. Realiza la importación con la API de Google Fonts

Hasta ahora, solo usamos Roboto, pero puedes ver todas las fuentes disponibles en este momento en fonts.google.com.

Seguiremos usando Roboto en el resto del codelab y personalizaremos la tipografía de las siguientes tarjetas de acuerdo con el ejercicio anterior.

  1. Copia este código que contiene la IU de muestra de la tarjeta en el IDE web de tu preferencia.
<html>
 <title>Migrating to Variable fonts</title>
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/* imports __________________ */

/* body __________________________ */
body {
 font-size: 18px;
 color: #21005D;
 background: #E8DEF8;
}
/* typography __________________________ */

h1 {
   line-height: 0;
/* add font styles for headline */
}

h2 {
   line-height: 0;
/* add font styles for care titles */
}

p {
   margin: 0;
   line-height: 150%;
/* add font styles for body copy */
}

.label {
/* add font styles for labels */
}

/* layout __________________________ */
article {
   margin: 16px auto;
   padding: 16px 24px;
   width: 30%;
   background: #FFFFFF;
   border: 1px solid #4F8438;
   border-radius: 24px;
}
div.labels {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 12px;
}
span.label {
   margin: 8px 0;
   padding: 4px 8px;
   background: #C4EED0;
   border-radius: 8px;
}
article.care {
   padding: 8px 24px;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
}
</style>
  <body>
   <article>
     <h1>philodendron</h1>
     <p>The philodendron is part of a large family of plants comprising 489 spcies. Known for their large interesting leaves, growing mainly in tropical climates. Most philodendron make for ideal houseplants, with some more rare exceptions are easy to propogate and require less attention as some fussier plant families</p>
     <div class="labels">
       <span class="label">easy care</span>
       <span class="label">tropical</span>
     </div>
   </article>

   <article class="care">
       <span class="material-icons">water</span>
       <h2>water</h2>
       <p>Water when dry</p>
   </article>

   <article class="care">
       <span class="material-icons">light</span>
       <h2>light</h2>
       <p>Bright indirect light</p>
   </article>
 </body>
 </html>
  1. Observa las especificaciones de estilo que establecimos en el último ejercicio para encabezado (headline), título (title), cuerpo (body) y etiqueta (label). Con esto en mente, ve a la página de Roboto Flex. Configura los controles deslizantes para que coincidan con las especificaciones de Figma y, luego, elige Select this style para que se agreguen al panel lateral
  2. Dentro del panel lateral, en los estilos seleccionados, busca “Use on the web”. Existen dos maneras de agregar la fuente a tu código: con <link> o con @import. Solo necesitas una, así que seleccionemos @import.
  3. Copia desde "@import" hasta el punto y coma, y pega el fragmento entre las etiquetas de estilo después del comentario de importación.
  4. Como Roboto Flex es la única fuente usada, configura el cuerpo para llamar a la font-family. Para ello, agrega el fragmento debajo del título "CSS rules to specify families" que está luego del código de importación.
body {
 font-family: 'Roboto Serif', sans-serif;
 font-size: 18px;
 color: #0C332A;
 background: rgb(247, 245, 245);
}

Con esta acción, se importa la fuente y los estilos seleccionados, pero el uso de rangos de ejes te permite usar la variedad continua de estilos en lugar de estilos individuales. Para crear un rango, une dos valores con “..” (p. ej., 100..900). Asegúrate de agregar solo rangos que existan en los controles deslizantes de la fuente; de lo contrario, no se cargarán correctamente.

Esto se usa, en general, para lograr transiciones fluidas en animaciones y experimentar en el navegador, ya que se carga todo el rango y hace que la solicitud de descarga sea más grande.

9. Propiedades de las fuentes variables de CSS

Una vez importada la fuente, podemos volver a Figma para extraer algunas propiedades de CSS y observar la propiedad font-variation-settings de CSS.

  1. Comenzando con el h1 de los encabezados seleccionados en el panel derecho, selecciona la pestaña Inspect de la parte superior. Con esta acción, se cambia el panel a un modo de inspección de código para la entrega del desarrollo. El código es la última sección.
  2. Si aún no lo hiciste, cambia el formato del menú desplegable a CSS. Si se usan, los atributos estándares se enumeran (font-weight, font-stretch, font-style, font-optical-sizing), seguidos de la configuración de nivel inferior font-variation-settings que contiene los ejes personalizados no registrados. Usa los atributos estándares antes de cambiar a font-variation-settings.

Figma usa la configuración de font-variation para el ancho (wdth) en lugar de usar font-stretch.

62fbb715711beb75.png

  1. Copia este código CSS relacionado con la tipografía para definir el estilo del selector h1.
h1 {
    line-height: 0;
    font-size: 36px;
    font-weight: 125;
    font-stretch: 167%;
}
  1. El estilo de título de la tarjeta de cuidados se puede copiar en h2. Haz lo mismo para el cuerpo del texto, y cópialo en p. Los estilos de etiquetas se pueden copiar en .label

73252104c94e2053.png

10. Felicitaciones

62930ad88ed65971.png

Felicitaciones por descubrir las fuentes variables y aprender a usarlas en tus diseños y a implementarlas en la Web.

Si tienes alguna pregunta, no dudes en consultarnos en cualquier momento mediante @MaterialDesign en Twitter.

Mira más instructivos y contenido de diseño en youtube.com/MaterialDesign.