Las mejores Google Fonts para e-commerce de moda

Las mejores Google Fonts para e-commerce de moda

Las mejores google fonts para tiendas online de Moda

Desde la incorporación de las Google Fonts al mundo del diseño web en el año 2011, en número de tipografías disponibles ha crecido exponencialmente. Puede resultar abrumador escoger la combinación de tipografías adecuadas para cada estilo de página. Más aún si cabe en un mercado tan competitivo como es el de las páginas de comercio electrónico. Sin querer pecar de clasista, el estándar habitual para páginas sobre moda es el de fuentes con serifa de corte elegante combinadas con fuentes sin serifa en los textos descriptivos. Esta es mi selección de las mejores combinaciones tipográficas de google fonts para tiendas de moda online:

Playfair Display

Tipografía Playfair Display + Raleway
La mayoría de vosotros la conocéis o la habréis utilizado ya. Playfair Display es sin lugar a dudas la tipografía más utilizada en tiendas online de moda a día de hoy. Se trata de un tipo de letra basado en la Ilustración europea de finales del siglo XVIII. En este periodo las púas de punta ancha con las que se realizaban los escritos fueron reemplazadas por plumas de acero puntiagudas como herramienta de escritura popular. Los desarrollos en tecnología de impresión, tinta y fabricación de papel, fueron alejando cada vez más estos diseños de las formas caligráficas. Si bien no es puramente renacentista, toma influencia de John Baskerville y los diseños ‘Scotch Roman’. Esta familia principal, cuenta con una familia de hermanos pequeños «Playfair Display SC». Los archivos descargables incluyen pequeñas letras, ligaduras comunes y ligaduras discrecionales. Actualizado en noviembre de 2017 con muchas pequeñas mejoras y soporte de idiomas adicional. El proyecto Playfair está dirigido por Claus Eggers Sørensen, un diseñador de tipos con sede en Amsterdam, Países Bajos. Playfair puede ir acompañada por Raleway, una elegante familia tipográfica sans-serif que a pesar de ser un diseño Display (gran tamaño) pensado para encabezados y otros usos de gran tamaño, se desenvuelve perfectamente en textos descriptivos.

Rozha One

Tipografía Rozha One + Oswald
Rozha One es una fuente de código abierto de alto contraste diseñada por The Indian Type Foundry en 2014. Inicialmente fue concebida para el tipo de escritura Devanagari  (una escritura abugida utilizada para escribir el idioma nepalí y varios idiomas de India) pero que actualmente ofrece soporte para los scripts Latin. Creada principalmente para uso en pantallas, la extrema diferencia entre los trazos gruesos y delgados de sus letras la convierte en una excelente opción para grandes titulares y gráficos de tamaño póster. Los caracteres latinos de la fuente están dibujados en un estilo gordo ‘moderno’ o ‘Didone’, similar a las letras que se usaban comúnmente en los carteles publicitarios del siglo XIX en Occidente. Los caracteres latinos de Rozha One apenas distinguen entre letras mayúsculas y minúsculas; la altura x de sus letras minúsculas es tan alta (y el tamaño de sus letras mayúsculas es tan pequeño) que prácticamente se combinan entre sí en una línea de texto. La fuente incluye 1.095 glifos, que ofrecen un soporte completo para los conjuntos y ligaduras requeridos por los idiomas escritos con la secuencia de comandos Devanagari. Rozha One desenvuelve todo su potencial en grandes titulares de entornos digitales. Si se utiliza en materiales impresos, el diseño se adapta a una gama más amplia de tamaños, llegando a tamaños de 16 o 18 puntos. La combinación de Rozha con Oswald (una re-elaboración del estilo clásico representado históricamente por las tipografías sans serif ‘Alternate Gothic’) aporta un carácter peculiar y distintivo que hace resaltar cualquier página sobre otras del mismo sector. El proyecto Rozha está dirigido por Indian Type Foundry, una compañía tipográfica con sede en Ahmedabad, India. Su juego de caracteres Devanagari fue diseñado por Tim Donaldson y Jyotish Sonowal. Shiva Nallaperumal diseñó el scripts latín.

Cormorant Garamond

Tipografía Cormorant Garamond + Lato Light
Cormorant fue concebido, dibujado, espaciado, programado, interpolado y producido en su totalidad por Christian Thalmann de Catharsis Fonts. Si bien este proyecto está fuertemente inspirado por el legado inmortal de Claude Garamont, Christian no usó ninguna fuente específica como punto de partida o referencia directa para los diseños. La mayoría de los glifos fueron dibujados desde cero. Cormorant Garamond es una familia de tipo Display. Actualmente, comprende un total de 45 archivos de fuentes que abarcan 9 estilos visuales diferentes (Roman, Italic, Infant, Infant Italic, Garamond, Garamond Italic, Upright Cursive, Small Caps, y Unicase) y 5 pesos (Light, Regular, Medium, SemiBold, y Bold.) Lato Light le sienta a Cormorant como aniño al dedo. Un tipo de letra que parece casi «transparente» cuando se utiliza en el texto del cuerpo, pero que muestra algunos rasgos originales cuando se usa en tamaños más grandes. Su uso de proporciones clásicas (particularmente visibles en mayúsculas) da a las formas de las letras una armonía y elegancia característica. Una sans serif elegante, diseñada siguiendo las tendencias de 2010. El proyecto Cormorant está dirigido por Christian Thalmann, diseñador de tipos con sede en Zurich, Suiza.

