Si alguna vez te has fijado en las grandes marcas, te habrás dado cuenta de que no dejan nada al azar, y el diseño de su tipografía es una pieza clave para que su identidad sea reconocible al instante. En el mundo del desarrollo con Android, y concretamente usando Jetpack Compose, lograr que una app no parezca «una más del montón» pasa obligatoriamente por saber jugar con las fuentes y los estilos de texto.
No se trata solo de que el texto se vea bonito, sino de guiar la mirada del usuario hacia lo que realmente importa y crear una experiencia visualmente coherente. En este artículo vamos a desgranar desde lo más básico, como meter un archivo .ttf en la carpeta de recursos, hasta cosas más pro como el uso de fuentes variables y la integración con Material You.
Configuración de fuentes personalizadas en Compose
Para empezar, el componente Text en Compose nos ofrece el parámetro fontFamily, que es donde ocurre la magia. Por defecto, tenemos las clásicas serif, sans serif, monoespaciadas y cursivas, pero si queremos darle un toque único, necesitamos importar nuestros propios archivos de fuente.
El primer paso es crear un directorio llamado font dentro de res. Es superimportante que los archivos tengan la extensión .ttf y que sus nombres estén estrictamente en minúsculas y sin caracteres raros, usando solo guiones bajos si hace falta. Una vez ahí, definimos una variable de tipo FontFamily donde mapeamos cada archivo con su peso correspondiente, como FontWeight.Bold o FontWeight.Light.
Si prefieres no cargar la app de archivos pesados, desde la versión 1.2.0 de Compose puedes usar la API de fuentes descargables. Esto permite traer tipografías de Google Fonts de forma asíncrona. Solo necesitas configurar el GoogleFont.Provider con las credenciales adecuadas y definir el nombre de la fuente, como por ejemplo «Lobster Two», para que el sistema la gestione automáticamente.
Un truco muy útil es establecer fuentes de resguardo. Básicamente, le dices a la app: «intenta bajar esta fuente de Google, pero si no hay internet o falla la descarga, usa este archivo local que ya tengo en la carpeta res». Así te aseguras de que la interfaz nunca se vea mal aunque haya problemas de red.
Estilos de texto y efectos avanzados
Más allá de la fuente, tenemos que controlar el aspecto visual. Los parámetros más comunes son color, fontSize (usando sp para que sea escalable), fontStyle para las cursivas y fontWeight para las negritas. Pero si quieres ir un paso más allá, puedes añadir sombras mediante el parámetro style, definiendo el desplazamiento y el radio de desenfoque para dar profundidad.
Cuando necesitas que un mismo párrafo tenga colores o pesos distintos, la solución es AnnotatedString. A través de buildAnnotatedString, puedes intercalar diferentes estilos de trazo (SpanStyle) y estilos de párrafo. Esto es fundamental para resaltar palabras clave o crear enlaces dentro de un bloque de texto sin tener que crear múltiples componentes Text.
Para los que buscan un diseño disruptivo, Compose permite usar la API de Brush. Esto significa que puedes aplicar un degradado lineal o cualquier otro tipo de pincel al texto, haciendo que los colores fluyan a través de las letras. Incluso puedes jugar con la opacidad selectiva usando el parámetro alpha en intervalos específicos del texto.
Otro efecto muy vistoso es el basicMarquee. Este modificador hace que el texto se desplace horizontalmente si es demasiado largo para el espacio disponible, creando ese efecto de marquesina tan clásico que sigue siendo muy útil para notificaciones o títulos largos en espacios reducidos.
Sistemas de diseño y tipografía global
Si no quieres estar configurando cada Text uno por uno, lo ideal es integrar todo en el MaterialTheme. En el archivo Type.kt, puedes definir un objeto Typography que asigne estilos específicos para diferentes niveles de jerarquía: displayLarge para títulos impactantes, bodyMedium para el contenido principal y labelSmall para pies de foto.
Al envolver tu aplicación en un MaterialTheme personalizado, todos los componentes heredan estas reglas. Esto no solo ahorra tiempo, sino que garantiza que la app tenga una identidad visual unificada. Además, puedes crear temas dinámicos que cambien automáticamente entre modo claro y oscuro basándose en la configuración del sistema o en la preferencia del usuario.
Con la llegada de Material You, la personalización ha alcanzado otro nivel. Ahora es posible extraer los colores del fondo de pantalla del usuario mediante la DynamicColorPalette, logrando que la aplicación se sienta como una extensión del dispositivo. La tipografía también puede adaptarse para mantener la legibilidad independientemente de los colores dinámicos aplicados.
Fuentes variables y compatibilidad del sistema
Las fuentes variables son el futuro: permiten tener múltiples estilos en un solo archivo. En lugar de tener un archivo para Bold y otro para Light, tienes uno solo y ajustas los ejes (weight, width, slant) mediante FontVariation.Settings. Esto reduce el peso de la app y ofrece una flexibilidad brutal para ajustar el grosor del texto al milímetro.
Eso sí, hay que tener cuidado con la compatibilidad. Las fuentes variables solo funcionan en Android O (API 26) y superiores. Por eso, es imprescindible implementar una baranda de protección (un if de versión) que asigne una fuente estática tradicional a los dispositivos más antiguos para evitar que la app pete.
Finalmente, no debemos olvidar la interfaz del sistema. Para que el tema sea perfecto, es recomendable usar SystemUiController de la librería Accompanist y así sincronizar la barra de navegación transparente en las apps de Android con los colores de tu tema de Compose, evitando esos cortes visuales tan molestos.
Dominar la tipografía en Jetpack Compose implica saber equilibrar el uso de recursos locales, la potencia de las fuentes descargables y la flexibilidad de los temas de Material Design. Al combinar estilos avanzados como AnnotatedString con la eficiencia de las fuentes variables y la adaptabilidad de Material You, conseguimos interfaces que no solo son funcionales, sino que transmiten la personalidad de la marca y garantizan una accesibilidad total para cualquier usuario, sin importar su dispositivo.
