Que 2015 sea el año de la comprensión de la tipografía de fuentes web

Vemos fuentes en la web y vemos listas sobre las combinaciones de fuentes de moda para usar en 2015. Son excelentes para inspirarse y son útiles para que las sigan quienes no son diseñadores.

Pero, ¿sabemos qué hace que las fuentes sean geniales? ¿O qué los pone de moda? ¿O qué los hace feos?

Entrevistamos a expertos en diseño y tipografía que pudieron darnos algunos consejos y recursos sobre el tema de las fuentes web. Personalmente, creo que es extremadamente útil, en la industria de los sitios web, comprender los principios de las selecciones y combinaciones de fuentes. De esa manera, si está diseñando su propio sitio o no tiene experiencia en diseño, puede seguir las pautas para asegurarse de que la tipografía de su sitio web siga siendo efectiva.

Recuerde, con el diseño, no nos enfocamos solo en la ‘apariencia’. No queremos hacer elecciones solo por estética, o por el motivo de “me gusta”. La estética es importante, pero con la tipografía y el diseño, generalmente hay razones por las que la estética es atractiva o no. Por un lado, es preferencia personal, pero por otro lado, con las fuentes, también es legibilidad.

Si hay algo que puedes sacar de este artículo, sería: legibilidad. ¿Tu elección de fuente facilita la lectura de tu contenido? Si no es así, probablemente haya elegido la fuente incorrecta.

Profundicemos en algunos principios de fuentes web a seguir en 2015 (¡y para siempre!).

Encontrar y elegir una fuente web

Recursos para encontrar buenas fuentes

Muchos de nosotros ahora usamos Google Web Fonts e incrustaciones de fuentes en CSS para los diseños de nuestros sitios web. Escribimos sobre cómo usar Google Fonts en su sitio de WordPress  aquí . Sin embargo, esta no es la única opción. Ejemplos de otras fuentes para fuentes web (tanto pagas como gratuitas) incluyen:

http://www.typewolf.com/open-source-web-fonts
https://typekit.com
http://www.fontsquirrel.com/
http://www.veer.com/products/fonts/
http: //www.fontbureau.com/webfonts/
https://edgewebfonts.adobe.com/fonts

Y aquí hay una lista de fuentes tradicionalmente «seguras para la web» que puede usar sin una fuente incrustada en CSS, ya que la mayoría de los navegadores tienen la capacidad de mostrar estas fuentes de forma predeterminada:

http://www.w3schools.com/cssref/css_websafe_fonts.asp

Sí, hay otras fuentes gratuitas disponibles en línea. Si bien pueden ser tentadores, a menudo no están bien hechos y pueden contener fallas (como me han dicho). Si está buscando algo gratis, es mejor quedarse con un servicio como Google Fonts. En general, se consideran confiables en calidad.

(Nota: se supone que Google paga a sus artistas tipográficos una tarifa fija por sus envíos, aunque esto es difícil de verificar si se profundiza. Consulte este artículo , este artículo , este artículo y posiblemente una pista sobre su modelo de pago en un patente aquí . Si alguien tiene una fuente confiable para nosotros, ¡háganoslo saber en los comentarios!)

Además, ¡cuidado con las licencias ! Si bien puede usar una herramienta como Font Squirrel para convertir casi cualquier tipo de letra en una fuente incrustable, los creadores o propietarios de fuentes (como Microsoft o Adobe) no siempre lo permiten. A veces, puede usar fuentes en imágenes o impresas, pero no en su CSS .

Define las opciones tipográficas para la personalidad de tu proyecto web

A primera vista, puede sentirse abrumado por las opciones de fuentes web disponibles. No se deje paralizar por la elección. Comience con la personalidad y el estado de ánimo que busca. Esto fue descrito por Christina Paone de Paone Creative en nuestra entrevista, y muchos expertos en la web están de acuerdo. Por ejemplo, Douglass Bonneville en Smashing Magazine e Ian Yates en Tuts+ (en la sección de Diseño Web).

Así es como Ian Yates explica el efecto que la personalidad puede tener en la elección de una fuente:

Las fuentes, como las personas, tienen personalidades. Y las personalidades de las fuentes, al igual que las de las personas, a veces pueden chocar. Piense en sus fuentes como invitados a la mesa en una boda; un animador suele ser suficiente, ya que demasiadas personalidades fuertes pueden hacer que la atmósfera sea incómoda, como un episodio de Gran Hermano.

