Type Scale es una especie de muestrario de escalas tipográficas muy práctico que conviene tener a mano. Lo que hace lo hace estupendamente: mostrar un tipografía a diferentes tamaños con ciertas escalas y generar el código CSS necesario para añadir a cualquier página web y poder usarlo.
La forma de usarlo es tan sencilla como elegir opciones en el menú de la izquierda:
- Base Size es el tamaño básico del texto que normalmente son 16 píxeles de altura, equivalentes a un 100% del tamaño estándar o, lo que es lo mismo 1 em (espacio eme).
- Escala contiene algunas proporciones típicas: que van desde 1,067 (llamada «segunda menor») a 1,618 (la razón áurea). Elegir una u otra es una cuestión puramente de proporciones visuales y estilo; simplemente es un factor multiplicador.
- Google Font es la tipografía de Google elegida, que además viene muy bien como catálogo rápido para ver el aspecto de diversas fuentes a distintos tamaños.
- Weight es el peso (grosor) que puede ir de 100 (extrafina) a 900 (ultracondensada) y normalmente es 400 (redonda), aunque no todas las tipografías tienen disponibles todos los pesos.
- Preview Text es el texto de ejemplo, que se puede cambiar.
- Grab the CSS es el botón que muestra el código CSS que habría que copiar-y-pegar en la cabecera de la página o el archivo .css donde se guarden los estilos para poder usarlos tal y como se ve.
Abriendo la pestaña de la derecha (<) se pueden ver más efectos sobre el texto, por ejemplo elegir una tipografía para los encabezados (h1, h2 etcétera) y otra para el texto, variando pesos e interlineados. Si se utiliza Google Chrome una buena forma de comprobar si los parámetros elegidos son correctos es pulsar Comando+Mayúsculas+I (Mac) o Control+Mayúsculas+I para mostrar el panel de inspección. En la parte de arriba se puede cambiar el dispositivo (pantalla de ordenador, teléfonos, tabletas…) y ver una simulación bastante realista de cómo quedaría la cosa.
(Vía Smashing Magazine.)
