Como diseñadores, parece que nunca tenemos suficiente tipografías en nuestro catálogo personal. Seamos diseñadores gráficos o web, estamos en una continua búsqueda de las mejores fuentes para cada proyecto en particular y, por supuesto, cuales son las mejores combinaciones. Y entre todo este universo, las tipografías handwritten son una de las mejores opciones para conseguir una apariencia original y destacada.

Para los que no estéis habituados a ellas, las tipografías handwritten, o a mano alzada, son aquellas que parecen que estén escritas a manos. Suelen tener un aspecto más orgánico, e incluso en ocasiones desordenado, lo que puede sernos de utilidad en ciertos escenarios. Pero, sobre todo, gracias sus trazas irregulares, serán un punto de atención en tu diseño.

¿Dónde usar de forma correcta las tipografías handwritten?

Eso si, no hay que olvidar que no es adecuado usar este estilo de tipografía a la ligera. Por su estilo tan particular, lo ideal es utilizarlo para encabezados con pocas palabras. No debemos usarlas en cuerpos de texto, ya que no suelen ser muy legibles. También son perfectas para composiciones de imágenes y textos, en los que estos últimos queremos que tengan gran potencia.

Otros sitios donde podemos usar las tipografías handwritten es en logos, emblemas, posters, postales… Incluso, como hacemos en SiloCreativo, en calendarios. Las posibilidades son múltiples, al igual que el catálogo existente de este tipo de fuente. Por lo que, sin más tardanza, vamos a mostraros algunas de nuestras favoritas.

Pacifico

Posiblemente mi favorita de esta lista. De hecho, seguro que os la habéis encontrado en algún que otro artículo de SiloCreativo. Y es que no es casualidad que sea una de las más descargadas en Google Fonts. Pacífico destaca por sus líneas gruesas y redondeadas, con detalles curiosos como la terminación de la o minúscula, o el lazo que forma la t minúscula. Recomendable para conseguir un aspecto amable, o para usarla en temáticas infantiles.

Charlotte

Charlotte tiene un aspecto mucho más elegante y sofisticado. Tiene un trazo mucho más fino, que cambia de grosor según la posición de la grafía, dando a impresión de estar escrita con pluma estilográfica. Encajará perfectamente en elementos como invitaciones de boda y sitios web relacionados con la moda y lifestyle.

Silently

Siletly también apuesta por un trazo fino, pero se diferencia por ser una tipografía mucho más vertical. Tiene detalles interesantes, como por ejemplo como se cruzan unas letras con otras. Esto le da una vibración más interesante y espontánea para los que buscan una fuente que se acerque lo máximo posible a la escritura a mano.

Marck Script

Podríamos afirmar que Marck Script es la tipografía más legible de este listado. Esto es gracias a la separación existente entre cada carácter. Eso si, no pierde la esencia handwritten gracias a particularidades como la rotura en la línea que se produce dentro de algunas grafías. Ideal si buscas una fuente a mano alzada, pero quieres conservar parte de la legibilidad del texto y que no se pierda tu mensaje.

Arsilon

Lo primero que destaca en Arsilon es que parece estar escrita con un pincel o una brocha de pintura. Su trazo irregular, en donde hay partes donde se puede ver el fondo tras el texto, la hacen perfecta para que destaquen tus textos. Sobre todo si la usas en grandes formatos.

Brusher

Si buscas un estilo que se acerque a la escritura mediante un rotulador, deberías tener en cuenta a Brusher. Como decíamos con Charlotte, el grosor de su trazo va variando, pero aquí tenemos una tipografía mucho más amable e informal. Además, puede ser usada perfectamente para simular una negrita.

Satisfy

Satisfy esta pensada para aquellos que quiera una fuente handwritten pero sin muchos artificios. Esto hace que sea bastante legible comparadas con otras, y que da un aspecto más contundente a gran tamaño. Tiene un estilo más informal, pero sin caer en tonos tan infantiles.

Estas son las tipografías handwritten que queríamos mostraros en este artículos. Pero no son más que una pequeña muestra de los que podemos encontrar, y que esperamos que os sirva de punto de partida para inspiraros y encontrar la que más encaje en vuestros proyectos.

Y vosotros, ¿tenéis alguna tipografía handwritten favorita?. ¿Soléis usarlas en vuestros proyectos, ya sean personales o profesionales?. Como siempre, tenéis disponibles los comentarios para hacernos llegar vuestras dudas y experiencias con este estilo de tipografía.

La entrada 7 Tipografías estilo Handwritten para inspirarte se publicó primero en Silo Creativo.

De vez en cuando necesitamos tomar un descanso de nuestra tarea habitual como diseñadores. Pero si eres de los que, incluso en su tiempo libre no puedes parar de pensar en tipografías y colores, seguro que te gustará los juegos que hemos encontrado pensados especialmente para diseñadores. Y es que con estos juegos no solo podrás pasar un buen rato y competir con tus amigos y compañeros, sino que pondrás a pruebas tus habilidades como diseñador, a la vez que mejoras tus aptitudes durante la pausa para el café. Puede parecer que exagero, pero una vez los pruebas podrás comprobarlo por ti mismo.

Estos juegos se centran en tres campos: las tipografías, los colores y tus habilidades con el dibujo vectorial. Capacidades esenciales para cualquier diseñador y de las hemos hablado en muchas ocasiones en SiloCreativo. Pero en esta ocasión lo haremos de forma más distendida. A menos que seas un competidor nato, y quieras mostrarnos tus mejores puntuaciones!.

Kern Type

La finalidad de Kern Type es sencilla: tienes que conseguir que un texto sea legible modificando el interlineado entre las letras. Una vez lo hagas, podrás comparar tu solución con la correcta, y ver tu puntuación según tu grado de acierto. Una buena manera de comprobar tu buen ojo con respecto a la legibilidad de tus textos.

Hex Invaders

Posiblemente sea el que más se acerca a un videojuego real. Y es que Hex Invaders deja bastante claro desde su propio nombre a que nos vamos a enfrentar. Solo que esta vez, nos darán un código de color HEX, y tendremos que disparar al marcianito de dicho color. Tendremos un tiempo limitado, y si fallamos los marcianitos bajarán a mayor velocidad. Pon a prueba tu conocimiento sobre los colores y tu rapidez para reconocerlos.

Color Method

En Color Method tenemos que poner toda nuestra destreza a fondo para poder emparejar el color que nos proponen buscando en una rueda de color. Incluso podemos complicarlo aun más, intentando igualar colores complementarios y análogos, entre otros. Tu sensibilidad con los colores puesta a prueba.

The Bézier Game

¿Cómo se te da el manejo con las curvas Bézier en tu programa de diseño vectorial favorito?. Espero que bien, porque en The Bézier Game tendrás que dibujar una figura con curvas Bézier de diferente complejidad, y podrás ir comprobando cuanto eres capaz de acercarte al modelo.

Type Connection

Si te gustan las combinaciones de fuentes, este es tu juego. En Type Connection tendrás que ir emparejando tipografías, casi como si fuese un programa de citas, basándote en diferentes principios. No solo te servirá para saber si eres bueno haciendo combinaciones de fuentes, sino que podrás descubrir alguna que otra nueva que añadir a tu colección.

Shape Type

Otro juego con el que manejaremos curvas bézier. Pero en esta ocasión se complica aun poco más, ya que en Shape Type , además de saber manejar este tipo de curvas con total precisión, tenemos que adivinar la forma de una tipografía. Se unen nuestra destreza dibujando vectores con el conocimiento tipográfico.

Pixact.ly

¿Te vez capaz de dibujar a ojo un cuadrado con cierta altura y anchura en píxeles?. Esto es lo que nos proponen desde Pixact.ly, y aunque pueda parecer sencillo, se puede convertir en todo un desafío. Ideal para jugar con aquel compañero que todos tenemos que es capaz de notar cuando un elemento no tienen la altura en pixeles del diseño con solo mirarlo. Con práctica podrás convertirte en un maestro del pixel.

Como hemos podido ver, podemos pasar un rato entretenido comprobando nuestras habilidades como diseñadores e intentando mejorarlas con estos sencillos juegos. Una excelente manera de pasar un buen rato, e incluso competir con nuestros compañeros para saber quien obtiene la mejor puntuación.

¿Qué os han parecido estos juegos?. ¿Se os han dado mejor o peor de lo que esperabais?. Como siempre, tenéis los comentarios disponibles para que nos escribáis lo que queráis, o nos recomendéis otros juegos para diseñadores que conozcáis!

La entrada 7 Juegos para Mejorar tus Habilidades como Diseñador se publicó primero en Silo Creativo.

En SiloCreativo nos encanta descubrir nuevas tipografías que poder añadir a nuestra biblioteca personal. Y es que teniendo un buen backlog de fuentes, hará que al enfrentarnos a nuevos proyectos sea más probable de que hagamos una elección acertada. En esta ocasión nos centramos en las tipografías geométricas, que tienen un aspecto muy original y único.

Esta clase de tipografía se caracteriza por tener unas líneas sencillas y limpias, dando un efecto low-poly que las hacen muy vistosas si se usan a gran tamaño. De hecho, muchas empresas tecnológicas, como Google, Airbnb o Spotify, saben de su potencia a la hora de dar su mensaje, y no es extraño que encontremos este tipo de fuentes en muchos de sus diseños.

Eso si, existen multitud de tipografías de este estilo, por lo que entrar en este mar puede resultar frustrante en el momento de tener que elegir alguna. Por ello hemos recopilado las 9 mejores bajo nuestro punto de vista, con cierta variedad para que podamos usarlas en diferentes ámbitos, o podamos hacer combinaciones de tipografías con alguna que solamos usar habitualmente.

Pantra Type Family

Ir a Pantra Type Family

Empezamos con Pantra, tipografía que mezcla muy bien las formas circulares con las líneas rectas y los trazos cortos. Tiene un aire a Futura, una fuente con mucha historia pero que sigue siendo muy recurrente. Viene con cuatro grosores diferentes donde elegir, según la potencia que queramos darle a nuestro texto.

Gilroy

Ir a Gilroy

Gilroy posiblemente sea la tipografía de este listado que más opciones tenga. Con hasta 20 grosores diferentes, la inclusión de 10 tipos de cursivas, e incluso soporte para otros lenguajes, como el cirílico. Además, su autor nos ofrece dos versiones (Light y ExtraBold) de forma totalmente gratuita para que podamos probarla.

Circular

Ir a Circular

Circular es una tipografía que se ha hecho muy popular en muchas aplicaciones móviles, como por ejemplo en Spotify, ya que tiene un aspecto muy amigable y fresco. Podrás localizar fácilmente esta fuente por su t tan distintiva.

Arquitecta Standard Family

Ir a Arquitecta Standard Family

Inspirada por las tipografías handwritten, con Arquitecta empezamos a tomar otro camino y comenzamos a mezclar la tipografía geométrica con un toque vintage. De hecho, una de sus principales inspiraciones son los carteles europeos de principios del siglo XX.

Gordita

Ir a Gordita

Gordita tiene influencias claras de Futura y Gotham, pero se va a un terreno más sencillo, con lineas más limpias. Si os fijáis con detenimiento, en ocasiones incluso llega a rozar el convertirse en una tipografía monoespaciada, ya que sus caracteres están muy proporcionados.

Cera Pro

Ir a Cera Pro

Si buscáis una tipografía con unas líneas menos abiertas y más compactas, Cera Pro será vuestra elección. Forma parte de la Cera Collection junto con Cera Stencil, Cera Condensed, Cera Brush y Cera Round. Esta familia toca prácticamente todos los estilos, desde los más simples hasta incluso los que incluyen texturizado. Os recomendamos que le echéis un vistazo, ya que es posible que queráis todos ellos en vuestra biblioteca personal.

Sailec

Ir a Sailec

Sailec es mi tipografía favorita de esta lista si la elección que tenemos que hacer es la de una fuente con poco peso y grosor. Se distingue del resto porque no apuesta tanto por los círculos perfecto, sino que sean un poco más ovalados, consiguiendo unos caracteres más altos y elegantes. Esto lo hace perfecto para ser utilizados en cabeceras de textos.

Olio Font Pair

Ir a Olio Font Pair

Olio seguramente sea una de las más originales de este listado. Y es que esta fuente viene con dos sabores diferentes: uno sólido y otro formado por líneas. Este último seguro que os llama la atención, y particularmente me recuerda a la tipografía usada en el logotipo de las Olimpiadas de México del 68. Por lo que si buscáis un toque retro, seguro que os gusta.

Avenir Next

Ir a Avenir Next

A pesar de haberse lanzado en 1988 bajo el nombre Avenir, esta tipografía ha tenido muchas modificaciones e incorporaciones a lo largo del tiempo, siendo la última en 2004 y que la convirtió en Avenir Next. Sus cambios más sustanciales fueron la incorporación de nuevos grosores, algunos cambios en las cursivas y la adaptación a multitud de lenguajes y caracteres. Todo ello sin perder su esencia inicial.

La entrada 9 Mejores Tipografías Geométricas se publicó primero en Silo Creativo.

El miedo al papel en blanco. El síndrome al que muchos nos hemos enfrentado cuando empezamos a diseñar una web. Desde SiloCreativo os hemos ofrecido herramientas para empezar vuestros diseños con ciertas bases y que se hagan menos cuesta arriba: como creando una paleta de colores, como usar el espacio en blanco, ideas sobre combinaciones de tipografías… Pero había un aspecto que no habíamos tocado hasta ahora, y era la elección de los tamaños de tipografía dentro del diseño web. Y para ello, tenemos la ayuda de la escala tipografía.

Como ya sabemos, dentro de una web tenemos diferentes jerarquías al designar un texto. Existen varios niveles de encabezados o headings, y párrafos. Además de su jerarquía dentro del HTML solemos darle también una diferenciación de tamaño para diferenciarlas una de otra. Es una de las claves que dimos en nuestro artículo sobre como potenciar nuestros diseños mediante el contraste.

Tenemos claro que un titular va a tener mayor tamaño que un subtítulo, y este a su vez mayor tamaño que el cuerpo del texto pero, ¿cuál es exactamente la diferencia de tamaño entre uno y otro?. ¿Nos vale cualquier tamaño de fuente, simplemente sabiendo que una es más grande que otra?. Aquí es donde entra en juego la escala tipográfica, que nos va a dar ciertas pautas al elegir los tamaños de nuestros textos, consiguiendo al mismo tiempo esa diferenciación jerárquica, pero sin crear saltos de tamaño incómodos para el lector.

¿Qué es una escala tipográfica?

Si sois usuarios habituales de software de diseño gráfico, como Adobe Photoshop o Illustrator, seguro que al elegir el tamaño de un texto dentro de estos programas, os habéis encontrado con esta lista:

Y seguro que os habéis preguntado, ¿por qué han seleccionado esos tamaños y no otros?. ¿Por que avanzamos de 16px a 18px, pero luego damos un salto a 24px?. Esto es simplemente porque hacen uso de una escala tipográfica, heredada directamente de la época en la que las máquinas de escribir eran ampliamente usadas.

La idea de esta escala es buscar cierta armonía entre los diferentes tamaños de fuentes. Se comienza teniendo un valor base, al que le iremos aplicando un valor multiplicador fijo de forma exponencial, con el que conseguiremos todos los tamaños que necesitemos.

Con la escala tipográfica conseguiremos dos metas. Por un lado, en el momento de diseñar, limitamos el hecho de tener que elegir todos y cada uno de los valores de tamaño de nuestros textos. Simplemente elegiremos uno, y obtendremos el resto a partir de él. Por otro, estaremos usando siempre unos valores hermanados entre sí de forma matemática, y que de forma inconsciente las personas que lo vean no notarán nada extraño en sus variaciones.