Sin embargo, asegúrese de que haya algo de carisma en el grupo; ocho personas con poco que decir solo resulta en una espera inquietante para los discursos.

Hagamos una pausa por un momento y juguemos un juego. ¿Puedes interpretar la personalidad en las siguientes muestras de fuentes? Háganos saber lo que lee solo en las imágenes de la fuente, independientemente del texto legible. ¿Las personalidades de la fuente coinciden con las palabras que se pronuncian? ¡Dinos en los comentarios!

Typography.com tiene un excelente recurso para comprender cómo las fuentes pueden tener personalidad, y lo explica claramente con algunos ejemplos propios. Como dicen, su recurso está «construido en torno al primer principio altamente científico de combinación de fuentes de H&FJ: mantenga una cosa consistente y deje que una cosa varíe». Este es un principio importante que discutiremos pronto con el consejo de Christina.

Finalmente, si está buscando reírse de la forma en que las fuentes tienen personalidad, vea este video de College Humor titulado Font Conference (crédito a Christina por enviármelo).

Por lo tanto, si está diseñando un sitio peculiar, elija una personalidad y un estado de ánimo peculiares. Mantén las cosas ligeras con fuentes sans serif o manuscritas . Si está tratando de emitir un ambiente de seriedad y autoridad, considere las fuentes serif , ya que tradicionalmente se asocian con ese tipo de escritura. (Esto no quiere decir que todas las fuentes sans-serif sean alegres y todas las fuentes serif sean sombrías. ¡Lejos de eso! ¡No tenga prejuicios sobre las fuentes! Su instinto le dirá qué usar, y estas son afirmaciones generales).

“Ninguna matemática o fórmula funcionará aquí”, explica Christina. “Cada fuente tiene una personalidad y una historia. Si eres un nerd tipográfico como yo, probablemente puedas mirar una fuente y crear un perfil de personaje para ella al instante. Veo fuentes como un niño ve personajes de dibujos animados.

…Algunos personajes son muy claros

• Las serifas son del tipo tradicional.
• Las sans serif son las más modernas.
• Las cursivas son incómodas y las negritas son seguras”.

En caso de duda, siga esta política de «no falla» al elegir una fuente web

Si está atascado, o simplemente no está seguro de su elección, Christina le da este consejo, para que no se pierda en la búsqueda interminable de una ‘buena’ opción de fuente:

Elija fuentes que sean atemporales. Es tentador usar fuentes nuevas en negrita o populares, pero estas fuentes envejecerán rápidamente.

Elija una fuente con un conjunto completo de pesos. Esto significa que el conjunto de fuentes debe contener, como mínimo, regular, negrita y cursiva. Muchas fuentes vienen con más opciones, como pesos más ligeros y más pesados.

Elija una fuente para establecer la personalidad. Elija una segunda fuente (para un emparejamiento de fuentes ) que creará estabilidad.

Tecnicismos detrás del uso de fuentes

Es probable que esta no sea la parte más divertida del diseño (dependiendo de con quién hables). Pero tiene que hacerse para lograr la máxima grandeza en un sitio web. Si pasa por alto cosas como la pantalla de retina o la diferencia en las medidas de la fuente entre la impresión y las computadoras, puede terminar con un diseño que no era exactamente el «aspecto» que estaba tratando de lograr. También hace que un diseño parezca ‘perezoso’. Así que asegúrese de hacer su tarea de prueba después de seleccionar sus fuentes (que explicamos a continuación).

No puede confiar en Photoshop para este aspecto. Como explica Cristina,

Las fuentes web pueden aparecer alteradas en Photoshop, así que configure sus estilos en el navegador. Una herramienta realmente excelente para probar fuentes en línea es Typecast . Al usar sus plantillas, también comenzarán con sugerencias de tamaños de fuente, altura de línea, espaciado entre letras y más. Luego, está invitado a ajustarlo según sea necesario. La ventaja de sus herramientas es que puedes descargar todo el CSS asociado a tu plantilla. Esta es la mejor herramienta que conozco para diseñar fuentes para la web.

Es posible que tengas que volver a la mesa de dibujo después de los siguientes pasos, pero al final valdrá la pena.

Pruebas de píxeles de fuentes en pantallas, dispositivos y medios

Christina también menciona un punto importante acerca de la investigación sobre la forma en que las fuentes pueden verse diferentes, y esencialmente cambiar su intención, en varios dispositivos:

