Cinco herramientas para crear una escala tipográfica

Cinco herramientas basadas en la web para crear y visualizar una escala tipográfica para el diseño de páginas

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.

Modular Scale de Tim Brown
Modular Scale de Tim Brown

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.

Gridlover de Tuomas Jomppanen y Ville Vanninen
Gridlover de Tuomas Jomppanen y Ville Vanninen

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.

Scale & Rhythm de Iain Lamb
Scale & Rhythm de Iain Lamb

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.

Type Scale de Jeremy Church
Type Scale de Jeremy Church

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.

Typecast de Monotype
Typecast de Monotype

Cinco herramientas para presentaciones

Con el aumento de las prestaciones de los programas en línea, cada vez dependemos menos de los programas de escritorio. Este es el caso de los programas para elaborar presentaciones, que ahora nos permiten editarlas desde cualquier dispositivo conectado a la red, almacenarlas en la nube y compartirlas fácilmente en las redes sociales. Las siguientes herramientas cumplen con estas características y algunas más.

1. Emaze

Emaze es un programa en línea, fácil de usar y con resultados muy atractivos, sobre todo cuando aprovechas las ventajas que te dan las plantillas prediseñadas. Emaze te permite insertar texto, imagen y multimedia; además, cuenta con una buena librería de formas y gráficos que puedes integrar a tus diapositivas. Las transiciones le agregan suficiente dinamismo a tu presentación.

Ejemplo de plantilla en Emaze
Ejemplo de diapositiva en Emaze

2. Google slides

Entre las aplicaciones que obtienes al abrir una cuenta en Google se encuentra Google slides, un programa para elaborar presentaciones. Google slides te permite diseñar las diapositivas y aplicar transiciones entre ellas. Tiene la ventaja de comunicarse fácilmente con otras aplicaciones de Google; puedes, por ejemplo, insertar videos de Youtube, anidar la presentación en Blogger y acceder a tu presentación vía Google Drive.

Interfaz de usuario de Google slides
Uno de los temas de Google slides

3. Prezi

El espacio de trabajo en Prezi es un lienzo infinito donde puedes colocar marcos con texto, imágenes y multimedia; los marcos se unen por medio flechas. Para ir de un marco a otro, puedes utilizar una herramienta que simula el zoom, el paneo o la rotación de una cámara de video. Prezi cuenta con plantillas prediseñadas, pero si no te convence ninguna, puedes abrir una presentación en blanco.

Espacio de trabajo de Prezi
Presentación en blanco de Prezi

4. Slides

Slides es un programa que cuenta con una serie de estilos prediseñados para las presentaciones y con las herramientas básicas para editarlas. Permite insertar imágenes y enlaces. La disposición de las diapositivas no es completamente lineal ya que es posible agregar nuevas diapositivas debajo de la secuencia principal. Una opción útil e interesante es aquella que permite editar las diapositivas en HTML.

Interfaz de usuario de Slides
Espacio de trabajo en Slides

5. Swipe

Swipe es un programa en el que, además de diseñar las diapositivas con texto, imagen y video, puedes insertar encuestas (polls) para que los asistentes a tu presentación las contesten en tiempo real y enseguida puedas ver los resultados. También permite a los asistentes ver la presentación en sus dispositivos al ritmo en que el presentador pasa las diapositivas. Una ventaja es que el contenido de las diapositivas se ajusta a cualquier pantalla.

Barra de herramientas en Swipe
Barra de herramientas en Swipe

Cinco generadores de esquemas de color

Cuando tienes un color base y quieres combinarlo con otros colores de manera que el resultado sea visualmente atractivo, lo que necesitas es un generador de esquemas de color (color scheme generator). Un esquema de color puede ser monocromático o policromático, complementario o análogo. Hay en línea algunos programas que te pueden ayudar a elegir tu paleta de colores.

1. Hex Color Scheme Generator

Si no quieres complicarte la vida probando varios esquemas, Hex Color Scheme Generator es tu herramienta. Introduces el código hexadecimal de tu color y te devuelve tres códigos de color con sus respectivas muestras. Si lo que tienes son los valores RGB de tu color, el sitio tiene un convertidor RGB a código hexadecimal y HSV.

hex_color
Hex Color Scheme Generator

2. Color Calculator

Color Calculator es un generador muy fácil de usar. Sólo tienes que entrar a la página y te indica paso a paso lo que tienes que hacer. Selecciona un color, elige uno de los seis esquemas de color y ve los resultados. Cuando estés satisfecho, obtén tu esquema en forma de tabla con los valores hexadecimal, RGB y CMYK de tus colores, además de las muestras.

color_calculator
Color Calculator

3. Paletton – The Color Scheme Designer

En Paletton puedes introducir el valor hexadecimal de tu color base o usar el marcador de la rueda hasta encontrar uno antes de probar con cada esquema. Puedes visualizar una colección de muestras del lado izquierdo (presets) y una serie de previsualizaciones del lado derecho; la más útil es la que dispone los colores de tu esquema como si se tratara de una página web (examples).

paletton
Paletton – The Color Scheme Designer

4. Color Wizard – Colors on the Web

Color Wizard te permite ingresar el código hexadecimal de tu color base, manejar los deslizadores del control RGB o aún probar con el botón aleatorio. Obtienes, además de los clásicos esquemas de color, los códigos de las variaciones de tono, saturación, tinta y sombra. El espacio de la interfaz de usuario está bien aprovechado para comparar las muestras de los esquemas de color y de las variaciones.

color_wizard
Color Wizard – Colors on the Web

5. ColorHexa

ColorHexa es el generador para aquellos que se sienten mejor manejando código. Ingresas el valor hexadecimal, el valor RGB o el nombre de un color y te devuelve toda la información relacionada: conversiones, esquemas y alternativas del color; sombras, tintas y tonos; simulaciones para personas con algún tipo de ceguera al color; y, además, el código HTML y CSS para texto, borde y fondo, con su respectiva previsualización.

color_hexa
ColorHexa