No hay duda de ello – la tipografía y las fuentes que elegimos tienen un gran impacto en múltiples aspectos de nuestro sitio web, incluyendo la legibilidad, el la arquitectura web, la longitud de los textos de la página, la experiencia del usuario y mucho, mucho más.
Es absolutamente esencial que los diseñadores conozcan y entiendan los diferentes principios de la tipografía que crean un diseño agradable, con el fin de retratar adecuadamente la visión y el estado de ánimo del sitio web que están diseñando.
Utilizar muchos tipos de letra puede ser una gran distracción para los lectores.
Cuáles son los mejores estilos de letras para tu página web
Un principio importante de la utilización de tipos de letra para sitios web es utilizar cierta coherencia en el diseño. Obviamente hay dos extremos del espectro para usar múltiples tipos de letra: puedes usar sólo una fuente en tu sitio web, o cambiarla cada dos frases. También puedes cambiar las fuentes dependiendo del tipo de contenido, si es un título, un texto, etc.
Lo que está claro es que en algún lugar en el medio está el equilibrio perfecto entre estos dos extremos. Tu mejor opción es elegir entre 2-4 tipos de letra para usar en el diseño de la web, y seguirlos.
Cuando se superan 3 o 4 tipos de letra se empieza a restarle valor al contenido y el lector se confunde en cuanto a la finalidad del diseño y la información que se presenta.
La selección de fuentes confiere a tu sitio un carácter.
El propósito principal de tu selección de fuente o tipo de letra es transmitir el carácter o propósito de tu sitio web y tu contenido. Esto significa que necesitas volver atrás y revisar el propósito principal de tu empresa, artículo, contenido y/o producto. Una vez que conozcas el punto principal que deseas comunicar a tus lectores, puedes elegir o diseñar un tipo de letra que refleje el propósito de tu contenido.
La alineación también es importante. Guía a tus lectores a través del artículo.
La forma en que alineas y ordenas el texto en tu sitio puede tener un gran impacto en la legibilidad de tu contenido, así como en el estado de ánimo que el tipo transmite a sus lectores.
Tradicionalmente, hay cuatro tipos de alineación de fuentes. Estos son derechos, izquierdos, centrados y justificados. Sin embargo, debido al poder que las imágenes CSS y Photoshop ofrecen a los diseñadores, ya puedes alinear tu texto como quieras. Sin embargo, todos debemos recordarlo:
La alineación de tu texto necesita ayudar a dirigir a tus lectores y usuarios a la información más importante y ayudarles a ver la estructura y el flujo de tu sitio web.
Con la disponibilidad de noticias, artículos, reseñas y otros medios de comunicación hoy en día, tus visitantes no tienen el tiempo o la paciencia para tochazos de artículos con textos planos de 1500.
Como diseñador debes utilizar efectivamente el poder de alineación, tamaño de fuente, colores y cualquier otra herramienta que tengas para guiar a tus lectores a través de tu sitio web.
La tipografía representa más del 90% del diseño
Enfrentémonos a los hechos: La mayoría de la gente viene a tu sitio web para leer el contenido de lo que les estás ofreciendo. Ya sea un artículo, una reseña de un producto o una explicación de la nueva aplicación más popular, la gente visita tu sitio web para leer el texto, no para ver qué colores o elementos de diseño has utilizado.
Esto significa que si te conviertes en un maestro de la tipografía, tendrás la clave para asegurarte automáticamente de que tu sitio web tenga un 90% del éxito asegurado. Aprender el arte de la tipografía lleva tiempo y trabajo, pero es un esfuerzo bien empleado.
Se creativo en tu obra de arte tipográfica. Hoy en día el usuario esperar un bello diseño y una tipografía convincente, que se sume en gran medida al mensaje del texto. Con la llegada de CSS3, @font-face/Google web fonts, font-squirrel, typekit, WebINK, e Internet de alta velocidad, lo que quiere decir que más imágenes pueden ser incluidas en las páginas web, ya no hay excusa para no incorporar una tipografía hermosa en el diseño de tu sitio web.
El diseño tipográfico puede ser exagerado, pero en la mayoría de las páginas estamos lejos de tener un problema con el tipo sobre-diseñado.
La tipografía debe ajustarse perfectamente a la visión y propósito de sus servicios.
Aumenta el tamaño de tu tipo de letra
En 2011, la revista Smashing Magazine publicó un excelente post sobre el tamaño ideal del cuerpo de la fuente; se argumentaba que era de 16px – con lo que estoy totalmente de acuerdo, dependiendo del tipo de letra utilizado.
Cuanto más importante sea el contenido, mayor será el tamaño de la fuente. No deberías intentar meter 500 palabras en un eslogan de la compañía. Pero no tienes porqué disminuir el tamaño de ese perfecto eslogan de «10 palabras» en el tamaño 14px! Aprende a utilizar el tamaño de manera ventajosa en tus diseños para informar rápidamente a los usuarios sobre el propósito y el contenido de tu sitio web.
Algunos diseñadores están empezando a ser creativos con fuentes más grandes y están creando algunas páginas que parecen obras de arte digitales impresionantes.
Parece que hay una nueva filosofía de diseño flotando en la industria del diseño web que dice: `Tu tipo de encabezado es como la portada de un libro’.
Mientras esta tendencia permanezca en los límites de dar al lector un sentido del propósito del sitio web, y no reste legibilidad al diseño, el aumento de tamaño será positivo.
Tipografías o tipos de letras que nunca fallan y cómo debes combinarlas
Elegir un tipo de letra para tu sitio web no siempre es una tarea fácil, y fijarse en un emparejamiento exitoso puede ser una tarea particularmente dificil. Una regla general a la hora de combinar fuentes es utilizar una sin ribete y una con ribete juntas, para crear contraste.
Aquí vemos 10 grandes combinaciones de fuentes web que nunca dejan de encajar; la forma en que han sido combinadas se basa en el uso de dos tipos de letra complementarios – uno para el encabezado y otro para el cuerpo del texto – siendo ambos intercambiables. Por esta razón, le recomendamos que experimentes con diferentes tamaños, grosores, inclinaciones, etc. para sacar el máximo provecho de los tipos de letra que elijas en tu web.
GEORGIA Y VERDANA
Para aquellos que se ciñen a los estándares web, esta combinación siempre va a ser ganadora. Al acoplar el hermoso tipo de letra con gracias que es Georgia con Verdana, una fuente que se diseñó para la pantalla, encontrarás una coincidencia que nunca fallará.
HELVETICA (NEGRITA) & GARAMOND
Esta es una combinación clásica que siempre gustará – ¿a quién no le gusta un gran titular en Helvética Bold? La naturaleza limpia y neutral de la Helvética la convierte en un socio perfecto para Garamond, uno de los tipos de letra con los impresos más legibles del mundo.
BODONI & FUTURA
La construcción geométrica de Bodoni y la mezcla de trazos gruesos y finos la convierten en una verdadera belleza de una fuente. En combinación con Futura, se convierte en parte de un verdadero golpe de poder – sólo tienes que mirar en cualquier revista de moda.
FRANKLIN GOTHIC & BASKERVILLE
Baskerville es un clásico de estilo antiguo diseñado en 1757 que, combinado con el tipo de letra sans-serif del siglo XIX Franklin Gothic, ofrece un atractivo contraste y da a tu diseño un toque adicional de sofisticación. Intenta experimentar con las versiones condensadas de Franklin Gothic para conseguir un titular que llame la atención.
CASLON (NEGRITA) Y UNIVERS (CLARO)
Caslon es un tipo de letra con gracias robusto que se caracteriza por ascendentes y descendientes cortos con una modulación o carrera moderada. Funciona muy bien con el bastante neutral Univers, un tipo de letra sans-serif neogrotesco. Cuando utilices Univers como fuente de visualización, intenta utilizar la versión en negrita.
FRUTIGER (NEGRITA) Y SÚBDITO
Frutiger es un tipo de letra extremadamente legible, diseñado originalmente para sistemas de señalización direccional en aeropuertos, lo que lo hace perfecto para los titulares. La naturaleza orgánica y limpia de este rostro sans-serif lo convierte en un gran complemento para el muy legible Minion, un bello tipo de letra inspirado en las fuentes clásicas del Renacimiento tardío.
SÚBDITO (NEGRITA) Y MIRÍADA
La familia Minion Pro es imprescindible para el arsenal de cualquier diseñador. Con sus numerosas ligaduras, pequeñas gorras, figuras antiguas, swashes y otros glifos añadidos, Minion Pro es ideal para una multitud de trabajos. En combinación con la versatilidad de Myriad, esto es aún más cierto – sólo tienes que ver todo Adobe.
GILL SANS (NEGRITA) Y GARAMOND
Estas fuentes vienen instaladas por defecto en la mayoría de los sistemas operativos, lo que hace de este dúo una buena elección para aquellos con la configuración de software más básica. Gill Sans es una de esas fuentes que se combinan muy bien con casi cualquier otra, por lo que es extremadamente versátil. Diseñado originalmente para su uso en el metro de Londres, es muy legible y, cuando se combina con clásicos como Garamond, puedes hacer maravillas visuales.
CLARENDON Y TRADE GOTHIC
Clarendon atrae la atención en tamaños grandes y es también bastante legible en tamaños más pequeños gracias a sus formas claras, objetivas y atemporales. Funciona particularmente bien cuando se combina con el naturalismo terrenal del gótico comercial. Si utilizas Trade Gothic como portada, asegúrate de comprobar los pesos condensados.
Lista de sitios gratuitos para descargar las mejores fuentes para tu web
1) Google Fonts
Las fuentes que nos facilita Google, además de ser de uso libre, son sencillas y muy legibles, pues están pensadas para posicionar bien en su propio motor de búsqueda. Por eso, si quieres pensar como lo haría un SEO, esta es una apuesta segura.
Si quieres encontrar cientos de tipos de letras de descarga gratuita y recomendada, pásate por esta página que también te permite reutilizar sus tipografías con fines promocionales.
3) Dafont
No hay mucho más que añadir con Dafont. Simplemente te gustará saber que puedes descargar muy fácilmente hasta 8 mil free fonts de un montón de categorías.
Junto a cualquiera de las anteriores, esta se encuentra entre una de las fuentes de letras más conocidas. Y el motivo es evidente; un catálogo súper amplio para descargar la tipografía que mejor se adapte a tu diseño web.
En este plataforma no solo encontramos muchos tipos de letras para descargar, sino también una selección de las fuentes más valorada (o como dicen ellos, más top). Algo muy práctico si eres una persona indecisa…
6) Font River
Font River categoriza sus tipografías por básicas, de fantasía, góticas, de fiesta, tecnológicas y que simulan a la escritura a mano. Además de tipografías online gratuitas, puedes descargar símbolos y letras extranjeras.
7) Urban Fonts
La web de Urban Fonts es, además de muy agradable, súper completa en cuanto a variedades tipográficas. Aquí puedes descargar más de 8 mil tipos de letras, aunque no todas son gratuitas.
8) Font Space
Esta plataforma cuenta con más de 1 millón de miembros (con acceso de usuario) y más de 35 mil fonts. Se podría decir que es la más completa actualmente y, ¿sabes qué?, también nos permite jugar con combinaciones de color para simular cómo luciría en nuestra web.
9) Font Freak
Ordenadas alfabéticamente, en Font Freak puedes descargar 9 mil tipografías gratis de hasta 400 diseñadores diferentes. Como inconveniente, decir que en sus opciones de edición sólo permite modificar el tamaño (y no el color).
10) Font Struct
Esta fuente para descargar letras tiene algo de particular, y es que cuenta con soporte y acceso a todo tipo de usuarios (no solo diseñadores) para crear y compartir sus creatividades en este ámbito.