Una vez que haya elegido una fuente basada en la personalidad, asegúrese de que sus fuentes sean legibles en todos los tipos de pantalla. Una pantalla de retina en comparación con la PC antigua de su madre mostrará la misma fuente de manera muy diferente. Debe probar el peso elegido para asegurarse de que sea legible y mantenga la personalidad por la que lo eligió.

Hay herramientas en línea que le permitirán probar esto. Uno de ellos es Adobe Typekit . En este ejemplo, puede ver que el peso delgado de Brandon Grotesque comienza a pixelarse mucho en tamaños más pequeños.

No olvides el cambio drástico que puede tener el peso de las fuentes

Este punto se puede pasar por alto muy fácilmente, no solo con el diseño general, sino también con la forma en que se ven los pesos de las fuentes en diferentes formatos. No siempre es lo mismo en todas las pantallas o medios, como hemos visto anteriormente.

Entonces, para empezar, como explica Christina, “el peso de la fuente se reduce a la personalidad del sitio. Use un peso más ligero para una apariencia árida moderna. Usa un peso pesado para el impacto”.

Pero luego debe verificar cómo se verán los pesos de su fuente en los navegadores en comparación con Photoshop y en comparación con la impresión. Notarás la diferencia, ¡así que ten cuidado con eso!

Otra cosa a tener en cuenta son los pesos de fuente que se hicieron para ir con la familia de fuentes. Notará en Google Fonts que puede elegir incrustar fuentes en ciertos pesos de fuente, y no todas las fuentes vienen con la misma numeración en este sentido.

Este es un ejemplo de los pesos de fuente que están disponibles con la fuente Roboto en Google Fonts:

En esta situación, si intentara forzar a la fuente Roboto a usar un peso de fuente de 200 o 600, que no están en su conjunto de estilos, esos pesos no se verían bien en su navegador. Veo esto mucho en los sitios web, y como desarrolladores y diseñadores web, debemos verificar nuestro CSS para asegurarnos de que no estamos usando simplemente «negrita» como peso de fuente, o un número de peso de fuente inexacto. Afecta la visualización del navegador de la fuente.

Un ejemplo de trabajo es la limitación que presenta la fuente Carrois Gothic, ya que solo viene con un peso de fuente, que es 400.

Si usa esto como su cuerpo de texto (recuerde, el «caballo de batalla» como lo describe Christina), nunca podrá usar el texto en negrita correctamente. Vea cómo la distinción es mínima entre el peso normal de 400 y el navegador que intenta «forzar» un peso «negrita» en la fuente en CSS. El «negrita» también aparece un poco ‘borroso’ (a falta de una mejor descripción):

Calcular y refinar el espaciado entre letras

Si bien esto puede no ser algo que aprenda al comienzo de su exploración de la tipografía, es bueno tenerlo en cuenta de todos modos. El espaciado entre letras ahora se puede cambiar con bastante facilidad en la web con CSS simple. Eso puede ser una bendición y una maldición. Si lo hace bien, puede marcar una gran diferencia en sus estándares de diseño web. Si se usa incorrectamente, también puede hacer que las cosas se vean extrañas e ilegibles.

Según Cristina,

El espaciado entre letras y la altura de las líneas es un principio de diseño que debe estudiarse y dominarse. Algunos argumentarán que no existe una fórmula matemática, que es un sentimiento o una sensación de equilibrio. Todo se reduce a la proporción áurea (pero ese es un tema aparte).

Le sugiero que base su diseño en matemáticas, pero asegúrese de ajustar los resultados para su proyecto específico. Aquí hay una herramienta realmente genial que usa matemáticas para darle un punto de partida. Sin embargo, primero vea los resultados en Georgia, luego cambie la fuente a Baskerville. Puede ver cómo 2 fuentes serif se leen de manera muy diferente con la misma altura y ancho de línea.

Una cosa para recordar es que en la web está restringido al diseño píxel por píxel. En la configuración de impresión tradicional, puede diseñar con decimales. En línea, debe establecer la altura de las líneas y los espacios entre letras con píxeles y, a veces, esto puede resultar incómodo. Haz tu mejor esfuerzo para encontrar un buen ajuste o elige una nueva fuente.

Emparejamiento de fuentes web correctamente

La mayoría de las veces, necesitará combinar fuentes en el diseño de su sitio web. Es raro ver un solo tipo de familia de fuentes, peso de fuente o estilo de fuente en un sitio web, y eso es por una buena razón.

