Fuentes y tipografía de Flutter

La tipografía abarca el estilo y la apariencia del texto o las fuentes: especifica el grosor de la fuente, la inclinación de la fuente, el espacio entre las letras y otros aspectos visuales del texto.

Todas las fuentes no se crean iguales.

Un estilo de fuente se define, como mínimo, por una tipografía (typeface), que representa el conjunto de reglas de caracteres comunes que describen fuentes de la misma familia tipográfica, como Roboto o Noto, un peso de fuente (por ejemplo, Regular, Bold o un valor numérico), y un estilo (como Regular, Italic, etc). Todos estos y otros atributos predefinidos adicionales se unen para conformar lo que llamaríamos una fuente estática.

Las fuentes variables permiten modificar algunos de estos atributos en tiempo de ejecución y almacenan lo que normalmente serían múltiples fuentes estáticas en un solo archivo.

Una escala tipográfica es un conjunto de estilos de texto relacionados para proporcionar equilibrio, cohesión y variedad visual en tus aplicaciones.

La escala de tipos común en Flutter, proporcionada por TextTheme, incluye cinco categorías de texto que indican la función:

• Display
• Headline
• Title
• Label
• Body

También hay tres variaciones de tamaño para cada una:

• Small
• Medium
• Large

Cada una de estas quince combinaciones de una categoría y tamaño de texto está representada por un único TextStyle.

Todas las escalas tipográficas específicas de la plataforma que Flutter expone están contenidas en la clase Typography. Por lo general, no necesitarás hacer referencia a esta clase directamente ya que el TextTheme se localizará en tu plataforma de destino.

Las fuentes variables te permiten controlar aspectos predefinidos del estilo de texto. Las fuentes variables admiten ejes específicos, como ancho, peso, inclinación (por nombrar algunos). El usuario puede seleccionar cualquier valor a lo largo del eje continuo al especificar la tipografía.

Un número creciente de fuentes en Google Fonts ofrece algunas capacidades de fuentes variables. Puedes ver la gama de opciones utilizando el Probador de tipos (Type Tester) y ver cómo puedes variar una sola fuente.

En tiempo real, mueve el deslizador en cualquiera de los ejes para ver cómo afecta a la fuente. Al programar una fuente variable, usa la clase FontVariation para modificar los ejes de diseño de la fuente. La clase FontVariation cumple con la especificación de variables de fuente OpenType.

Google Fonts también contiene fuentes estáticas. Al igual que con las fuentes variables, necesitas saber cómo está diseñada la fuente para saber qué opciones tienes disponibles. Una vez más, el sitio de Google Fonts puede ayudarte.

Si bien puedes descargar fuentes del sitio e instalarlas manualmente en tus aplicaciones, puedes elegir usarlas directamente desde el paquete google_fonts en pub.dev.

Se pueden usar tal cual haciendo referencia simplemente al nombre de la fuente:

Text(
  'This is Google Fonts',
  style: GoogleFonts.lato(),
),

o personalizarse estableciendo propiedades en el TextStyle resultante:

Text(
  'This is Google Fonts',
  style: GoogleFonts.lato(
    textStyle: Theme.of(context).textTheme.displayLarge,
    fontSize: 48,
    fontWeight: FontWeight.w700,
    fontStyle: FontStyle.italic,
  ),
),

Usa la siguiente API para alterar programáticamente una fuente estática (pero recuerda que esto solo funciona si la fuente fue diseñada para admitir la característica):

• FontFeature para seleccionar glifos
• FontWeight para modificar el peso
• FontStyle para aplicar cursiva
• FontVariation para especificar un rango de valores para una propiedad específica.

Un FontFeature corresponde a una etiqueta de característica OpenType y se puede considerar como un indicador booleano para habilitar o deshabilitar una característica de una fuente dada.

El siguiente video te muestra algunas de las capacidades de la tipografía de Flutter y las combina con el aspecto y sensación de Material y Cupertino (dependiendo de la plataforma en la que se ejecute la aplicación), animación y shaders fragment personalizados:

Ver en YouTube en una pestaña nueva: "Prototipado de diseños hermosos con Flutter"

Para leer la experiencia de un ingeniero personalizando fuentes variables y animándolas a medida que se transforman (y que sirvió de base para el video anterior), consulta Playful typography with Flutter, un artículo gratuito en Medium. El ejemplo asociado también utiliza un shader personalizado.