Una vez sabemos que es una escala tipográfica, ¿qué multiplicadores son los más indicados de usar para crear una escala correcta?. Es lo que veremos a continuación con los diferentes tipos de escala ya existentes que podemos utilizar en nuestros proyectos.

Tipos de escala tipográfica

Hay diferentes tipos de escala que podemos usar en nuestros diseños. Vamos a ver las más comunes, aunque si buscáis podéis encontrar más. En primer lugar, veamos las escalas donde no vamos a tener un salto muy grande entre cada escalón:

• Major Second – multiplicamos o dividimos el tamaño de la fuente por 1,125
• Major Third – multiplicamos o dividimos el tamaño de la fuente por 1,25
• Perfect Fourth – multiplicamos o dividimos el tamaño de la fuente por 1,33

Usando alguna de estas tres lograremos una escala tipográfica más suave, con una diferencia entre cada salto de tamaño menos contundente. Por el contrario, si vamos buscando un estilo donde haya textos con un tamaño muy grande y potente, con un contraste mucho mayor, es mejor que nos vayamos a estas escalas:

• Perfect Fifth – multiplicamos o dividimos el tamaño de la fuente por 1,5
• Golden Ratio – multiplicamos o dividimos el tamaño de la fuente por 1,618

Seguro que ha muchos os suenan estas escalas, y es que están directamente relacionadas con las escalas musicales. No era gratuito cuando decíamos que lo que buscábamos era una armonía entre los diferentes tamaños de nuestros textos.

Calculando la escala tipográfica

Conseguir la escala tipográfica es muy sencillo, ya que como hemos dicho antes, solo hay que aplicar un factor multiplicador. Por ejemplo, si tomamos que nuestro texto base va a tener 16px, y vamos a usar la escala Major Third, el siguiente tamaño de fuente será 20px (16px x 1,25), el siguiente 25px (20px x 1,25)… Y por debajo de 16px, tendremos 12,8px (16px / 1,25). Mediante estos sencillos cálculos podemos tener definidos todos los tamaños de fuentes en nuestro proyecto.

También podemos recurrir a herramientas que nos automatizan este trabajo, y que nos dejan ver de un solo clic el resultado que vamos a obtener. Una de mis favoritas es Type Scale. Simplemente deberemos asignar el tamaño base de nuestra fuente y el tipo de escala tipográfica que vamos a usar. Solo con eso ya obtenemos una previsualización completa, a la que podremos cambiar el texto, el tipo de fuente o su grosor.

Escala tipográfica y CSS

Veamos como podemos aplicar todo esto a nuestros diseños web mediante CSS. Una de las formas más sencilla es mediante es uso de variables CSS. Las variables CSS nos permiten darle una nombre creado por nosotros mismos a un valor de una propiedad CSS. Así, cuando lo utilicemos en un futuro, no debemos acordarnos del valor exacto, solo recordar el nombre que le dimos. Suele ser muy común para designar colores, ya que es más fácil retener un nombre que hayamos puesto nosotros, que un código de color HEX.

En nuestro caso, nos va a servir para no que no tengamos siempre en mente los valores de los tamaños de fuente, ya que al tener a veces decimales, serán más difíciles de recordar. La designación dada a las variables es muy personal, ya que cada uno vamos a usar una que sepamos a que se refiere. En mi caso, usare el código fs para saber que se refiere a font-size, seguido de un guión, y el tamaño de la fuente: sm para small, md para medium, lg para large, etc. Por lo que el código CSS sería así si estamos usando la escala Major Third:

:root {
   --fs-xsm: 12.80px;
   --fs-sm: 16px;
   --fs-md: 20px;
   --fs-lg: 25px;
   --fs-xl: 31.25px;
   --fs-xxl: 39.06px;
}

Una vez tenemos esto, solo tendremos que aplicar estas variables CSS a cada tipo de texto que tengamos en nuestra web. Por ejemplo, puedo asignar la variable –fs-sm a mis párrafos, –fs-xxl a h1, –fs-xl a h2, –fs-lg a h3… Ya es cuestión de gustos ver donde encaja mejor cada tamaño. Y, por supuesto, podemos aumentar la escala y agregar más variables según las necesidades de cada proyecto.

La importancia de usar una escala tipográfica

Aunque esto solo ha sido una pequeña introducción, nos puede servir para entrar en el mundillo de las escalas tipográficas. Y es que no hay una guía exacta sobre que escala es mejor. Unas encajaran mejor en webs en las que necesitemos textos a gran tamaño, otras en las que necesitemos que sean muy legibles. O incluso según la clase de tipografía, nos encaje mejor una escala que otra. También podemos optar en usar dos escalas diferentes dentro de un mismo proyecto, una para le versión en escritorio y otra para dispositivos móviles. Para esto, nos resultará muy útil el uso de media queries para colocar cada CSS en su lugar correcto.

Usar este tipo de herramientas al crear nuestros propios diseños nos servirá para siempre tener una base sobre la que construir, sabiendo que al menos, en referencia a las tipografías y los textos, vamos a conseguir cierta armonía, y evitar extraños contrastes de tamaño. Es una cuestión de experimentar por nosotros mismos, y ver webs en donde se haya hecho uso de estas escalas para comprobar como se ha utilizado y bajo que condiciones.

Como siempre, tenéis disponibles los comentarios para cualquier duda, sugerencia o experiencia que queráis compartir con nosotros, y que seguro que nos servirá como inspiración para seguir creando y creciendo!

La entrada Creando una Escala Tipográfica en Diseño Web se publicó primero en Silo Creativo.

Como sabéis, en SiloCreativo somos unos apasionados de las tipografías. Y es que la elección de una buena tipografía en cualquier proyecto siempre será un punto a nuestro favor. Desde conseguir captar la atención de los visitantes de nuestra web, a hacer que sea legible en textos largos en un proyecto impreso. En esta ocasión, queremos centrarnos en las fuentes disponibles en Google Fonts, y más concretamente en algunas de las mejores que han estrenado durante este 2020.

Siempre es bueno darnos un paseo por las nuevas incorporaciones en Google Fonts. El más evidente es encontrar nuevas tipografías que incorporar a nuestra biblioteca personal, y que seguro que encontraran hueco en alguno de nuestros trabajos. Otro motivo es que ya muchas de estas nuevas tipografías son variable fonts, sobra las que escribimos hace un tiempo en nuestro blog. Por resumir, son una clase de tipografía en las que no estamos encadenados por el peso, la inclinación de las cursivas y otras propiedades que les ha dado su creador. Podemos modificar estas opciones y más a nuestro gusto, sin ningún tipo de atadura.

Por supuesto, y como ocurre con todo el catálogo de Google Fonts, todas estas fuentes las podemos descargar y utilizar de forma gratuita, tanto en proyectos personales como profesionales. E incorporarlas de forma sencilla en nuestros diseños web simplemente escribiendo una línea de CSS. Es tan sencillo como entrar en la página de la tipografía, pulsar en Select this style, y aparecerá a la derecha un panel donde veremos el código que debemos de usar en nuestra web.

Sin mas tardanza, empecemos con este recopilatorio que hemos creado para vosotros. Hemos querido darle cierta heterogeneidad al listado, por lo que vais a encontrar tanto fuentes serif, como sans serif y tipo display. Esperamos que os sea de utilidad, y que os sirva para ampliar vuestro propio repertorio personal de tipografías.

Caladea

Ir a Caladea

Empezamos con Caladea, la única fuente tipo serif de este listado. Basada en la tipografía Cambo, destaca por sus líneas redondeadas y amigables, pero al mismo tiempo muy legible. Muy adecuada para los que quieren un aspecto formal, pero no demasiado.

• Fuente Serif.
• 4 estilos diferentes.

MuseoModerno

Ir a MuseoModerno

Bajo mi opinión, MuseoModerno tiene el aspecto más característico de todas las tipografías que os traemos hoy. Ya en su propio nombre podemos ver como se configura la letra m mayúscula, mediante trazos semicirculares muy llamativos. Y esto se traslada al resto de letras, donde desaparece casi por completo cualquier tipo de unión en ángulo.

• Fuente Display.
• Variable font.
• 9 estilos diferentes.

Spartan

Ir a Spartan

Spartan se enmarca dentro de esas tipografías que nos quieren evocar una idea de elegancia. Mediante un trazo fino y trazos muy sobrios, vendrán muy bien para tus proyectos que necesiten dar una imagen de sofisticación. Además, tenemos la opción de usarla tanto como variable font, como en cualquiera de sus 9 estilos diferentes.

• Fuente Sans Serif.
• Variable font.
• 9 estilos diferentes.

Oxanium

Ir a Oxanium

En Oxanium se unen unos trazos más futuristas, con esquinas muy duras, pero al mismo tiempo achaflanadas en otros lugares. Esto hace que tenga una imagen moderna pero no demasiado fría. En mi caso, la utilizaría en proyectos tecnológicos que requieran una imagen personal, pero que no quiera estar demasiada alejada del cliente a la que va dirigida.

• Fuente Display.
• Variable font.
• 7 estilos diferentes.

Bellota

Ir a Bellota

Uno de los características que más me gusta de Bellota son los pequeños detalles que tiene en algunas grafías, como las curvas al terminar los trazos y algunos rabitos añadidos. Esto, junto con las líneas redondeadas y suaves la hacen ideal para sitios que requieran un tono más informal, o incluso para proyectos infantiles. Por algún motivo, me recuerda un poco a los cuadernillos Rubio de ortografía tan típicos hace unos años en España, y que tenían una aspecto parecido.

• Fuente Display.
• 6 estilos diferentes.

Sansita Swashed

Ir a Sansita Swashed

Sansita Swashed tiene las formas de una de mis tipografías favoritas, Pacifico. Pero a su favor tiene dos factores muy importantes. Uno de ellos es que es bastante más legible que esta, por lo que podemos usarlo más allá de sloganes y textos en gran formato. Y la otra es que tenemos la opción de usarla como variable fonts, con todas las ventajas que eso tiene.

• Fuente Display.
• Variable font.
• 7 estilos diferentes.

Syne

Ir a Syne

Terminamos con Syne, una fuente que puede parecer a primera vista bastante usual, pero que esconde detalles muy curiosos. Si nos fijamos bien, veremos como en algunas grafías el trazo no tiene el mismo grosor durante toda la línea que la forma. Y por otro, vemos que el asta descendiente es bastante pequeño, incluso llegando a cortarse en algunas letras, como la g minúscula. Algo que no suele ser muy habitual, pero que le da un toque característico.

• Fuente Sans Serif.
• Variable font.
• 5 estilos diferentes.

La entrada Mejores Tipografias de Google Fonts en 2020 se publicó primero en Silo Creativo.

Aunque en los últimos años el uso de las imágenes y los videos cada vez está más extendido, sobre todo en la web, gracias a la velocidad de las conexiones, el contenido en formato texto sigue siendo esencial. Esto es algo que, como diseñadores, no debemos olvidar o dejar relegado a un segundo plano. Aquí es donde entran en juego el uso de las tipografías para que la navegación y la lectura sean visualmente amigables y legibles. Y las combinaciones de tipografías para crear entornos más atractivos.

Solo hay que hacer una pequeña búsqueda para ver la cantidad de artículos que hay al respecto sobre combinaciones de tipografías, incluso en Silo tenemos algunos por si os interesan. Pero en esta ocasión queremos ir un paso más allá y no daros todo el trabajo hecho, sino las herramientas con las que podáis crear vuestras propias combinaciones de fuentes.

Aunque pueda parecer una pérdida de tiempo (si, es más rápido buscar en Google, hacerse con algún listado de combinaciones y listo), conocer estos pequeños trucos no solo nos van a ayudar a ser unos diseñadores más independientes, sino a conocer como funcionan los engranajes del diseño cuando maquetamos un texto, y que hace que ciertas tipografías funcionen y otras no. Incluso saber porque una combinación puede funcionar en un blog, pero quizás no funcione en un portfolio.

Todo esto lo hemos querido resumir en siete puntos diferentes, pero con cosas en común, y que nos vana ser como punto de inicio para crear unas propias combinaciones de tipografías. No tardemos más y veamos cuales son.

Crea una jerarquía visual

Crear una jerarquía visual es algo que podemos ver ya en soporte físico, como periódicos y revistas. Factores como el tamaño de la tipografía, su grosor, el espacio en blanco que dejamos a su alrededor… hacen que podamos navegar a través del medio donde estén las fuentes, y podamos diferenciarlas fácilmente de forma visual. Y todo esto lo podemos aplicar al combinar tipografías.

Si elegimos varias en las que estás características sean demasiado similares, confundiremos al lector, y no sabrá cuales son los elementos principales y secundarios. Esto puede llegar a crearle cierta confusión, y no saber donde empieza y acaba cada una de las secciones que componen cualquier proyecto, ya sea una web, o la maquetación de un libro.

No olvides el contraste

Ya hemos hablado de como el contraste nos sirve para potenciar nuestros diseños. El contraste es un elemento que también podemos utilizar cuando vayamos a hacer combinaciones de tipografías. Y, como hemos mencionado en el punto anterior, nos va a servir para crear cierta jerarquía visual. Con contraste no solo nos referimos a que una tipografía este en negrita y otra no. El contraste también se crea entre una fuente con formas redondeadas y otra con forma poligonales y ángulos muy acusados. O que en una el espacio entre caracteres sea muy amplio, y en la otra muy pequeño.

Combina serif con sans serif

Serif vs sans serif. Este es uno de los principios básicos cuando nos disponemos a combinar tipografías, y casi podemos asegurarnos un buen resultado. Para textos muy largos, en los que primemos la legibilidad sobre la ornamentación o el impacto visual,debemos decantarnos por las serif. También son muy apropiadas para su uso en soporte físico.

Por otra parte, las sans serif son ideales para mostrar en una pantalla, ya que al tener un trazo más simple, se adaptan mejor a cualquier tipo de tamaño y resolución. Además de mostrarse de forma más clara para el ojo.

Piensa la función de cada tipografía

Es un error bastante común para aquellos que buscan las típicas listas de «las mejores combinaciones de tipografías», pero no saben muy bien como aplicarlas. Porque si, hay que reconocer que función va a tener cada tipo de fuente dentro de nuestro texto. En textos cortos, tales como titulares o textos que usamos para crear más impacto, no hay que cortarse en usar tipografías más ornamentales o que no sean muy habituales. Por ejemplo, hemos hablado en Silo sobre las tipografías estilo handwritten, que podríamos usarlas perfectamente en estas situaciones.

Por el otro lado, en los cuerpos de los textos lo principal es la legibilidad. Todo aquello que nos aleje de la velocidad de lectura, la claridad de los caracteres y, en definitiva, lo que nos sirva de distracción del contenido, deberíamos evitarlo. Aquí lo primordial es el contenido del texto, y no la forma. La elección de la tipografía en este caso no es más que un instrumento para que la lectura sea lo más cómoda posible.

No tengas demasiadas tipografías diferentes

Es habitual que vayamos aumentando nuestra biblioteca conforme vamos descubriendo nuevas fuentes que nos gustan, o que pensamos que pueden encajarnos en futuros proyectos. El problema llega es cuando queremos utilizar muchas dentro de un mismo proyecto: una tipografía para los títulos, otra para los subtítulos, otra para el cuerpo de los textos, otra para los pies de fotos, otra para algunos elementos que queramos resaltar… Debemos pararnos los pies a nosotros mismos, y evitar esta situación a toda costa.

