Si eres lector habitual de Silo sabes que de vez en cuando nos gusta dar una mirada al pasado en busca de inspiración. Hay incluso quien dice que en diseño está todo inventado y que solo hace falta redescubrirlo. Sea o no verdad, recursos como el que os traemos hoy seguro que ayudan a vuestras mentes creativas a oxigenarse un poco y tal vez encontrar ese punto o detalle necesario para el proyecto que tengamos entre manos.

En este caso se trata de Canada Modern, un archivo digital (aunque también físico) sobre el diseño gráfico comprendido entre los años 1960 y 1985 donde podremos encontrar logotipos, diseño editorial o tipografías, pero también biografías y artículos interesante sobre este periodo.

Diseñando una identidad canadiense y los Juegos Olímpicos de Montreal

La elección de dicho periodo no es casual, pues se incluyen algunos años importantes de la historia del país, como fue 1967 (Centenario de Canadá y Expo de Montreal) y 1976 (Juegos olímpicos de Montreal). La construcción de la identidad y manifestación de la misma a ojos del mundo se entiende recorriendo los diseños de estos años.

Algunos ejemplos interesantes que hemos encontrado de diseño de logotipos:

A propósito del logo de las olimpiadas de Montreal de 1976, su diseñador George Huel declaró que era una forma muy simple, extendiendo los aros olímpicos para formar una M (de Montreal) y que curiosamente nadie había propuesto en las ediciones anteriores (Mexico 68 or Munich 72).

Interesante también la recopilación de diseños descartados para el logo de la Exposición.

También algunos ejemplos de diseño editorial y portadas de discos, como este para los Juegos Olímpicos:

Como seguro has podido ver, diseños que han envejecido muy bien y que guardan muchas similitudes con algunos diseños actuales.

Inspirándonos en el pasado para diseñar el futuro

Recientemente hablábamos sobre el acercamiento entre diseño editorial y diseño web gracias a CSS Grid, y sobre de que forma toda la historia del primer campo (diseño editorial) podría servir como inspiración al diseño web en la construcción de los layouts en los próximos años. De hecho ya hay algunos ejemplos interesantes construidos con CSS Grid que nos recuerdan a esos diseños de revistas y portadas de libros.

Por tanto, sea cual sea tu ámbito de diseño, siempre es recomendable hacer una mirada crítica al pasado tratando de comprender el entorno y el momento en que las piezas fueron diseñadas para entender su significado y obtener una buena dosis de inspiración, que nunca viene mal!

Espero os haya servido este recurso

La entrada Canada Modern: Archivo de diseño gráfico sobre Canadá se publicó primero en Silo Creativo.

Gracias a la reciente compatibilidad con Google Chrome, en las últimas semanas se está hablando con bastante frecuencia de las Variable Fonts, aunque realmente pocos las están usando. O están sacando un partido real de ellas. Pero casi todos los que la conocen están de acuerdo en algo: es el futuro de la tipografía. tanto en el mundo del diseño gráfico como del diseño web.

En Octubre de 2016, se lanzó la versión 1.8 de OpenType. Con ella se presenta una nueva tecnología: OpenType Font Variations. Poco meses después, se empieza a hablar de ella aún más en la TypoLabs de Berlin. Y es en esta edición del evento cuando las Variable Fonts ocupan un lugar central. Y no es para menos, ya que es un nuevo paso en la evolución de las tipografías. O más bien, es una revolución, tal como fueron en su día el TrueType o el PostScript.

Pero, ¿realmente es para tanto?. ¿De que forma va a cambiar la manera que entendemos y trabajamos en la actualidad con las tipografías? Mediante un par de artículos, desde Silo Creativo queremos enseñaros que son las Fuentes Variables, y como usarlas tanto si somos diseñadores gráficos, como si queremos añadirlas a nuestros proyectos en la web.

¿Qué son las Variable Fonts?

Las Variable Fonts fueron desarrolladas gracias al esfuerzo de cuatro grandes compañías tecnológicas: Apple, Google, Microsoft y Adobe. Y como sugiere su nombre, las Variable Fonts, o Fuentes Variables, nos permite crear un número ilimitado de variaciones de una misma fuente, partiendo de un mismo archivo de fuente.

Esto nos permite modificar grosor, anchura o inclinación de la tipografía a nuestro gusto. Sin vernos ceñidos a los clásicos y conocidos estilos Bold, Italic o Thin, por ejemplo. Con las Fuentes Variables, esto se acaba.

Como ya sabéis, en Silo Creativo somos amantes de la tipografías. Y en muchas ocasiones os hemos recomendado algunas combinaciones de fuentes para usar en vuestro proyectos. Imaginaos las nuevas posibilidades que las Fuentes Variables nos ofrecen.

Como siempre, tendremos que andar con cuidado, ya que en el momento que tenemos libertad absoluto para crear, la posibilidad de que nazca una aberración está presente. Pero también está la otra cara de la moneda. Seguro que gracias a esta nueva herramienta, surgirán creaciones asombrosas que nunca hubiésemos imaginado.

Compatibilidad de las variable Fonts

Ya sabéis que siempre me gusta comprobar la compatibilidad que tienen las nuevas herramientas con los navegadores web actuales. Y para eso, me gustar tomar como referencia la web Can I Use. Veamos los resultados que nos da al respecto de las Fuentes Variables:

Como vemos al entrar en Can I Use, en las últimas semanas se está hablando tanto de las Fuentes Variables gracias a que es completamente compatible con la última versión de Google Chrome de escritorio. Además de con  Microsoft Edge y Safari. Pero por desgracia, aún no está implementado en Mozilla Firefox, ni se prevé que lo haga a corto plazo. Aunque los usuarios de la Firefox Developer Edition pueden activarla.

Por cierto, si sois desarrolladores, os recomiendo encarecidamente el uso de  Firefox Developer Edition, ya que trae multitud de herramientas que seguro que os son de utilidad. Sobre todo si actualmente estáis trabajando con CSS Grid.

¿Por qué usar Variable Fonts?

El primer motivo es que, con las Fuentes Variables podemos reducir de forma considerables el número de archivos a usar cuando estemos diseñando. Por ejemplo, imaginemos que vamos a usar Roboto, una de las fuentes que solemos recomendar para hacer combinaciones. Si nos vamos a Google Fonts, nos encontramos con esto:

Si, tal como lo veis. Tenemos que descargar doce archivos si queremos usar todos los estilos que Roboto tiene disponibles. Roboto Light, Roboto Italic, Robot Bold… Esto es espacio que estamos ocupando de forma local en nuestro equipo. Y si estamos creando un web, espacio en el servidor. O nuevas líneas de código CSS. Es decir, estamos siendo mucho más eficientes, tanto en cuestiones de espacio de archivo, como en carga para la web. Ya sabemos como de importante es optimizar estos tiempos de carga para que nuestra web se comporte de forma correcta, y no sea penalizado por los buscadores.

Con las Variable Fonts ya solo tenemos un archivo de fuente. No tenemos que elegir que estilo de fuente queremos en cada momento. El estilo de fuente lo vamos a crear según nuestras necesidades. Nunca vamos a tener una fuente con dos estilos iguales.

Variable Fonts en el Diseño Gráfico

Desde finales del año pasado, tanto Adobe Photoshop CC como Adobe Illustrator CC se actualizó para poder usar de forma nativa Variable Fonts. Como ya sabemos, ambos programas son dos de de las herramientas más usadas por los diseñadores web para crear prototipos y diseños previos de websites. Aunque, como ya hemos visto, existen en el mercado otras alternativas si eres diseñador web.

Como vemos en la imagen, se ha añadido un nuevo panel lateral con nuevas opciones que aparecerán activas en el momento que tengamos seleccionada una Fuente Variable. Esto es lo que podremos realizar al modificar cada una de ellas:

• Weight – podemos variar el grosor de la fuente. Este valor va desde 1 a 999.
• Width – cambiamos el ancho individual de cada letra, sin modificar su grosor, o el espacio entre letra y letra.
• Slant – varía la inclinación que tiene la fuente, por lo que podemos crear que una cursiva se tumbe según nuestras necesidades.

Por ahora, estas son las únicas opciones disponibles en Illustrator para modificar las fuentes. Pero no descartamos que añadan opciones nuevas en el futuro para que las personalización vaya a más.

En el siguiente artículo, veremos como usar las Variable Fonts en un diseño web mediante algunos ejemplos. Ya que mediante el uso de diferentes propiedades CSS veremos realmente el potencial que tiene este nuevo.

Y como vamos a hacer uso de CSS, como siempre, os recomendamos echar un vistazo a nuestro artículo de introducción a CSS. Seguramente hagamos uso de algunas propiedades que vimos en aquel texto. Por lo que si no lo habéis visto, es un buen momento para hacerlo.

Esperemos que os haya gustado, y os esperamos en la continuación de este artículo dentro de unos días que, como hemos dicho, se centrará completamente en el campo del diseño web. Tenéis disponible los comentarios para cualquier duda, sugerencia o añadido que queráis realizar!

La entrada Variable Fonts: Presente y Futuro de la Tipografía (I) se publicó primero en Silo Creativo.

Si la semana pasada estuvimos explicando que eran las Variable Fonts, que significaban para el mundo de la tipografía, en esta ocasión veremos donde se pueden llegar a explotar realmente todas sus posibilidades: en el diseño web. Por eso, hemos querido dedicarle un artículo en exclusiva a este campo del diseño.

Y es que, a pesar de que ya están disponibles en algunos programas de edición vectorial y retoque fotográfico, como los del paquete Adobe, gracias a las propiedades CSS que tienen las Variable Fonts, multiplicamos de forma exponencial las variaciones de estilo tipográfico que podemos llegar a conseguir. Como vamos a estar viendo algo de código, os recomiendo que echéis un vistazo a nuestro artículo sobre CSS, si es que no estáis muy al día sobre este lenguaje.

Antes de empezar, y si queréis hacer vuestras propias pruebas, lo ideal es que lo hagáis con un navegador web compatible. Tal como vimos la semana pasada en nuestro artículo sobre Variable Fonts, podéis usar en escritorio tanto Chrome, como Edge o Safari.

El formato OpenType Font

Una Fuente Variable OpenType contiene uno o más ejes, cada uno de los cuales da una variación particular a la fuente. También nos permite lograr un aspecto de fuente intermedio, tal como vimos que se puede lograr en Adobe Illustrator mediante el nuevo panel de Variable Fonts, que se ha incluido en sus últimas versiones.

La especificación OpenType 1.8 define cinco etiquetas de eje:

• weight <whgt> – lo controla la propiedad CSS font-weight, con un valor que va desde 1 a 999.
• width <wdth> – lo controla la propiedad CSS font-stretch, pudiéndose transformar en cualquiera de los dos ejes.
• optical size <opsz> – se usa para variar el diseño para adapatarse a diferentes tamaños de texto.
• slant <slnt> – lo controla la propiedad CSS font-style. Por defecto, está a 20 grados, pero puede variar entre -90 grados y 90 grados.
• italic <ital> – se logra cuando establece propiedad CSS font-style como italic.

Si quieres ver como funcionan gráficamente estos ejes, la siguiente ilustración que aparece en el (muy) recomendable articulo sobre Variable Fonts de John Hudson es bastante certera. El cubo representa todo el espacio que tenemos disponible si usamos los tres ejes variables (en color verde): weight, width y optical size. Mientras que en color naranja están las diferentes combinaciones entre ellas.

Aunque tenemos estás propiedades entre algunas otras más, esto no significa de que estén disponibles en todas las fuentes. El incluir estos ejes o no depende de forma exclusiva del diseñador de la fuente variable. Normalmente, los ejes que suelen estar en la mayor parte de este tipo de fuentes suelen ser weight y width.

Añadiendo una Variable Font a nuestra web

Añadir una Variable Font a nuestra hoja de estilos CSS es tremendamente sencillo. Por ejemplo, en mi caso, quiero añadir la fuente Amstelvar. Esta fuente es una con las que podemos jugar desde la web de Axis Praxis, que os recomiendo encarecidamente que exploréis para ver todo lo que puede ofrecer una Fuente Variable.

@font-face {
src: url('AmstelvarAlpha-VF.ttf');
font-family:'Amstelvar';
}

Como veis, es un formato similar a cuando insertamos cualquier otro tipo de tipografía en nuestra web. Si quereis encontrar más tipos de Fuentes Variables, además de la mencionada Axis Praxis, ya hay algunas disponibles en Typekit, o en el GitHub del estudio Type Network. Si tenéis más Fuentes Variables que hayáis visto en otras webs, podéis dejarlas en los comentarios, para ampliar aun más este listado!

