Por Google Fonts

Si lo haces bien, la tipografía puede ser increíblemente poderosa. Dirígete a los escritos de Robert Bringhurst, cuyos Elements of Typographic Style han servido como un texto de referencia sabio durante décadas, y encontrarás una articulación ingeniosa de la artesanía. La tipografía «existe para honrar el contenido», según Bringhurst, y cuando se hace bien, «revela cada elemento, cada relación entre los elementos y todos los matices lógicos del texto».

Ya sea que encuentre estas palabras inspiradoras o intimidantes, la verdad es que la elección tipográfica correcta siempre refleja las necesidades específicas del proyecto en sí. Estas necesidades no solo son estéticas, sino también técnicas y funcionales, y hay mucho que se puede ver con fragmentos de texto mientras se desplaza por un menú desplegable de Alegreya a Zapf Dingbats. Algunas fuentes funcionan mejor en los titulares, mientras que otras se leen bien en los párrafos. Algunas familias de fuentes son lo suficientemente grandes como para incluir scripts internacionales y caracteres especiales. Y si la fuente viene en una variedad de estilos diferentes (como cursivas o mayúsculas) y pesas (desde rayita a ultra-negra), ofrecerá más herramientas para ajustar el diseño a medida que el proyecto se une.

Hay mucho en qué pensar, claro, pero algunas de las consideraciones más importantes son las características prácticas y funcionales del proyecto. Al comenzar con lo que ya sabe, luego de pensar en las siguientes consideraciones, encontrará una fuente que satisfaga sus necesidades.

Comience con el alcance de su proyecto

¿Está comenzando algo que podría durar algunos meses o incluso años, como una revista, o es un proyecto único, como una plataforma de diapositivas, un logotipo o una presentación?

Lo más probable es que un proyecto grande y de largo plazo (como una publicación periódica o un boletín informativo) tenga una variedad de necesidades tipográficas diferentes a lo largo del tiempo. Su mejor opción para cubrir esas necesidades diferentes es elegir una familia de tipo grande que incluya una variedad de pesos, estilos y variantes, como tapas pequeñas y ligaduras. Las familias grandes facilitan la creación de la marca porque al aferrarse a una sola fuente a lo largo del tiempo garantiza que podrá manejar diferentes situaciones sin tener que agregar otra fuente en la mezcla. Pruebe estos ejemplos: Alegreya , Alegreya SC , Merriweather , Merriweather Sans , Roboto , Roboto Condensed , Work Sans

Pero si se trata de un proyecto a corto plazo (como un póster, una portada de un álbum o un logotipo), es posible que no necesite pesos adicionales, o las versiones condensadas y extendidas de una fuente. Incluso puede elegir una fuente con un solo peso si cree que es adecuado para esta tarea en particular. Solo tenga en cuenta que la versatilidad de una familia de tipo grande podría ser útil a medida que realiza ajustes precisos en el texto en un proyecto a corto plazo. Pruebe estos ejemplos: Bubblegum Sans , Graduate , Scope One , Space Mono

¿Qué quieres que diga tu fuente?

Si bien el alcance de su proyecto podría limitar su búsqueda al descartar las fuentes que no tienen el rango que necesita, o guiarlo hacia las que sí lo hacen, recuerde que no existen reglas estrictas para determinar la fuente con la estética correcta. Esa es una cuestión de la personalidad de la fuente, pero hasta cierto punto la personalidad depende de la familiaridad.

Muchas aplicaciones y sitios web todavía usan una pequeña selección de las fuentes más comunes, un vestigio de una época en la que este era el enfoque más práctico para la tipografía digital. Alguna vez fue el caso de que utilizar las fuentes del sistema sería la opción más segura porque podría contar con que estén en buen estado y disponibles en la mayoría de los dispositivos. Hoy en día, no hay necesidad de comprometerse seleccionando una fuente común de ‘caballo de batalla’. Las fuentes web tienden a ser tan confiables como las fuentes del sistema, pero con una mayor variedad para elegir. Pruebe estos ejemplos: Proxima Nova, Helvetica, Museo, Futura, Brandon Grotesque (popular); Arial, Times New Roman, Courier New, Helvetica, Times, Courier, Verdana, Georgia (sistema); Gibson , Gotham,Classic Grotesque , Montserrat (fuentes web)