En primer lugar, porque como diseñadores y/o maquetadores, no es una forma óptima de trabajar. Si cada vez que vamos a insertar un texto, tenemos que consultar que fuente hemos elegido para ese caso concreto, es que algo estamos haciendo mal. Y en segundo lugar, aunque el lector no tenga conocimientos sobre el mundo de las tipografías, va a notar toda esta amalgama de letras diferentes, y no será de su agrado.

Mi recomendación es siempre usar combinaciones de dos tipografías diferentes en un mismo proyecto, o a lo sumo tres. Y tener muy claro cual va a ser la función de cada una. Nos evitaremos muchos tiempos muertos a la hora de trabajar, y la lectura será más amigable.

No uses tipografías muy similares

Podemos echar por tierra todo lo ganado gracias a la creación de una jerarquía visual y el contraste si acabamos usando tipografías con líneas muy parecidas. Y con muy parecidas nos referimos a que sus proporciones son similares, o tienen ciertos caracteres casi iguales.

Para esto, lo ideal es realizar un pequeño ejercicio. Escribe varias palabras al azar con una de las tipografías, y compáralas con las mismas palabras usando la otra tipografía. Si notas que hay ocasiones en que te cuesta distinguir a que fuente corresponde cada palabra, debe encenderse una voz de alarma en tu cabeza. Y quizás deberías elegir otra combinación.

Practica (mucho) con diferentes escenarios

Lo dejamos para el final, pero es un punto importantísimo. Cada vez que crees una combinación de tipografías, testéalos en un proyecto. Ya sea alguno que hayas realizado en el pasado, o uno imaginario que crees sobre la marcha. Y que no sean todos del mismo estilo, ya que no todas las combinaciones van a funcionar bien en cualquier lugar. No es lo mismo un blog de moda, la maquetación de un manual para una escuela, o un tríptico de un evento cultural. En un SiloMag hablamos sobre UI Coach, que nos creaba de forma aleatoria proyectos web con los que practicar. Es un buen punto de partida donde poder insertar las combinaciones que vayamos creando, y ver si encajan de forma correcta.

Y con esto terminamos. Como hemos podido ver, son conceptos simples pero que deberíamos tener siempre en consideración cuando intentemos crear combinaciones de tipografías por nosotros mismo. Que no solo nos ayudará para esto, sino que nos dará cierta soltura para saber que tipos de fuentes se amoldan mejor según su función, jerarquía y contexto dentro del proyecto completo.

Esperemos que os haya resultado de utilidad y, como siempre, tenéis disponibles los comentarios para que nos hagáis llegar vuestras impresiones y experiencias. Además de poder compartir vuestras propias combinaciones de fuentes, y como habéis llegado hasta ellas.

La entrada Trucos y Consejos para Combinar Tipografías se publicó primero en Silo Creativo.

Como ya sabéis, en Silo nos encantan las tipografías. Hemos visto como realizar combinaciones para que nuestros textos sean llamativos y originales, o ver las diferentes clases de tipografías existentes, por poner un par de ejemplos. Pero una de las mejores formas de inspirarse cuando vamos a usar tipografías es ver el trabajo de otros diseñadores. Y si nos centramos en el diseño web, es conocer que tipografías se han usado en una web.

Es muy habitual entrar en una web, y notar el buen gusto con el que se han elegido las tipografías. Una fuente potente usada en un banner, o una con una buena legibilidad para textos. Son muchos las tipografías que podemos encontrar en una web según la función que cumplan, o simplemente nos gusta su estética. Y como somos curiosos por naturaleza, necesitamos saber que tipografía es, ya que es posible que podamos añadirlas en futuros proyectos.

Para esta tarea, en este artículo veremos tres métodos diferentes con los que averiguar que tipografía está usando una web. En una de ellos tomaremos una imagen como referencia, muy conveniente si lo único que tenemos es una captura de la web. En los otros dos métodos usaremos un navegador web cualquiera, tomando como referencia los tres más usados actualmente: Chrome, Edge y Firefox. Aunque es aplicable a cualquier otro.

1. Usando imágenes de la tipografía

Empezamos por este método, pero personalmente solo lo recomiendo si no tenemos acceso a la web y lo único de lo que disponemos es de una captura de pantalla, ya que es posible que no logremos dar con la tipografía exacta, sino con una muy parecida. Eso sí, es la ideal para saber que fuente usa un logotipo que esté en formato de imagen o vectorial.

La herramienta online que usaremos es la que nos ofrece MyFonts con WhatTheFont. Solo tendremos que subir una imagen a su web (preferiblemente a buena calidad y con un contraste decente), y el programa nos dirá que hagamos una selección del texto que queramos analizar. Una vez hecho esto, nos dará diferentes opciones de tipografías similares a la imagen que hayamos subido. Nuestro papel será ir viendo diferentes grafías hasta ver cual es la tipografía correcta o la más similar.

Puede resultar un proceso tedioso de realizar, o que no veamos una tipografía exacta, ya que está limitado a la biblioteca interna de WhatTheFont. Pero a veces es la única forma de realizar este trabajo si solo disponemos de una imagen.

2. Utilizando el inspector del navegador web

El inspector de un navegador web es uno de los mejores amigos de un diseñador web, pero también es una buena herramienta para un diseñador gráfico. Y esta es una de esas ocasiones en la que se le puede sacar partido. Si no estás acostumbrado a usar esta herramienta, te recomendamos que le eches un vistazo a nuestro artículo sobre como inspeccionar CSS con el navegador.

En este apartado vamos a hacer una diferenciación entre dos tipos de navegadores. Por un lado Chrome y Edge (y todos los navegadores basados en Chromium, como Opera o Brave), y por otro Firefox. Eso si, sea cual sea nuestro navegador, siempre vamos a usar el mismo atajo de teclado para abrirlo: Control+Shift+I en Windows, y Command+Shift+I en Mac, o clicando el botón derecho en cualquier parte de la web, y seleccionando en el menú desplegable Inspeccionar.

Con Chrome / Edge

Abriendo nuestro inspector, veremos que se nos abre el inspector con tres paneles. Buscamos el texto de la web del que queremos saber su tipografía, y en el segundo panel del inspector, seleccionamos la pestaña Computed. Buscamos la fila font-family, veremos que a su lado está la tipografía de dicho texto. En la siguiente imagen podéis ver la fuente que se usamos en la web de SiloCreativo.

Aparte de la información sobre qué tipografía es, encontramos su tamaño, color, peso… En definitiva, el estilo completo del texto que se está usando en la web. Esta pestaña es realmente de utilidad.

Con Firefox

En el navegador de Mozilla el proceso es similar, pero la información aparece en otra zona diferente. Y es que Firefox tiene una pestaña exclusiva solo para los estilos de las tipografías de una web. De nuevo, abrimos el inspector, y buscamos el texto que nos interesa. Si nos vamos al tercer panel, veremos que tiene una pestaña llamada Tipografía. Bastante evidente lo que vamos a encontrar ahí.

También podemos ver como es posible modificar diferentes aspectos de la tipografía directamente en la web mediante unos deslizables. Así podemos experimentar un poco por si queremos probar un tamaño de fuente diferente, espaciado, peso, altura de línea o como se ve en cursiva.

Como extra, si seguimos mirando lo que nos ofrece esta pestaña, veremos un apartado llamado Todas las tipografías de la página, donde se ofrece un listado de esto mismo. Ideal para saber que tipo de combinaciones de fuentes se están utilizando en una web.

3. Mediante plugins para el navegador

Este método lo he descubierto recientemente, pero se ha convertido en mi favorito por su sencillez. De entre todos los plugins existentes, me quedo con VisBug, por sus opciones e interfaz amigable. Una vez lo tengamos instalado en nuestro navegador, solo habrá que apretar su icono y aparecerá una barra de opciones en la parte izquierda. Si clicamos en el segundo icono (una i dentro de un círculo), solo tendremos que poner el cursor sobre cualquier texto y automáticamente nos aparecerá un tooltip con su tipografía.

Pero no solo eso, también nos dirá su color, alineación, peso, altura de línea… Una herramienta tremendamente útil para aquellos que no estén muy familiarizados con el inspector web, y quieran algo más rápido y directo, con un par de clics tendremos en pantalla toda la información.

Conclusiones

Como hemos podido ver, podemos conocer de forma sencilla la tipografía que usa cualquier web. Solo tenéis que elegir el método que más os guste o que más encaje con vuestra forma de trabajar. Y es que en muchas ocasiones, tener referentes sobre webs que sabemos que funcionan o que ofrece un diseño vistoso, y empezar con esa base, es una excelente forma de comenzar cualquier proyecto.

Si tenéis algún tipo de pregunta, sugerencia o experiencia sobre este tema, nos lo podéis dejar en la sección de comentarios. Seguro que conocéis alguna otra forma de conseguir adivinar que tipografía está usando una web

La entrada Como saber que tipografía está usando una web se publicó primero en Silo Creativo.

Ya seamos diseñadores gráficos, diseñadores web, ilustradores o fotógrafos, trabajar con imágenes en un entorno digital es algo a lo que estamos todos acostumbrados. El problema llega cuando hay que lidiar con varios conceptos al crear y tratar nuestras imágenes, que muchas veces no llegamos a dominar totalmente, y no obtenemos los resultados esperados. Términos como resolución, PPI o DPI están presentes en cualquier software de edición y a veces, ponemos el piloto automático y no las tratamos de forma correcta para el trabajo que vamos a desarrollar. Sobre esto es de lo que queremos hablar en este artículo.

Pero es que estos inconvenientes no aparecen solo si trabajamos exclusivamente en el ámbito digital. Cuando pasamos al mundo físico, al imprimir nuestra imágenes, los conceptos que hemos mencionado antes toman un cariz aun más importante, ya que hay que saber jugar con todos ellos para obtener los resultados idóneos. Y no solo eso, tampoco debemos trabajar igual según sea el soporte. No es lo mismo crear un libro de fotografía que una cartelería de varios metros. La distancia de visionado de ambas es diferente, por lo que la resolución y la definición con la que vamos a trabajar debe de ser distinta.

Como siempre, hay que empezar por lo básico. Al principio hemos nombrado los PPI y los DPI, conceptos íntimamente relacionados con las imágenes, su resolución y su definición, pero que a veces no tenemos claro cuando debemos hacer uso de ellos, y que cifras son las ideales según que queremos conseguir.

PPI (Pixels Per Inch)

PPI son las siglas de Pixels Per Inch o, en castellano, Píxeles Por Pulgadas. Por comodidad, usaremos el acrónimo inglés, ya que es el que se usa de forma global. Los PPI van a determinar cuantos píxeles vamos a encontrar en a pulgada, o 2,54cm aproximadamente. Seguro que habéis visto como se usan los PPI para determinar la definición que tiene una pantalla, desde la de un smartphone a la de una televisión. En resumen, los PPI es una relación entre la resolución de una pantalla, y su tamaño físico. La densidad de píxeles que tenemos en una pantalla.

Por ejemplo, mi monitor es de 24 pulgadas, con 1920px de ancho y 1080px de alto. ¿Cómo puedo calcular su PPI?. Simplemente haciendo esta operación matemática.

Vemos que mi monitor tiene un PPI de 91,79. Me encuentro dentro de lo habitual, ya que normalmente los monitores actuales suelen tener unos PPI entre 90 y 110. Si nos vamos a smartphones, encontramos unos PPI mucho mayores, ya que tenemos unas resoluciones muy altas en unas pantallas muy pequeñas. Y con la llegadas de monitores de altas resoluciones, como los Retina Display de Apple, cada vez es más habitual tener en escritorio PPI mayores a 300. Es decir, los PPI solo nos van a decir la definición que va a tener una pantalla. A más PPI, más definición tiene una pantalla ya que hay más píxeles en menos espacio. Pero, ¿en que nos afecta los PPI al tratar imágenes?

PPI y resolución en pantalla

Imaginemos que tenemos una imagen de 500x500px. Así se vería cada una, con un zoom del 100%, en un monitor de 1080p (1920x1080px) y en otro 4K (3840×2160), ambos del mismo tamaño.

Seguro que os habéis encontrado con este problema al ver vuestras imágenes en otro dispositivo y/o monitor. Se ven pixeladas, borrosas o demasiado pequeñas con respecto a como trabajasteis con ellas. Esto es porque las imágenes en formato digital no entienden de tamaño físico, solo de los píxeles de la pantalla donde se reproduzca. El número de píxeles, y no el PPI, es lo que va a determinar el tamaño de una imagen en una pantalla. Aquí es donde llegamos a los famosos 72 PPI.

El mito de los 72 PPI en las imágenes digitales.

Cuando abrimos un archivo nuevo en Photoshop, nos encontramos con esta ventana. Seleccionamos que el tipo de documento es para web (no se va a imprimir), y automáticamente nos dice que su resolución es de 72 PPI. Pero si hemos dicho antes que si trabajamos con imágenes solo en formato digital, los PPI es algo que no nos va a afectar, solo hay que tener en cuenta los píxeles propios de la imagen. ¿Por qué Photoshop nos muestra esto?.

La respuesta es sencilla. Hace muchos años, la gran mayoría de los monitores tenían unos PPI de 72. Por tanto, las imágenes que nos mostraban esos monitores tenían, obviamente, los mismos PPI. Y se ha quedado como un estándar cuando, como hemos comprobado, actualmente tenemos pantallas con PPI muy diversos, e incluso lo que se considera mínimamente aceptables es mayor a esos 72 PPI.

Es decir, que podemos decirle a Photoshop que nuestra imagen tiene 72 PPI, 100 PPI o 300 PPI. En pantalla, la imagen se va a ver igual, sea cual sea el PPI que escojamos. Y vuelvo a mencionar lo de en pantalla, ya que todo esto cambia si nuestra imagen digital va a terminar impresa. Y aquí es cuando entran los DPI.

DPI (Dots Per Inch)

DPI son las siglas de Dots Per Inch o, en castellano, Puntos Por Pulgadas. Como nos pasaba con los PPI, nos quedamos con el acrónimo en inglés por ser más habitual. Cuando trabajemos con nuestras imágenes, y sabemos que se van a imprimir, saber sus DPI es esencial para obtener unos resultados óptimos en formato físico. Además de saber que DPI mínimos y máximos acepta la impresora por donde vamos a sacar nuestras imágenes.

Si decimos que una impresora tiene unos DPI de 300, es que es capaz de dibujar 300 puntos de impresión por cada pulgada, o 2,54cm. Estos 300 DPI se han convertido en casi un estándar para cualquier impresión, y si imprimimos por debajo de esos DPI, normalmente obtenemos resultados pobres. Seguro que habéis impreso algún documento con calidad borrador. Esto simplemente quiere decir que hemos imprimido con pocos DPI para ahorrar tinta. Pero claro, se resiente la calidad final.

Elige el DPI adecuado según el formato de impresión

Pero no siempre hay que imprimir a 300 DPI. Por ejemplo, en libros de fotografía, donde queremos que haya una definición de imagen muy grande, podemos irnos a valores de DPI más altos. Pero es que la distancia de visionado con respecto al soporte impreso también tiene mucho peso en la elección del valor del DPI. Y es que no al tener una distancia mayor, podemos reducir los DPI sin que el espectador note la bajada de definición.

Como hemos dicho, los soportes físicos que se van a ver a una distancia aproximada de un brazo, como pueda ser un libro o una revista, nos debemos a ir a unos 300 DPI como mínimo para mantener una definición de imagen aceptable. Para posters o cartelería que vayan a verse a una distancia de unos dos metros, podemos bajar hasta los 100 DPI. Y si hablamos de cartelería de gran formato, como los típicos carteles publicitarios de una carretera, que vemos a más de 10 metros, podemos reducir hasta los 25 DPI.