Libre Baskerville

Tipografía Libre Baskerville + Poppins
Libre Baskerville es una web font creada por Impallari Type. Aunque optimizada para su uso en el cuerpo del texto (preferiblemente a 16 px) funciona perfectamente en grandes titulares. Está basada en el American Type Founder’s Baskerville de 1941, pero tiene una altura x más alta, remates más anchos y un poco menos de contraste, lo que mejora su legibilidad en dispositivos digitales. Si la unimos a Poppins, la tipografía de moda en la mayoría de diseños web. Tenemos una combinación ganadora para estéticas juveniles y un poco más alejadas del lujo. El estilo de letra geométrica sans serif ha sido una herramienta de diseño popular desde mediados del siglo pasado.  Con soporte para los sistemas de escritura Devanagari y Latin, Poppins es una interpretación internacionalista del género.

OLD STANDARD TT

Tipografía Old Standard TT + Open Sans
Old Standard TT reproduce un tipo específico de estilo Moderno (clasicista) de tipos de letras serif, muy comúnmente utilizado en editoriales de finales del siglo XIX y principios del siglo XX, aunque abandonado casi por completo unos años más tarde. Aunque originalmente se usó como una buena opción para la composición de artículos científicos, especialmente en ciencias sociales y humanitarias, ya que sus características específicas están estrechamente asociadas con los libros antiguos. La forma aritmética de sus caracteres griegos y cirílicos de estilo clasicista, funcionan a la perfección en creatividades que quieran ir un paso más allá, alejándose de los estándares del mercado. El nombre «Old Standard» fue seleccionado por su creador Alexey Kryukov, en oposición al tipo de letra «Obyknovennaya Novaya» («New Standard»), ampliamente utilizado en la tipografía soviética, que representa una corriente ligeramente distinta del estilo moderno. Por supuesto, este nombre no parece muy original, pero parece ser una buena opción para una reactivación del tipo de letra más común de principios del siglo XX. Como contrapunto al estilo del «Old Standard» podemos jugar con alguno de los caracteres más estendidos en la red. Open Sans, una tipografía humanista sans serif diseñada por Steve Matteson, Director de Tipo de Ascender Corp. Esta versión contiene el juego completo de 897 caracteres, que incluye los conjuntos de caracteres estándar ISO Latin 1, Latin CE, Greek y Cyrillic. Open Sans fue diseñado con una tensión vertical, formas abiertas y una apariencia neutral, pero amigable. Fue optimizado para interfaces de impresión, web y móviles, y tiene excelentes características de legibilidad en sus formas de letras.
¿Cuanto cobra un diseñador Freelance?

¿Cuanto cobra un diseñador Freelance?

¿Cuanto cobra alguien como yo? ¿Estoy cobrando demasiado? ¿Estoy regalando mi trabajo?
Gracias a este artículo podrás tener unas cifras realistas de la cantidad de dinero que se puede llegar a ganar en este oficio.

Las mejores Google Fonts para e-commerce de moda

Las mejores Google Fonts para e-commerce de moda

Una selección de las mejores combinaciones tipográficas de Google Fonts para tiendas de moda Online.
La combinación de tipografías adecuadas para triunfar en un mercado tan competitivo como es el de las páginas de comercio electrónico.

[Fancy_Facebook_Comments]
Si te ha parecido útil compártelo con el mundo ¡Un saludo!
¿Cuanto cobra un diseñador Freelance?

¿Cuanto cobra un diseñador Freelance?

¿Cuanto cobra alguien como yo? ¿Estoy cobrando demasiado? ¿Estoy regalando mi trabajo?
Gracias a este artículo podrás tener unas cifras realistas de la cantidad de dinero que se puede llegar a ganar en este oficio.

leer más
Las mejores Google Fonts para e-commerce de moda

Las mejores Google Fonts para e-commerce de moda

Una selección de las mejores combinaciones tipográficas de Google Fonts para tiendas de moda Online.
La combinación de tipografías adecuadas para triunfar en un mercado tan competitivo como es el de las páginas de comercio electrónico.

leer más
¿Cuanto cobra un diseñador Freelance?

¿Cuanto cobra un diseñador Freelance?

¿Cuanto cobra alguien como yo? ¿Estoy cobrando demasiado? ¿Estoy regalando mi trabajo?
Gracias a este artículo podrás tener unas cifras realistas de la cantidad de dinero que se puede llegar a ganar en este oficio.

Las mejores Google Fonts para e-commerce de moda

Las mejores Google Fonts para e-commerce de moda

Una selección de las mejores combinaciones tipográficas de Google Fonts para tiendas de moda Online.
La combinación de tipografías adecuadas para triunfar en un mercado tan competitivo como es el de las páginas de comercio electrónico.