Pero si todavía está interesado en encontrar una fuente poco común para ayudar a su proyecto a destacarse, hay docenas de fundiciones de tipo comercial que venden fuentes patentadas ya sea por una tarifa plana o mensual. Si desea un tipo de letra totalmente único y personalizado, y que no lo haría, puede ser costoso y requerir mucho tiempo, así que comience contactando a las fundiciones para obtener presupuestos. En el lado positivo, cualquiera que contrate probablemente se hará cargo de muchas de las inquietudes enumeradas en esta guía. Entre las opciones gratuitas, siempre puedes buscar una fuente web menos utilizada. Como regla general, elegir una versión más nueva significa que no será de uso generalizado, al menos no todavía. Por supuesto, somos parciales a Google Fonts. Haga un recorrido por el directorio para tener una idea de cuántas fuentes web gratuitas hay disponibles, y use las páginas de muestras familiares para ver la cantidad de uso de cada fuente en la web.

¿Cuánto texto estás componiendo?

«Los diseñadores proporcionan maneras de entrar y salir de la avalancha de palabras», escribe la crítica de diseño Ellen Lupton, «al dividir el texto en pedazos y ofrecer accesos directos y rutas alternativas a través de una gran cantidad de información». Más allá de la personalidad de su elección de fuente, así -diseños diseñados también utilizan señales visuales, regularidad y variación para guiar a los lectores de forma natural. Y elegir el tipo de acuerdo con la longitud del texto puede brindarles a los lectores muchas claves y atajos para ayudar con la navegación.

Para titulares y subtítulos, puede elegir una fuente expresiva, única e incluso idiosincrásica, incluidos los estilos de visualización, decorativos, manuscritos y de secuencias de comandos . Estos diseños poco convencionales y de alto contraste tienden a funcionar bien en este contexto porque sus detalles y complejidad visual ayudan a atraer la atención. Si desea utilizar una fuente sans serif para fragmentos cortos de texto, especialmente en tamaños grandes, el peso normal tiende a parecer un poco fuera de lugar. Considere usar los estilos negrita y comprimido en su lugar. Si prefieres los serif, las fuentes serif de rayita como Playfair Display o Rufina tienden a funcionar bien en líneas cortas porque su alto contraste de trazo tiende a captar la atención del lector.

El texto de longitud media, definido de forma general como tres o cuatro párrafos, es bastante flexible, lo que significa que tiene opciones. Si te estás inclinando por una fuente serif, opta por algo del estilo antiguo como Quattrocento , un estilo de transición como Libre Baskerville o una serifa de losa como Arvo . Prefiero un sans serif? Entonces la mejor opción sería algo de estilo humanista o grotesco como Cabin o Raleway , pero incluso algunos estilos geométricos como Montserrat funcionarán. Experimente probando algunos de estos y vea qué funciona mejor en diseño.

Al componer secciones más largas de texto -excediendo cinco párrafos- se recomienda una tipografía serif. Esta es la opción tradicional para la tipografía de libros, pero también funciona bien en la pantalla. Las fuentes serif Old Style o Transitional como EB Garamond o Libre Baskerville , tienden a ser fáciles de leer para leer más tiempo como noticias y artículos de revistas. Si bien es posible utilizar una fuente Humanist sans serif para tramos largos de texto corporal, la apuesta más segura es un diseño de serif conocido que los lectores pueden procesar rápidamente.

¿Qué importa cuando se trata del tamaño del punto?