Por supuesto, esto son unos valores aproximados. Y si tenemos cualquier duda, siempre es mejor usar unos DPI más altos a los que recomendamos, que arriesgarnos a que la impresión no tenga la suficiente definición que requiramos.

Calcula la resolución ideal para tus imágenes impresas

Por supuesto, todo esto no nos vale de nada si no sabemos cual es la resolución en píxeles que debe tener nuestras imágenes según los DPI que hayamos decidido. O el tamaño que va a tener nuestra impresión. Este cálculo se puede hacer mediante dos caminos.

Calcular los píxeles de la imagen sabiendo el tamaño final de la impresión y los DPI

Por ejemplo, si mi impresión va a ser de 30cm de alto y 50cm de ancho, y un DPI de 300, la imagen debe tener 3543px de alto, y 5906px de ancho.

Calcular el tamaño final de la impresión sabiendo los píxeles de la imagen y los DPI

Por ejemplo, si mi imagen es de 2500px de alto y 3700px de ancho, y quiero imprimirla a 250 DPI, el tamaño de dicha impresión será de 25,4cm de alto y 37,6cm.

O que nos lo haga directamente nuestro software favorito

Con Photoshop, podemos saber de forma sencilla el tamaño de impresión que tendrá cualquier imagen simplemente diciéndole los DPI de la impresión. Vamos a usar como ejemplo una de las ilustraciones de nuestro calendario de octubre de Silo. Específicamente, el que tiene un alto de 1080px y un ancho de 1920px. Si abrimos la imagen en Photoshop, y nos vamos a Imagen > Tamaño de imagen, nos aparecerá una ventana que nos muestra varios datos de la imagen, como su tamaño en pixeles y los famosos 72 PPI.

Si desactivamos la opción de Remuestrear, vemos como aparece un candado, que nos va a relacionar el tamaño con los DPI y que, nos transforma los pixeles en centímetros. Lo que acaba de hacer Photoshop es decirnos con 72 DPI, este va a ser el tamaño de la imagen impresa. Si cambiamos este valor, automáticamente nos va a cambiar el tamaño que tendría la imagen. Vamos a compararlos.

Como ya sabemos, con una misma resolución de píxeles, si el valor de DPI es alto, el tamaño de impresión es menor. Y si el valor de DPI es bajo, el tamaño de impresión es mayor. Es decir, si queremos mucha definición en la imagen impresa, los puntos de impresión deben de estar más juntos (DPI más alto), por lo que la imagen impresa total es más pequeña.

Y con esto terminamos. Aunque hemos visto bastantes cálculos, creemos que es importante conocer las nociones básicas sobre este tipo de conceptos, y las relaciones que hay entre DPI, PPI y resolución de imágenes. Si trabajamos solo en digital, estaremos preparados a que nuestras imágenes se muestren de forma diferente según el tamaño de pantalla y su resolución. Y si también trabajamos en la parte física, nos ahorraremos quebraderos de cabeza cuando las veamos impresas y comprobemos que no están al tamaño o definición que creíamos.

Por supuesto, tenéis disponibles los comentarios para cualquier duda, sugerencia o experiencia que tengáis con respecto a este tema. Entre todo podemos aumentar nuestros conocimientos y que trabajar con nuestras imágenes sea un proceso totalmente controlado.

La entrada Trabajando con imágenes – PPI, DPI y Resolución se publicó primero en Silo Creativo.

En SiloCreativo hemos hablado en varios ocasiones sobre los distintos estilos de tipografías que podemos encontrar para usar en cualquiera de nuestros proyectos. Desde las escritas a mano, hasta las monoespaciadas o las creadas específicamente para mostrar números. Tener a mano esta variedad de fuentes tipográficas es esencial a la hora de tener siempre a disposición la que mejor encaje con nuestras necesidades. Y siguiendo con esta tónica, hoy os queremos hablar de las tipografías outline.

Esta variedad de tipografía se caracteriza por no tener relleno, y formarse exclusivamente mediante líneas. Con este principio en mente, se abre un abanico de posibilidades de tipografías outline, algunas de las cuales os vamos a ir mostrando en el listado que hemos preparado en este artículo. Antes hemos hablado de las handwritten, pues también existen fuentes que mezclan este estilo con el outline. O tipografías formadas íntegramente por muchas líneas.

Cuando usamos tipografías outline podemos aprovechar otros estilos para dar más potencia al texto. Por ejemplo, si queremos aprovechar el uso del contraste para presentar textos en conjunto con letras con y sin relleno. O, algo muy de moda en la actualidad, darle un toque de neón al texto.

En fin, no tardemos más, y pasemos a ver el listado de tipografías outline que hemos preparado para vosotros. Esperamos que os gusten y os sean de utilidad.

Easy Outline

Ir a Easy Outline

En primer lugar tenemos a Easy Outline, una tipografía que destaca por su marcado carácter vertical, las esquinas redondeadas y con el núcleo de las grafías muy fino. Se mueve entre el toque elegante e informal.

Gibsons Outline

Ir a Gibsons Outline

De Gibons tenemos diferentes variables, siendo una de ellas el estilo outline. Esto hace que sea idónea si queremos usar en conjunto textos con y sin relleno. Además de estos estilos, tenemos la opción de usar un formato de letra con proporciones más cuadradas, o por el contrario que sea más alargada en vertical.

Argon

Ir a Argon

Argon se enmarca dentro de las tipografías outline que tienen algo especial. Y es que cada grafía no se compone solo por las líneas que definen su contorno, sino que también tiene líneas interiores. Esto le da un aspecto casi de mini-puzzle. Muy original, sobre todo para su uso junto a logotipos.

VisiaDuo

Ir a VisiaDuo

VisiaDuo es la que más se acerca a ser lo que consideraríamos una tipografía sans serif clásica, a la que le hemos eliminado el relleno. Esto hace que quizás la haga más idónea para usar en proyectos en los que no queramos que el texto sea algo más ornamental, sino que sea más legible.

Playbook

Ir a Playbook

En Playbook mezclamos el outline con lo handwritten. Además, al añadir una capa de trimensionalidad, tiene diferentes sabores: completamente de líneas, o con relleno *en altura*. Ideal para darle un toque más juguetón a nuestros diseños.

Halfomania

Ir a Halfomania

Posiblemente una de mis preferidas de la lista. Y es que el toque de grafías inconclusas le da un toque muy especial a Halfomania. Casi parece que esté en movimiento y vaya a terminar de dibujarse la tipografía en cualquier momento.

Portico

Ir a Portico

Con Portico tenemos una fuente que, a pesar del toque liviano que pueda tener al formase exclusivamente por líneas, tiene bastante peso al tener un formato casi cuadrado y muy ancho. Perfecta para cuando queramos crear textos con fuerza dentro de nuestros diseños.

Montana Bold Outline

Ir a Montana Bold Outline

Montana Bold es una tipografía muy curiosa, ya que casi parece que sus líneas se interrumpen y cruzan entre ellas para formarse. Esto hace que parezca casi una fuente stencil, dándole un aspecto muy peculiar.

Ballegra

Ir a Ballegra

Terminamos con otra tipografía que mezcla outline y handwritten, pero en esta ocasión con una vertiente mucho más ornamental. Para aquellos que busquen un aspecto más clásico o retro, esta es su elección ganadora.

La entrada 9 Mejores Tipografías Outline para inspirarte se publicó primero en Silo Creativo.

Como ya sabéis, en Silo somos unos enamorados de las tipografías. Hace pocos días estuvimos viendo algunas de las mejores con estilo outline, pero antes ya repasamos las handwritten, o las creadas para mostrar números. Pero hoy nos queremos en otra situación, y es cuando nos llega un proyecto en el que, entre otras tareas (o quizás sea la principal), está la de que tenga una tipografía propia. Es decir, nuestro cliente quiere que diseñemos una fuente tipográfica personal y única para, por ejemplo, usarla en sus web, su cartelería, o que forme parte de la imagen de su empresa. ¿Cómo podemos conseguirlo?.

Lo primero es pensar que solo tendremos que con crear todas las letras del abecedario en nuestro software de diseño favorito, como Illustrator, tendremos ya todo el trabajo hecho. Pero aunque este punto casi siempre vamos a tener que hacerlo, necesitaremos otras herramientas, ya que normalmente nuestro cliente va a querer poder instalar la tipografía en su ordenador para utilizarla a su antojo

Es decir, es necesario que una vez hayamos diseñados los diferentes glifos de nuestra tipografía, los empaquetemos en un archivo que se pueda instalar y usar en cualquier sitio. Y sobre este tipo de programas son de los que os queremos hablar hoy. Aquellos que nos van a permitir crear, gestionar y empaquetar una tipografía, para que posteriormente pueda ser exportada en un archivo. Sobre los tipos de archivos de una tipografía, es muy recomendable este artículo de Javier Balvín sobre formatos, licencias, etc de tipografías, que seguro que os resolverán muchas dudas en este aspecto.

El proceso para crear una tipografía lo podemos dividir, a muy grandes rasgos, en tres pasos:

• Creación y diseño de cada glifo de la tipografía
• Asignación de cada glifo a su letra/número/símbolo correspondiente, y aplicarle su correspondiente espaciado, kerning, etc
• Exportación de la tipografía

En la lista de herramientas que os queremos mostrar hoy, veremos algunas en las que podemos realizar los tres pasos dentro de ellas, mientras que otras solo se podrán hacer los dos últimos, o que funcionan como un plugin dentro de otro programa. La elección que debéis hacer entre uno u otro es muy personal. Si estáis muy acostumbrados a trabajar con Illustrator, quizás queráis mejor una herramienta que os permita trabajar ahí. O si os gusta más tener todo centralizado en un solo lugar, mejor la que os permita realizar todo el proceso en un solo sitio.

Pero antes de poder decidirnos entre ellos, tenemos que ver las opciones disponibles. Así que vamos con ellas.

FontLab

FontLab posiblemente sea la más conocida en la lista para los que alguna vez habéis trabajado con tipografías. Es una herramienta integral, que nos va a permitir hacer todo el proceso de creación de una tipografía dentro del propio programa, con múltiples opciones. A tener en cuenta un punto muy importante, y es que podemos decir que FontLab tiene una versión profesional por unos 500€, y otra básica llamada TypeTool por 54€, ambas disponibles para Windows y Mac. TypeTool no es más que una versión de FontLab con algunas características recortadas, pero que seguro que son suficientes para los que estéis empezando.

• Disponible para Windows y Mac
• Puedes crear la tipografía dentro del propio programa, o importarla desde un programa externo
• Versión de prueba de 30 días, y versiones de pago por 504€ (FontLab) o 54€ (TypeTool)
• Soporta la mayoría de los formatos de fuentes

Ir a FontLab

FontForge

FontForge es la alternativa open-source y gratuita, ideal para aquellos que estén empezando y no puedan o quieran hacer un gran desembolso económico. Pero no por ser gratuito tiene menos opciones, ya que nos permite crear nuestros glifos desde el propio software, o importarlos en formato SVG.

• Disponible para Windows, Mac y Linux
• Puedes crear la tipografía dentro del propio programa
• Totalmente gratuita
• Soporta la mayoría de los formatos de fuentes

Ir a FontForge

Fontself

Para aquellos que no quieran salir de Illustrator o Photoshop, tenemos a Fontself, ya que lo podemos instalar como un plugin más de los programas de Adobe. Podemos ir creando nuestro tipografía en un software con el que estamos familiarizados y seguro que trabajamos de forma más óptima, y en cuanto tengamos el trabajo realizado, empezar a gestionar la tipografía para asignarla y darle sus características propias.

• Disponible para Windows y Mac como plugin para Illustrator y Photoshop
• Versión de pago por 39€ (plugin para Illustrator), o 59€ (bundle con plugins para illustrator y Photoshop)

Ir a Fontself

Glyphr Studio

Con Glyphr Studio no estamos atados a un sistema operativo, ni siquiera a un dispositivo, ya que podemos trabajar directamente desde nuestro navegador web. Solo tendrás que subir el archivo con los glifos que hayas diseñado, y empezar a trabajar desde Glyphr para darle sus opciones correspondientes a cada una de ellas.

• Disponible desde cualquier navegador web, o como apps para Windows, Mac y Linux
• Totalmente gratuita

Ir a Glyphr Studio

iFontMaker

Si disponéis de un iPad, y queréis hacer algo más desenfadado y manual, iFontMaker es la solución. Nos permite dibujar los glifos directamente con el lápiz, e incluso con nuestros propios dedos, y en pocos minutos podemos tener creada nuestra propia tipografía. Eso sí, si queremos ir más allá, dispone de herramientas bézier incluida en cualquier software de dibujo por si queremos afinar el diseño.

• Disponible para iPad
• Versión de pago por 7,99€
• Muy sencilla de utilizar

Ir a iFontMaker

La entrada 5 Herramientas para crear nuestra propia tipografía se publicó primero en Silo Creativo.

Hacia mucho que no hacíamos un recopilatorio de tipografías. Es cierto que en cada calendario descubrimos dos nuevas fuentes, pero queríamos hacer un artículo al que poder acceder con facilidad cada vez que queramos descargar un tipo de tipografía. En este caso nos hemos decantado por tipografías “gorditas”, que son una opción estupenda para crear títulos divertidos y originales.

Por su diseño, son tipografías que no pasan inadvertidas, lo que las hacen especiales. Obviamente no se pueden usar para todo, pero esta singularidad las hace perfectas para logotipos, títulos… elementos que quieren llamar la atención.

Para facilitar su uso y antes de exponer la lista de tipografías descargables, veremos algunos trucos o consejos que nos pueden ser de gran utilidad para escoger la que mejor se adapte a nuestras necesidades.

1. Escoge una tipografía con distintos estilos

Por lo general, son tipografías algo complicadas de combinar, por lo que una muy buena opción es buscar una tipografía que contenga varios estilos dentro de la misma familia y combinarlo entre sí. No perdemos el foco y los elementos se complementan.

2. Combínala con una tipografía complementaria

Cualquier tipografía de esta lista tiene suficiente personalidad por sí misma y por eso, si la queremos combinar con otra, hemos de tener en cuenta que cree contraste y que sea complementaria, pero sin quitarle esa personalidad.

Como estamos ante tipografías gruesas y en negrita, lo mejor para combinarla serán aquellas delgadas y con mas legibilidad, que podamos usar en subtítulos y párrafos.

3. Cuidado con que sirva para diferentes idiomas

Esto no solo va unido a este tipo de fuentes, sino a todas en general. Muchas de las tipografías originales y creativas no tienen caracteres válidos para todos los idiomas (a veces pueden faltar los acentos, la letra ñ…)

Si nosotros solo vamos a estar en un idioma, puede que esto no sea importante, pero en el caso contrario debes asegurarte de que lo que vas a escribir puede hacerse en todos los idiomas de destino.

4. Importancia de la legibilidad

Es cierto que la legibilidad va dependiendo un poco del uso que se le vaya a dar a una tipografía. No es lo mismo usarla para texto de párrafo que para un logotipo, pero también es verdad que, si no queremos perder la esencia de marca, esta debe de entenderse siempre.

Las tipografías tan gruesas pueden resultar más difíciles de leer, lo cual puede traducirse en un impacto negativo. No todo vale, hay fuentes que son muy gráficas que pueden usarse mas como ilustración que como texto. Hemos de tener claro como y para qué las queremos usar.

5. Elige la tipografía que mejor se adapte a tu diseño