Variaciones de la fuente con CSS

Una vez ya tenemos introducida la Fuente Variable en nuestra hoja de estilos, veamos como podemos modificarla. Como hemos comentado, las opciones de personalización de cada fuente dependerá de las que haya introducido el creador de la misma. A las ya conocidas propiedades font-weight y font-stretch, se les suma algunas más, añadidas en CSS Fonts Module Level 4. Si entráis en esta web podréis ver todo el listado disponible.

En esta ocasión, quiero varias los valores weight y width de la fuente que hemos elegido, Amstelvar. El código resultante sería el siguiente:

body {
font-family: "Amstelvar";
font-weight: 325;
font-stretch: 74;
}

Pero, si queremos definir los valores de nuestra fuente en una sola declaración, podemos hacerlo mediante font-variation-settings. Con esta propiedad, podemos dar valor a cada una de las diferentes opciones en una sola línea, solo separados por comas. Veamos como quedaría:

body {
font-family: "Amstelvar";
font-variation-settings: 'wght' 325, 'wdth' 74;
}

Más allá de la pura tipografía

Otra de las opciones que nos ofrecen todas estas propiedades CSS está en el uso de elementos más allá de las tipografías. Si habéis explorado la web de Axis Praxis, es posible que os hayáis cruzado con la fuente Zycon.

Si probamos a mover algunos de los toogles disponibles, veremos como cada una de las ilustraciones se modifican de cierta manera.  Esto abre otro camino de posibilidades para crear animaciones o elementos totalmente personalizables vía CSS. En Codepen, Mandy Michael se aprovecha de esta característica de las Variable Fonts para crear un efecto animado muy curioso

Conclusiones finales

Aunque, como hemos podido ver, las Fuentes Variables aun no están listas aún para usarlas en producción. A pesar de eso, no es motivo para que no estemos atentos a todas las novedades que vayan apareciendo.

Se espera que a lo largo de este año y principios de 2019, el soporte en los navegadores web empiece a ser mucho mayor. Como vimos en el anterior artículo, el único gran navegador que no lo incluía era Mozilla Firefox. Por lo que es una excelente oportunidad de empezar a experimentar con las opciones que nos ofrecen, tal como hicimos con CSS Grid hace unos meses.

Por último, si queremos usar las Fuentes Variables desde hoy mismo, las podemos incluir en nuestros proyectos web. Aunque desde Silo Creativo te recomendamos que las uses bajo el paraguas de las Feature Queries, del que escribimos un articulo hace unas semanas. Gracias a las Feature Queries, podemos probar nuevas herramientas, sin tener que preocuparnos de que éstas no sean compatibles con ciertos navegadores. Además de que una vez se actualicen dichos navegadores, harán uso de ellas sin que tengamos que cambiar una sola línea de código.

La entrada Variable Fonts: Aplicación en el Diseño Web (II) se publicó primero en Silo Creativo.

El uso de combinaciones de texto e imágenes es mucho más habitual de lo que puede parecer. Lo primero que nos llega a la cabeza pueden ser los típicos banner de publicidad de productos, pero va mucho más allá. Puede servir para posicionar tu logotipo en la cabecera de tu web con tu fotografía favorita. O para enviar un mensaje de una forma más visual a tus usuarios o clientes.

Y aunque en un primer momento pueda parecer algo sencillo, para que realmente funcione hay que tener en cuenta diferentes variables. Porque un mal uso de esta combinación puede hacer que nuestro logo no sea legible. O que el mensaje que queramos trasmitir no llegue de forma correcta. Aparte de que, si entramos en el aspecto visual, queramos conseguir una disposición de imagen y texto agradable a la vista.

Por estos motivos, nos lanzamos a hacer este artículo. Porque seguro que habéis visto combinaciones de texto y fotografías que no cumplían su función. Con todo lo que ello supone para nuestra marca personal, o para nuestra empresa.

Además de los consejos que queremos enseñaros en esta ocasión, no queremos olvidarnos de recomendaros otros artículos que hemos visto anteriormente en Silo Creativo. Por ejemplo, el texto que dedicamos en exclusiva a la regla de tercios y su aplicación, tanto en diseño gráfico como en diseño web. O aquel en que que dimos algunos principios con los que mejorar nuestros diseños, con ejemplos prácticos del mundo de la publicidad, el cine o el arte.

Para hacer este artículo hemos hecho uso del catálogo de fotografía disponible en Unplash. Unplash es un repositorio gratuito de fotografías, con más de medio millón de imágenes, todas ellas de gran calidad.

Y como no todo es las imágenes que vayamos a usar, también es importante tanto el texto como el tipo de fuente que elijamos. Os recomendamos que echéis un vistazo a alguno de los artículos que tenemos sobre nuestras tipografías favoritas. O también sobre las mejores combinaciones de fuentes, si tenemos pensados diferentes niveles de texto. Aunque si prefieres rebuscar entre colecciones de tipografías, siempre puede ir a Google Fonts, donde encontrarás cientos de ellos, todas de uso gratuito.

Sin más, vamos a meternos de lleno en nuestras recomendaciones. Este listado es mucho más amplio, pero queremos mostraros algunas de las más interesantes y fáciles de aplicar.

Pon un toque de color en tu texto

Añadir un color diferentes a ciertas palabras del texto puede funcionar de dos formas distintas. Si usamos un color opuesto al del fondo, le estamos dando mucha importancia a esa palabra

, dándole al fondo una protagonismo muy secundario.

Mientras que si decidimos poner un tono parejo al del fondo, dotamos al conjunto de mucha suavidad, dando un aspecto más amable y compensado entre todos los elementos de nuestra composición.

Desenfoca el fondo de tu imagen

De las más sencillas de realizar. Damos importancia al texto aplicando un desenfoque a la imagen. Jugando con estas variables, podemos dar lugar a varios escenarios. Por una parte, una fotografía totalmente desenfocada, donde el punto de interés es el propio texto. O por otra, que los únicos objetos enfocados sean el texto y un único algún componente de la imagen.

Este último caso suele darse cuando, por ejemplo, en banner de publicidad, cuando lo interesante es dar importancia a una única pieza, y al texto que la acompaña. Aunque podemos aplicarla en diferentes circunstancias.

Dale un tintado de color a tu imagen

Aunque es difícil de encontrar su punto intermedio, una vez que lo consigamos, este efecto es de los más estimulantes. Y es que hay que lograr un equilibrio entre que se note el color que estemos usando, que se vea la fotografía de fondo, y que el contraste con el texto sea suficiente. Pero cuando lo consigamos, el resultado es espectacular. Muy recomendable usar con el color de nuestra marca.

Si queremos ir un paso más allá, podemos pasar de un color plano a un gradiente. Y es que los gradientes son una de las tendencias en el diseño de este año. Eso si, estudia bien los colores a combinar para que tu composición tenga un aspecto agradable.

Añade contraste entre texto e imagen

Uno de los aspectos a tener en cuenta es que nuestro texto sea legible. Esto lo conseguiremos si el color de nuestro texto es lo suficientemente contrastado con respecto al fondo. Además, con esto nos aseguramos que las personas con algún déficit visual tengan problemas el ver nuestras composiciones. Al respecto de esto, la accesibilidad es un tema que siempre deberíamos tener en cuenta, tal y como te contamos en uno de nuestros artículos.

Y con contraste no solo nos referimos a la diferencia de color, sino también a su tamaño. Una fuente muy pequeña puede resultar ilegible o pasar desapercibida. Al igual que un texto que tenga una tipografía muy fina. Si nuestro texto no se lee, no será capaz de transmitir su mensaje.

Haz que el texto sea parte de la imagen

De esta lista, quizás sea el punto que más me gusta. Porque no es simplemente colocar el texto y fin. Hay que analizar la fotografía y todos sus elementos, descubrir los diferentes planos y colores. Y desde este punto, ver como podemos encajar el texto dentro de la imagen.

Uno de mis ejemplos favoritos son los títulos de inicio de Panic Room, de David Fincher. En el vídeo, podemos ver como la tipografía, recreada digitalmente sobre el plano de la ciudad, toma las perspectivas de la imagen, se refleja en los edificios, o da sombra a los viandantes. Es un elemento externo que forma parte del fondo.

Enmarca tu texto

En algunas ocasiones nos enfrentamos con una fotografía con multitud de colores, donde es complicado hacer que nuestro texto resalte. Por lo que una de las opciones que tenemos es, además una de las más sencillas. Y no es mas que colocar una forma de color justo debajo del texto.

No nos llevemos a engaño con el título que hemos puesto. Esta forma no tiene porque ser necesariamente rectangular. Podemos hacer un círculo u otra forma poligonal. Y si notamos que el contraste es demasiado grande, siempre tenemos la opción de dotar a esta forma de cierta transparencia para que muestre un poco el fondo, y se integre algo mejor en la composición general.

Como veis, las opciones son múltiples. Combinadas con nuestros conocimientos previos que tenemos sobre encuadres y tipografías, harán que nuestras imágenes con texto sean mucho más atractivas y visuales.

Como siempre, tenéis abiertos los comentarios para cualquier apreciación que queráis decirnos. O si tenéis alguna otra idea sobre combinación de imagen y texto que sepáis, nos la podéis comentar y las añadimos al artículo!

La entrada 6 Consejos para crear Composiciones de Imagen y Texto se publicó primero en Silo Creativo.

Tanto miedo que le teníamos a septiembre y ya ha pasado casi sin darnos cuenta. Es un mes de cambios, y mientras nos ponemos al día las semanas van pasando dejando paso a un nuevo mes, octubre. Como ya he dicho en numerosas ocasiones, este mes es para mí muy especial, me gusta. Dejamos septiembre atrás y nos sumergimos de lleno en esa carretera que veníamos diciendo.

Los proyectos se van asentando y poco a poco volvemos a la rutina y hasta nos gusta! Vemos que todo lo que habíamos pensado el mes anterior va tomando forma y poco a poco lo iremos construyendo.

Nosotros este mes seguimos viajando por esa carretera, pero en esta ocasión hemos llegado al mar, que nos acompaño el verano. Así que no podemos más que explorarlo y descubrir que nos depara.

Disfrutad del mes y aprovecharlo en cada uno de sus días y sus noches.

Combinación tipográfica

En este caso hemos realizado una combinación de Google Font. Para los números la tipografía escogida ha sido la Nanun Gothic, una sans serif elegante que cuenta con tres tipos dentro de la misma familia.

No es muy extensa pero en este caso cumple su función. Para el titulo tomamos la tipografía Notable, con unos trazos fuertes y gruesos que nos permiten jugar y componer. Como veis creamos contraste entre ellas a la vez que nos ayudan a conjugar la ilustración.

Combinación de colores

Estamos en un fondo marino, pero hemos de tener en cuenta que fuera es de noche por lo que esa atmósfera hemos de trasmitirla debajo del mar. El color azul tiene mucho protagonismo, combinándolo con el amarillo (no podía ser el submarino de otro color). De esta manera queremos que la ilustración de Septiembre se sumerja en este mes y todo nos transporte a una noche oscura en la que la luna comienza a salir.

Diseñado por Silo Creativo

Dimensiones

800×480

1024×768

1280×720

1280×800

1440×900

1920×1080

Si lo preferís sin calendario para fondo de pantalla del móvil…

1920×1080

(Formato .png)

La entrada Calendario descargable: Octubre 2018 se publicó primero en Silo Creativo.

Si bien es cierto que el año está por acabar y que casi estamos pensando más en las tendencias que el 2019 nos deparará, no hay que olvidar que la mayoría se contagian de un año para otro por lo que no viene nada mal recordar las de este año (que hemos tenido algo olvidadas) y así comenzar el que viene con las ideas muy claras. De esta manera hoy hablamos de tendencias en tipografías.

Si empezamos con un análisis general, aunque muchas de las tendencias vienen del año anterior, este año las tipografías “top” se han acercado a tipografías grandes y planas, con grandes grosores y con muchas posibilidades de introducción de colores y gradientes encargados de darle personalidad.

Tipografías con mucha fuerza, pero con un carácter quizá mas sobrio, para luego dar la posibilidad de incorporar la creatividad con colores y formas. Hemos dejado atrás (solo un poco, porque siguen estando muy presentes), las tipografías de estilo a mano y con ornamentos, para volver a los trazos más regulares.

Así pues, analicemos 6 de las tendencias en tipografías en este 2018. Comenzamos!

1. Trazos sencillos y gruesos