Al elegir fuentes web, a menudo hay que sopesar varias consideraciones juntas. Si bien la longitud del texto ayuda a determinar qué fuente seleccionar, el tamaño al que está configurando el tipo es otro factor importante. En tamaños relativamente pequeños, hasta 16 puntos, pruebe las opciones sans serif como Roboto , Montserrat y Raleway . En comparación con los diseños serif, aquellos sin o sinLas serifas tienden a tener una «altura x» más alta, definida como la distancia entre la línea base y la línea media de un alfabeto y, típicamente, la altura de la letra «x», lo que hace que un diseño sea más legible en tamaños pequeños. Los sierpes de Sans también tienden a tener un contraste de trazo relativamente bajo y un peso de trazo más uniforme, lo que les da un «color» uniforme cuando se reducen y se empaquetan en un espacio pequeño.

«Para un párrafo, que debe ser muy legible, no debe usar algo con formas ambiguas», dice el diseñador de tipos Octavio Pardo. Las fuentes decorativas como Comfortaa (que se muestran arriba) pueden ser difíciles de leer extensamente, por lo que los textos largos se adhieren a las fuentes muy legibles de «caballo de batalla» como Alegreya o Bellefair .

También puede hacerse una idea de la calidad general de una fuente examinando las letras que tienden a demandar más tiempo de un diseñador de tipos, o simplemente caen más abajo en su lista de prioridades. «Mire las formas de ‘a’, ‘g’ y los números», dice el diseñador de tipos Octavio Pardo. «Las opciones de fuentes arriesgadas se revelan en esos glifos. Deberían ser atrevidos, pero también legibles. Puede permitir diseños extravagantes en glifos de baja frecuencia como ‘v’ ‘w’ ‘x’ ‘y’ y ‘z’, así como en cursiva.

En tamaños medios, como subtítulos, comillas de extracción o títulos más pequeños que van desde 16 puntos a 24 puntos, considere usar una fuente sans serif en el estilo geométrico, grotesco o humanista. Montserrat , Lato y Quattrocento Sans son buenos ejemplos. Evite los pesos extremos, ni demasiado gruesos ni demasiado delgados, para que el texto sea fácil de leer de un vistazo. Si, por el contrario, desea una fuente Serif que sea contemporánea y no demasiado libre, busque algo sin demasiado contraste de trazos, como las fuentes Sif serif Arvo , Sanchez y Slabo .

Las fuentes diseñadas para usarse en tamaños grandes, superiores a 24 puntos, se denominan ‘Fuentes de pantalla’. Estos tienden a tener características llamativas que se destacan en tamaños de puntos más altos, mientras que en tamaños más pequeños estas mismas características tienden a dificultar la legibilidad. Aún así, casi cualquier género tipográfico es un juego justo para textos grandes, siempre y cuando los sentimientos evocados por el tipo de letra sean apropiados para el contexto. Este es el momento ideal para usar una fuente decorativa o manuscrita con caracteres decorativos y un contraste de trazo muy alto, como Lobster o Berkshire Swash.. Pruebe algo altamente geométrico, retro o incluso sucio si le da el tono correcto. Solo evite fuentes con contadores grandes (los espacios interiores cerrados de letras como B o q) y alturas x altas, ya que estas características están destinadas a ayudar al ojo con texto más pequeño y tienden a parecer fuera de lugar cuando se amplían. .

¿Quién es tu público y qué idiomas hablan?

Recuerde que su aplicación o sitio web probablemente llegue a usuarios de todo el mundo. Incluso si proporciona contenido en un solo idioma, muchas personas usan una función de traducción en el navegador para que el contenido aparezca en su idioma nativo.

«La traducción automática como servicio aumenta la probabilidad de que alguien vea su contenido en otro idioma», dice el diseñador de tipos Eben Sorkin, cuyo Merriweather (mostrado arriba) se ha expandido en los últimos años para admitir más idiomas europeos, y los que utilizan el Escritura cirílica «Tener los glifos necesarios para su idioma disponible ayudará a que el usuario se sienta satisfecho», dice Sorkin. «Cuanto más globales sean sus clientes, más probable es que se preocupen por esto».