Como veníamos diciendo, no todo vale. Debemos escoger la mejor tipografía que se adapte a nuestro diseño y que vaya en consonancia con nuestra marca y lo que queremos transmitir. No es complicado, solo hay que tener en cuenta que son tipografías arriesgadas y que debemos definir su uso a la perfección.

Recopilatorio de tipografías

Pues bien, una vez hemos visto algunos consejos que nos pueden ser de gran utilidad para el uso de las tipografías, nos disponemos a compartir con vosotros 8 tipografías estilo grueso que seguro os ayudarán en vuestros proyectos.

Foo

Tipografía en mayúsculas con un aire original y que nos recuerda a los dibujos animados de los 90. Tiene muchas posibilidades de uso, pues podemos aplicarle sombras, profundidad…

Descarga tipografía Foo

Borsok

Como hablábamos en los consejos anteriores, esta es una tipografía que se puede usar en varios idiomas al disponer distintos caracteres como acentos y la letra ñ. Esto puede ser un factor para equilibrar la balanza si estamos ante un proyecto multilingüe.

Descarga tipografía Borsok

Gula Playful

Esta tipografía podemos usarla tanto en mayúscula como e minúsculas, por lo que puede servirnos para hacer hasta algunas frases cortas.

Descarga tipografía Gula Playful

Destone

Tipografía con un estilo grunge, muy original y con mucha fuerza.

Descarga tipografía Destone

Slukoni

Esta tipografía solo contiene los caracteres básicos, pero merece la pena compartirla, porque por su estilo da mucho juego.

Descarga tipografía Slukoni

Fascinate

En el catálogo de Google Font podemos encontrarnos algunas tipografías de este estilo. Esta, podemos usarla tanto en mayúsculas o minúsculas y su aire retro nos transportará al pasado.

Descarga tipografía Fascinate

Luckiest Guy

Me gusta de esta Google Font que podemos usarla tanto en mayúsculas o minúsculas ocupando siempre el mismo ancho. Esto nos puede ser muy útil en algún proyecto de diseño.

Descarga tipografía Luckiest Guy

Chango

Esta Google Font, como las anteriores tiene un estilo grueso y sus caracteres son muy originales. Podemos usarla tanto en minúsculas como mayúsculas conteniendo algunos caracteres especiales.

Descarga tipografía Chango

La entrada 8 Tipografías en negrita y Consejos para Usarlas se publicó primero en Silo Creativo.

Aunque no hemos dejado de ver Google Font (a menudo las usamos en los calendarios), si es cierto que hace mucho que no hacemos un articulo en el que las analicemos con sus familias y combinaciones. Una lista a la que poder acudir cuando necesitemos una tipografía especifica.

Google Font no para de crecer y de un tiempo a esta parte se han añadido distintas tipografías de cada uno de los ámbitos. Nosotros hoy vamos a compartir tipografías sans serif con una amplia familia, de manera que las haga muy útiles para usar dentro de un mismo proyecto, como una página web o un diseño editorial. Ellas se pueden combinar entre si y son perfectas para usar en textos más extensos por la legibilidad.

Vamos a verlas de una a una y estudiar para que tipo de proyectos serían más optimas. Ya sabéis que todas son gratuitas y fácilmente descargables. Luego las instalamos en nuestro ordenador al igual que otras fuentes. Su uso para páginas web es sencillo y fácil al poderlas descargar desde los servidores de Google. ¡Comenzamos!

Lexend

Con sus 9 estilos dentro de la misma familia encontramos la versatilidad necesaria para combinarla sobre si misma. Además, esta tipografía tiene distintos subtipos (peta, zetta, deca…) en la que varían considerablemente los caracteres. Esta, la principal, es muy legible y con un trazo muy amigable.

En un primer momento fueron diseñadas para reducir el estrés visual y mejorar el rendimiento de lectura. En su primer lanzamiento los grosores de cada estilo eran mas ligeros, pero se decidió aligerar el peso y asemejarla a la Lexend Deca.

Descarga tipografía Lexend

Inter

Al igual que la anterior dispone de 9 estilos dentro de la misma familia. Fue diseñada para tener una alta legibilidad para pantallas al presentar una altura especifica de texto tanto en mayúsculas como minúsculas. De echo si la comparamos con la anterior, por ejemplo, podemos observarlo claramente, las dos son muy legibles, pero esta presenta una altura superior de caracteres para el mismo tamaño de letras.

Posee también una amplia variedad de caracteres especiales.

Descarga tipografía Inter

Murecho

Esta tipografía en realidad fue diseñada para la escritura en japonés, pero admite también latín, cirílico y griego. Posee 9 estilos dentro de la misma familia.

Posee un estilo amigable con unos caracteres perfectamente legibles.

Descarga tipografía Murecho

Outfit

Es la tipografía oficial de la empresa outfit.io que ha lanzado como Google Font para su uso libre. Los rasgos de altura por anchura de los caracteres son mas iguales, por lo que los mismos son mas redonditos.

Posee 9 estilos dentro de la familia.

Descarga tipografía Outfit

Yaldevi

Aunque posee 6 estilos en la familia es totalmente combinable entre sí. A diferencia de la anterior, esta posee una mayor altura que anchura. De hecho, podríamos definirla como una fuente estrecha destinada a títulos y textos breves en la web.

Al tener una forma más condensada, hace posible que quepa mas texto en una línea. Posee una personalidad neutral con un toque de curvas suaves.

Descarga tipografía Yaldevi

Montserrat

Nos hallamos ante una vieja conocida por todos, que ha aumentado la familia considerablemente. Si hace unos años solo la encontrábamos en dos estilos, ahora podemos ver 18. Tiene los 9 que son similares a las anteriores, pero se le añaden 9 en cursiva.

Esta es la familia normal, pero hay dos familias “especiales” como la Alternates y Subrayada.

Descarga tipografía Montserrat

Jost

Al igual que la anterior es una de las Google Font mas completas con 18 estilos en la familia. Esta inspirada en las sans serif alemanas de la década de los 1920. Tiene un aire como la Outfit, más redondita dada sus proporciones altura por anchura.

Descarga tipografía Jost

League Spartan

Esta tipografía cuenta con 9 estilos dentro de la misma familia. Está inspirada en las sans serifs geométricas estadounidenses de principio de l siglo XX.

El estilo es similar a la Jost o la Outfit, mas redondito con una buena separación entre palabras.

Descarga tipografía League Spartan

Be Vietnam Pro

Una de las tipografías más extensas que hay con 18 tipos dentro de la misma familia. Se adapta bien a las empresas tecnológicas, puesto que proviene de la perfección de las letras vietnamitas, diseñándolas, para conseguir una mejor legibilidad.

Descarga tipografía Be Vietnan Pro

Atkinson Hyperlegible

Aunque, de esta lista, es la que menos estilos cuenta dentro de la misma familia, tan solo 4, merecía incluirse puesto que esta desarrollada para aumentar la legibilidad de los lectores con baja visión y mejorar su comprensión.

Su diseño se aparta de la tradición para incorporar elementos distinticos e inequívocos.

Descarga tipografía Atkinson Hyperlegible

La entrada 10 Google Font Sans Serif con una amplia familia se publicó primero en Silo Creativo.

Hace unos meses Verónica nos enseñó cuales iban a ser las tendencias de diseño para este año 2022. Entre ellas nos encontrábamos dos que cada vez estamos viendo en más sitios web: la vuelta a los 90 y el maximalismo. Y estas dos tendencias prácticamente se tocan en un estilo que está tomando cada vez más fuerza: el neobrutalismo.

Si os gusta el arte y la arquitectura, seguramente habéis oído hablar del brutalismo. El brutalismo es un movimiento arquitectónico que surgió a mitad del siglo XX y que apostaba por mostrar los materiales y las estructuras en bruto, abandonando por completo cualquier complemento estético u ornamentación. Es un estilo en el que la funcionalidad está por encima de todo, y que no tiene miedo a enseñarla.

Pero, ¿qué tiene que ver esto con el diseño web y el neobrutalismo?. Básicamente, queremos poner un poco de contexto sobre que otras tendencias se apoya y evoluciona el neobrutalismo, para saber porque es así y que podamos usarla en nuestros diseños conociendo todos sus detalles. Por ello, en primer lugar, queremos mostraros otras dos tendencias que, a primera vista, pueda parecer que no tengan muchos puntos en común, si los analizamos veremos que si los tienen. Y después nos centraremos en el neobrutalismo en si, y cuales son sus criterios básicos.

Minimalismo y Brutalismo

Para entender cuales son los principios que rigen el diseño neobrutalista, lo mejor es empezar hablando por dos tendencias que, aunque distintas entre si, comparten ciertos valores. Y nos van a ayudar a entender como el neobrutalismo es, en cierta manera, una evolución de estos.

El primero es el minimalismo. En diseño web, seguro que habéis visto muchos sitios con este estilo. Sin ir más lejos, hace un tiempo os mostramos algunas de las mejores plantillas minilmalistas para WordPress. Este minimalismo se basa en el menos es más, la simplificación de la interfaz mediante la eliminación de cualquier elemento innecesario:

• Pocos colores, con tendencia al blanco/negro/gris, o algún toque de color muy sutil.
• Uso potente y bien pensado del espacio en blanco.
• Expresión al mínimo de sombras, animaciones, transiciones…
• Iconos simples y con estilo flat design.

De este minimalismo pasamos al brutalismo. Si vimos antes como era el brutalismo en la arquitectura, en el diseño web casi tiene una traslación completa:

• Sin miedo a mostrar la web con la estructura del HTML tal cual.
• El uso del color casi se reduce en su totalidad al blanco y negro, totalmente planos y con un fuerte contraste.
• Elementos que se superponen, o que no tienen un ritmo consistente.

Este brutalismo es prácticamente no darle estilo de ningún tipo a nuestra web, salvo en contadas excepciones. Si en la arquitectura se buscaba la pureza de los materiales y la estructura, en el diseño web se quiere que se confía en la estructura pura del HTML como elemento básico y natural para la navegación, sin intermediarios.

Una vez dejando claros estos conceptos, entremos directamente cuales son los principios fundamentales del neobrutalismo dentro del diseño web.

Bases del Neubrutalismo en el diseño web

Contraste y Color

