Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Web Typography
Webdesign

Una Guía para Seleccionar Fuentes Personalizadas para Tu Sitio Web

by
Length:ShortLanguages:

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

En los primeros días del diseño web, la tipografía era algo mas o menos ignorado. Las elecciones de fuentes eran bastante limitadas y por lo tanto la decisión más grande hecha era frecuentemente "serif vs. sans-serif". Cómo han cambiado los tiempos.

La web moderna proporciona una enorme cantidad de fuentes de las cuáles elegir. Además, el diseño y el CSS han evolucionado al punto en donde la tipografía es frecuentemente el frente y el centro de la apariencia de un sitio y una clave para su accesibilidad.

En corto, hemos ido desde tener casi ninguna elección a casi una paleta ilimitada de opciones. Eso significa que necesitamos tomar las decisiones correctas temprano en el proceso de diseño. Con eso en mente, aquí están algunas de las mejores prácticas a considerar cuando se eligen fuentes personalizadas para tu sitio web. Junto con cada consejo, proporcionaremos algunos ejemplos usando una selección de hermosas fuentes disponibles con una suscripción a Envato Elements.

1. Legibilidad Primero y Más Importante

Ya sea que estemos hablando de tipos de letra para encabezados o cuerpo de texto, la legibilidad debería ser una prioridad. Esto es especialmente importante cuando se trata de dispositivos móviles. Mientras que podrías hacer que un encabezado luzca atractivo y fácil de leer en una pantalla grande de escritorio, no toda fuente es ideal para un teléfono o tableta. Intenta evitar caracteres que sean demasiado anchos, a menos que tengas certeza de que los encabezados se mantendrán a una longitud mínima.

El texto de cuerpo debería ser limpio, con suficiente espaciado de línea y (en donde sea apropiado) de caracter para darle al contenido algo de espacio para respirar. La líneas o caracteres que están demasiado juntos resultarán en contenido que es difícil de leer.

Sobre todo, los tipos de letra pueden ser divertidos y estilizados, pero asegurar que son legibles es clave.

Appareo Medium

Appareo Medium by kimmydesign
Appareo Medium por kimmydesign

Familia Tipográfica Bw Modelica

Bw Modelica Font Family by bwtype
Familia Tipográfica Bw Modelica por bwtype

2. Usa Fuentes Que Atraigan a Tu Audiencia

Una de las primeras cosas que deberías hacer cuando configuras un sitio web es pensar sobre tu público meta. Información demográfica tal como edad, género, nivel de educación e ingreso deberían ser consideraciones primarias. Las fuentes definen carácter, y son una parte importante de atraer a la gente que estás buscando alcanzar.

Por ejemplo, un sitio web para un concesionario de autos de lujo se va a beneficiar de una fuente que emula la presencia lujosa del producto. Un artista infantil, por el otro lado, será bien asesorado a optar por algo más divertido e informal.

Cormier

Cormier by MehmetRehaTugcu
Cormier por MehmetRehaTugcu

Lunchbox Regular

Lunchbox Regular by kimmydesign
Lunchbox Regular por kimmydesign

3. Crea una Distinción Entre el Contenido

Si una página tiene varias secciones de contenido de texto, el uso de un buen encabezado puede ayudar a los usuarios a distinguir uno del siguiente. Una manera probada de lograr esto es usar un estilo diferente de fuente para encabezado y texto de cuerpo. Frecuentemente, vemos sitios web que usan una fuente serif para encabezados y una sans-serif para contenido. Mientras que es perfectamente aceptable usar el mismo tipo para ambos encabezado y texto de cuerpo, podrías querer considerar una peso o colo de fuente diferentes para asegurar que los encabezados resaltan.

Otra estrategia para considerar es el uso de glifos o fuentes de iconos (aunque usar directamente SVG para decorar tu página web tiende a dar más control). Por ejemplo, usar un icono de flecha a un lado de un encabezado le ayudará a resaltar. Esto puede ser establecido a través de un pseudo selector CSS para mostrar automáticamente antes de una etiqueta de encabezado específica.

Avaline Extras

Avaline Extras by kimmydesign
Avaline Extras por kimmydesign

CA Texteron

CA Texteron by capearcona
CA Texteron por capearcona

Metrisch

Metrisch by formikalabs
Metrisch por formikalabs

4. Las Fuentes Deberían Complementarse Unas a Otras

Un aspecto de tipografía grandiosa es que, mientras las fuentes que eliges pueden ser diferentes, deberían encajar juntas de alguna manera. Como ejemplo, probablemente no quisieras usar dos tipos de letra serif opuestos juntos para encabezado y cuerpo de texto. La manera única en la que las serifs están diseñadas podría causar un poco de choque cuando múltiples estilos son combinados.

Aún así, esta es un área un poco subjetiva. Todos tenemos diferentes gustos y nos comunicamos en nuestras propias maneras. Cuando elijas fuentes, usa tu mejor juicio sobre lo que va junto.

Bw Glenn Slab

Bw Glenn Slab font family by bwtype
Familia tipográfica Bw Glenn Slab por bwtype

Bw Glenn Sans

Bw Glenn Sans font family by bwtype
Familia tipográfica Bw Glenn Sans por bwtype

5. Limita el Número de Tipos de Letra Usados

Con tantas elecciones encantadores, podrías sentirte como el niño proverbial en una tienda de dulces decidiendo cuáles fuentes usar. Pero para hacer el mayor impacto, encontrarás que es mejor limitar tus diseños a no más de dos o tres tipos de letra. Eso ayudará a crear algún balance en tu diseño y generalmente hace las cosas más fáciles para que los usuarios sigan.

Además, cargar fuentes personalizadas usa ancho de banda y recursos del servidor---algo que podría tener impacto real en los tiempos de carga. Así, para mantener las cosas luciendo y desempeñándose a un nivel alto, limita el número de fuentes usadas en tu sitio web.

Catalina Typewriter

Catalina Typewriter by kimmydesign
Catalina Typewriter por kimmydesign

Fibon Neue

Fibon Neue by hederaedesign
Fibon Neue por hederaedesign

Aprovecha el Poder de la Tipografía Web

La escarpada variedad de fuentes disponibles, emparejadas con los poderosos métodos para implementarlas, han traído a la tipografía web fuera de las sombras a un reflector. La tipografía provee a los diseñadores con la libertad para expresar su creatividad a través de más que solo gráficos.

Y, con más de 1,300 fuentes disponibles, Envato Elements es un vasto recurso para tipografistas afilados. Por el precio de una suscripción mensual, tendrás acceso ilimitado a fuentes y a mucho más. Es una gran forma de impulsar tu creatividad.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.