La tipografía define gran parte del éxito en un producto digital. Aprender a elegir familias, pesos y escalas adecuadas en Figma te permite crear interfaces legibles, coherentes con tu marca y alineadas con el tipo de usuario al que apuntas.

Dominar la tipografía digital no se trata solo de elegir una fuente bonita: implica entender su anatomía, sus propiedades y cómo fluye dentro del lienzo. Si estás empezando en diseño de productos digitales, esta es una de las bases que vas a usar todos los días.

¿Cuáles son las partes de la anatomía tipográfica?

Antes de abrir Figma, conviene reconocer las cinco piezas que conforman cualquier letra. Saber nombrarlas te ayuda a tomar decisiones más finas cuando ajustas tamaños o eliges una fuente.

• Línea base: la línea sobre la que se asientan las letras y por debajo de la cual se extienden los trazos descendentes, como en la p.
• Altura de las minúsculas: cuánto mide en píxeles una letra minúscula.
• Altura de las mayúsculas: la medida equivalente para las letras en mayúscula.
• Ascendente y descendente: lo que sobresale por arriba (como en la v) o lo que cae por debajo de la línea base (como en la p).
• Serifa: el tipo de acabado de la letra.

¿Qué diferencia hay entre serif y sans serif? Una sans serif tiene acabados rectos, sin decoración. Una serif incluye pequeños remates decorativos al final de los trazos. La elección depende del producto, del público y del tamaño al que se va a leer.

¿Cómo elijo entre serif y sans serif?

Piensa en el contexto de uso [02:00]. Si tu producto necesita leerse en tamaños pequeños dentro de una interfaz, una sans serif suele dar más limpieza. Si buscas un tono editorial o más clásico, una serif aporta carácter. No hay regla rígida: hay decisiones de marca y legibilidad.

¿Qué propiedades tipográficas debo controlar en Figma?

En Figma vas a manipular cinco propiedades principales que aparecen en el panel derecho cuando seleccionas una capa de texto [04:30]. Cada una afecta cómo se ve y se lee tu contenido.

• Familia: el tipo de letra (Roboto, Garamond, Times, Helvética).
• Tamaño: el tamaño de la letra en píxeles.
• Peso: los niveles de grosor disponibles, como regular, semibold o bold. Cada familia trae sus propios pesos.
• Interlínea: la distancia entre las líneas base de un párrafo.
• Espaciado: la separación entre caracteres, también conocido como tracking.

¿Cuál es la interlínea ideal para buena legibilidad? Multiplica el tamaño de la tipografía por 1,4 a 1,6. Si tu texto está en 12 px, una interlínea entre 16 y 20 px te dará una lectura cómoda.

¿Cómo afecta el peso a la jerarquía visual?

El peso es tu herramienta para crear contraste sin cambiar de fuente. Un titular en bold con un cuerpo en regular genera jerarquía clara y mantiene la consistencia visual. Si la familia que elegiste no tiene suficientes pesos, vas a sentir limitaciones rápido.

¿Cómo funciona el flujo del texto en Figma?

Cuando dibujas una caja de texto, Figma te ofrece tres modos de comportamiento que cambian completamente cómo se adapta tu contenido [09:30]. Saber cuál usar te ahorra horas de ajuste manual.

• Auto width: el ancho de la caja se ajusta automáticamente a la longitud del texto en una sola línea.
• Auto height: el ancho queda fijo y la altura se adapta a la cantidad de texto. Es la opción más útil para párrafos.
• Fixed size: tamaño fijo de la caja, sin importar cuánto texto pongas.

Después de elegir el modo, defines la alineación. Horizontalmente puedes alinear a la izquierda, al centro o a la derecha. Verticalmente, si tu caja es más alta que el texto, puedes anclar el contenido arriba, al medio o abajo.

¿Cuándo conviene usar auto height en Figma? Cuando trabajas con párrafos o bloques de contenido variable. La caja crece o se reduce según el texto y mantienes el ancho controlado para tu maquetación.

¿Cómo pego texto sin perder formato?

Si haces clic con la herramienta de texto y pegas, Figma genera una sola línea larga, incómoda de manejar. La alternativa es dibujar primero un área con la herramienta de texto y luego pegar dentro: el contenido respeta el ancho que definiste y empieza a fluir como párrafo.

Para textos de prueba puedes copiar Lorem Ipsum desde una web, aunque más adelante vas a descubrir plugins de Figma que automatizan este paso.

¿Qué beneficios trae la cuenta educacional de Figma en Platzi?

Como miembro de Platzi tienes acceso a la cuenta de Figma Educacional por dos años, que incluye proyectos ilimitados, historial ilimitado y usuarios ilimitados en un solo proyecto. Es una ventaja real cuando estás aprendiendo y quieres practicar sin restricciones.

Ahora te toca a ti: elige la combinación de fuentes que mejor se adapte a un jardín de infancia, un banco y un restaurante. Comparte tu selección en los comentarios y cuéntame por qué la elegiste.