Dominar la tipografía es una de las decisiones más determinantes cuando diseñas un producto digital. Elegir la familia correcta, definir una escala coherente de tamaños y pesos, y comprender cómo se comporta el texto dentro de una herramienta como Figma marca la diferencia entre una interfaz legible y una que genera fricción. A continuación se desglosan los fundamentos que necesitas para tomar esas decisiones con criterio.
¿Qué elementos componen la anatomía de una tipografía?
Antes de elegir cualquier fuente conviene entender las cinco partes esenciales que definen su estructura [0:55]:
- Línea base: es la línea invisible sobre la que se apoyan la mayoría de las letras. Los trazos descendentes —como el de la letra "p"— se extienden por debajo de ella.
- Altura de minúsculas (x-height): mide en píxeles cuánto ocupa verticalmente una letra minúscula.
- Altura de mayúsculas: el mismo concepto aplicado a las letras mayúsculas.
- Ascendente y descendente: el ascendente es la porción de una letra como la "b" que sobresale por encima de la altura de minúsculas. El descendente es la parte de una letra como la "p" que cae por debajo de la línea base.
- Serifa: define el acabado visual de cada carácter. Una tipografía sans-serif presenta terminaciones rectas y limpias, mientras que una tipografía con serifa añade pequeños remates decorativos en los extremos de los trazos [2:18].
La elección entre sans-serif y serifa depende del público objetivo, del tamaño en el que se mostrará el texto y del tono que busca el producto.
¿Cuáles son las propiedades principales de la tipografía?
Una vez que conoces la anatomía, necesitas controlar cinco propiedades clave [3:00]:
- Familia: el nombre de la fuente que utilizas —Roboto, Garamond, Helvetica, Times, entre otras—.
- Tamaño: la dimensión en píxeles o puntos de cada carácter.
- Peso: el nivel de grosor del trazo. Puede ir desde light hasta bold, pasando por regular y semi-bold. No todas las familias ofrecen la misma cantidad de pesos disponibles.
- Interlínea (line-height): la distancia vertical entre las líneas base de un párrafo. Una regla práctica para lograr buena legibilidad es multiplicar el tamaño de la tipografía por 1.4 a 1.6 [6:25]. Por ejemplo, si el tamaño es 12 px, la interlínea debería estar entre 16 y 20 px aproximadamente.
- Espaciado (letter-spacing): el espacio horizontal entre cada carácter. Ajustarlo influye directamente en la densidad visual del texto.
¿Cómo afecta el espaciado entre párrafos?
Además del espaciado entre caracteres, existe el espaciado entre párrafos [7:10]. En Figma se configura de forma independiente y permite separar bloques de texto sin alterar la interlínea interna de cada párrafo.
¿Cómo se maneja la tipografía dentro de Figma?
Para crear texto en Figma basta con seleccionar el icono T en la barra de herramientas o pulsar la tecla "T" en el teclado [4:20]. Al hacer clic sobre el canvas se genera una caja de texto editable. La barra de propiedades de la derecha se adapta de forma inteligente: cuando seleccionas una capa de texto, muestra todas las opciones tipográficas disponibles.
¿Qué modos de flujo de texto existen?
Figma ofrece tres modos para controlar cómo se comporta la caja de texto [8:30]:
- Auto width: el ancho de la caja se ajusta automáticamente al largo de la línea de texto. Todo el contenido se muestra en una sola línea.
- Auto height: la caja respeta el ancho que definas y la altura crece o se reduce según la cantidad de texto. Es la opción más recomendable para párrafos largos.
- Fixed size: tanto el ancho como la altura permanecen fijos, sin importar cuánto texto introduzcas.
¿Cómo se alinea el texto horizontal y verticalmente?
La alineación horizontal permite colocar el texto a la izquierda, al centro o a la derecha de la caja [9:40]. La alineación vertical cobra relevancia cuando la caja es más alta que el contenido: puedes posicionar el texto en la parte superior, en el medio o en la parte inferior del contenedor.
Como reto práctico, elige la combinación de fuentes que mejor se adapte a tres escenarios muy distintos: un jardín de infancia, un banco y un restaurante. Comparte tu selección y la razón detrás de cada decisión en los comentarios.