Como veníamos diciendo, dejamos de lado los ornamentos que nos llevan acompañando unos años y vamos hacia tipografías más elegantes y también con una mayor legibilidad. Tenemos trazos gruesos y simples, que funcionan con mucha facilidad, y que como luego veremos convertimos en originales con el color.

Son tipografías muy fáciles de leer y con las que sencillamente podemos introducir contraste. Tipografías que antes usábamos como texto de párrafo, de repente son una buena opción para un titulo principal o un logo.

De esta manera las tipografías sans serif toman un protagonismo especial y aunque podamos ver tipografías estilo a mano, estas se relegan a espacios muy concretos como puede ser un logotipo.

2. Grande… siempre es mejor!

Como los trazos sencillos y gruesos son tendencia, no es de extrañar que haya que darles tamaño! Son simples, no recargan el diseño por lo que podemos usarlos a tamaño completo y que repartir personalidad allá donde vayan!

Además, enlazando con la siguiente tendencia, necesitamos grosor para darles color y de esta manera queden ocupando todo el espacio.

3. Vuelta del color

Si habíamos dejado el color un poco de lado, puesto que jugábamos con tipografías de trazos más finos y de estilo a mano, el color vuelve a ser una parte importante de las tipografías. Pensad que en sí, estas tienen un carácter mas sobrio por lo que necesitamos del color para darles personalidad y hacerlas propias.

De esta manera, si queremos seguir usando en mayor parte el estilo blanco y negro, el color, en la tipografía principal, puede convertirse en el eje que agregue énfasis visual.

También es cierto, que hemos de tener claro que color vamos a usar. Recordar las combinaciones que dan contraste y que llaman a la acción. Por ejemplo, si jugamos con un estilo banco/negro y en la tipografía queremos meter la nota de color, el uso de un azul claro no creemos que sea lo más adecuado. En resumen, si vamos a usar la tipografía como punto de contraste, usa un color que ayude a ello.

Por otra parte, no solo es tendencia la introducción de colores planos, sino que los gradientes nos pueden ayudar a dar esa nota de originalidad, a la vez que no recargamos el diseño.

4. Tipografías resaltadas

Ya vimos en el artículo de las familias de Google Font, que se están introduciendo algunas tipografías resaltadas y suponemos que irán a más, porque en este año han sido tendencia. Quizá podéis decir que contrasta un poco con lo que hablamos de ir hacia tipografías más sólidas y sin ornamentos, pero al final, de eso estamos hablando…

Las tipografías son sobrias por lo que, al igual que con la introducción de color, nos encontramos que el resaltado es el que nos da originalidad y pone la nota de creatividad. También es cierto, que no hemos de abusar de ella, pues funciona mejor con textos cortos o palabras que queramos distinguir.

5. Familias tipográficas amplias

Ya lo hemos visto en los últimos artículos de tipografías Google Font, están de moda las grandes familias. Familias muy amplias que dan lugar a combinaciones propias y por supuesto a jugar con los grosores de las mismas.

Con una sola familia realizamos un proyecto entero y además podemos combinar los grosores hasta encontrar la combinación perfecta.

6. Do it Yourself

De cualquier manera, para terminar, si algo es tendencia absoluta es la personalización de los contenidos. Todo es “customizable” y por supuesto la tipografía no se queda atrás. Cuando hablamos de banco de imágenes decimos que mejor que sean nuestras, al igual que los iconos y las ilustraciones, así que ¿por qué no lo mismo con la tipografía?

No hace falta crear nuestra tipografía desde cero, podemos tomar una tipografía que nos guste y personalizarla a nuestro antojo, cambiando la distancia entre caracteres, grosores de algún trazo… Lo que queramos! La posibilidad es tan amplia que si comienzas con ello no puedas parar!

La entrada 6 Tendencias en tipografías para 2018 se publicó primero en Silo Creativo.

Hace mucho tiempo desde la última vez que compartimos combinaciones entre Google Font, esto puede apenarnos, pero no debe ser así… Ahora hay muchas nuevas tipografías de las que hablar! Por mucho que pase el tiempo, no hay un banco tipográfico que lo iguale en calidad y cantidad. La gran variedad de tipografías lo hace perfecto tanto para un proyecto web como para uno gráfico. En él podemos encontrar tipografías creativas, elegantes, serias, infantiles… Cubriendo una amplia gama de las mismas.

De todas formas, personalmente, si algo me gusta de Google Font, es la cantidad de tipografías perfectas para textos de párrafo que contiene. Como sabéis, cuando combinamos tipografías, debemos de cuidar varios factores, como que contrasten entre sí, o también, y muy importante, que el número de tipografías sea el adecuado. Por esto, agradezco cuando una tipografía tiene una amplia familia y podemos combinarla entre sí, casi sin tener que introducir otra.

Es una apuesta segura y esto facilita la vida el diseñador. Es mucho más sencillo combinar dentro de la misma familia que tener que introducir una tipografía distinta, sobre todo para proyectos web y editoriales. No es la primera vez que hablamos de legibilidad, pero sabemos que en ambos es muy importante y que debe ser una de los requisitos a la hora de escoger una tipografía. De esta manera si tomamos una misma familia y la vamos combinando entre sí, la armonía de contraste nos ayudara a llevar una lectura más placentera.

En los últimos calendarios descargables, hemos ido descubriendo algunas de esas Google Font, pero llega el momento de dedicarles un articulo completo y comprobar cómo podemos combinarlas dentro de su misma familia.

M PLUS 1p

Tipografía con 7 estilos dentro de la familia que van desde thin hasta black permitiendo el contraste de varios grosores. Sans Serif, sus caracteres son elegantes y discretos y entre ellos existe la separación exacta para una gran legibilidad.

Como anécdota, comentar que posee caracteres en Japonés, lo que la hace una tipografía muy usada en este país.

Descargar tipografía M PLUS

Dentro de esta familia nos encontramos con la Mplus Rounded 1c que como su propio nombre indica redondea los caracteres de la anterior confiriéndole un aire más dinámico, perdiendo algo de seriedad. Perfecto para darle un aire distinto a un texto concreto que queramos realzar.

Descargar tipografía M PLUS ROUNDED

Barlow

Estamos ante la que puede ser una de las familias más amplias dentro de las Google Font. Cada subgrupo posee 18 estilos entre negritas y la versión en cursiva de cada uno de los grosores disponibles.

Descargar tipografía BARLOW

De hecho, además de la sans serif encontramos dos familias más, la condensed y la semi condensed que poseen 18 nuevos estilos cada una de ellas.

Descargar tipografía BARLOW CONDENSED

Como podéis comprobar, con esta tipografía podemos crear multitud de combinaciones, quedándonos en un solo grupo o usando los tres, hay distintas posibilidad para combinar y jugar.

Descargar tipografía BARLOW SEMI CONDENSED

De cualquier manera tened en cuenta que las tipografías condensed, como su nombre indica, son tipografías con caracteres menos redondeados y con menor espacio entre ellos por lo que hemos de tenerlo en cuenta para la legibilidad.

Zilla Slab

Esta tipografía serif tiene 10 estilos dentro de la misma familia incluyendo cursivas y negritas en cada tipo. Sus caracteres son redondeados confiriéndole un aire de elegancia.

Dentro de esta familia nos encontramos con la Zilla Slab Highlight una tipografía perfecta para señalizar un titulo o alguna palabra concreta. Esta fuente nos puede servir por ejemplo para ejercer de enlaces en una página web, pero claramente no es adecuada para usar como texto de párrafo.

Descargar tipografía ZILLA SLAB

Descargar tipografía ZILLA HIGHLIGHT

Podemos combinar las dos familias dando lugar a un proyecto muy amplio en el que la Highlight sea la encargada de conferirle el aire creativo.

IBM plex

Si decíamos que la barlow es una tipografía muy completa, esta no se queda atrás. Tiene 4 subtipos con 14 estilos cada uno de ellos. Como veis, se basta ella solita para realizar las combinaciones tipográficas que necesitemos.

Descargar tipografía IBM SERIF

La tenemos en Sans serif, serif, condensed y una variedad mono (con un aire más creativo que podemos usar en momentos concretos). Necesitemos lo que necesitemos en esta tipografía podemos encontrarlo.

Descargar tipografía IBM MONO

Además es sencillo combinarla entre si para títulos, párrafos o resaltar un texto o alguna palabra.

Descargar tipografía IBM SANS

Descargar tipografía IBM SANS CONDENSED

La entrada 4 Combinaciones Google Font de grandes familias se publicó primero en Silo Creativo.

En Silo Creativo somos muy amantes de las tipografías. Cada cierto tiempo publicamos algún artículos sobre nuestras fuentes favoritas, o algunas combinaciones de fuentes que pueden resultar muy interesantes en tus proyectos. Incluso echamos un vistazo a las Variable Fonts, que están muy de moda actualmente en el diseño web. Pero claro, vas acumulando fuentes de diferentes proyectos, o que las agregas a tu colección porque pueden ser interesantes en futuros trabajos, y llega un momento que tu biblioteca de tipografías es algo incontrolable.

Por este motivo, queremos mostraros como organizar nuestras tipografías si somos usuarios de Windows, algo que no suele ser algo que nos paramos a considerar. Sobre todo porque la gestión predeterminada de nuestras fuentes que nos permite el SO de Microsoft es bastante básica, siendo benevolentes. Además de ver otras alternativas que podemos encontrar.

También queremos hacer un repaso sobre ciertas pautas recomendables si solemos trabajar con una gran colección de tipografías. Y es que es mejor seguir ciertas normas para que buscar una tipografía en nuestro equipo de trabajo no se convierta en una odisea.

Gestionar Tipografías desde Windows

Añadir una nueva fuente en Windows es muy sencillo. Simplemente copiamos el archivo a la archiconocida carpeta Fonts, o hacemos clic derecho sobre el archivo y le damos a Instalar. Listo, no tiene más misterio. Una fuente más dentro de nuestro dispositivo. Para previsualizarla, no hay mas que volver a hacer clic derecho, y en esta ocasión pulsaremos en Vista Previa. Se nos abrirá una ventana nueva con el pangrama del murciélago en la que veremos nuestra tipografía en unas mejores condiciones.

Pero desde la actualización de Windows 10 de Abril de 2018, tenemos unas opciones extra. Si nos vamos a la configuración de personalización, tendremos una nueva opción llamada Fuentes. En ella, podemos buscar las fuentes que tengamos instaladas por nombre.

Si hacemos clic sobre cualquiera de nuestras fuentes, se nos mostrará una nueva página donde se muestra el nombre de la fuente, una caja de texto en el que podemos escribir lo que queramos para ver una vista previa, un controlador para cambiar el tamaño, e información relacionada con los metadatos de la fuente.

Organiza y Cataloga tu Tipografías: NexusFont

Desde hace algún tiempo, y notando como mi colección de tipografías iba creciendo a la vez que la gestión que hacía de ellas Windows 10 se me quedaba corta, que empecé a buscar una alternativa. Y entre todas ellas, al final me quedé con NexusFont.

Algunas de sus opciones a destacar es que tenemos la opción tanto de instalar el programa en nuestro equipo, como de usar su versión portable, que no dejará ningún rastro cuando la eliminemos. También podemos probar cualquier tipografía que tengamos descargada, sin tener que instalar o copiar en la carpeta de fuentes de Windows. Una manera excelente de testear una tipografía en concreto.

Pero por lo que elegí el programa principalmente es por sus opciones de gestión. Como se puede ver en la imagen, tenemos dos grandes bloques para organizarnos: Librerías y Colecciones. En Librerías podemos añadir las diferentes carpetas donde tengamos nuestras fuentes guardadas. En mi caso, las tengo separadas según su origen, pero puedes elegir el que creas mas conveniente.

Y por otro lado con Colecciones podemos agrupar una tipografía bajo una o varias etiquetas, para así tenerlas más localizables. A mi me resulta más rápido, según el proyecto que tenga entre manos, ordenarlas por estilos, además de tener una Colección extra donde están mis tipografías favoritas, que son las que suelo usar más a menudo. Así, de un vistazo, puedo ver sus nombres y características, y empezar a trabajar con ellas de forma más rápida y eficaz.

Además de NexusFont, existen otros programas para gestionar y catalogar tipografías, como FontBase o RightFont, si sois usuarios de Mac. Como siempre, os recomendamos probar diferentes opciones hasta que encontréis una que se adapte mejor a vuestras necesidades

Algunos consejos para Gestionar tus Fuentes

