Como usar Dynamic Type con una custom font en SwiftUI

Todo iOS Developer sabe que crear aplicaciones increíbles va mucho más allá de un diseño visualmente atractivo; se trata de construir experiencias inclusivas y accesibles para todos los usuarios. En el mundo de la programación Swift, una de las herramientas más poderosas para lograr esto es permitir que el texto de tu aplicación se adapte a las preferencias visuales del usuario.

Hoy vamos a sumergirnos en un tutorial completo para dominar el uso de Dynamic Type con una custom font en SwiftUI, asegurando que tus aplicaciones en iOS, macOS y watchOS luzcan espectaculares sin sacrificar la accesibilidad.

¿Qué es Dynamic Type y por qué es crucial?

Dynamic Type es una función del sistema operativo de Apple que permite a los usuarios elegir el tamaño de texto que prefieren en sus dispositivos. Algunos usuarios prefieren un texto más pequeño para ver más información en pantalla, mientras que otros con dificultades visuales necesitan tamaños de texto mucho más grandes.

Históricamente, al usar las fuentes del sistema predeterminadas en SwiftUI, el texto se escalaba automáticamente de forma mágica. Sin embargo, cuando los diseñadores exigían tipografías personalizadas para mantener la identidad de la marca, los desarrolladores a menudo se topaban con un muro: las fuentes personalizadas se quedaban estáticas y no respondían a los ajustes del sistema, rompiendo por completo la experiencia de accesibilidad. Afortunadamente, Swift y las versiones modernas de los frameworks de Apple han solucionado este problema.

Paso 1: Configurando tu tipografía en Xcode

Antes de escribir una sola línea de código, necesitamos preparar nuestro proyecto en Xcode. Este proceso es idéntico tanto si estás desarrollando para iOS, macOS o watchOS.

1. Añade los archivos de la fuente: Arrastra tus archivos de fuente con extensión .ttf o .otf al navegador de proyectos en Xcode.
2. Verifica el Target Membership: Selecciona el archivo de la fuente y, en el panel inspector de la derecha, asegúrate de marcar la casilla correspondiente a tu aplicación para que el archivo se incluya en el binario final.
3. Actualiza el archivo Info.plist: Este paso es vital. Ve a la configuración de tu proyecto o a tu archivo Info.plist y añade una nueva clave llamada “Fonts provided by application”. Dentro de esta lista, escribe el nombre exacto de tu archivo de fuente incluyendo su extensión.

Nota importante: Asegúrate de conocer el nombre interno real de la tipografía. A veces, el nombre del archivo no coincide con el nombre tipográfico que SwiftUI requiere para inicializar la fuente. Puedes verificar esto abriendo el archivo con la aplicación Catálogo Tipográfico en tu Mac.

Paso 2: La evolución hacia el escalado automático

En las primeras versiones de SwiftUI, hacer que una fuente personalizada fuera dinámica requería crear modificadores de vista complejos que escucharan los cambios del entorno. Era un proceso tedioso.

Hoy en día, la programación Swift moderna nos ofrece una solución elegante y directa a través del parámetro relativeTo en la inicialización de la fuente. Este parámetro vincula tu tamaño base personalizado a un estilo de texto del sistema (como Título, Cuerpo, o Pie de página), indicándole al sistema operativo cómo debe escalar tu tipografía cuando el usuario cambie sus preferencias.

Paso 3: Implementando Dynamic Type con una custom font en SwiftUI

Vamos a escribir el código para ver esto en acción. Este mismo código funcionará de manera universal en todo el ecosistema de Apple.

import SwiftUI

struct CustomFontView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 20) {
            
            Text("Titular Principal")
                // Aquí está la magia: vinculamos un tamaño 34 al estilo .largeTitle
                .font(.custom("TuFuente-Bold", size: 34, relativeTo: .largeTitle))
                .foregroundColor(.primary)
            
            Text("Este es un subtítulo que acompaña al titular principal y proporciona contexto adicional.")
                // Vinculamos un tamaño 20 al estilo .title3
                .font(.custom("TuFuente-Medium", size: 20, relativeTo: .title3))
                .foregroundColor(.secondary)
            