Las fuentes ayudan a distinguir partes de su sitio web para que los usuarios puedan comprender la importancia y la jerarquía de su diseño. Desea que los usuarios sepan que un encabezado es un encabezado y no lo mismo que su cuerpo de texto. Entonces, por supuesto, cambia la configuración de la fuente en CSS para comunicar eso. Douglas Bonneville llama a esto diseñar un “ esquema basado en roles ”.

De hecho, HTML se configura de esta manera, proporcionando etiquetas para H1, H2, H3, etc. (con la «H» que significa «Título»). HTML también tiene otras etiquetas para nuestro uso en tipografía, como <blockquote> (sobre la que escribimos aquí ) y <p> (que es para «párrafo»).

Pero no desea mucha distinción al separar el significado de los elementos de su página web. Si usa demasiadas familias de fuentes en su sitio web para hacer esto, perderá la atención de sus lectores.

Como explica Cristina,

Una combinación perfecta de fuentes pasa desapercibida. El objetivo es intentar encontrar fuentes que parezcan de la misma familia. Una combinación perfecta utiliza una fuente para el contraste y una fuente para el apoyo. Las dos fuentes nunca deben competir por la atención.

Cada fuente tiene una personalidad, así que comparemos las fuentes con las personas. Una gran pareja sería un padre y su hijo. Ambos tienen el mismo aspecto y tienen jerarquía en el árbol genealógico. Una mala pareja serían dos primos porque se ven iguales y actúan al mismo nivel.

Aquí hay dos pasos muy simples a seguir al emparejar fuentes, explicados por Christina,

Paso uno: encuentre fuentes con características similares pero que aún se vean diferentes (para que no compitan). Aquí hay algunos rasgos similares para que los consideres (elige uno en el que centrarte):

• ¿Son ambos estrechos (condensados)?
• ¿Son ambos abiertos o redondos?
• ¿Son ambos cuadrados o geométricos?

La forma más sencilla de lograr un buen maridaje es utilizar tipografías de la misma familia. Una gran combinación es Roboto y Roboto Slab .

Paso dos: crear contraste y jerarquía. Elija una fuente del par para usar en los titulares. Esta fuente establecerá el tono y la personalidad de la página. Usa la segunda para el cuerpo del texto: esta fuente es tu caballo de batalla.

Aquí hay algunos consejos más y fuentes web emparejadas previamente que puede usar, gracias a mi amigo y experto en interfaz de usuario, Alex Chang :

10 combinaciones de fuentes de Google más que puedes copiar
10 combinaciones de fuentes de Google útiles para tu próximo sitio
Ocho consejos para combinar tipos de letra
Ocho formas de combinar tipos de letra

¿Deberías usar las combinaciones sugeridas del sitio web de Google Fonts? Christina sugiere no hacer eso, ya que no siempre son las parejas de aspecto más profesional. En cambio, tome esas recomendaciones como inspiración para crear sus propias combinaciones.

Avanzando ‘fuera de la caja’ con combinaciones de fuentes web

Bien, ahora que tienes algunos principios fundamentales para elegir fuentes, es hora de aprender a romper un poco las reglas. Recuerda, romper las reglas requiere conocerlas, así que no saltes directamente a este paso. Tómese el tiempo para sentirse cómodo reconociendo e identificando buenas opciones de fuentes como hemos descrito anteriormente.

Aquí hay ejemplos de reglas que puede aprender a ‘romper’ en la tipografía:

‘Un serif y un sans-serif siempre deben ir juntos’

Esto es cierto y es a prueba de fallas, pero no siempre es la experiencia más amplia cuando se aprende a jugar con la tipografía.

Como Christina nos ayuda a entender,

Esta es una vieja técnica de tipógrafos, es lo que te enseñan en la escuela. Reglas como esta sientan las bases. Depende del diseñador elegir el momento perfecto para romper la regla. Eso es lo que hace que el diseño sea interesante.

Si eres un novato, esta es una gran regla para usar. Le ayudará a establecer un par que parezca relacionado pero que permita cierto contraste.

A medida que te sientas más cómodo eligiendo fuentes, puedes comenzar a romper la regla. Aquí hay un ejemplo de un sitio donde usamos 2 fuentes serif para realzar el sentimiento y la personalidad.