• Organiza tus tipografías por estilos – Como habéis visto, es algo que he empezado a hacer desde que uso NexusFont. Y es que es muy útil tener juntas nuestras tipografías serif o sans serif, según que tipo de texto estemos creando. Y como estas, podemos crear diferentes librerías según estilo, año, repositorio…
• Borra tipografías duplicadas – Esto pasa cuando nos bajamos fuentes desde diferentes repositorios, y llegamos acumular tantas que no recordamos las que ya tenemos. Un claro síntoma de diógenes digital. Pudiéndose dar el caso de que la misma tipografía tenga diferente nomenclatura según la web. Esto va a provocar, aparte de estas duplicidades, que nuestro equipo tenga que lidiar con mas archivos, provocando ciertas ralentizaciones.
• Nunca borres tipografías preinstaladas – Aunque todos tenemos fobia a algunas tipografías que vienen por defecto en nuestro ordenador, no es buena idea deshacernos de ellas por completo. Y es que todos tenemos una historia con la Comic Sans, pero es mejor reprimir algunos impulsos. Windows nos permite ocultarlas para que nos nos aparezcan en el listado de fuentes.
• No instales fuentes en múltiples formatos – Sobre todo nos referimos a instalar la misma fuente con extensiones de archivos diferentes. Aparte de las duplicidades que hemos comentado antes, se pueden producir errores.
• Ten siempre a mano tus tipografías favoritas – Una buena forma de agilizar nuestro trabajo día a día. Porque, a pesar de que tengamos una gran colección, hay ciertas tipografías que usamos más a menudo y que nos sirven de comodín en nuestros proyectos. Por eso es muy conveniente tenerlas siempre localizadas.

Y vosotros, ¿cómo organizáis vuestra biblioteca de tipografías?. ¿Hacéis uso algún programa específico? Como siempre, podéis dejarnos vuestras experiencias y dudas en los comentarios, que el mundo de las tipografías da para mucho!

La entrada Como Gestionar y Organizar tus Tipografías se publicó primero en Silo Creativo.

Nos es muy difícil aportar algo nuevo acerca de las Google font. Ya sabemos que son muy versátiles y que podemos usarlas para todo tipo de proyectos. Las hay serif, sans serif, más originales y más sobrias… Hay un cajón entero sobre el que escoger.

De hecho hay tantas que a veces nos cuesta quedarnos con solo una de ellas, por lo que con estos artículos queremos que las tengáis agrupadas y así facilitar su elección. Hemos hablado de google font de grandes familias, creativas, sans serf, serf… por lo que hoy nos vamos a centrar en un grupo muy particular, diseñadas por un estudio tailandés, y que cuentan en sus caracteres con un aire Thai.

Cada escritura tiene unas particularidades, por lo que cuando las extrapolamos y conseguimos una tipografía que parte de una escritura y se convierte en otra, nos encontramos con tipografías muy originales y que nos pueden dar un aire distinto a nuestro proyecto. Todas las que aquí os comentamos están diseñadas por Cadson Demak y podéis descargarlas de manera gratuita en la biblioteca de Google Font.

Muchas las hemos ido descubriendo en los calendarios y otras seguro que nos acompañaran a lo largo de este año…. ¿comenzamos?

K2D

Es quizá una de las que más connotaciones tailandesas tiene y que por tanto más nos transporta a ese país. Además, al igual que en todas las de esta lista, podemos encontrar los caracteres de ese idioma. Al tener los caracteres unas terminaciones originales, le dan un toque de creatividad que ponemos usar a nuestro antojo.

Encontramos 16 estilos dentro de la misma familia, por lo que las combinaciones que podemos hacer no tienen límite.

Descargar tipografía K2D

Fahkwang

Está inspirada en la tipografía de los antiguos periódicos tailandeses. Sin embargo, es quizá una de las más latinas o que más nos recuerda a caracteres occidentales. Hemos perdido un poco las volutas en los caracteres, pero su redondez le confiere un aire muy especial.

Cuenta con 12 estilos dentro de la misma familia.

Descargar tipografía Fahkwang

Kodchasan

Esta tipografía está inspirada en la escritura de los adolescentes por lo que es una sans serif muy original y desenfadada. Es legible pero hemos de escoger muy bien su grosor, puesto que tiende a ser delgada (yo partiría de la medium para texto de párrafo).

De cualquier manera con sus 12 estilos es una tipo muy completa que nos permite realizar distintas combinaciones.

Descargar tipografía Kodchasan

Niramit

Esta tipografía es otra de las que más connotaciones tailandeses posee en sus caracteres. No son tan evidentes como en la K2D, pero en conjunto podemos admirar volutas en las terminaciones a la vez que sus caracteres mas redondeados le confieren una alta creatividad y originalidad.

Nos encontramos 12 estilos dentro de la misma familia, que van de grosores finos a gruesos pasando por distintas cursivas.

Descargar tipografía Niramit

Krub

Es quizá una de las tipografías thai, con mas estilo occidental. Es por esto quizá que es una de las preferidas por los diseñadores. Nos encontramos con un estilo thai pero enmascarado, no pierde la identidad de su origen, pero los caracteres son menos marcados y esto le da también, mas legibilidad que a alguna de las anteriores.

Cuenta con 12 estilos dentro de la misma familia.

Descargar tipografía Krub

Koho

Esta tipografía, al igual que las anteriores tiene un estilo thai, que se ve representado en las volutas de las terminaciones de los caracteres. Justamente esto la hace ser una tipografía muy original y creativa.

Tenemos 12 estilos dentro de la misma familia para combinar entre ellos.

Descargar tipografía KoHo

Como veis dentro de un mismo estilo podemos encontrar tipografías muy diversas y con aires muy distintos. Todas poseen grandes familias que podemos combinar, por lo que solo tenemos que dejar volar nuestra imaginación!

La entrada 6 Tipografías Google Fonts con un aire Thai se publicó primero en Silo Creativo.

Si no hace tanto hablábamos sobre las tendencias de tipografías en el año anterior, ahora, ya entrados en 2019, estudiaremos las de este nuevo año. Como podréis ver a continuación, la mayoría manan de lo anterior. Desde al paso al flat design (que si que pudo considerarse más brusco), los cambios en las tendencias se hacen de una manera más escalonada.

Cuando nos disponemos ante un proyecto nuevo, es normal mirar las tendencias en ese nuevo año, y usarlas con vista a que dure unos cuantos más. Otras veces, estamos en un proyecto antiguo al que queremos dar un lavado de cara y usamos un cambio tipográfico para tal fin. A veces solo con cambiar la tipografía de una cabecera o de un titulo, renovamos el aire totalmente.

Siempre lo decimos, no nos podemos dejar guiar solo por las tendencias, hay que diseñar con cabeza, pero sí que es bueno tenerlas presentes, para conseguir diseños que puedan durar en el tiempo.

Así vamos a ver 8 de las tendencias en tipografías para este nuevo año!

1. Disminuimos el tamaño del texto

No es que vayamos a necesitar una lupa para poder leer el texto, pero sí que este, que venía de tamaños “oversize”, pasa a disminuirlo. Los títulos seguirán siendo más grandes, debemos jerarquizar el texto, pero justamente por eso, reduciremos algunos tamaños.

Lo más importante, en cualquier caso, es que ya que vamos hacia tipografías mas pequeñas estas tienen que ser totalmente legibles. Debemos vigilar sobremanera la legibilidad de las mismas, y controlar su espaciado, pues reducimos el tamaño, sí, pero deben seguir cumpliendo su función.

Algunos os preguntareis el porqué de la vuelta a tamaños más pequeños y en este caso debemos hablar del diseño móvil. Las grandes tipografías que en pantallas grandes eran más vistosas, en móvil perdían su personalidad. Siempre vamos a diseños que funcionen en todos los dispositivos, por lo que la unificación de las tipografías nos ayudaran a ello.

2. La vuelta de las serif

Si bien las serif se habían destinado más a formatos impresos, este año vienen para quedarse con nosotros en proyectos web. ¿Problemas de legibilidad? Las serif no son las culpables. Ya elijas serif o sans serif debes escoger una tipografía que sea legible independientemente de su tipo.

Son tipografías con mucho carácter que nos pueden imprimir personalidad a nuestro proyecto, no las dejemos de lado!

3. Tipografías animadas

Si hablamos de que las animaciones son tendencias en todos los ámbitos, no podían dejar de serlo cuando hablamos de tipografías.

Podemos optar por caracteres que se mueven, desaparecen o simplemente se desplazan. Pero cuidado, esto no es una feria! Debemos usar las animaciones con moderación y entender donde y como el usuario va a acceder a esa animación.

Es una tarea complicada, debe estar completamente pensada y razonada y poniendo mucha atención a la velocidad de la misma.

4. Recortes y superposciones

Muy útil sobretodo si nos decantamos por tipografías de gran tamaño. Podemos hacer recortes sobres capas de manera que salgan hacia la superficie mensajes ocultos.

Es una bonita forma de superponer imágenes y texto y conseguir que se conviertan en uno. Como decíamos, hay que vigilar los tamaños y grosores de las mismas, pues no queremos que la superposición no se entienda.

A veces podemos conseguir, no que el texto superponga varias capas, sino que se superponga, por ejemplo, con una imagen de fondo, de manera que parezca que es parte de ella y que pertenece a la imagen desde su comienzo.

5. Diseño tipográfico por bloques

Hemos disminuido el tamaño de las tipografías por lo que tenemos que mantener la fuerza de las mismas. Si estamos ante un texto con una determinada longitud, este debe aparecer de manera que no pierda su firmeza.

Lo importante en este caso es encontrar un tipo de letra que funcione, que mantenga su fuerza y legibilidad cuando nos encontramos ante un texto extenso.

Los saltos de una línea a otra deben hacerse de manera natural, sin que se pierda la legibilidad.

6. Tipografías con color y gradientes

Si el año pasado hablábamos de imprimir color a nuestras tipografías, esta tendencia se mantiene en este nuevo año. El color está muy presente (aunque queden algunos estilos minimalistas en blanco y negro) y nos ayuda a agregar interés visual y énfasis. Usemos la psicología del color para llamar la atención y enviar mensajes.

De igual manera los gradientes, que son igualmente tendencia en todos los ámbitos del diseño, pueden ser los encargados de poner esa nota de color y distinguir nuestro diseño.

7. Tipografías resaltadas

Tendencia también exportada del año anterior. Utilizamos las tipografías resaltadas para dar fuerza y crear contrastes.

Funcionan mejor en bloques de texto menos extensos, pues así crean atención sobre una determinada palabra y no emborronan el mensaje.

8. Do it yourself (again)

Terminamos igual que lo hicimos con las tendencias del año anterior. Y es que el diseño personalizado de las tipografías esta cada vez más presente. Partimos quizá, de una tipografía establecida, pero la personalizamos a nuestro antojo.

Podemos hacer lo que nos plazca hasta conseguir que cumpla nuestro objetivo. Obviamente es la opción mas trabajosa de todas, pero si tienes tiempo y creatividad… ve con ella!

De cualquier manera podemos “customizar” la tipografía en su totalidad o simplemente algo de sus trazos, las posibilidades son infinitas!

La entrada 8 Tendencias tipográficas en 2019 se publicó primero en Silo Creativo.

Con tantas nuevas marcas, cada vez es mas difícil diseñar un logotipo que llame la atención y que lo haga distinto de los demás. Las tendencias van cambiando y si no queremos quedarnos atrás, hemos de actualizar nuestro logotipo. El problema, es que este debe ser único y no parecerse a ninguno de su entorno.

Por eso, es muy importante, además de conocer las tendencias, comprobar cómo nuestro logo se puede adaptar a ellas. Si ya lo tenemos, hay que recordar que no podemos perder la esencia de la marca, y si nos disponemos a diseñarlo, intentar transmitirla teniendo muy en cuenta las modas actuales.

A veces, las tendencias cambian tanto que nos sentimos tentados a ir rediseñando nuestro logotipo para que no se quede fuera de ellas, pero tenemos que tener muy presente que lo importante es que nuestra marca se haga reconocible y por lo tanto, que su diseño, con pequeños cambios permanezca en el tiempo.

1. La serif funciona

Siempre hemos hablado del “menos es mas” y que los logotipos no tienen que ser complicados para funcionar. Pero esto no quiere decir que tengamos que dejar las tipografías tipo serif de lado, sino más bien al contrario. La serif funciona, y escogiendo bien, lo hace perfectamente. Solo tenemos que tener en cuenta algunos detalles.

Los ornamentos a veces imprimen demasiada personalidad y pueden llegar a entorpecer ” el mensaje”, por lo que puede ser una buena idea escoger una serif en la que los ornamentos tengan un tamaño más reducido.