            Text("El texto del cuerpo es donde los usuarios pasan la mayor parte del tiempo leyendo. Si un usuario necesita texto más grande, este párrafo se ajustará perfectamente sin romper el diseño de la aplicación, gracias a que está vinculado al estilo de texto del cuerpo del sistema.")
                // Vinculamos el tamaño 16 al estilo .body por defecto
                .font(.custom("TuFuente-Regular", size: 16, relativeTo: .body))
                
        }
        .padding()
    }
}

Comprendiendo el código

Al utilizar .font(.custom("Nombre", size: Valor, relativeTo: .estilo)), estás estableciendo un tamaño base. Si el usuario tiene la configuración de tamaño de texto de su dispositivo en el nivel estándar, el texto del cuerpo se renderizará a 16 puntos. Si el usuario aumenta el tamaño del texto en los ajustes de accesibilidad de iOS, el sistema utilizará la curva de escalado del estilo .body para incrementar de forma proporcional los 16 puntos base de tu fuente personalizada.

Consideraciones multiplataforma: macOS y watchOS

Como iOS Developer moderno, probablemente estés diseñando aplicaciones que trascienden el iPhone. SwiftUI brilla por su capacidad de reutilizar código, pero debes tener en cuenta los matices de cada plataforma:

En watchOS:
La pantalla del Apple Watch es diminuta. Aquí, Dynamic Type no es solo una opción de accesibilidad; es una necesidad de usabilidad. Muchos usuarios aumentan el tamaño del texto en sus relojes simplemente para poder leer notificaciones mientras corren o caminan. Al usar el modificador relativeTo, asegúrate de usar fuentes que sean altamente legibles en tamaños pequeños y evita pesos de fuente ultra finos.

En macOS:
El escalado dinámico en macOS funciona de manera un poco diferente a iOS. Las aplicaciones de Mac suelen depender de ajustes de interfaz más fijos, pero los usuarios aún pueden cambiar la resolución escalada de su monitor o los tamaños de fuente predeterminados en ciertas aplicaciones. La implementación en Swift que hemos escrito respetará los ajustes del sistema de macOS de forma nativa, asegurando que las aplicaciones de escritorio portadas mediante Catalyst o diseñadas de forma nativa con SwiftUI mantengan su cohesión.

Mejores prácticas de diseño y maquetación

Lograr implementar Dynamic Type con una custom font en SwiftUI es solo la mitad del trabajo. Si tu texto crece, tu interfaz debe estar preparada para acomodarlo. Sigue estas reglas de oro:

1. Evita alturas y anchuras fijas: Nunca uses modificadores como .frame(height: 50) en contenedores de texto. Si el texto crece debido a la accesibilidad y el contenedor tiene un tamaño fijo, el texto se cortará. Deja que SwiftUI calcule el tamaño intrínseco.
2. Controla las líneas de texto: Usa el modificador .lineLimit(nil) para permitir que el texto fluya hacia nuevas líneas indefinidamente si se vuelve demasiado grande para caber en una sola línea horizontal.
3. Usa espaciadores escalables: En lugar de codificar espacios rígidos como .padding(.top, 20), considera usar medidas relativas o permitir que los VStack y HStack gestionen el espaciado dinámicamente con la opción Spacing.
4. Prueba siempre en Xcode Previews: Xcode te permite previsualizar tu diseño con diferentes tamaños de Dynamic Type directamente en el Canvas. Simplemente añade el modificador .environment(\.sizeCategory, .accessibilityExtraExtraExtraLarge) a tu vista de previsualización para simular el caso más extremo.

Conclusión

Integrar tipografías personalizadas solía ser un dolor de cabeza para cualquier desarrollador preocupado por la accesibilidad. Hoy en día, gracias a las continuas mejoras en el framework, lograr usar Dynamic Type con una custom font en SwiftUI es un proceso limpio, declarativo y extremadamente potente.

Al adoptar estas prácticas en tu flujo de trabajo de programación Swift, no solo estás creando aplicaciones más estéticas y apegadas a las guías de diseño de tu equipo, sino que estás abriendo las puertas de tu producto a miles de usuarios que dependen de la tecnología asistiva todos los días.