En otras palabras, si la fuente que ha elegido tiene solo letras latinas básicas, el auto-traducir elimina la tipografía de su proyecto, cambiando su diseño a otra fuente para esas letras, dándole un «efecto de nota de rescate». donde las letras acentuadas individuales cambian y sobresalen. Elegir una fuente que incluya caracteres para otros idiomas garantiza que el diseño de su sitio se mantendrá constante para una mayor cantidad de lectores. Esto puede parecer una batalla perdida, pero hay muchas familias de fuentes que incluyen compatibilidad con varios archivos de texto.

Si su principal preocupación es que una fuente permanezca constante en la mayor cantidad posible de scripts, considere utilizar la familia de fuentes Noto (que se muestra arriba).

Incluso con fuentes latinas básicas, querrá comprobar si la fuente incluye los caracteres «latinos extendidos» utilizados en idiomas europeos específicos. Considere los caracteres acentuados con marcas diacríticas como el circunflejo (â), tumba (á), diéresis (ä), desbordamiento (å) o ogonek (±). Hay muchos más, pero elegir una fuente con un juego de caracteres de Extended Latin garantizará que las letras acentuadas no se asienten de manera predeterminada a la versión sin acentos.

Una familia de tipos debe aparecer consistente, incluso armoniosa en diferentes secuencias de comandos, lo cual no es poca cosa. Los diseñadores que combinan dos o más guiones para una fuente deben equilibrar historias separadas y tradiciones de escritura. Si espera utilizar dos scripts diferentes uno al lado del otro, pruebe algunos conjuntos de texto de muestra para ver si cree que los dos scripts se juntan cómodamente.

Las fuentes web como Alegreya , Merriweather , Nunito , Roboto y Quattrocento incluyen una amplia gama de caracteres, pesos y estilos que los califican como ‘superfamilias’, y estas cinco superfamilias ahora también admiten caracteres cirílicos . Una advertencia: al igual que el latín, hay ciertos caracteres cirílicos que se usan solo en algunos idiomas, como el serbio y el búlgaro. Para proporcionar estos idiomas, asegúrese de que la fuente tenga soporte «cirílico extendido».

Otras fuentes web admiten una gama más amplia de sistemas de escritura. Dependiendo del proyecto, podría ser una prioridad que tu fuente tenga caracteres arábigos , griegos o hebreoscoincidentes . También puede encontrar fuentes web para admitir una variedad de scripts hindúes como bengalí , devanagari , gujarati y tamil , así como idiomas del sudeste asiático como tailandés . Para ver sus opciones en Google Fonts , filtre por idioma con el menú desplegable.

¿Cómo pesa la funcionalidad de una fuente frente a sus características de diseño?

La gama estilística de una familia de tipos se divide en dos partes: su funcionalidad y características de diseño. La funcionalidad se refiere a la gama de estilos disponibles para modificar la apariencia general de la fuente. Una fuente funcional debe tener letras cursivas y un rango de pesos de Delgado a Negro. Pruebe estos ejemplos: Barlow , Poppins , Libre Franklin

Las características de diseño de una fuente son variaciones estrechamente adaptadas en caracteres específicos. Estos incluyen letras mayúsculas, alternativas contextuales y diferentes estilos de numeración. Las mayúsculas pequeñas pueden ser útiles para títulos y encabezados en ciertos contextos. Pueden dar sofisticación al texto agregando variedad y creando un sentido de jerarquía visual. Pruebe estos ejemplos: Carrois Gothic SC , Cormorant SC , Patrick Hand SC

