Elegir la tipografía correcta para un proyecto de diseño de interfaces es una de las decisiones más determinantes para la experiencia del usuario. Comprender cómo funcionan los pesos, tamaños y la jerarquía tipográfica permite construir interfaces legibles, coherentes y visualmente atractivas. A continuación se exploran las decisiones tipográficas detrás del proyecto Zapata y un ejercicio práctico para dominar el manejo de texto en Figma.
¿Qué tipografía elegir para un proyecto de UI?
El punto de partida depende de la plataforma. Si el proyecto está orientado a Android, la fuente por defecto es Roboto, diseñada por Google [0:42]. Para proyectos de iOS (Apple), la opción estándar es San Francisco Pro [0:50]. Ambas están disponibles para descarga gratuita en línea.
Sin embargo, no siempre se utiliza la fuente del sistema. En el proyecto Zapata se seleccionaron dos tipografías con propósitos muy claros:
- Manrope: cubre aproximadamente el 90 % de la interfaz. Es la base tipográfica de todo el diseño [1:10].
- Clash Display: se reserva para títulos y elementos que requieren un impacto visual especial. Aporta personalidad sin romper la coherencia con Manrope [1:18].
La clave está en que ambas comparten cierta familiaridad visual: no son idénticas, pero tampoco están desconectadas. Esa coherencia tipográfica es fundamental para que la interfaz se sienta unificada.
¿Cómo se establece la jerarquía tipográfica en interfaces móviles?
El tamaño mínimo recomendado es doce puntos, aunque comenzar en catorce resulta más cómodo para la lectura [1:42]. Los títulos arrancan a partir de dieciséis puntos hacia arriba. Todo el proyecto está pensado para pantallas móviles, por lo que la legibilidad es prioritaria en cada decisión [1:55].
Desde el brand book del proyecto se definen escalas de jerarquía que determinan qué tipografía, peso y tamaño corresponde a cada elemento:
- Un main headline puede usarse para el nombre de usuario en un perfil, con Clash Display en peso medium y tamaño treinta y dos [3:20].
- La altura de línea se configura como porcentaje; en este caso, un 125 % resulta ideal para mantener la proporción [3:50].
- El espaciado entre caracteres y la alineación (izquierda, centro o derecha) se ajustan desde el panel de diseño en Figma [4:05].
¿Cómo comunicar importancia con color y peso?
No solo el tamaño define la jerarquía. Cuando dos elementos comparten el mismo tamaño tipográfico, el color puede indicar cuál tiene menor relevancia. Por ejemplo, el nombre de un sendero aparece en blanco, mientras que la ubicación utiliza un tono que lo subordina visualmente [4:30].
El peso tipográfico —es decir, el grosor de los trazos— también juega un papel central. Un peso medium otorga prominencia sin exagerar, mientras que un extra light puede hacer que el texto pierda presencia [3:28].
¿Qué son las tipografías variables y el contorno vectorial?
Convertir una tipografía en outline mediante el atajo Command + E transforma el texto editable en vectores puros [2:10]. Esto es útil cuando se necesita manipular las formas de las letras como gráficos. Las tipografías variables permiten ajustar fluidamente el peso y otros atributos sin cambiar de archivo de fuente [2:18].
¿Cómo crear un reloj análogo con texto en Figma?
Un ejercicio práctico para dominar la manipulación de texto consiste en construir un reloj análogo. El proceso comienza presionando T para crear una capa de texto con el valor "12" [5:00].
El truco clave está en la duplicación inteligente con Command + D. Figma no solo recuerda la distancia y posición del duplicado, sino también el ángulo de rotación [5:30]. El procedimiento es:
- Crear la primera caja de texto y dimensionarla a veinticuatro por doce.
- Duplicarla con Option (Mac) o Alt (Windows), posicionarla y rotarla exactamente treinta grados manteniendo presionado Shift [5:50].
- Alinear las esquinas inferiores de ambas cajas.
- Presionar Command + D repetidamente hasta completar el círculo con doce posiciones [6:10].
Después se reemplazan los valores numéricos. Figma facilita esto porque, al estar en modo de edición de texto, permite saltar entre cajas sin necesidad de hacer doble clic en cada una [6:30].
Finalmente, para que todos los números queden en posición vertical, se seleccionan todas las cajas, se accede al campo de rotación en el panel de propiedades y se escribe cero [6:55]. Con eso, el reloj queda completo.
¿Cómo le añadirías punteros, indicadores de hora o un borde de pulsera a este reloj? Comparte tu versión en los comentarios.