Hay muchos logotipos sans serif, por lo que si te decides por una serif le estarás dando un punto de diferencia y distinción a tu marca.

2. Logotipos con grandes detalles

Como veníamos diciendo, es cierto que tendemos desde hace años hacia el minimalismo, pero parece que esta tendencia puede empezar a resquebrajarse para dar paso a una en la que los logotipos se complejizan.

Estamos hablando de logotipos en los que se incluyen distintas líneas, color… Pequeños elementos que lo van uniendo todo. Esto tiene que estar perfectamente pensado y diseñado, puesto que al final tenemos más una obra de arte que un logotipo.

Claramente por su complejidad, no son aptos para todas las marcas puesto que el logotipo va a ser complejo en sí mismo. Vamos a intentar que la combinación de colores sea suave, y las tipografías simples.

3. Elementos superpuestos

La tendencia, que ya aparecía en las tipografías, como no puede ser de otra manera, hace mella en los logotipos. Es un recurso que en un primer momento nos puede parecer atrevido para un elemento de pequeñas dimensiones, pero que bien usado nos da profundidad e interés visual.

Sin embargo, como anunciamos, es un recurso para usar con cautela, mejor superponer tan solo un objeto, e intentar que el color nos ayude a conseguirlo.

4. Tipografía en minúsculas

Si hace unos años el uso de mayúsculas era casi obligado en el diseño de logotipos, este año vamos a ver todo lo contrario, logotipos que se diseñan solo con letras minúsculas. Hasta ahora es lo distinto, por lo que diseñar con minúscula hará tu logotipo mas original y creativo.

Claro que, es muy importante la elección de la tipografía. Necesitamos una con fuerza y elegancia y que se aplique contraste entre tipografía y fondo para asegurarte que se lee correctamente.

Al tener mucha carga visual, funciona mejor con logotipos cortos que largos. Si tiene demasiada extensión puede perder la legibilidad.

5. Iniciales

Las iniciales están de moda. En un momento en el que intentamos economizar en el lenguaje escrito, esta tendencia pasa directamente a los logotipos. Tomamos las iniciales que pueden ser tres o cuatro caracteres y sobre ellas desarrollaremos el logotipo.

Esta opción es más popular entre profesionales cuya marca sean ellos mismos y usen sus siglas para darse a conocer, pero no es solo para ellos.

Al ser muy simple nos permite usar animaciones o incluirlo con la tendencia que hablábamos en el punto 2 de elementos más complejos.

6. Formas y líneas simples

Aunque hablamos que existe un tendencia en la que los logotipos se complejizan y aparecen distintas líneas y formas, no dejan de estar de moda los logotipos en los que las líneas simples son las encargadas de diseñarlo.

Al final, si las dimensiones de nuestro logotipo van a ser reducidas, por ser el icono de una app, o aparecer en un entorno digital, en general van a funcionar mejor las líneas y las formas simples, que un diseño más complejo.

Las líneas gruesas y finas son tendencia, así que no dudes en usarlas.

7. Círculos

Si ya decimos que las líneas simples son tendencia, la palma se lo llevan los círculos. Ya desde el año pasado veíamos que venían pisando fuerte en el diseño de iconos y este año comienzan a hacerlo en el diseño de logotipos.

La forma más simple y a la vez más compleja que podemos usar de infinidad de maneras. Son fluidos y están asociados con la energía, el poder, lo infinito…

8. Logotipos de un color

Ya sabemos que hay que poner mucho cuidado en las combinaciones de color, y que normalmente cuando diseñamos no debemos hacerlo con más de tres colores (salvo excepciones), por lo que no puede sorprendernos que una de las tendencias sea el uso de un color.

Esto tiene un beneficio adicional, y es que vamos a hacer totalmente reconocible nuestra marca con ese color, por lo que debemos escogerlo bien. Ese color debe representar nuestra marca a la perfección.

Sin embargo, también asistimos a todo lo contrario, logotipos en los que el color explota y llega hacia nosotros. Pero cuidado, al igual que cuando hablamos de logos complejos, hay que saber cómo combinar los colores y que su fuerza no se pierda.

La entrada 8 Tendencias de logotipos en 2019 se publicó primero en Silo Creativo.

Nos podemos cansar de muchas cosas, pero de nuevas tipografías gratuitas…. lo dudo!! Últimamente hemos estado compartiendo google font, por lo que llega el momento de las tipografías creativas perfectas para títulos, logos… en definitiva, elementos destacados.

Es cierto que las fuentes premiun dan más exclusividad pues lo normal es que no estén tan compartidas y descargadas, pero cada vez hay más tipografías gratuitas, y esto hace que sean más exclusivas y que por lo tanto, no sea tan común verlas. Todos recordamos el ejemplo de la Lobster Two, que la tuvimos hasta en la sopa! Esto ha descendido en gran medida por lo que decimos, porque hay mucho más abanico donde elegir.

De todas formas también tiene sus matices, pues esto también ha llevado a que estas se parezcan más entre sí. Hay muchas mas tipografías donde escoger, pero con diferencias muy sutiles. Hay tipos muy similares en los cuales en el detalle encontramos la exclusividad. Solo hemos de encontrar la que mejor cuadre con el proyecto ante el que nos encontramos y ella misma se adaptará a nosotros

Así, veremos las que os enseñamos a continuación, todas son de descarga gratuita y para usar libremente. Esperamos que os gusten y que os acompañen en vuestros diseños!

Marlyana

Tipografía estilo a mano de carácter distendido y creativo. Puede tener un aire navideño que la hace totalmente adecuada, para que la guardemos como favorito y la usemos en las próximas tarjetas navideñas :). Pero no solo eso, me gusta también para tipografías relacionadas con niños y elementos que necesiten gran creatividad.

Descargar tipografía Marlyana

Machineat

Tipografía estilo a mano, que mezcla un aire moderno y vintage. Las mayúsculas tienen un estilo singular que nos puede ayudar a dar creatividad a un texto o a un logotipo.

Descargar tipografía Machineat

Potra

Tipografía para usar en mayúsculas con un diseño creativo que hace que cada carácter tenga algo de especial. Es perfecta para un logotipo o para un título corto. Como tiene tan marcado su diseño, hay que tener muy en cuenta sobre qué fondo la usamos.

Descargar tipografía Potra

Bourbon

Estamos ante una tipografía elegante para usar en mayúsculas. Es muy clara y al tener bastante grosor la podemos usar sobre muchos tipos de fondos sin que pierda su esencia.

Descargar tipografía Bourbon

Willful

Tipografía estilo a mano con suficiente grosor y un aire desenfadado. Tiene un carácter muy especial, pues aun siendo a mano, no es caligráfica.

Descargar tipografía Willful

Oxlade

Tipografía a mano, con estilo caligráfico. Sus caracteres finos y elegantes la hacen muy singular y usable. Es perfecta para resaltar frases o dar un toque de escritura a mano a un proyecto.

Descargar tipografía Oxlade

Nature

Tipografía para usar en mayúsculas con un aire vintage pero a la vez con una redondez en los caracteres que la hace singular y distinta. Tiene bastante fuerza por lo que podemos usarla sobre muchos tipos de fondos.

Descargar tipografía Nature

Gutenberg

Tipografía para usar en mayúsculas. Tiene un aire retro como si de un sello se tratara y las partes del mismo no hubieran sido impresas por igual. Como su nombre indica, como si estuviéramos hablando de la primera imprenta

Descargar tipografía Gutenberg

Karton

Tipografía para escribir en mayúsculas con un aire distendido y quizás un poco infantil. Podemos usarla para ámbitos relacionados con los niños, pues se entiende a la perfección y tiene ese aire que la hace perfecta.

Descargar tipografía Karton

Classical

Tipografía estilo a mano, con un carácter caligráfico. Al igual que la anterior, nos gusta para ámbito relacionado con los niños, pues esta vez en minúsculas, es una tipografía muy clara y legible.

Descargar tipografía Classical

La entrada 10 Tipografías creativas de descarga gratis se publicó primero en Silo Creativo.

Aunque casi siempre solemos fijarnos en las letras al elegir una tipografía, debemos estar al tanto de que no es el único elemento que la compone. A las ya mencionadas letras, se le suman los números y los símbolos. Y aunque estos dos últimos nos puedan parecer secundarios, ya que su uso no va a ser tan común como el de las letras, no debemos menospreciarlos, ya que existirán proyectos en los que su visualización ocupen un lugar primordial.

Los caracteres numéricos tiene una gran importancia en infografías, tiendas online, tablas de precios, calendarios o visualizaciones de datos. Como veis, dentro del diseño web, según el sitio que estemos construyendo, se puede convertir en algo vital.

Nos hemos referido a las tiendas online no por casualidad. En este tipo de webs, los usuarios suelen focalizar su atención en dos puntos importantes: las fotografías del producto y su precio. Hace poco hablamos de la importancia de las imágenes en la web. Pero, ¿que ocurre si nuestros potenciales compradores se encuentra con una tipografía que no muestra los números con una correcta legibilidad, o que no es lo suficientemente atractiva? No podemos arriesgarnos a que eso ocurra. Y para ello, hemos querido hacer este listado de tipografías que tienen números originales y llamativos.

Hemos querido dividir este recopilatorio en dos parte. Por un lado las tipografías serif, y por otro las sans serif. Si no sabes las diferencias entre serif y sans serif, te recomiendo echar un vistazo a este artículo para tener una información más completa. Además, también queríamos mostraros los diferentes formatos de texto de cada tipografía, como negritas, cursivas, etc. Así os podéis hacer una idea de las diferentes alternativas que ofrecen cada una. Pero no tardemos más, y veamos las tipografías para mostrar números que hemos seleccionado para vosotros.

Tipografías Serif

Kameron

Ir a Kameron

Kameron es una tipografía que quizás no sea muy popular, pero que tiene ciertos aspectos que la hacen particular. Tiene unas proporciones bastante cuadradas, a pesar de que las fuentes serif siempre suelen tener un aspecto más estirado en el eje vertical. De todas tipografías serif que vamos a ver en este artículo, probablemente sea la que mantenga un aspecto más clásico, pero sin descuidar detalles más modernos. Ideal para aquellos que busquen un aspecto más elegante.

Slabo

Ir a Slabo

Slabo no llamó la atención porque sus caracteres numéricos no está alineados por arriba y por abajo. Si os fijáis, solo los tres primeros números y el cero está perfectamente alineados. El resto, sobresalen por la parte superior o inferior. Si entráis en su página de Google Fonts, veréis que Slabo está especialmente creada para usarse en dos tamaños, Slabo 27px y Slabo 13px. Esto hace que sea un poco más difícil de encajar en ciertos proyectos, aunque siempre podemos experimentar para insertarlas sin problemas.

Lora

Ir a Lora

Tal como explica su creador, Lora funciona perfectamente tanto en su visualización en pantalla como en su versión impresa. Por lo que te servirá en ambos mundos, o si tienes previsto que se puede imprimir tu blog o web. Su forma irregular, con secciones más estrechas y otras más anchas, hacen que no sea una tipografía monótona de observar. Es la tipografía que podemos calificar como más serif de las que te mostramos en este listado.

Glegoo

Ir a Glegoo

Con Gleego estamos ante la fuente que, de un primer vistazo, pueda parecer que incluso pertenece a la categoría de sans serif. Pero nada más lejos de la realidad. Su formato uniforme, con lineas limpias la hacen idónea para proyectos que necesiten un aspecto más estilizado. También la hacen adecuada para funcionar con diferentes combinaciones de fuentes.

Tipografías Sans Serif

Titillium Web

Ir a Titillium Web

Personalmente no conocía la tipografía Titillium Web, pero durante los último meses se ha convertido en una de mis favoritas. Su aspecto alargado tiene un aire futurista, pero sin ser frío, gracias a sus lineas algo redondeadas. Una fuente perfecta para dar potencia y fortaleza a nuestros números.

Lato

Ir a Lato

Lato siempre está en las primeras posiciones como una de las tipografías más descargadas de Google Fonts. Y, por supuesto, también es una excelente elección si vamos a hacer uso de sus caracteres numéricos. Sus formas redondeadas la hacen tener un carácter más amigable, pero sin perder su seriedad. Muy recomendable para hacer tu calendario mucho más legible y original.

Poppins

Ir a Poppins

Poppins se ha convertido en una de las fuentes que más utilizamos en nuestros proyectos, gracias a su estilo geométrico y que encaja de forma perfecta ante múltiples situaciones. Además, la amplia variedad de formatos de texto (aquí solo mostramos 4, pero tiene un total de 18) hace que tengamos una amplia gama de sabores donde elegir.