Y aunque es poco común que las alternativas contextuales se consideren «esenciales» para que una fuente funcione bien, pueden agregar variedad de varias maneras que podrían ser muy deseables para su proyecto (consulte Alternativas de Montserrat ). Si está utilizando una fuente cursiva o de guión, sus alternativas podrían hacer que el texto parezca más «natural» al agregar la variedad que aparecería en la escritura real ( Advertencia , Sriracha ). Por otro lado, los caracteres alternativos en una fuente serif o sans pueden agregar un toque de distinción que se destaca del texto normal.

Según lo que necesite para su proyecto, recuerde comparar los estilos de las figuras de su fuente. La diferencia entre Oldstyle y el estilo tabular (que se muestra arriba) afectará su diseño y las opciones de formato. Las figuras tabulares a menudo se usan en las tablas porque cada número tiene el mismo ancho de caracteres, mientras que las figuras de Oldstyle se leen más cómodamente en los párrafos.

Si espera usar muchos números, tenga en cuenta que vienen en diferentes estilos destinados a diferentes contextos. Las figuras de estilo antiguo son preferibles para bloques de texto como párrafos. Si observa detenidamente, notará que algunos números están alineados debajo de la línea base que orienta el resto del texto. Esto ayuda con la legibilidad de los números dentro de largas cadenas de texto. Las figuras tabulares están centradas verticalmente y monoespaciadas horizontalmente. Esto les ayuda a aparecer más regular y consistente en las tablas, de ahí el nombre. También tenga en cuenta que solo algunas fuentes incluyen signos de fracción apropiados . Lo mismo ocurre con los cientos de símbolos de moneda usados en todo el mundo. Pruebe estos ejemplos: Alegreya , Exo , Montserrat , Roboto, Spectral , Google Fonts con características OpenType

¿Qué pasa si quieres usar más de una fuente?

Con lo básico fuera del camino, puede pasar con seguridad a decisiones más complicadas, como el emparejamiento de fuentes. El emparejamiento puede ser una cuestión bastante matizada y complicada, incluso para los expertos en tipos, pero eso no significa que deba evitarse del todo. «Hay combinaciones infinitas, y encontrar el emparejamiento correcto puede tomar mucho tiempo», dice el diseñador Yuin Chen, quien dirigió la actualización de Google Fonts del año pasado. Es un placer probar diferentes combinaciones, así que adopte el proceso y pruebe tantas opciones como pueda; lo que funciona mejor puede sorprenderlo.

Algunas parejas funcionan bien debido a su contraste, mientras que otras parejas prosperan en la similitud. Las diferencias rígidas pueden hacer que un diseño parezca más dinámico, mientras que el uso de diferentes estilos de una superfamilia agrega cohesión visual. Si ha elegido una fuente de pantalla única y llamativa para la titulación, pruebe algo atenuado y familiar para el texto del cuerpo. Una opción clásica sería usar el estilo sans serif para la titulación y el estilo serif para el texto del cuerpo. Pruebe estos ejemplos: Alegreya y Alegreya Sans (similar), Libre Franklin y Libre Baskerville (contraste)

Sugerencia: al buscar páginas de especímenes familiares en el directorio de Google Fonts, puede probar y personalizar combinaciones populares.

Aún indeciso?

Vale la pena hacer una breve lista y conocer las fuentes que está considerando. Revise la gama completa de caracteres y estilos para cada opción. Mira cómo se ven en cirílico o tailandés. Encuentre una biografía para el diseñador y vea cómo se ha usado esta fuente en el pasado. Sobre todo, no querrás subestimar tus necesidades tipográficas o las necesidades de tus lectores. Cuantos más estilos, caracteres y guiones admita una fuente, mejor preparado estará.

La tipografía es un arte sutil, pero menos evasivo de lo que su reputación podría sugerir. Si ya ha reflexionado sobre la organización de su proyecto, su alcance y su audiencia, está preparado para tomar decisiones tipográficas inteligentes.

Varios diseñadores prestaron su experiencia a la construcción de esta guía: Yuin Chien, Joana Correia, Dave Crossland, Natanael Gama, Octavio Pardo, Eben Sorkin y Eduardo Tunn