Por @Alvy

De squircles y cuadrados redondeados

Liz y Kasturi examinaron la cuestión de los squircles y los cuadradados redondeados, un pequeño gran matiz de diseño que hace que estas formas geométricas se vean mejor y resulten más agradables a simple vista. Ya me sorprendió saber que squircle no tiene una traducción directa más allá de «cuadrado redondeado». Pero también que detrás haya tanta fórmula geométrica y curiosidades.

Las definiciones en la Wikipedia dicen que un squircle es «una forma intermedia entre un cuadrado y un círculo» y más allá todo depende de si se definen como una superelipse, la fórmula del squircle de Fernández-Guasti (que proviene de la óptica) el cuadrado redondeado o el círculo truncado.

Una forma interesante de entender la diferencia es superponer y restar las superficies de una y otra figura; la leve cantidad que no se solapa es la clave de su agradable redondez.

Entre sus usos como formas cotidianas están el aspecto de los iconos e interfaz de iOS, de algunas rotondas, platos, esferas de relojes, velocímetros e indicadores de coche y cosas así. Dicen que psicológicamente captamos más rápido las formas rendondedas suaves que las abruptas y picudas, así que quizá por eso resultan tan gozosos como visualmente placenteros.

Relacionado:

Compartir en Flipboard Publicar
PUBLICIDAD


Por @Alvy

El subrayado como vestigio de las máquinas de escribir

Dicen en Butterick’s Practical Typography que el subrayado es un vestigio de la era de las máquinas de escribir. Como antiguamente las máquinas mecánicas no podían cambiar de tipo de letra, no había negrita ni cursiva, así que la única forma de resaltar algo era volver atrás y teclear guiones bajos a modo de subrayado. (¿Será ese también el origen del _ guión bajo? Mmmm…

Sirva esto como excusa para recomendar este estupendo libro que puede leerse online. No solo eso, además excelentemente maquetado con textos e imágenes explicativos: los símbolos tipográficos, el formato del texto, algunas recomendaciones… No hay que olvidar que aunque hace alguna que otra mención a los navegadores web está más bien pensado para la tipografía de materiales impresos como libros, periódicos o folletos. Por eso también hay que tomarse las recomendaciones desde esa perspectiva.

En los navegadores web tenemos más suerte, porque se pueden usar varias opciones como text-decoration: underline; y luego variar el estilo, color, grosor, etc. con más parámetros e incluso combinaciones como text-decoration-style: solid / double / dotted / dashed y otras.

Como el libro es gratis admite donaciones o también que le compres alguna tipografía al autor si te saca de un apuro o te enseña más que los profesores de clase.

Relacionado:

Compartir en Flipboard Publicar
PUBLICIDAD


Por @Alvy

Guerra eterna: Arial vs. Helvetica. ¿Inspiración o copia. Diseñadores y tipógrafos no se ponen de acuerdo

Los mundos de la tipografía son una auténtica madriguera de conejo en la que cuanto más investigas más recovecos descubres. Por eso es imposible leerse este antiguo artículo de Emma Davis titulado La Historia de Arial: sin aprender algo nuevo sobre tipografía.

El hecho cierto es que Arial fue posterior y Helvética la «original», aunque el artículo se remonta a la famosa Johnston Sans, diseñada en 1916 por Edward Johnston para como tipografía del metro de Londres y que todavía hoy en día se utiliza en toda la señalética. Pero incluso antes de eso la primera tipografía «de palo» se considera que es la Caslon Egyptian, creada en 1816 por William Caslon IV.

La popular Helvética data de 1957 y fue creada por Max Miedinger y Eduard Hoffmann en Suiza, y su nombre original fue distinto, porque se consideraba una ampliación de la Akzidenz-Grotesk, aunque luego Linotype la renombró como Helvética que sonaba mucho más internacional. Se considera una de las más neutras, legibles y versátiles, y quizá por eso tanto ella como la Johnston Sans han llegado hasta nuestros días.

Arial en cambio fue creada en 1982 por Robin Nicholas y Patricia Saunders para Monotype. Fue diseñada porque IBM necesitaba una fuente como la Helvética para sus impresoras láser IBM 3800-3, pero sin tener que pagar derechos de licencia. Así que las proporciones se mantuvieron pero los trazos y formas de las letras se variaron ligeramente. Son tan similares que hasta se han creado irónicos juegos para ver quién es capaz de distinguir una de otra. Incluso incorporada en los logotipos es difícil ver la diferencia.

Apple no fue menos: la tipografía Geneva del Macintosh original también estaba «inspirada» en Helvética, igual que Mónaco lo estaba en Courier y New York en Times New Roman.

¿Cómo distinguir Arial de Helvética? Las diferencias entre ambas son sutiles, pero están ahí para quien quiera o pueda verlas. En Arial los trazos tienen terminaciones en ángulo, mientras que en Helvetica son horizontales. La letra «a» de Arial es más sencilla y no tiene cola. En Helvética la «G» tiene un rasgo de caída en el final en flecha. Y la «R» hace una pequeña curva en su pata derecha. Además hay algunos otros pequeños detalles.

En general puede decirse que algunos diseñadores con alto grado de «pureza» en sus almas consideran la Arial una simple imitación de Helvetica. En cambio otros la consideran una original evolución funcional adaptada a las necesidades tecnológicas de su época: pantallas con más resolución, impresoras láser, móviles, etcétera. Un debate en el que ambos bandos siguen enfrentados en una especie de guerra eterna que por suerte es sólo con plumas y lápices de diseño.

Relacionado:

Compartir en Flipboard Publicar
PUBLICIDAD


Por @Alvy

Un archivo de webs catalogadas como inspiración de ideas de diseño web

Sitios como este Catálogo de inspiración para diseño webs son de esos lugares para ver qué se cuece en el mundo del diseño, tomar ideas inspiradoras y pasar el rato.

No he calculado cuántas webs han catalogado, pero diría que cientos de ellas. Están divididas por categorías de sectores como los servicios, herramientas, apps… Y subcategorías como agencias, portafolios, inteligencia artificial, tecnología, márketing, productividad… Un poco de todo.

Aparte de eso cada web está etiquetada con diversos tags. Lo que permite filtrar por esas etiquetas según su estilo, tipo de imágenes y atributos. Un ejemplo sería buscar webs Minimalistas, con Fotografías y Tipografías grandes. El resultado es una bonita selección, que en este caso –tal vez por la falta de ideas de esta época del diseño– todo parece Helvetica bold, o variantes muy cercanas.

Se puede pasar un rato ojeando diseños y viendo algunas de las ideas. Haciendo un clic en Explorar sitio se puede visitar la web original, y por lo que he visto están bastante frescas.

Relacionado:

Compartir en Flipboard Publicar
PUBLICIDAD