Nunito Sans

Ir a Nunito Sans

Cerramos el listado con Nunito Sans, una fuente muy balanceada. ¿Y por qué decimos esto¿ Por que combina unas proporciones muy equilibradas, en algunos puntos casi cuadradas, con un aire muy accesible y refinado. Todo esto sumado a que su buena legibilidad le permite ser mostrada en grandes cantidades sin resultar pesada a la vista.

La entrada 8 Mejores Tipografías para Mostrar Números se publicó primero en Silo Creativo.

Cuando diseñamos una web, el uso de una u otra tipografía siempre resulta uno de los elementos a debate más importante. De hecho, en Silo tenemos varios artículos al respecto, como las combinaciones de tipografías, o las recientes fuentes variables. Pero, una vez elegida la tipografía o tipografías para nuestra web, ¿nos paramos a pensar/crear un diseño para que la lectura de nuestros textos sea la ideal?

Porque de nada nos sirve elegir una tipografía muy bonita, si después no somos capaces de presentar unos textos legibles para la gente que nos visita. O que no sepamos aplicar cierta jerarquía a nuestro contenido para que se puedan distinguir sus diferentes partes, o las frases a las que queremos dar importancia.

Por todo esto, os queremos dar 6 consejos muy simples de aplicar, pero que os ayudarán a que vuestros textos tengan otro aspectos, y su lectura sea mucho más agradable para las personas que os lean. Empecemos.

Respeta la jerarquía de tus cabeceras

Puede parecer algo lógico, pero es un tema en el que caen muchas persona. Si sueles escribir en HTML, sabrás que existen diferentes niveles de headings o cabeceras, que van del h1 al h6. Nos sirven para dotar de importancia a cada una de ellas de forma interna, pero también debemos diferenciarlas de formas visual.

No es la primera vez que nos encontramos un texto con dos cabeceras seguidas, y con un diseño idéntico. Pero si miramos el HTML mediante el inspector de nuestro navegador, veremos que son headings de diferente importancia. Es esencial que las cabeceras más importantes tengan un diseño más grande que las inmediatamente inferiores. Nos aclarará como es el texto en conjunto de un solo vistazo, y será más fácil su navegación al diferenciar de forma clara cada una de sus partes.

Normaliza la longitud de los textos en columnas

Si trabajas o navegas en escritorio, el uso de pantallas panorámicas o de gran tamaño hace una de las mejores formas de mostrar una web sea mediante diversas columnas. Por ejemplo, en muchos diseños de blogs, se maquetan mediante una imagen destacada, y un pequeño extracto justo debajo. Y hay veces que no cuidamos estos pequeños extractos como deberíamos, y les damos una longitud aleatoria sin pensar mucho, obviando que debe ser una lectura concisa sobre el contenido del artículo.

Esto da una mala impresión por varios motivos. Tenemos espacios en blanco muy grandes en algunas zonas (si el extracto es corto), y espacios pequeños en otras (si el extracto es grande). También puede dar la impresión de que algunos textos son más importantes que otros según sea su longitud. Por ello debemos intentar igualar la longitud de estos textos, y que no haya entre ellos una diferencia mayor a una línea.

Centra tus textos con rigor

Alinear los textos de forma central es ideal para resaltar alguna parte dentro del conjunto, o para tener diversos componentes de nuestra web que tienen una longitud corta. Y decimos corta con un motivo, y es que no debemos abusar en el uso de la alineación central.

El truco es alinear de forma central la cabecera del texto, y un cuerpo que como máximo tenga 3-4 líneas. Nos ayudará a acentuar este texto del resto, pero no cansará su lectura. Recuerda alineación a la izquierda para textos largos, alineación central para partes que sean significantes para el lector.

Usa la proximidad a tu favor

Cuando diseñamos una web, es normal buscar que todos sus elementos den un aspecto de orden y homogeneidad como conjunto. Y esto es algo que podemos mediante el espacio vacío, y que este tenga siempre la misma anchura o altura. Pero, cuando hablamos del diseño de un texto, es mejor seguir otras normas.

Y es que, cuando tenemos un título a mitad de un texto, siempre es mejor que esté más próximo al párrafo siguiente, con el que tendrá una relación, a que se encuentre a la misma distancia al anterior y al siguiente. Hacer estos dos espacios diferentes ayudará al lector a distinguir un bloque de texto de otro, y que no parezca que el título sea algo ajeno, o incluso común, a ambo párrafos.

Cuida el espacio entre líneas

Por suerte, las entradas de nuestros blogs tienen una longitud prácticamente infinita, y no nos enfrentamos a problemas que existen en el mundo físico, como intentar encajar todo en una hoja de papel. Por lo que no debemos obsesionarnos intentando meter la mayor cantidad de líneas posibles en el mínimo espacio estrechando el espacio entre líneas.

Para nuestros visitantes, la lectura debe de ser algo agradable, y dejando el espacio suficiente para que nuestro texto respire para que no canse su visualización. Lo ideal es que este espacio entre líneas sea de forma aproximada 1,5 veces la altura que tenga las minúsculas de la tipografía que estemos usando.

No te excedas con las mayúsculas

El uso de las mayúsculas siempre lleva consigo un factor de importancia o fortalecimiento del texto. Por ejemplo, su utilización en imágenes con texto sobreimpreso es muy habitual, porque queremos dar cierta envergadura a dicho texto. El problema llega cuando abusamos de las mayúsculas.

Cuando nos excedemos en la longitud o número de textos en mayúsculas, hace que deje de tener ese valor. Por una parte, si usamos las mayúsculas para dar importancia a ciertas partes del texto, pero las usamos continuamente, todo el texto adquiere el mismo rango y perdemos este factor. Y por otro lado, intenta no usarlo en textos de más de una línea, ya que resulta cansado de leer.

Con estos pequeños conceptos que os hemos dado, la mejora del diseño de los textos en vuestra web será muy palpable. Porque, muchas veces, pensamos en todos los componentes de una web, pero nos olvidamos del contenido escrito, o lo dejamos para el final cuando ya tengamos el diseño cerrado.

Los textos no deben ser algo que debamos encajar en nuestro diseño, sino que deben formar parte integral de él. Gran parte del tiempo que pasamos navegamos es leyendo, y si este tiempo no resulta agradable para el lector, podemos dar por hecho de que no volverán a visitarnos. Porque el diseño no tiene solo un componente estético, sino que debe ayudar a que nuestro día a día sea más placentero y atractivo, y por supuesto, la lectura de contenidos de nuestra web.

Como siempre, tenéis los comentarios abiertos para comentarnos que os ha parecido el artículo, o para hacer cualquier aportación que pueda resultar interesante.

La entrada Consejos para Diseñar de Forma Correcta tus Textos se publicó primero en Silo Creativo.

Seguramente ya os habréis dado cuenta, pero estamos en pleno Halloween. Calabazas, fantasmas, zombies, vampiros y todo tipo de seres extraños y aterradores empiezan a poblar nuestras calles. Y con ellos, seguro que tenéis algún proyecto entre manos con esta temática, y necesitáis usar los recursos adecuados, como una paleta de colores conveniente, o la tipografía correcta.

Tanto si vais a utilizar estas fuentes, como si vais a descargar cualquier otra, os recomendamos que echéis un vistazo a nuestro artículo sobre como organizar y gestionar vuestras tipografías. Y es que, en muchas ocasiones, llegamos a acumular tanta cantidad de fuentes que es complicado saber donde está cada una, o su nombre para utilizarla en un proyecto concreto. Por lo que es una ocasión perfecta para agregar la etiqueta Halloween a vuestra colección.

Suficiente charla, vamos a seguir con lo que nos interesa. Empecemos con este recopilatorio de tipografías que encajaran de forma perfecta en estos terroríficos días. Esperemos que os sean de actualidad, y que podáis dar un susto de muerte con ellas!

Pumpkin Brush

Ir a Pumpkin Brush

Empezamos con Pumkin Brush, que como su propio nombre indica, es una tipografía que parece estar creada con una brocha de pintura. Es ideal para carteles, que tendrán un acabado como de recién pintado. Además, viene en tres variantes: normal, cursiva y velocidad. Este último le da un aspecto más horizontal a la fuente, alargando sus trazos.

Calaveras

Ir a Calaveras

La tipografía Calaveras viene acompañada de un visitante muy especial. Y es que, en cada letra y símbolo de esta fuente tiene agregada una pequeña calavera, diferente en cada grafía. Perfecta para celebrar del Día de los Muertos!. Esta fuente se puede usar en minúsculas, mayúsculas, números, símbolos y caracteres especiales.

Endless Sorrow

Ir a Endless Sorrow

Endless Sorrow está creada por artimasa, y es una tipografía solo en mayúsculas, con un toque retro pero divertido. Esta fuente es ideal para proyectos en los que el texto se muestra en gran tamaño y tiene gran importancia, como ilustraciones, portadas, pancartas, etc. También incluye ciertas palabras clave, que le dan un aspecto más artesanal, casi como dibujado a mano.

Creepster

Ir a Creepster

Esta fuente me recuerda a la que tenían los libros de Pesadillas (Goosebumps en inglés), que parece que están temblando o derritiéndose. Si os fijáis bien, la tipografía tiene cierta perspectiva que hace que su parte superior sea más ancha que la inferior, aumentando su aspectos desasosegaste. Muy adecuado para crear un ambiente siniestro y terrorífico en vuestros proyectos.

Nosifer

Ir a Nosifer

El toque sangriento del recopilatorio lo pone Nosifer. Es una tipografía potente, con una gran anchura, con la que conseguirás atrapar la atención de todo el que vea tus diseños. Ideal para los que les gusta darle un toque de color a sus textos, especialmente para usar con tonalidades rojas.

Deathgrin

Ir a Deathgrin

Deathgrin está diseñado por Sam Parrett y es una de las fuentes más espeluznantes de este listado. Con un estilo marcadamente vertical, incluso con algunas letras mostrándose de forma invertida, dará un aspecto muy original a cualquier diseño. Eso si, solo dispone de tipografías en mayúsculas, lo que da un aspecto aún más imponente.

Jack O

Ir a Jack O

Siendo Halloween, no podían faltar las calabazas a la fiesta, y Jack O es la tipografía que nos la va a proporcionar. Y es que con esta fuente cada letra viene dentro de una calabaza, por lo que es el momento idóneo para utilizar vuestra paleta de colores naranja. Por cierto, ¿soy yo o tiene una estilo parecido a la Comic Sans?

The Crow

Ir a The Crow

The Crow está especialmente creada para aquellos que quieran un estilo vintage, casi cercano al terror gótico. Tiene unas líneas muy ornamentales, por lo que será muy eficaz para títulos a gran tamaño, como por ejemplo en portadas de libros u otros diseños editoriales. El pack incluyo 8 estilos diferentes, por lo que la variedad es uno de sus fuertes.

Creepsville

Ir a Creepsville

Y terminamos con Creepsville, una tipografía gratuita con detalles angulosos, que dan una sensación de antigüedad, o de estar estropeada por el paso del tiempo. Este estilo me recuerda al que tenía el cómic La cosa del pantano en sus inicios. Como veis, muy apropiada para un entorno de miedo.

La entrada 7 Tipografías Terroríficas para Halloween se publicó primero en Silo Creativo.

Se acerca la Navidad, y toca ir mandando cartas y postales a nuestros amigos y clientes, haciendo newsletters especiales felicitando las fiestas o, simplemente, queremos darle un toque más navideño a nuestros textos. Pero claro, no queremos seguir utilizando las tipografías de las que solemos tirar el resto del año. Nos os preocupéis, que en SiloCreativo pensamos en todo y hemos creado una recopilación con las mejores tipografías navideñas para usar en tus textos.

Como en otras ocasiones, hemos querido crear un listado lo más heterogéneo posible, teniendo fuentes más sobrias y elegantes, hasta otras más divertidas y pensadas para los más pequeños de la casa. Además, algunas de ellas tienen caracteres especiales con motivos navideños, con los que darle un toque más especial a vuestros proyectos.

Si es la primera vez que os descargáis algunas de estas fuentes, os recomendamos que echéis un vistazo a nuestro artículo sobre como organizar y gestionar tipografías. Os será de utilidad para probarlas antes de instalarlas en vuestro ordenador. Además de que podréis categorizarlas y etiquetarlas para tenerlas a mano de forma rápida cuando queráis hacer proyectos con temática de Navidad.