Descubriendo el Pixel Perfect

Descubriendo el Pixel Perfect

¿Que significa diseño Pixel Perfect?

Seguro que en alguna ocasión, buceando por webs de ofertas de trabajo, os habéis encontrado con descripciones de puestos que solicitaban las siguientes características:

– Necesario saber implementar píxel perfect.

– Imprescindible experiencia en desarrollo web de diseños «pixel perfect».

– Es importante que tu nivel de maquetación sea pixel perfect.

Es muy probable que os hayáis quedado con la cara a cuadros. Puede que penséis que se trata de otra de esas característica de moda como la «proactividad» o la «visión 360º», que casi de forma automática se añaden a las ofertas laborales y no representan ninguna diferenciación entre candidatos, ya que son valores tan subjetivos que bien se los podían haber ahorrado.

Por el contrario dominar las principales técnicas del mandamiento Pixel Perfect creará un valor añadido sobre nuestro currículo y al mismo tiempo conseguiremos trabajar de una forma más eficiente y ordenada.

Pero…

¿QUE ES ESO DEL “PIXEL PERFECT”?

Es un concepto utilizado mayoritariamente por diseñadores y maquetadores digitales, que se basa en: diseñar logrando la perfección, para que cada parte de la página o aplicación trabajen conjuntamente en ofrecer la mejor y la misma experiencia para los usuarios en cualquier tipo de navegador y dispositivo.
Para lograr este objetivo se deben aplicar una serie de técnicas centradas en los siguientes campos de actuación:

ACCESIBILIDAD

La accesibilidad es un tema muy amplio , siendo relevante para cualquier usuarios, no simplemente aquellos que tienen algún tipo de discapacidad. Las buenas prácticas tales como facilidad de uso y la claridad son un hecho en el que se ha avanzado mucho en los últimos años. Aunque también hay medidas que se pueden tomar para hacer su trabajo más accesible a personas con patologías tales como el daltonismo o la dislexia.

MODELO DE COLOR

Seguramente jamás se te haya ocurrido anteponer el modelo de color HSB al RGB o CMYK a la hora de crear una nueva gama cromática. Pero una vez lo hayas probado podrás ver que en realidad es una manera muy eficiente de crear tonos sobre un color base. En la tabla ejemplo la se mantiene el matiz (H) y se varían los valores de saturación (S) y Brillo (B). La mayor coherencia con respecto al modelo RGB es más que evidente.

DEFINICIÓN DEL PÍXEL

Ya que es la característica que da nombre a esta filosofía del diseño hay que tener especial cuidado con que los bordes de las formas sean rectas. Todos y cada uno de los píxeles deben estar enteros, mediante la configuración de una serie de paramentos en photoshop se consigue no crear medios píxeles.

ORGANIZACIÓN Y NOMENCLATURA

Hoy en día casi ningún diseñador trabaja en solitario. Su trabajo muchas veces tendrá que ser compartido con uno o varios desarrolladores y/o diseñadores. Una buena organización es esencial en estos casos, ya que ahorra mucho tiempo a otras personas. Tener todos tus archivos ordenados y por capas significa que otros diseñadores podrán manejarse perfectamente con tu trabajo, si a esto sumamos una nomenclatura clara y concisa conseguiremos un fujo de trabajo muy agradable.

EXPORTACIÓN

A la hora de exportar los archivos finales a un formato válido para web es importante seguir una serie de pautas para que estos no se excedan en tamaño y mantengan intacta la calidad. En el ejemplo, la herramienta de “guardar para web” de photoshop es realmente útil.

ALINEAMIENTO Y ESPACIADO

Uno de los puntos fuertes en tu viaje hacia el pixel perfect es conseguir que la alineación y el espaciado sean los correctos. Así como una consistencia de criterios respecto a márgenes y tamaños.

COLOR, FORMA Y SIGNIFICADO

A través del tiempo algunos colores y formas se han convertido en sinónimo de ciertas funciones y mensajes dentro del diseño de una interfaz. Hay que tener muy claro como combinarlos, ya que puede causar confusión en el usuario que esperará una respuesta específica.

JERARQUÍA VISUAL

El diseño, los colores y la tipografía tiene un enorme influencia en cómo procesamos la información, y en que parte fijar nuestra vista. Hay que tener en cuenta que se quiere mostrar al usuario, por que orden y con que relevancia.

TIPOGRAFÍA

,La tipografía es una disciplina que a menudo se pasa por alto en la experiencia digital. Pero como la mayoría de información se transmite a través de texto esta es sin duda una de las partes esenciales de una buena experiencia de usuario. Mantener una tipografía con un tamaño legible y un buen interlineado es esencial.

Si queréis profundizar un poco más en este apasionante tema no dudéis en visitar la web de los gurús del pixel perfect “Ustwo”, desde dónde os podéis descargar un completo manual en pdf que trata todas las técnicas nombradas en este post.

Otro site de referencia, un poco más generalista, es el de Google y sus reglas para el diseño de aplicaciones para Android.

Pin It on Pinterest