Ya sabemos de la importancia del contraste dentro del diseño web, tanto para temas como la accesibilidad, como para mantener una jerarquía correcta de cada uno de sus elementos. Y en el neobrutalismo se lleva eso hasta la última expresión, ya que no tiene miedo de incluso usar el negro puro (#000000) a la hora de trabajar. Lo que en muchos proyectos es una línea que nunca se debe cruzar, el uso de este negro en el neobrutalismo es muy habitual usarlo en textos o sombras.

Si siempre solemos recomendar no usar una paleta de colores muy amplia, en el neobrutalismo es todo lo contrario. Y no solo se usan múltiples colores, sino que estos incluso muchos seguro que los calificáis como colores feos. Normalmente se usan colores con luminosidades medias, moviéndose entre 45 y 7, y saturaciones altas, entre 70 y 90. Esto hace que tengamos siempre colores colores muy agresivos y vibrantes. Nada de tonalidades suaves o con tendencia a colores pastel.

Tipografías

Las tipografías es una parte esencial del neobrutalismo, ya que se apuesta por títulos a gran tamaño (incluso a veces tamaños desproporcionados), alta legibilidad y con mucho contraste respecto a su fondo. Con respecto a la legibilidad, es muy importante el uso de los espacios entre diferentes tipos de texto. Los titulares deben tener cierta separación con los cuerpos de texto, y los párrafos entre sí. Esto hace que sea muy fácil de leer el contenido gracias al buen uso, tanto de la jerarquía como de los espacios en blanco.

Además, la tipografía no solo sirve para servir contenido, sino que es parte de la ornamentación del diseño. Incluso se puede utilizar para que sea parte de las ilustraciones, o que se creen ilustraciones con ella. Por ejemplo, en vez de tener un icono para representar nuestro menú de navegación, podemos usar el texto MENÚ en mayúsculas, con una tipografía bold, relleno transparente y contorno negro.

Otro elementos

Si vemos otros elementos del diseño como las sombras, estas son muy simples, usando colores planos y sin difuminar. No se quiere tener una sombra suave y que apenas molesta. Es una decoración dura y que se hace notar.

Otro elemento muy importante son las ilustraciones. Olvidémonos de renders en 3D, tan de moda ultimamente, o o dibujos más realistas. Solo se utilizan ilustraciones simples, casi infantiles, con colores planos y vibrante. Incluso sin colores, solo con su contorno. Todo tiene que tener un aspecto de hecho con rapidez y casi sin pensar.

Y si se usan fotografías de personas, normalmente se les elimina el fondo, incluso de forma irregular, recortando su silueta con rectas irregulares. Imaginad cuando usábamos unas tijeras en el colegio para recortar fotografías. Esa es la idea. Por supuesto, el fondo que tendrán estás imágenes es, como no podía ser de otra forma, un color plano y vibrante.

Ejemplos de Neobrutalismo en la web

Los dos mayores exponentes que podemos encontrar a día de hoy del neobrutalism en la web son Gumroad y Figma. En ambas podemos ver el como el uso de colores agresivos y tipografías a gran tamaño que hemos descrito durante el artículo.

Luego tenemos otro par de ejemplos que toman píldoras de otros estilos para fusionarlas con el neobrutalismo. En la revista cultural The Outline vemos los colores y tipografías, pero insertan emojis como si fueran pegatinas, además de fotografías a gran tamaño, pero casi escondidas detrás de los textos.

Y en el diario digital Bloomberg tenemos un estilo más cercano al brutalismo, con el uso de negro y blanco puro, pero que no duda en usar colores muy llamativos en ciertas zonas para llamar la atención del lector.

Conclusiones

El neobrutalismo es una tendencia que seguro no es del gusto de todos: colores demasiados llamativos, textos enormes, ilustraciones simples… Esto se aleja de otros estilos que apuestan por un estilo web más pausado y agradable. Y quizás sea este uno de sus puntos fuertes, ofrecer una alternativa rompedora para aquellos que quieren un estilo diferente y que sobresalga sobre los demás.

También es ideal para los que buscan un estilo más abstracto, y en el que se tenga un aspecto de collage, o casi incluso de carpeta de instituto, donde se pegaban fotos, dibujos, y se escribía con rotuladores llamativos para compartir nuestras ideas con los demás.

Y con esto terminamos por hoy. Esperamos que os haya resultado interesante, y que el neobrutalismo entre dentro de vuestro catálogo de posibles diseños para el futuro. Como siempre, tenéis disponibles los comentarios para hacernos llegar vuestras ideas y experiencias sobre esta tendencia en el diseño web.

La entrada Tendencias en Diseño Web: Neo-Brutalismo se publicó primero en Silo Creativo.

Como diseñadores, tenemos multitud de elementos para trasmitir un mensaje. Unos pueden ser más indirectos, como la composición o la maquetación, y otros más directos, como las imágenes o los textos. En esta ocasión nos centraremos en esto último y es que, ya sea en formato físico o digital, siempre vamos buscando un objetivo básico: tener un buen diseño sin perder la legibilidad. Anteriormente hemos tratado de este tema en nuestros artículos sobre la jerarquía o el contraste, pero en esta ocasión nos queremos centrar en algo que muchas veces dejamos de lado, y es en la forma en la que ajustamos un texto con respecto a su propio párrafo.

Para hacer esto, en la mayoría de las ocasiones disponemos de dos opciones: la alineación y la justificación. Seguro que has oído estos términos y los has utilizado en alguna ocasión si has trabajado con textos. Pero, ¿sabes en que ocasiones es mejor usar un alineado y cuando un justificado?. Y dentro de cada uno de ellos, ¿qué tipo de alineado y/o justificado es correcto utilizar?. Hoy queremos resolver estas dudas, y que podamos tener una visión más completa sobre como maquetar nuestros textos.

Tipos de alineaciones de textos

Cuando hablamos de alineación nos referimos a aquellos textos que, en el momento en el que una palabra no tiene suficiente espacio en su linea, salta directamente a la siguiente línea, dejando en la línea anterior el espacio que ocuparía. Este texto siempre se va a alinear en una de estas tres posiciones: a la izquierda, al centro o a la izquierda.

Como se ve en la imagen, si el párrafo está alineado a la izquierda, el texto se alinea con el margen izquierdo, y en el margen derecho tiene esa característica forma irregular. La alineación es la forma más común en la que nos vamos a encontrar cualquier texto online. Eso sí, si habéis trabajado con algún tipo de procesador de texto, seguro que sabéis que existen varios tipos de alineaciones.

¿Cuando usar textos alineados?

Hemos visto que existen tres tipos de alineaciones, y seguramente has visto usar cada una de ellas en diferentes entornos, pero vamos a recomendarte donde es mejor utilizarlas. En los casos que vamos a nombrar, nos referimos a textos que se leen de izquierda a derecha. Si estáis trabajando en un lenguaje que se lee de derecha a izquierda, como el hebreo o el árabe, debéis tomas lo que decimos justo al contrario, y aplicar la alineación a la derecha como a la izquierda, y viceversa.

• Alineación a la izquierda – como hemos dicho antes, es la forma más común de encontrar los textos de forma online, ya que hace que la lectura se realice de forma más sencilla.
• Alineación al centro – este tipo de alineación solo es recomendable en textos cortos, ya que al no estar alineado a ninguno de los dos márgenes hace más complicada su lectura. Solemos encontrarla sobre todo en títulos o alguna anotación con poca cantidad de palabras.
• Alineación a la derecha – suele ser la menos utilizada ya que, al ser nuestra dirección de lectura de izquierda a derecha, es difícil para la vista que en cada cambio de línea en un párrafo, encontrar el inicio de la siguiente línea en una posición diferentes. Se suele ver en títulos, o como pie de foto.

Tipos de justificaciones de texto

Un texto justificado es aquel en el que el párrafo está se alinea tanto a izquierda como a derecha. Esto hace que el espacio entre palabras sea diferente de una línea a otra, ya que el texto se tiene que ir ajustando a esta doble alineación. Como en las alineaciones, nos encontramos diferentes tipos de alineaciones, aunque en solo van a hacer referencia a como es la última línea del párrafo justificado.

• Justificación a la izquierda – todo el párrafo esta justificado excepto la última línea, que está alineada a la izquierda.
• Justificación al centro – todo el párrafo esta justificado excepto la última línea, que está alineada al centro.
• Justificación a la derecha – todo el párrafo esta justificado excepto la última línea, que está alineada a la derecha.
• Justificación completa – todo el párrafo está justificado, incluyendo la última línea.

Cuando justificamos un texto, también nos encontramos con otro problema, que son los llamados ríos. Un río es cuando se enlazan de forma vertical los espacios vacíos entre palabras de un párrafo. Esto produce la sensación visual de que un párrafo esté separado en dos, dificultando su legibilidad y estropeando el diseño general. Algunos programas tienen herramientas específicas para solucionar los ríos, aunque en muchas ocasiones se hace aprovechando mejor la longitud de cada línea cortando palabra sal final mediante guiones.

Párrafo justificado y guiones

Hemos dicho que, debido a la justificación del texto, nos vamos a encontrar que el espacio entre palabras sea irregular. Y, en según que casos, pueden resultar tremendamente grande. Para intentar rebajar estos espacios, tenemos otra opción: justificar con guiones. Es decir, romper la última palabra de cada línea y continuarla en la línea siguiente. Esto tiene varios problemas, el más importante es que debemos tener un conocimiento del idioma en el que esté el texto. Si trabajamos con textos en nuestra lengua materna no tendremos muchos problemas, pero no en todos los proyectos será así. Por suerte, simplemente cambiando el idioma con las que hacemos las correcciones ortográficas del programa que usemos, como pueda ser InDesign, podemos automatizar este proceso.

De todas formas, no aconsejo usar este tipo de justificación con guiones, ya sea en formato digital como en impreso. Nos vamos a ahorrar dolores de cabeza, y el texto será más amable de leer.

¿Cuando usar textos justificados?

Los textos justificados los encontramos en su mayoría en medios físicos o impresos: revistas, libros, prensa… Históricamente se usan la justificación porque el texto es el elemento principal de diseño de estos formatos, por lo que si el párrafo tiene una forma regular, es más sencilla la ordenación general. Si pensamos en los periódicos de papel, solo tenemos textos y fotografías. Si en vez de párrafos justificados estuviesen alineados, se crearían espacios extraños entre cada uno de los bloques. Al estar justificados, la vista global es más homogénea y es más fácil moverse entre artículos.

Un caso curioso son aquellos medios que tienen tanto versión impresa como digital. En la imagen anterior podemos ver el mismo artículo de la revista Time, en su versión física (a la izquierda) y su versión digital (a la derecha). Si nos centramos en la estructura del texto, veremos como en la versión física tiene los párrafos justificados, que ayuda organizar la composición en varias columnas, y que hace que el espacio entre esas columnas sea continuo.

Por el contrario, en su versión digital el texto esta alineado a la izquierda. Esto hace que sea más sencilla su lectura y que el espacio entre palabras siempre sea el mismo. Y como el diseño web del texto es a una columna, no hace falta mantener esa regularidad de espacio entre varias columnas.

Como siempre, estas normas no son de obligado cumplimiento cuando vayamos a diseñar, tanto en físico como en digital.. Quizás tengamos un proyecto de blog online que queremos que rememore el aspecto de un periódico físico. Podemos hacer uso de la justificación de los textos por una cuestión de diseño, ya que nos interesa más tener este aspecto que la lectura sea más sencilla. Personalmente, si trabajamos con textos en formato digital, solo usaría la justificación por motivos de diseño, y de forma razonada. En cualquier otro escenario, y por legibilidad, mejor siempre que esté el texto alineado.

Y con esto concluimos. Esperemos que os haya resultado interesante ya en muchas ocasiones tratamos los textos como un elemento secundario al empezar a diseñar, y son bastantes las variables a tener en cuenta a tratar cuando trabajamos. Además de que si empezamos a tratarlos con seriedad como diseñadores, nos van a ayudar mucho para la composición general de cualquier diseño, aunque estos textos no supongan el pilar central, como pueda serlo en una revista o un periódico.

Como siempre, tenéis disponibles los comentarios para hacernos llegar vuestras sugerencias, dudas y experiencias sobre este tema.

La entrada Diseño de textos – Alineación vs Justificación se publicó primero en Silo Creativo.

Una de las mayores diferencias que tenemos al diseñar de forma digital con respecto a hacerlo en papel es que podemos a hacer ajustes casi a nivel atómico de forma muy sencilla. Seguro que cuando empezasteis, era todo un placer que con un solo clic, poder alinear cualquier elemento de forma instantánea, para hacer que todo estuviese en su posición y en el pixel correcto. Pero cuando todo está en su sitio, seguro que habéis experimentado la sensación de que aquello que está centrado, no nos parece que este justamente en el centro. Volvemos a comprobar y tenemos el mismo número de pixeles a cada lado, pero seguimos sin verlo centrado. Y es aquí cuando empieza el ajuste óptico, y tenemos que hablar de la percepción que nuestro cerebro nos da de nuestro alrededor.

Ya tratamos anteriormente en SiloCreativo las ilusiones ópticas al hablar sobre el efecto irradiación, y como a veces nuestro cerebro nos engaña en situaciones más allá de la lógica. Pues es el ajuste óptico no es más que la forma que tenemos de modificar algo que la lógica nos dice que es correcto, pero que nuestro cerebro interpreta que no es así. O dicho de otra manera, no nos resulta «visualmente placentero» lo que estamos viendo, y lo tenemos que modificar para conseguirlo.

En este artículo trataremos varios casos de este tipo que es habitual encontrarnos ante ellos, como son el ajuste óptico para los colores, y el de diferentes tipos de alineación. Y es que, es habitual que como diseñadores creemos algo, y de repente tenemos una visión externa, ya sea de un cliente o un compañero, que nos diga que algo está mal, a pesar que de hemos comprobado que, matemáticamente, todo parece correcto. Por eso hay que dejar claro que aquí no vamos a dar unas reglas exactas sobre como aplicar correctamente ciertas soluciones. Solo que siempre hay que tener en cuenta que, a veces, tenemos que hacer caso de nuestra percepción para hacer variaciones antes que a lo que nos dicte la lógica.

Ajustes ópticos de color según el fondo y el grosor

Hemos hablado en muchas ocasiones sobre el color, como hacer combinaciones o como aplicar de forma correcta el contraste. Pero también es importante saber como percibimos los colores, y que esta percepción no será la misma según la forma y el grosor de cada elemento. Veamos un ejemplo sencillo.

En la imagen anterior podemos ver un icono y un texto, ambos del mismo color. Pero parece que el texto tiene un color algo más claro que el icono, a pesar de que no es así. Podéis descargar la imagen por vosotros mismos para comprobarlo, o usar el cuentagotas que tiene el inspector de algunos navegadores web. ¿A qué se debe esto?.

Pues en este caso es por dos motivos. El primero es que, al usar una tipografía de un grosor tan pequeño, el color lo percibimos con más luminosidad. A lo que hay que sumarle que tenemos un fondo muy claro, por lo que en el contorno de la tipografía se produce una especie de efecto halo, que hace que dicho contorno sea mas claro que el centro de la tipografía. Pero claro, al ser tan fina, prácticamente solo tenemos contorno. Pero eso no nos ocurre en el icono, al tener mas zona de relleno, se pierde ese efecto halo, y lo percibimos su color tal y como es.

¿Cuál es la solución a esto?. Pues es tan sencillo como subir la luminosidad al icono, o bajarla en al texto. Si utilizáis el código de color HSL os resultará fácil hacerlo. Aquí ya empezaremos a jugar con dicha luminosidad hasta encontrar el punto en el que notemos que ambos elementos tengan un color similar.

Ajustes ópticos en formas y logotipos

La percepción que tenemos de las formas geométricas es un tema muy interesante. E intentar ajustarlas y alinearlas no se queda atrás. Hace poco empecé a diseñar el típico icono de play de un reproductor de video, un triángulo equilátero. Nada del otro mundo. Pero este triángulo iba dentro de un círculo. Centrar ambos elementos no fue tan sencillo como parecía sobre el papel.

Colocar el triángulo justo en el centro, justo con el mismo número de pixeles a cada lado, no hacía que lo percibiese centrado. Seguro que vosotros también os percatáis como la distancia entre el margen izquierdo y el lado izquierdo del triángulo es mucho menor que el lado derecho y el vértice derecho del triángulo. Cuando ambos son de 40px. Esto se produce porque el centro de masas del triángulo no está a la mitad de su altura, sino algo más bajo. Esta situación es fácil de solucionar si dibujamos el círculo concéntrico del triángulo, y hacemos la alineación con respecto al círculo concéntrico. Vemos como el resultado es más placentero para la vista.

Eso sí, esta no es una solución única, ya que la percepción visual no son unas reglas escritas en piedra. Como ejemplo, tenemos un logotipo que seguramente sea de los más vistos en el mundo a lo largo del día.

Si analizamos el logotipo de YouTube, vemos claramente como el triángulo no está centrado tal como vimos en el ejemplo del principio. Pero es que tampoco está centrado por su centro de masa, que fue la solución que adaptamos antes y que nos parecía correcta. Al no tener un fondo en formato cuadrado, sino rectangular, nuestra percepción vuelve a cambiar, por lo que sus diseñadores tuvieron que hacer otro ajuste óptico extra para que el logotipo se viese de forma correcta. Este es un ejemplo claro de como en el ajuste óptico no existe una norma única, sino que debemos fiarnos de nuestra percepción y, por supuesto, de nuestra experiencia.

Ajustes ópticos en tipografía

Por último queríamos hablar de otro elemento que tenemos muy presente a la hora de diseñar, como son las tipografías. Seguro que habrá alguno de vosotros que alguna vez se ha propuesto crear una tipografía propia en algún proyecto, y ha tenido que estudiar tipografías ya creadas para buscar inspiración. Pero cuando miramos al detalle algunas de estas tipografía, encontramos detalles tan curiosos como este de la fuente Roboto.

Si trazamos una linea horizontal por la parte superior de la f minúscula, vemos como la parte superior de la panza supera esa línea horizontal, al igual que la oreja de la r minúscula. Algo que posiblemente nunca hayamos notado al leer un texto. Pero es que si estas zonas redondeadas terminasen justo donde hemos añadido la línea vertical, si que notaríamos como si estuviesen por debajo. El diseñador de la tipografía es perfectamente consciente de estos detalles, y por eso hace estos pequeños ajustes para que la lectura sea agradable y no notemos cosas extrañas.

Pero no solo hay que realizar ajustes ópticos en el trazo de las grafías, sino también al alinear los propios textos. Si escribimos un texto con la tipografía Montserrat, lo alineamos a su izquierda sin tocar absolutamente nada, pasa esto.

Si utilizamos un tamaño muy grande de texto, o si hacemos zoom, vemos como no existe una alineación perfecta del margen izquierdo. Las letras que tienen un lado plano están desplazadas unos pixeles más a la derecha que aquellas redondeadas. Se produce el mismo efecto que vimos antes. Las grafías redondeadas tienen una superficie de contacto menor con el margen, por lo que nos da la sensación de que están algo desplazadas, cuando en realidad no es así.

Si sois asiduos a usar software de maquetación como InDesign, seguro que habéis visto que existe una opción llamada Alineación óptica, que precisamente sirve para corregir estos rasgos. Aparte, también nos ayudan a desplazar ciertos símbolos, como los guiones de las listas o los corchetes, para que el texto se note más equilibrados.

Como hemos podido ver, no siempre la lógica al elegir colores o alinear elementos a la hora de diseñar es la solución más adecuada. La forma en la que percibimos el mundo y nuestro cerebro lo interpreta hace que no siempre nos resulte confortable visualmente lo que estemos creando. Y aquí es donde entra de lleno el ajuste óptico, cuando tenemos que hacer pequeñas correcciones hasta que notemos que todo se muestra de forma correcta.

Esperamos que os haya resultado interesante este tema. Y como siempre, tenéis disponibles los comentarios para hacernos llegar vuestras dudas, sugerencias y experiencias con el ajuste óptico.

La entrada La importancia del ajuste óptico en el diseño se publicó primero en Silo Creativo.

Siempre que hemos traído recopilatorios de tipografías, intentamos que sean variadas y que abarquen diferentes estilos y campos de trabajo. Ya sean serif, sans serif, especiales para números, de estilo geométrico… Pero si nos paramos a pensar con un poco más de perspectiva, prácticamente todas estas tipografías tienen un denominador común: hacen uso de un color plano. Por supuesto que podemos cambiarlas de color, he incluso utilizar dos colores, uno para el relleno y otro para el borde. Pero las opciones se limitan casi a solo esto. Por eso, hoy os hemos preparado una selección de tipografías de colores.

Con tipografías de colores no nos referimos a que cada letra, número o símbolos tenga un color distinto, sino que cada uno de ellos pueden albergar varios colores, e incluso degradados, texturas y transparencias. Todo esto es gracias al formato de fuente OpenType-SVG, que no es más que una fuente OpenType en la cual sus glifos son SVG. Por lo que los creadores de estas tipografías tienen todas las posibilidades que les da el formato SVG.

Las fuentes OpenType-SVG (también llamadas fuentes de color) están soportadas por software de diseño, como Photoshop, Illustrator o Affinity Designer, y por los navegadores Safari, Firefox y Edge. Por contra, aun son incompatibles con Premiere, After Effects y Chrome. También tener en cuenta que, por su propia naturaleza, este tipo de archivo pesan más que otros como el OTF y TTF. Eso sí, tal como estos formatos de fuentes, son vectoriales, por lo que podemos utilizarlos a cualquier tamaño sin que se pixelen ni pierdan calidad.

Bueno, después de esta pequeña introducción, vamos a ver algunas de las fuentes de color más interesantes que hemos encontrado, y que puedes descargar para empezar a trabajar con ellas de forma inmediata.

Abelone

Ir a Abelone

Creada por Maria Grønlund, Abelone es una fuente que se inspira en las conchas marinas iridiscentes, de las que toma su color y las formas redondeadas para crear los degradados púrpuras, turquesas y verdes. Todo esto hace que cada letra tenga un estilo muy llamativo, pero al mismo tiempo agradable a la vista.

Anaglyph

Ir a Anaglyph

Anaglyph mezcla, por un lado el tener un formato isométrico, lo cual ya es una parte importante de su personalidad. Y por otro, el tener dos sombras a cada lazo, una cyan y otra rosa. Esto hace que nos recuerde al famoso efecto de aberración cromática, que se ha puesto muy de moda en ciertas ilustraciones para conseguir un aspecto distintivo.

Beach Towel

Ir a Beach Towel

Con Beach Towel tenemos una mezcla de muchas cosas. En general, apuesta por un estilo retro por la elección de colores. Si entramos al detalle, vemos como cada letra esta descompuesta en varias partes que están un poco separada, lo que da la impresión de dinamismo. Y todo esto con diferentes estilos, que van desde el color plano, a las tramas de rayas o punteadas.

Blockino

Ir a Blockino

En Blockino cada símbolo es, por si solo, casi una pintura abstracta geométrica. Una de las opciones más interesantes es que podemos personalizar con los colores que queramos desde su propia web, que incluso tiene ya algunas paletas de color preestablecidas. Y una vez encontremos la que más nos guste, solo hay que descargarla para empezar a usarla.

Colortube

Ir a Colortube

Ivan Filipov creó Colortube con Fontself en Illustror, una de las herramientas de las que hablamos en Silo para poder diseñar nuestras propias tipografías. Colortube se forma mediante unas formas muy simples de líneas rectas, circunferencias y semicircunferencias. Y en el encuentro entre ellas, coloca un punto de color, que le da ese aspecto tan distintivo e informal.

Homed

Ir a Homed

Homed es una fuente que esta formada por dos elementos: un fondo con degradado de color, y líneas simples por delante. La mezcla entre ellos hace que tenga un estilo marcadamente ochentero, ideal para vuestro proyectos retro. Además, su potencia visual la hace idónea para títulos de pósters y carteles.

Simbox

Ir a Simbox

Si quieres una tipografía inusual y llamativa, Simbox es tu opción. Cada letra esta deconstruida, tiene elementos unos encima de otros, no hay simetría y juega con muchas formas geométricas de diferentes colores. Un aspecto rompedor para los que busquen llamar la atención.

Softa

Ir a Softa

Con Softa volvemos a los degradados de color, pero en esta ocasión para dotar de volumen a cada letra. Casi consigue un aspecto de que las palabras están compuestas por globos, y que son en 3D. Y como en el resto de tipografías de este artículo, podemos modificar sus colores para llegar a la combinación que mejor se adapte a nuestro proyecto.

Viva La Fiesta

Ir a Viva La Fiesta

Terminamos con Viva La Fiesta, que es posiblemente la más heterogénea de todas. Y no lo decimos por decir, ya que cada símbolo tiene un estilo diferente al resto. Si a esto le sumamos el poder modificar su color a nuestro gusto, tenemos opciones casi infinitas, y cada letra nunca será igual a otra.

La entrada 9 Tipografías de colores para usar en tu diseños se publicó primero en Silo Creativo.

A pesar de que actualmente pasamos gran cantidad de nuestro tiempo consumiendo contenido en formato de video o imágenes, los textos siguen teniendo una importancia vital para dar y recibir información. Sin embargo, siguen siendo muchos los diseñadores que dejan el diseño de sus textos como un aspecto secundario en sus proyectos, que ya trabajarán cuando les llegue el contenido final. Incluso a veces el tiempo que le dedican es el de elegir una tipografía concreta y poco más. Esto es un error, ya que un texto que no tiene cuidado todos sus detalles en cuanto a diseño puede producir un rechazo en el lector. Si ya hemos hablado anteriormente en Silo Creativo sobre el diseño de textos, pero en esta ocasión nos queremos centrar en el interespaciado de los textos.

Cuando trabajamos el interespaciado nos estamos refiriendo el hecho de añadir o quitar el espacio existente entre las letras de un texto. Por defecto, ya sea si estamos trabajando en una web o en un programa de diseño vectorial como Illustrator, cada tipografía viene con un interespaciado determinado que podemos modificar. El problema viene cuando modificamos este parámetro sin saber muy bien porque lo hacemos, o por motivos estéticos. Esto puede provocar que un texto perfectamente legible ya no lo sea tanto, con los inconvenientes que eso nos va a traer.

Por eso es importante tener en cuenta dos cosas: porqué estamos modificando el interlineado, y cuando hay que modificar el interlineado. La mayoría de las veces es algo que acabamos aprendiendo a base de ensayo y error, ya que no hay una fórmula básica que aplicar. El uso de un interlineado u otro depende e muchos factores: longitud del texto, tamaño de la tipografía, si el texto esta en mayúsculas o minúsculas, o el color del texto y su fondo. Según estemos en unas circunstancias u otras (o en varias a la vez) deberemos aplicar unas soluciones u otras. Pero recordamos de nuevo que no hay una solución mágica, pero teniendo unas principios básicos que nos guíen, y apoyados por nuestra experiencia como diseñadores, no habrá nada que temer.

Eso sí, antes de entrar de lleno en como usa de forma correcta el interespaciado, vamos a hacer un repaso a dos conceptos que seguro que muchos habéis usado, pero no todo el mundo sabe nombrarlos: el kerning y el tracking.

¿Qué es el tracking y el kerning?

A veces los conceptos tracking y kerning se confunden, y es más que posible que los hayamos usado indistintamente uno u otro y no hayamos notado la diferencia.

El tracking (o interletrado o interletraje) es el espacio existente entre los diferentes glifos de una tipografía. Si metemos cada glifo en un recuadro imaginario, el tracking es el espacio existente entre cada uno de esos recuadros. Y ese espacio puede ser tanto positivo (los glifos estarán más separados que en su valor por defecto) o negativo (los glifos estarán más juntos, pudiendo incluso solaparse entre ellos).

El kerning es el espacio existente entre dos glifos determinados, y que el diseñador de la tipografía ha tenido que ajustar aparte del tracking para que no existan huecos extraños y la lectura del texto sea visualmente satisfactoria. El ejemplo más sencillo de ver es el kerning existente entre la A y la V.

Sin el kerning, notaríamos que el espacio entre ese dos glifos es demasiado grande. Por eso, el diseñador hace estas modificaciones manuales en algunas parejas de glifos para que se sienta el conjunto más uniforme. Un caso claro de tipografía sin kerning lo podemos ver en las fuentes monoespaciadas. En ellas, cada glifo está definido dentro de un espacio rectangular, y los glifos a su alrededor no entran dentro de ese espacio.

Es decir, mientras que el tracking es algo que aplicamos de forma global a un texto, el kerning se hace de forma particular entre glifos. Eso si, hay que tener cuidado al modificar el kerning, ya que lo estamos cambiando tanto para el espacio anterior como al posterior de un glifo.

Eso sí, el kerning es algo que podemos cambiar en programas de diseño como Illustrator o InDesign. Si hablamos de diseño web, podemos ajustar el tracking de un texto gracias a la propiedad CSS letter-spacing. Y el kerning con la propiedad CSS font-kerning.

La importancia del interespaciado en la legibilidad

Ya hemos dicho que la regla número uno a la hora de crear un texto que funcione es que sea legible. En realidad, esto es matizable cuando usamos un texto que funcione como imagen, como por ejemplo en un logotipo. Pero en esta ocasión nos estamos refiriendo a encabezados, cuerpos de texto, pies de fotos, etc. Si al diseñar este tipo de texto y modificar su interespaciado, finalmente no resultan legibles, o su lectura es incómoda, tenemos entre manos un diseño fallido.

En el caso particular de cuerpos de texto, o textos largos como un artículo, lo ideal es no modificar el interespaciado por defecto, o hacerlo en un porcentaje mínimo, ya sea para añadir o quitar espacio entre letras. Cuando elegimos una tipografía, en la mayoría de las ocasiones esta ya esta preparada para ser legible en su estilo normal. Por lo que cualquier cambio que hagamos casi siempre va ser a peor.

Cuando modificar el interlineado es una buena idea

Pero no todos nuestros textos van a estar en esta situación. Vamos a tratar ciertos casos donde la modificación del interlineado puede darle un plus a nuestro diseño, ya que la legibilidad pasa un poco a un segundo plano

Encabezados y texto con poca longitud

Los encabezados o titulares de un texto, por definición, suelen ser textos cortos o de pocas palabras, por lo que su lectura se hace de forma rápida. Aquí podemos jugar un poco más con el interespaciado por cuestiones estéticas, agrandándolo un poco. Esto también es aplicable a cualquier texto que tenga un tamaño grande y que funcione más como decoración que como contenido para ser leído.

Fuentes con tamaño pequeño

En casos en que usemos un tamaño de texto muy pequeño, es posible que visualmente nos resulte que las letras se agolpan entre sí demasiado, por lo que añadirles un poco de espacio puede resultar positivo para mejorar su legibilidad. Si además le sumamos que esté el texto en mayúsculas, incluso podemos añadirle más interespaciado.

Texto claro sobre fondo oscuro

El efecto de irradiación también nos va a afectar a la hora de usar el interespaciado. Y es que al tener un texto claro sobre un fondo oscuro, dicho texto nos resulta visualmente que es mas grueso que si los colores estuviesen invertidos.  Por ello, si estamos diseñando en modo oscuro, es preferible incrementar un poco el interlineado para compensar el grosor añadido por el efecto. Esto es un ilusión óptico, pero que deberemos tener en cuenta en nuestro diseño.

Texto que funcionan como imagen o parte de un logotipo

Este es un caso particular, y es cuando podemos modificar el interlineado de una forma más manual, saltándonos un poco las reglas. Y es que es por razones visuales, donde la legibilidad casi ni la tenemos en cuenta. Vemos un ejemplo claro en el logotipo de Zara:

Aquí los glifos se superponen unos sobre otros, no sabemos muy bien donde empieza uno y termina el otro… Pero no importa, ya que se va buscando es una imagen, no tener una lectura cómoda de un texto. Y no solo se usa en logotipos. Si también podemos usar este interespaciado negativo en texto muy cortos, muy grandes y en negrita. Porque su finalidad es crear un elemento potente y con gran carga visual.

Conclusiones

Como hemos visto, el uso del interespaciado en los textos es de vital importancia para mantener la legibilidad de nuestros textos. Pero no solo eso, sino que también nos sirve para que, cuando queremos que nuestros textos funcionen como un elemento visual, darle más potencia. Eso sí, debemos tener claro en que ocasiones es preferible modificar o no este espacio entre glifos para no cometer errores.

Esperamos que os haya resultado interesante este artículo y, como siempre, tenéis disponibles los comentario para hacernos llegar vuestra dudas, sugerencias y experiencias sobre este tema.

La entrada La importancia del interespaciado en el diseño de textos se publicó primero en Silo Creativo.

Cuando estamos diseñando una web con WordPress, uno de los puntos esenciales es la elección de una fuente adecuada. Y en muchas ocasiones, raro es que el tema que tengamos activado y sobre el que vamos a trabajar en nuestro diseño tiene la fuente, o la combinación de fuentes, que tenemos en nuestra mente para levantar nuestro proyecto. En estos casos, WordPress dispone de multitud de plugins para añadir fuentes de forma sencilla. Pero en esta ocasión vamos a pasar de plugins, y queremos enseñaros la manera de poder albergar de forma local en nuestra instalación de WordPress cualquier fuente, sin necesidad de plugins.

Pero no solo nos va a servir para personalizar un tema que tengamos instalado. Si estamos creando nuestro propio tema en WordPress, es la forma ideal de poder incluir cualquier forma que queramos, y que le aparezca al usuario final en su editor para que pueda usarla con normalidad. Además, tener las fuentes guardadas de forma local en WordPress nos ofrecen varias ventajas que quizás puedan interesarte:

• No dependemos de servidores externos como Google Fonts. Al tener el archivo con las fuentes dentro de nuestra propia instalación, no hay que hacer ninguna llamada externa para que estas se carguen al entrar en nuestra web. Y en la mayoría de las ocasiones, va a dar más velocidad a nuestra web.
• Como no vamos a usar plugins, también es una carga menos que le vamos a meter a WordPress
• Desde WordPress 6.0, añadir fuentes de forma local es mucho más sencillo que nunca gracias a la Web Fonts API, así que vamos a aprovechar esta nueva característica que nos ofrece

En el tutorial de este artículo vamos a utilizar como el tema Twenty Twenty-Three incluido en la última actualización de WordPress. Así, también vamos a ver como es la organización de carpetas en un tema WordPress moderno. No tardemos más y empecemos por el principio, que es buscar y descargar la fuentes que queramos usar en nuestro diseño.

Paso 1: Elige y descarga tus fuentes

Podemos encontrar multitud de webs y repositorios online donde poder descargar fuentes. Desde Google Fonts, Bunny Fonts o Adobe Fonts como sitios exclusivos de tipografías, hasta otras webs de diseño más generalistas, como Behance. O incluso en el propio Github muchos usuarios suben las fuentes que han creado. Para este ejemplo quiero usar las fuentes Poppins y Montserrat, dos de las más populares en Google Fonts. Así que es tan sencillo como ir a su web y descargar un .zip con todos los archivos necesarios. Eso sí, antes de continuar, vamos a hacer algunas de puntualizaciones.

Fuentes y sus estilos

Cuando vamos a la página de una fuente cualquiera en Google Fonts, vemos como nos aparece un listado con todos los estilos diferentes disponibles para esa fuente. Normalmente estos estilos se refieren a su grosor (o font weight), o si es normal o cursiva.

Si nos fijamos bien, cada tipo de grosor (light, medium, regular…) va asociado a un valor (300, 400, 500…). Es importante tener en mente esta equivalencia entre tipo e grosor y su valor, porque es la que va a utilizar WordPress también.

Si no enlazamos bien el archivo con cierto tipo de grosor con su valor, cuando el usuario elija un grosor no le va a mostrar el estilo correcto. Aquí tenéis una tabla con las equivalencias entre el nombre del estilo de grosor y su valor, y que podéis mirar en caso de duda.

Atención al tipo de archivo de nuestras fuentes

Cuando descargamos una tipografía de una web, nos la pueden dar en formatos muy diferentes. Las que he descargado de Google Fonts, Poppins y Montserrat, están en formato ttf. Pero podemos encontrar otros diferentes como .ttf, .otf, .woff, .woff2… En principio, WordPress nos va a reconocer cualquiera de ellos pero, personalmente, os recomiendo usar .woff o .woff2 (aunque este último con cuidado por su compatibilidad), ya que son formatos comprimidos y pensados para la web, y que por regla general se van a cargar más rápido. De forma sencilla puedes encontrar conversores de .ttf a .woff, pero si prefieres usar el primer formato en tu proyecto, no vas a tener ningún problema.

Fuentes variables

No es casual que haya escogido la fuentes Poppins y Montserrat, ya que nos van a permitir hablar de un tema interesante, como son las fuentes variables. Cuando descargues Poppins de Google Fonts, verás como en el zip hay múltiple archivos .ttf, cada uno de ellos con un estilo diferente. Pero con Montserrat tendremos, además de una carpeta también con estos múltiples archivos, dos archivos .ttf más con su versión fuente variable. Un archivo alberga todos los tipos de grosores de Montserrat en su versión normal, y el otro todos los grosores en versión italic. WordPress nos va a permitir usar tantos los archivos de fuentes clásicas como las variables, así que podemos elegir la que queramos. Más adelante veremos como hacerlo con cada una de ellas.

Paso 2: Copia las fuentes dentro de WordPress

Una vez tengamos las fuentes descargadas en nuestro ordenador, vamos a subirlas a WordPress. Tanto si estáis trabajando en local como si tenéis la web en un hosting externo, la carpeta donde vamos a colocar los archivos de las fuentes va a ser el mismo.

Vamos a irnos a la carpeta donde esté alojado el tema donde queramos añadir la fuente. Aquí dentro, buscaremos la carpeta assets, y dentro de ella la carpeta fonts. Si no vemos estas carpetas porque, por ejemplo, estemos con un tema hijo, las podemos crear sin problemas. Ya dentro de la carpeta fonts y por temas de orden, podemos crear otra carpeta con el nombre de la fuente que vamos a alojar en nuestro WordPress. Esto nos va a ayudar si queremos tener varias fuentes en nuestro WordPress, ya sea ahora o en el futuro, y que cada una de ellas esté en su carpeta correspondiente y no todas mezcladas dentro de un mismo sitio.

En nuestro caso, dentro de la carpeta fonts creamos una carpeta llamada poppins y otra montserrat. En la carpeta poppins pegamos los 18 archivos .ttf que hemos venían dentro del .zip descargado desde Google Fonts, ya que pretendemos usarlos todos. Si en vuestro caso solo vais a usar unos estilos concretos, no es necesario que copies todos, solo los estilos que vayáis a usar en el proyecto. Con respecto a la carpeta montserrat, voy a pegar los dos archivos de fuentes variables, así vemos también como añadir esta clase de fuente a WordPress

Bien, ya tenemos nuestras fuentes dentro del directorio de archivos. A continuación, le diremos a WordPress que las hemos colocado ahí y cuales son sus estilos para que nos la reconozca, y se puedan usar en el editor.

Paso 3: Añade las fuentes a tu theme.json

El archivo theme.json los podemos encontrar en la carpeta raíz de nuestro tema. Eso sí, antes de abrirlo y empezar a escribir en él, haremos una copia de seguridad del archivo, por si acaso hacemos algo mal sin querer y queremos volver a los ajustes iniciales con facilidad. Si como en el paso anterior, estamos trabajando con un tema hijo, es posible que no tengamos un archivo theme.json dentro de la carpeta del tema, por lo que lo creamos nosotros.

Una vez tenemos el archivo theme.json, buscamos la sección settings, y dentro de ella el apartado fontFamilies. O si hemos creado el theme.json, lo escribimos nosotros mismos. En nuestro caso, como estamos trabajando sobre en Twenty Twenty-Three, podremos ver que aquí se encuentra todo el código que hace que WordPress reconozca las fuentes de este tema, como DM Sans, Inter o IBM Plex Mono. Si nos fijamos en la estructura del código, podemos ir descubriendo casi de forma intuitiva como podemos hacer lo mismo para añadir nuestra fuente. Aunque de todos modos, vamos paso a paso explicado para que sirve cada línea.

En primer lugar, añadimos el apartado «fontFace» bajo fontFamilies. Cada apartado «fontFace» va a albergar una fuente diferente. Por ejemplo, si queremos añadir la fuente Roboto y la fuente Pacifico, cada una de ellas va en un «fontFace» diferente. Dentro de «fontFace» vamos a crear diferentes apartados, donde en cada uno de ellos vamos a definir un estilo diferente de una fuentes y su localización en diferentes líneas. Veamos cuales son:

• «fontFamily» – aquí designamos el nombre de la fuentes.
• «fontStretch» – decimos si estamos con una versión normal, condensada o expandida de la fuente.
• «fontStyle» – si tiene un estilo normal o en cursiva (italic).
• «fontWeight» – el grosor de nuestra fuente, expresado en números. Estos valores son los que vimos en el primer paso, que van de 100 al más fino hasta 900 el más grueso.
• «src» – es la localización del archivo de la fuente dentro del directorio de WordPress.

Tras esta explicación, veamos como queda nuestro código si quiero añadir la fuente Poppins, en sus estilos light y light italic

Pues tal como hemos hecho con estos dos estilos de Poppins, habrá que hacerlo con todos los que queramos añadir de esta fuente. Podemos ir copiando y pegando cada trozo de código, e ir cambiando los valores para ajustarlo a cada estilo y poner de forma correcta donde esta su archivo. Si te fijas, al final hemos añadido tres líneas más, que no son mas que nada que el nombre de la familia de la fuente, el nombre que queremos darle en WordPress y su slug, que siempre debe ser único.

Ya sabemos como añadir el código en el caso de una fuente con muchos archivos, cada uno de un estilo diferente. ¿Pero qué hacemos si queremos añadir una fuente variable?. Pues aun más sencillo. Veamos el código resultante en el caso de la fuente variable Montserrat:

Vemos que es exactamente igual que con una fuente clásica, solo que en vez de un valor único en «fontWeight», le damos el rango completo de los grosores disponibles. Si tenemos nueve grosores diferentes, con una fuente variable no habrá que escribir nueve trozos de código por cada grosor, con el consiguiente ahorro de tiempo.

Pues una vez hayamos escrito nuestro código y guardado los archivos, podemos volver al editor de WordPress y veremos como ya nos aparecen nuestra nuevas fuentes Poppins y Montserrat, listas para que las podamos usar.

Conclusiones

Aunque al principio puede parecer un proceso algo complejo, una vez entendemos los pasos que tenemos que dar, donde situar los archivos de fuentes y el código a escribir, añadir una fuente de forma local en WordPress se va a convertir en algo natural cada vez que creemos un tema en WordPress, o simplemente queramos personalizar el que ya tengamos activado. Y todo ello sin tener que recurrir a plugins de terceros, teniendo así una instalación lo más limpia posible.

Además, como vamos a tener el propio archivo de la fuente dentro de WordPress, no dependemos de servicios de terceros como Google Fonts para conectarnos a sus servidores y que nos carguen los estilos. Todo va a estar en nuestro servidor, con la consiguiente rapidez de carga al no tener que hacer llamadas externas.

Y con esto terminamos por hoy. Esperamos que os haya sido de utilidad y que gracias a este pequeño tutorial podáis dar un paso más allá en la personalización de vuestro WordPress en el ámbito de las tipografías. Como siempre, tenéis disponibles los comentarios para hacernos llegar vuestras dudas, sugerencias y experiencias con WordPress y las fuentes.

La entrada Cómo añadir fuentes de forma local a WordPress (sin plugins) se publicó primero en Silo Creativo.

El diseño gráfico es un campo creativo que desempeña un papel fundamental en la comunicación visual. Ya sea a través de logotipos, carteles, páginas web o publicaciones en redes sociales, el diseño gráfico tiene el poder de transmitir mensajes, captar la atención y establecer conexiones emocionales con el público objetivo. Sin embargo, para que un diseño gráfico sea verdaderamente efectivo, es crucial que exista coherencia visual en cada uno de sus elementos.

Con coherencia visual nos referimos a la armonía y consistencia en el uso de colores, tipografías y estilos a lo largo de una composición o identidad visual. Es la capacidad de mantener una estética uniforme y reconocible, que refuerce la identidad de una marca o proyecto. Cuando los colores, tipografías y estilos son consistentes, el diseño gráfico se vuelve más atractivo, profesional y fácil de comprender para el público.

En este primer artículo abarcaremos el tema de los colores consistentes, su valor como elemento psicológico e identificativo para una empresa, además de ver algunos ejemplos reales en marcas reconocibles.

La importancia de los colores consistentes

Los colores desempeñan un papel fundamental en el diseño gráfico, ya que tienen el poder de transmitir emociones, evocar sensaciones y captar la atención del espectador. En este sentido, la coherencia en el uso de colores se vuelve esencial para el éxito de cualquier proyecto visual. A continuación, exploraremos la importancia de los colores consistentes en el diseño gráfico:

El impacto psicológico de los colores en el diseño gráfico

Cada color tiene su propia psicología y evoca una serie de asociaciones y respuestas emocionales en las personas. Por lo tanto, la coherencia en el uso de colores en el diseño gráfico es esencial para lograr un efecto deseado en el público objetivo.

Los colores tienen la capacidad de evocar emociones y estados de ánimo específicos en las personas. Por ejemplo, el rojo suele asociarse con la pasión y la energía, mientras que el azul se asocia con la calma y la confianza. Al mantener una coherencia en la elección de colores en un diseño gráfico, se puede lograr un impacto emocional específico en el público objetivo. Esto ayuda a establecer la atmósfera y el tono adecuados para comunicar el mensaje de manera efectiva.

También pueden ser utilizados para comunicar los valores y la personalidad de una marca. Al elegir colores consistentes que reflejen los atributos y características deseadas de la marca, se puede construir una identidad visual coherente y auténtica. Por ejemplo, una marca que se asocia con la sostenibilidad y la ecología puede utilizar una paleta de colores naturales y terrosos para transmitir esta imagen.

Sin olvidar que también tienen significados culturales y simbolismos que varían según las diferentes sociedades y culturas. Es importante tener en cuenta estas connotaciones culturales al elegir colores para un diseño. La elección de colores asegura que el mensaje no se interprete erróneamente o cause malentendidos en diferentes contextos culturales.

Un ejemplo muy curioso lo tenemos con los parques temáticos de Disney. El color temático del parque original en EEUU era el morado, y lo siguió siendo para el parque inaugurado en Paris en 1992 con el nombre Euro Disney. El problema es que, poco después, el equipo de marketing de Disney se dio cuenta que el color morado tenía una percepción diferente en los países católicos europeos, donde se vinculaba a la temática de la crucifixión y la muerte en esta religión. Un par de años después, hubo un completo rebranding y el parque pasó a llamarse Disneyland Paris, y se abandonó el color morado por el azul. Eso sí, aun podemos ver algunos de los diseños originales del parque de Paris usando este color.

La coherencia cromática y su efecto en la identidad visual de una marca

Con coherencia cromática nos referimos a la consistencia en el uso de colores y la armonía en toda la paleta cromática de una marca. Esto implica seleccionar y utilizar colores de manera coherente en todos los aspectos visuales de la marca, desde el logotipo hasta los materiales de marketing y la presencia en línea.

Esta coherencia cromática nos va a ayudas a establecer una identidad visual sólida y distintiva para una marca. Al utilizar una paleta de colores consistente en todos los aspectos visuales, se crea una imagen reconocible y memorable. Esta consistencia cromática permite que la marca se destaque en un mercado competitivo y se diferencie de sus competidores.

Los colores deben crear una coherencia visual en todos los puntos de contacto con la marca. Esto incluye elementos como el logotipo, el diseño de productos, el sitio web y los perfiles de redes sociales. Al mantener esta coherencia cromática, se crea una experiencia visual unificada y coherente para los consumidores, lo que facilita el reconocimiento de la marca y fortalece su presencia en la mente del público.

La coherencia cromática también es crucial al adaptar la identidad visual de una marca a diferentes contextos y medios. Ya sea en impresiones, en línea o en aplicaciones móviles, mantener colores consistentes garantiza una experiencia visual cohesiva y reconocible para los consumidores, sin importar el canal o plataforma que estén utilizando.

Cómo elegir una paleta de colores coherente y estratégica

Elegir una paleta de colores coherente y estratégica para un diseño gráfico es un proceso importante que requiere considerar varios factores. Aquí hay algunos pasos y consideraciones clave para ayudarte a seleccionar una paleta de colores efectiva:

• Comprende el mensaje y la identidad de marca
• Investiga las asociaciones y significados de los colores
• Considera la psicología del color

Una vez que tengamos una comprensión clara del mensaje y la identidad de marca, debemos seleccionar colores que sean coherentes entre sí. Elige una paleta que tenga una armonía visual, ya sea mediante la elección de colores complementarios, análogos o tonos similares. La coherencia cromática es clave para crear una identidad visual sólida y reconocible. Eso sí, hay que asegurarse de que los colores seleccionados ofrezcan suficiente contraste para garantizar una legibilidad óptima. Si vas a utilizar colores en el texto y en el fondo, asegúrate de que haya suficiente diferencia de brillo y saturación para que el texto sea fácilmente legible. El contraste también puede ayudar a destacar elementos importantes y guiar la atención del espectador.

Y antes de comprometerte con una paleta de colores, realiza pruebas visuales para evaluar cómo se ven los colores juntos y cómo se adaptan a diferentes contextos y medios. Observa cómo se ven en diferentes dispositivos y considera cómo funcionan en diferentes situaciones de iluminación. Esto te ayudará a garantizar que los colores seleccionados sean efectivos y se ajusten a tus objetivos de diseño.

Ejemplos de marcas que utilizan colores consistentes en su diseño gráfico

Veamos algunos ejemplos de marcas que han logrado mantener la coherencia en el uso de colores en su diseño gráfico. A través de la consistencia visual, estas marcas han establecido una identidad sólida y reconocible, lo que les ha permitido destacarse en el mercado y conectar de manera efectiva con su público objetivo.

• Coca-Cola: Coca-Cola es conocida por su uso consistente de los colores rojo y blanco en su diseño gráfico. Estos colores se han convertido en parte integral de su identidad visual y se utilizan en su logotipo, empaques de productos, anuncios y campañas de marketing.
• Google: Google utiliza una paleta de colores consistentes conocida como Google Colors. Estos colores vibrantes, que incluyen el rojo, amarillo, verde y azul, se aplican de manera coherente en su logotipo, interfaz de usuario y otros materiales de diseño.
• Facebook: El diseño gráfico de Facebook se caracteriza por el uso consistente del color azul. El tono de azul utilizado en su logotipo y plataforma se mantiene de manera uniforme en todas sus aplicaciones y comunicaciones visuales.
• McDonald’s: El diseño gráfico de McDonald’s se destaca por el uso consistente de los colores rojo y amarillo. Estos colores se utilizan en su logotipo, letreros, packaging de alimentos y otros elementos visuales relacionados con la marca.

Conclusiones

La coherencia visual desempeña un papel fundamental en el diseño gráfico, y en particular, la coherencia en los colores, tipografías y estilos visuales es esencial para crear un diseño efectivo y memorable. A lo largo de este primer artículo, centrado en los colores, hemos explorado como estos nos afectan en un plano psicológico, y la importancia que tiene la elección de una paleta de colores correcta para que el mensaje que queremos transmitir se haga de forma correcta.

Y es que la consistencia en los colores dentro de una marca nos ayudan a organizar y jerarquizar la información. Cuando los elementos visuales se mantienen consistentes, se genera una impresión positiva y se refuerza la credibilidad de la marca o proyecto. Además de crear una apariencia estética armoniosa y establecer un tono adecuado para el diseño en general.

La entrada La importancia de la coherencia visual en el diseño gráfico: Colores (I) se publicó primero en Silo Creativo.