En fin, no tardemos más y veamos cuales son estas tipografías navideñas que hemos juntado para vosotros. Esperemos que os gusten y os sean de utilidad para estos días del año.

Cinzel

Ir a Cinzel

Cinzel se inspira en las inscripciones clásicas romanas, basándose en sus proporciones clásicas. Eso sí, está diseñada para tener un aspecto actual, y que encajará de forma perfecta en los títulos de tus postales navideñas. También remarcar que solo tiene disponible caracteres en mayúsculas.

• Modalidad – Gratuita

Miraculous Christmas

Ir a Miraculous Christmas

Esta tipografía nos llamó a atención ya que es la única de este listado que no tiene un color sólido, sino que presenta un cierto texturizado. Gracias a esto, podrás simular que está nevando sobre tu texto. Un detalle que añadir a tus felicitaciones. Además, el carácter & se ha sustituido por un simpático muñeco de nieve.

• Modalidad – Gratuita para uso personal / Versión de pago para uso comercial

Mountains of Christmas

Ir a Mountains of Christmas

Para los que busquen un estilo parecido a la escritura a mano, con Mountains of Christmas tendrán un ganador. Lograrás que tus diseños tengan un toque más personal y distintivo. Ideal para escribir la carta a Papá Noel o los Reyes Magos.

• Modalidad – Gratuita

Candy Cane

Ir a Candy Cane

¿Te gustan los bastones de caramelo?. Pues con Candy Cane podrás hacer que cada uno de los caracteres de tus textos tengan el aspecto de uno. Una manera muy simpática y única de felicitar estas fiestas. Muy recomendable de usar el color rojo en ella, para redondear la jugada.

• Modalidad – Gratuita

Pinyon Script

Ir a Pinyon Script

Pinyon Script puede se usado tanto en titulares a los que quieras dar cierta importancia, como para escribir textos completos. Su diseño elegante es perfecto para redactar las invitaciones para tus fiestas, dándoles un aspecto clásico y distinguido.

• Modalidad – Gratuita

MTF Dear Santa

Ir a MTF Dear Santa

Con un aspecto que puede recordar al de los textos infantiles, Dear Santa es una de mis favoritas de este recopilatorio. ¿Por qué?. Porque cada una de las letras en mayúsculas es un dibujo relacionado con la Navidad: un muñeco de jengibre, un árbol de Navidad, un reno…

• Modalidad – Gratuita para uso personal / Versión de pago para uso comercial

Sacred Bridge

Ir a Sacred Bridge

Si te gustan las tipografías muy ornamentales, Sacred Bridge es para ti. Con un estilo retro, podrás usarlo tanto para texto como incorporarlo a tus ilustraciones. Para los que les guste darle un toque clásico a la Navidad.

• Modalidad –  Versión gratuita recortada / Versión completa de pago

Glass Antiqua

Ir a Glass Antiqua

Con unas marcada líneas redondeadas, Glass Antiqua se ajusta muy bien en esos diseños en los que busques un tono más desenfadado, pero sin perder la elegancia. Puede recordar a uno de mis fuentes favoritas, Roboto, y que en más de una ocasión hemos mencionado en nuestros artículos de mejores combinaciones de tipografías.

• Modalidad – Gratuita

La entrada Mejores tipografías para felicitar la Navidad se publicó primero en Silo Creativo.

Con la llegada del nuevo año, muchos hacemos resumen de todo lo que hemos realizado durante el año anterior, los proyectos que resultaron exitosos y los que no. Y las nuevas tendencias que se avistan, y que nos pueden ser útiles en el futuro.

Porque, a pesar de que siempre es aconsejable tener ciertos principios a la hora de diseñar como hemos visto en varias ocasiones en SiloCreativo, no está mal incorporar elementos nuevos. Estos harán que tengamos un catálogo más rico donde apoyarnos al enfrentarnos a nuevos proyectos, y que contemos con más diversidad de sensibilidades según sea conveniente.

Sin más, veamos cuales son algunas de estas tendencias que nos vienen para 2020, tanto en el mundo del diseño gráfico como del diseño web. Vamos con ello.

Tipografías personalizadas / A gran escala

Es algo que llevamos viendo desde hace algún tiempo, pero que este año se espera que venga su completa explosión. El uso de tipografías a gran tamaño, casi funcionando como una ilustración más, que se unen con el uso de fuentes personalizadas.

Y es que cada vez son más las compañías que se lanzan a crear su propia tipografía para usarla en todos los ámbitos: webs, marketing, packaging, formatos impresos… No solo ofrece una imagen de exclusividad, sino que se adapta de forma perfecta a los ideales de la propia empresa.

Sobre el uso de las tipografías a gran escala, es mejor utilizarlas con moderación. Son ideales para mostrar una o pocas palabras. En textos de cierta longitud, perderemos justo lo que vamos buscando: la potencia del contenido que queremos mostrar.

Paleta de color cyberpunk

Quizás no estemos en el futuro que todos imaginamos, con coches voladores y viajes interestelares, pero al menos podemos tener la estética de como algunos imaginaron que serían estos días. El estilo gráfico del mundo cyberpunk se caracteriza por tener una paleta de colores en la que se mezclan los tonos oscuros con colores neón, brillantes y muy saturados. Un ejemplo sería el que se ve en películas como Blade Runner o mangas como Ghost in the Shell.

Aunque pueda parecer en ocasiones agresivo, esta paleta de colores es tremendamente llamativa, y puede mezclarse perfectamente con efectos glow o glitch para dar volumen y tridimensionalidad a nuestros proyectos. Incluso en ilustraciones más abstractas.

Modo Oscuro

El modo oscuro es una opción que cada vez más aplicaciones y webs están añadiendo, ya sea siendo su vista por defecto como una opción para cambiar entre el modo normal y el oscuro. Pero, ¿a que se debe esta tendencia?

Por una parte, en webs donde se quiera enfatizar el contenido, un fondo oscuro viene como contrapunto perfecto para enfatizarlo. Un ejemplo perfecto es tanto la aplicación como la propia web de Netflix, donde las portadas de las series y películas toman una posición dominante y sin ningún tipo de distracciones extra. Por otro lado, un fondo oscuro es más agradable de visualizar en periodos largos de tiempo que si tiene tonos claros. Además de que la proliferación de pantallas OLED en smartphones hace que gasten menos batería con los negros puros.

Por último, solo mencionar que tampoco hay que abusar de este modo. Si nuestra web tiene mucho contenido en formato texto, es preferible mantener un fondo claro ya que la legibilidad será mayor. Con lo que ello implica para la usabilidad y accesibilidad de nuestros visitantes.

Ilustraciones animadas con SVG

Aunque ahora los gifs animados están más de moda que nunca gracias a las redes sociales, no es que queramos volver al internet de principios de siglo. Y es que cuando pensamos en animaciones en nuestra web, nos referimos a ilustraciones en formato SVG con algún tipo de movimiento que haga de nuestro sitio un espacio más dinámico y llamativo.

¿Y porque la elección del SVG?. Más de una vez hemos hablado de este tipo de formato de imagen en Silo, que nos proporciona archivos con poco peso, y que se escalan a cualquier tipo de resolución. Con esto nos ahorramos. Esto lo hace ideal para que se adapte a cualquier tipo de dispositivo, desde smartphones a pantallas de alta resolución. Todo esto con un simple archivo, y sin ningún tipo de imágenes pixeladas.

Las animaciones no deben de ser demasiado estridentes, sino que se realizarán al hacer scroll, realizar alguna opción o al aparecer la ilustración. Debe ser más un acompañamiento al resto del contenido de la web y no la principal atracción.

Y esto no es más que una pequeña muestra de lo que nos espera para un 2020 lleno de variedad en cuanto al diseño. Esperamos que os haya gustado y os sirva de inspiración. Como siempre, tenéis los comentarios para decirnos que os ha parecido y que nos digáis vuestras sugerencias para este nuevo año.

La entrada Tendencias en Diseño para 2020 se publicó primero en Silo Creativo.

En varias ocasiones hemos hablado en SiloCreativo sobre el uso de las tipografías, tanto para el diseño web como para el diseño gráfico. Ya sea para jerarquizar un texto en una web y que sea perfectamente legible, como para crear combinaciones que resulten atractivas. Aunque hay un aspecto que no habíamos tratado hasta ahora, y es el del uso de estas tipografías para acompañar el diseño de logotipos.

Si bien podemos crear una tipografía nueva al diseñar un logotipo, en muchas ocasiones no disponemos del tiempo y/o los recursos necesarios para hacerlo. Y es en esos momentos cuando nuestro mejor aliado es una tipografía ya creada de antemano, pero que encaje perfectamente con las líneas de nuestro logotipo.

Por este motivo, hemos querido recopilar algunas de las fuentes tipográficas más llamativas y singulares que puedes encontrar. Hemos querido hacer un listado con diversos sabores, desde tipografías más futuristas a otras con inspiración clásica, pasando por estilos hand-draw hasta más elegantes. Con esto, pretendemos cubrir un abanico más amplio y diverso, y que pueda servir para el nombre que acompaña a vuestros logotipos o los sloganes que lo acompañan.

Como siempre, hacemos una recomendación antes de instalar nuevas fuentes en nuestros dispositivos. Y es que la organización de tipografías es esencial, tal como hemos tratado en SiloCreativo. Nos va a valer para crear directorios y ordenar por estilos, proyectos, repositorio, etc, que nos va a servir para encontrarlas más fácilmente en un futuro cuando las queramos usar en otros proyectos.

No nos entretengamos más, y pasemos a ver las tipografías que hemos seleccionado para vosotros. Esperamos que os gusten y os sirvan de apoyo e inspiración en vuestros proyectos.

Gibsons

Ir a Gibsons

Empezamos con Gibsons, una tipografía retro que os vendrá muy bien para acompañar aquellos logotipos que tengan un toque vintage pero actual. Llama la atención por su estilo vertical, y su mezcla entre esquinas redondeadas y en ángulo recto. Entre las variables que tiene, se encuentra una con formato texturizado. Un estilo que no suele verse normalmente entre las tipografías más usadas.

Nixmat

Ir a Nixmat

Pasamos de una fuente retro a una con un aspecto futurista como es Nixmat. Destaca por sus líneas redondeadas, el corte en las grafías y las introducción de pequeños círculos en ciertos caracteres, que le dan cierto ritmo al conjunto. Este tipo de detalles hacen que esta tipografía sea idónea para usar en grandes formatos, ya que este tipo de particularidades pueden perderse si los usamos en tamaños pequeños.

Southern

Ir a Southern

Con Southern nos adentramos en el mundo de las tipografías con un diseño handwriting, o lo que es lo mismo, que simulan estar escritas a mano. Con este tipo de fuentes estamos ofreciendo un aspecto más natural y cercano a nuestro diseño. Incluso con esta tipografía en concreto, parece casi simular una firma. Puede encajar muy bien para clientes en los que su propio nombre es el de su empresa, y quieren dar una impresión mas personal.

Avenir Next

Ir a Avenir Next

De este listado, posiblemente sea mi favorito. Aunque en un primer vistazo pueda parecer que tiene un aspecto muy simple, Avenir Next es ideal para potenciar el nombre que aparece en nuestro logotipo. O incluso, usar simplemente la tipografía como logotipo. También es ideal para otros usos, como para combinación entre texto e imagen, tal y como hablamos en un artículo de SIloCreativo hace varios meses.

Boogaloo

Ir a Boogaloo

Boogaloo está indicada especialmente para aquellos que busquen un aspecto más desenfadado y divertido en sus diseños. Si tu logotipo tiene unas trazas frescas y atrevidas, seguro que casa perfectamente con esta fuente. Además, puedes encontrarla en Google Font, por lo que su descarga es completamente gratuita y podrás usar en proyectos comerciales sin ningún tipo de problema.

Elianto

Ir a Elianto

Elianto se posiciona como una tipografía elegante y tremendamente geométrica. Sus formas limpias y concretas (casi todas las grafías forma un cuadrado prácticamente perfecto), hacen de ella una elección perfecta si queremos dar un aspecto de formalidad a nuestro logotipo. También dispone de una amplia variedad de caracteres, que podemos usar para adornar aún más nuestro diseño.

Expletus Sans

Ir a Expletus Sans

Otra tipografía que podemos descargar de forma gratuita desde Google Fonts. De Expletus Sans destacamos como es capaz de dar una impresión de tridimensionalidad con en una fuente bidimensional. Esto lo consigue gracias al uso de los cortes, que dan la impresión de dar sombra sobre si misma al estar parte de sus líneas en dos planos del dibujo diferentes.