Este sitio está utilizando IM Fell DW Pica y Sorts Mill Goudy . Puedes ver que Christina los eligió cuidadosamente. No compiten y siguen los mismos patrones y principios que se describieron en los pasos de Christina para combinar fuentes anteriores.

‘Solo use dos fuentes en un diseño’

Nuevamente, esto también es cierto, pero al mismo tiempo puede ser un poco aburrido en diseño. Pero nuevamente, Christina explica que a veces se necesitan más de dos fuentes (aunque no más de tres, por favor amigos):

“En algunos casos, es posible que necesite una tercera fuente para agregar interés. Este es un ejemplo de un sitio en el que las fuentes del título y del cuerpo del texto no fueron suficientes. Usamos una fuente ‘artística’ personalizada para íconos y gráficos especiales para agregar interés”.

Las fuentes utilizadas en este diseño fueron Duke , Courgette y Gudea .

Agregar una tercera fuente también es un buen momento para elegir una fuente de visualización. ¿Cómo se identifica una fuente de visualización?

Cristina explica,

Las fuentes de visualización tienen la mayor personalidad. Pueden ser súper creativos o muy de moda. Por lo general, una fuente de visualización solo tiene una variación (p. ej., solo regular y no cursiva ni variaciones de peso). Esto significa que tienen un solo propósito. No son versátiles y no deben usarse como marca principal o fuente de sitio.

… Son geniales para agregar personalidad a su sitio. Úselos para títulos o botones especiales. También son geniales para usar en obras de arte basadas en imágenes.

Mantenerse a la moda y actualizado con las fuentes web

Algunas fuentes son atemporales, mientras que otras no lo son. Es importante mantenerse al día con las tendencias de las fuentes para mantener sus diseños ‘con los tiempos’. Aquí es cuando confiar en un diseñador también es clave. Es difícil hacer eso cuando, como cliente, puede estar acostumbrado a las opciones de Microsoft Word, como explica Christina.

Personalmente, a menudo me piden que reduzca el tamaño de las fuentes en los sitios web, incluso cuando las fuentes no son realmente tan grandes. Creo que este es un concepto pasado de moda que no tiene en cuenta al usuario ni a los tamaños de pantalla modernos. Siempre es mejor si su texto es de fácil acceso. Recuerde, nos importa la legibilidad más que el gusto por el gusto.

Para concluir: las fuentes web son una habilidad

Esperamos haberte convencido de que elegir fuentes es tan importante para tu marca y sitio web como escribir un buen contenido o elegir un buen desarrollador. El efecto de la tipografía puede contribuir en gran medida a enviar su mensaje a los visitantes de su sitio web. Tiene un lenguaje tácito, como hemos visto anteriormente al interpretar las personalidades de las fuentes. No lo deje pasar y confíe en el juicio y la capacitación de un diseñador en este asunto si no está seguro de poder hacerlo por su cuenta.

Entonces, dejemos que 2015 sea el año de entender la tipografía de las fuentes web, ¡incluso si no eres diseñador! ¡Hagamos de la web un lugar mejor con mejores opciones de fuentes!

Ah, y te estarás preguntando…

¿Quién es Christina Paone de todos modos?

Christina ha sido un gran punto de referencia para este artículo y fue citada muchas veces, por lo que quizás se pregunte quién es ella. Ha estado ilustrando y jugando con tipos durante más de 10 años. Comenzó con una base en diseño formal y capacitación en tipografía en la Universidad. Actualmente, dirige un estudio independiente, Paone Creative , donde construye inspiradores sitios web de WordPress e identidades de marca. El estudio ha estado brindando a los clientes un estilo de tipo óptimo durante 5 años. Ella dice que la tipografía es su pasión tanto en el trabajo como un pasatiempo personal. Puedes seguir a Christina en Twitter e Instagram . También tiene un gran tablero de Pinterest dedicado a la tipografía que actualiza regularmente.

También echa un vistazo a:

Nuestro artículo relacionado con este tema, sobre  las tendencias de diseño web a tener en cuenta en 2015 .

Fuentes que están disponibles con la mayoría de nuestros temas aquí en Elegant Themes.

Y, dado que esto es Internet, sé lo que todos están esperando para preguntar y hablar: ¿qué pasa con Comic Sans? Para eso, simplemente le paso la palabra a VSauce en YouTube, quien hizo un video sobre este tema que lo explica bien… o bastante bien, ja, ja.

Miniatura de la imagen del artículo por: Epsicons / Shutterstock.com