Una de las primeras tareas cuando diseñas una publicación, impresa o en línea, es seleccionar la tipografía y el tamaño para el cuerpo del texto. Si quieres tener una página con una clara jerarquía de información, entonces eliges cuerpos mayores para los diferentes niveles de encabezados. La mejor manera de hacer esto es por medio de una escala tipográfica.
Una escala tipográfica es una secuencia de números que se relacionan entre sí de manera significativa. Para obtener una escala se toma un número base (12 px, por ejemplo) y se multiplica por un factor de escala (1:1.618, por ejemplo). Los números que resultan sirven para definir el cuerpo de los encabezados pero también el interlineado, el ancho de la columna o los márgenes. En línea hay herramientas que te pueden ayudar a crear y visualizar tu propia escala tipográfica. Aquí te presentamos cinco.
1. Modular Scale
Modular Scale es una herramienta que, a partir de un número base y después de seleccionar una entre casi una veintena de proporciones, despliega una escala en forma de líneas de texto en diferentes tamaños (hacia arriba y hacia abajo del número base). La herramienta cuenta con la opción de adicionar otro número base u otra ratio para complementar la escala. En la misma página puedes vincularte al artículo y al video del autor sobre el tema.
2. Gridlover
Gridlover cuenta con tres deslizadores en la parte superior de la interfaz que corresponden al tamaño de la tipografía, al interlineado y al factor de escala. Manipulando los deslizadores puedes visualizar enseguida los cambios en el ritmo vertical del texto. Las líneas base del interlineado son visibles y puedes introducir algunos cambios directamente en el código CSS que aparece a la derecha de la pantalla.
3. Scale & Rhythm
Iain Lamb escribió un ensayo para describir cómo se relacionan los conceptos de escala y ritmo tipográficos. Además del ensayo, incluyó una herramienta que permite modificar los valores predeterminados de la página. Cuando se arrastran las cajas con los encabezados (h1, h2, h3) al nivel de escala seleccionado, cambia la apariencia de la página. Un algoritmo mantiene el ritmo vertical del texto y una ventana proporciona el código CSS resultante.
4. Type Scale
Type Scale es una herramienta con la que puedes modificar la línea de texto, el tamaño base de la tipografía y el factor de escala. Cuenta con ocho escalas preestablecidas y la posibilidad de personalizar la escala. En el texto de muestra, a la derecha de la pantalla, puedes cambiar la familia tipográfica de los encabezados, el color de la fuente y el color de fondo. También puedes buscar otras fuentes en Google Fonts y editar el código HTML y CSS en CodePen.
5. Typecast
Pero si ya tienes tu escala tipográfica, Typecast te ayuda a probar con todos los cambios que quieras hacerle: tipografía, tamaños de texto y encabezados; colores de fuente y fondo; márgenes y bordes. Una de las ventajas de Typecast es la de diseñar páginas con estructura semántica. Typecast, además, te permite bajar los códigos HTML y CSS o guardar tu proyecto como imagen. Una prestación interesante es que puedes visualizar tu propia guía de estilo.
