TypeStax es un curioso complemento tipográfico para diseñar escalas tipográficas completas. En otras palabras: para ver cómo quedan los diferentes elementos tipográficos en la web (h1, h2, h3, line-height, font-weight, letter-spacing, etcétera) una vez aplicados. ¿Lo más divertido? Todo funciona como si estuvieras en un estudio de sonido de los años 80: con botones, deslizadores y diales.
Este proyecto del diseñador Rahul Hareendran está pensado para usarse en pantallas de escritorio, aunque también muestra algunos ajustes de texto para móviles.
Para usarlo basta definir un tamaño base (normalmente, 16px) y luego la proporción de escala para ver qué tamaños corresponden a cada nivel de encabezado (h1, h2, etc.) Con los valores por defecto los encabezados van desde los 19,2 px del h6 hasta los 47,8 px del h1; entre medias aparecen 23,0, 27,6, 33,2 y 39,8 px. También se muestran un par de ellos más pequeños, de 14,6 y 13,3 px.
El botón de la parte superior izquierda permite cambiar al azar las combinaciones de tipografías usadas, que con Browse Typefaces Combos se pueden examinar, guardar, filtrar y demás. Diría que todas las fuentes provienen de Google Fonts y que son libres.
Además de los tamaños, TypeStax permite ajustar por separado la tipografía de títulos y del cuerpo del texto con variaciones como el peso (de ultra-light a ultra-negrita), el interlineado, el espaciado entre letras y palabras… También se pueden cambiar los colores y patrones de fondo.
Relacionados:
- Una escala tipográfica visual que sirve como catálogo de Google Fonts
- Type Anything: una forma simple de maquetar tipográficamente
- Fuentes variables, un catálogo visual e interactivo
- Las tipografías web de Google
- Google Sans Flex: la tipografía variable «corporativa» de Google
- ¿Cuál es el número óptimo de caracteres por línea
- Las tipografías más adecuadas para números