Azonix

Ir a Azonix

Otra tipografía futurista / scifi, en este caso con líneas más limpias y elegantes. Se compone de letras en negrita, mayúsculas y lo suficientemente potentes como para crear un balance perfecto con tu logotipo. Además, está disponible de forma completamente gratuita.

Elodie

Ir a Elodie

Terminamos con Eloide, que nos ofrece una propuesta más fantástica y extravagante. En ciertos trazos se le nota su naturaleza handwriting, pero en sus particularidades observamos como tiene detalles que recuerdan a lugares exóticos y místicos. Recordar que esta fuente solo tiene grafías en mayúsculas, un aspecto importante a tener en cuenta cuando pensemos en ella para nuestro logotipo.

La entrada 9 Mejores Tipografías para diseñar Logotipos se publicó primero en Silo Creativo.

El contraste es uno de los principios básicos del diseño. Dos elementos que se oponen dentro de un mismo espacio, y la tensión que se produce entre esa diferencia. De hecho, a nuestros ojos les gusta el contraste. El poder hacer una diferenciación entre elementos, la rotura de la monotonía, siempre es algo que atrae. Y, evidentemente, tanto el diseño gráfico como el diseño web hacen uso del contraste a su favor. Y hoy queremos explorar como podemos mejorar el uso de esta herramienta en nuestros diseños.

Cuando lo usamos de forma correcta, creamos un punto focal que atrae la atención de todo el que mira. Con la importancia que esto tiene. Porque de nada nos sirve crear un diseño atractivo visualmente si la persona que lo mira, o que navega por él, se distrae con elementos superfluos y no llega donde queremos que llegue. El contraste nos permite realizar jerarquías visuales que siempre jueguen a nuestro favor, y que guíen de forma eficiente y sutil hacia donde queremos.

En este artículo nos queremos centrar en algunos de los tipos de contraste más evidente, pero no por ello conocidos por todo el mundo, que nos van a permitir potenciar nuestros proyectos, y dar uso de esta herramientas en unas vías diferentes. Seguro que muchos ya conocíais algunas de ellas, pero nunca está mal revisarlas y, quizás descubrir nuevas.

Contraste y Color

Empezamos con el uso que podemos hacer del color para mejorar el contraste en nuestros diseños. Lo primero que nos va a llegar a la mente es lo más evidente, que es el contraste entre el blanco y el negro. O los tonos claros y oscuros. Pero no tenemos solo porque focalizarnos en este uso del contraste, ya que estaremos limitando nuestras propias herramientas.

Uno de los usos más básicos es el contraste que se producen entre colores cálidos, fríos y neutros. Entre los colores cálidos tenemos los amarillos, naranjas y rojos. Para los fríos, azules, morados y verdes. Y en los neutros, blanco, negros, grises y marrones. Haciendo combinaciones entre estos grupos, crearemos un contraste entre los elementos de nuestro diseño lo suficientemente eficaces como para diferenciarlos entre ellos.

También mencionar el uso que podemos hacer entre tonos saturados y desaturados. Esta estrategia es muy buena cuando queremos que nuestro diseño haga uso de un solo color y que, a pesar de esto, queramos poner en valor ciertas partes. Por ejemplo, usar los elementos del fondo o con poca importancia con colores muy desaturados, para que la vista se centre en los colores saturados.

Contraste y Forma

El contraste no es más que una forma de poder diferenciar de forma simple elementos. Y si nos fijamos en la naturaleza, en toda su extensión, uno de los contraste más evidente que encontramos esta entre las formas geométricas y las formas orgánicas. Con formas geométricas nos referimos a rectángulos, círculos, triángulos, etc. Estas formas nos permiten tener un mejor orden en nuestro diseño, o apilar y crear estructuras con mayos facilidad.

Las formas orgánicas se inspirar en las naturaleza, y nos dan una impresión de fluidez y cercanía. Puedes usarlas en ilustraciones si los elementos de tu web tienen formas orgánicas, ya que proporcionan cierto dinamismo, y te ayudarán a diferencias la parte ilustrativas de la que contiene información.

Contraste y Tamaño

Si quieres hacer un elemento que llame la atención, tu primer pensamiento será hacerlo más grande. Y es que es evidente que, cuanto más grande, mayor importancia visual le queremos dar. De nada nos sirve trabajar en el elemento importante de nuestro diseño, y que en último lugar queremos que sea un captador de atención, si lo situamos junto a otro de gran tamaño que va a capturar todo el interés.

Contraste y Tipografía

Y hablando de tamaños, es algo que podemos extrapolar a las tipografías y textos. Es evidente que hay que diferenciar mediante su tamaño los títulos, subtítulos y cuerpos de texto. Si todas nuestras tipografías son del mismo tamaño, el lector no puede saber con claridad donde empieza y acaba un texto, o los títulos intermedios que separan las diferentes partes de un texto.

Además, el uso de diferentes tipografías serif o sans-serif según sea título o cuerpo de texto nos ayuda a remarcar este contraste. Este tipo de combinaciones es uno de los aspectos básicos que siempre tienen en cuenta los diseñadores cuando eligen tipografías. Y en Silo también hemos hablado de nuestras combinaciones tipográficas favoritas, que podrás usar en tus proyectos personales.

Contraste y Espacio en blanco

El contraste que se produce entre el contenido y los espacios en blanco (que no tienen que ser, literalmente, de color blanco) tienen funciones a varios niveles. En primer lugar, dejamos que nuestro diseño respire, y que la persona que observa no se encuentre con una gran cantidad de información en un espacio muy reducido. Esto puede provocar desde cierta fatiga visual y cansancio, lo cual es contraproducente con nuestra finalidad. De esto hablamos en nuestro artículo sobre el espacio en blanco.

Por otro lado, nos ayuda a organizar y jerarquizar los diferentes elementos de nuestra web, permitiendo saber que zonas son más importantes y cuales lo son menos. En una tienda online, por ejemplo, nos ayuda a tener un cierto orden y control para diferenciar de un solo golpe de vista donde está la información general de nuestra web, la información del producto, y el botón para comprar.

Contraste y Alineación

Si usas diferentes tipos de alineaciones en tu diseño, hay una norma básica: nuestros ojos siempre se van a dirigir a aquellos elementos situados en el centro de la pantalla. Y ahí es donde debes colocar la información de interés o que quieres que vean primero tus visitantes. Por supuesto, se va a crear una diferenciación clara entre esta pieza central, y otras organizas en columnas, o alineadas en los laterales. Y en el diseño web, la alineación gracias a herramientas como Flexbox, hace que alinear elementos sea más sencilla que nunca

Como hemos podido ver, son muchas las formas en las que podemos usar el contraste a nuestro favor, y que sea un aliado fiable cuando estemos diseñando. Teniendo estas pautas en mente, podemos incluso hacer combinaciones entre ellas para potenciarlas aún más, y que obtengamos resultados increíbles. Jugar con tamaños, y colores, o con formas y alineaciones. Ya está en vuestra mano descubrir cuales encajan mejor con vuestra forma de diseñar.

Y vosotros, ¿hacéis uso del contraste para potenciar vuestros diseños?. ¿Tenéis algún truco imprescindible que queráis compartir?. Como siempre, tenéis abiertos los comentarios, donde podéis escribir vuestras sugerencias, dudas y aporte.! Y esperamos que os haya sido útil este artículo!

La entrada 6 Maneras de Potenciar tus Diseños mediante el Contraste se publicó primero en Silo Creativo.

En SiloCreativo hemos hablado en multitud de ocasiones sobre tipografías. Desde combinaciones entre ellas para lograr diseños más vistosos, hasta las diferencias entre tipografías serif y sans serif. Y es que, a la hora de diseñar con textos, es imprescindible conocer todas las características y variables que nos ofrecen las tipografías. Por lo que hoy nos centraremos en las tipografías monoespaciadas, que las hace especiales, además de ver algunas de ellas.

Aunque algunos no estéis familiarizados con las tipografías monoespaciadas, seguro que os la habéis encontrado en más de una ocasión. Esta clase de tipografía era tremendamente usual en los primeros ordenadores, y hasta hace poco también entre programadores. De hecho, muchos prefieren usar este tipo de fuente cuando están escribiendo código, ya que saben que siempre van a tener el mismo número de caracteres, sean letras, números o caracteres especiales, por línea. Y de esto último es de lo que van precisamente las tipografías monoespaciadas.

¿Que hace diferente a una tipografía monoespaciada?

La respuesta es simple. Todas sus caracteres ocupan el mismo espacio horizontal, es decir, tienen el mismo ancho. Si hacemos un bloque de texto, y en la primera línea podemos contar 50 caracteres, ya sean letras, números, caracteres especiales o espacios, todas las lineas de texto siguientes también van a tener 50 caracteres.

Las tipografías que no tienen un ancho fijo son las llamadas proporcionales, y son las amplia mayoría de las existentes. Un ejemplo muy claro lo tienes en este mismo artículo. Si ves el cuerpo del texto, donde usamos la fuente Work Sans, verás que cada carácter ocupa un espacio diferente. La letra i ocupa menos ancho que la letra m. Esto hace que cada línea tenga un número diferente de letras.

Por el contrario, si escribimos un trozo de código como este:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Maecenas tristique ex quis mattis cursus. Vivamus convallis nisi ut molestie semper. 
Aenean hendrerit eu justo sit amet laoreet. Donec ac lacus odio. 
Aliquam tortor diam, congue a scelerisque id, placerat vel enim.

1111.11111
5555.55555

Al usar la fuente Consolas, una tipografía monoespaciada, vemos como todos los caracteres ocupan el mismo ancho. Da igual la letra o número que sea. Si os fijáis en las dos últimas líneas, ocurre algo muy particular con la posición del punto, y es que siempre se mantiene en la misma posición. Esto lo hace idóneo para usar tipografías monoespaciadas con números.

¿Cuando usar tipografías monoespaciadas?

Como hemos visto, lo que diferencias a las tipografías monoespaciadas es el ancho constante de sus caracteres. Esto afecta bastante a la legibilidad de los textos, ya que en caracteres con grafías más altas que anchas, nos encontramos con mucho espacio a su alrededor. Lo que puede dar lugar a que nos cueste más leer textos con cierta soltura.

Por suerte, en otros campos si pueden ser de utilidad, como cuando queremos vamos a usar números. La anchura fija de las tipografías monoespaciadas hacen que si, por ejemplo, tenemos números apilados en columnas o en tablas, los decimales siempre van a aparecer en la misma vertical. Por lo que la comparación entre cada cifra se realiza de forma mucho más rápida.

También podemos usarlas por una cuestión estética, cuando queremos obtener cierto look. Si eres amante del cine y alguna vez has leído o visto un guión cinematográfico, habrás observado que suelen escribirse con tipografías monoespaciadas. Se puede usar esta asociación y tener en cuenta estos referentes a la hora de diseñar nuestros proyectos.

Sin olvidarnos que las hacen ideales para textos en formato físico que requieran ser leídos por software OCR, como pueda ser un contrato o un cheque bancario*. Eso sí, el avance de esta tecnología hace que también puedan usarse tipografías proporcionales.

Algunas tipografías monoespaciadas que puedes usar

Skyhook Mono

Skyhook Mono se aleja de las fuentes redondeadas, típicas de las máquinas de escribir, y apuesta por un estilo polígonal muy característico. Sin perder el aspecto clásico gracias a la sencillez de su trazo.

Roboto Mono

Para todos aquellos que usáis Roboto, una de las favoritas en Google Fonts, tenéis su alternativa en versión monoespaciada: Roboto Mono. Además, dispone de versiones en cursiva y diferentes niveles de negrita.

System Code

System Code es una fuente con un aspecto basado en ángulos redondeados, con cierto aspecto retro-tecnológico. Ideal para usarlo a gran tamaño.

Inconsolata

La tipografía Inconsolata la hemos usado en una de las imágenes de este artículo, y es otra que puedes encontrar dentro del repositorio de Google Fonts.

Como hemos podido ver, las tipografías monoespaciadas, a pesar de no sernos muy de utilidad en situaciones donde se requiera cierta legibilidad, si pueden servirnos par entornos donde se necesiten números, o para crear diseños con texto que den un aspecto muy característico.

Y vosotros, ¿conocíais este clase de tipografías?. ¿Las habéis utilizado en algunos de vuestros proyectos?. Como siempre, tenéis abiertos los comentarios para que nos digáis vuestras impresiones y experiencias con las tipografías monoespaciadas.

La entrada Conociendo las Tipografías Monoespaciadas se publicó primero en Silo Creativo.