El hombre promedio considera qué sabor de Doritos sabrá bien con su Heineken. El hombre sofisticado considera qué queso combinará bien con su elección de vino. El diseñador, por supuesto, considera qué dos fuentes se verán muy bien en la misma página.
Hoy vamos a utilizar Google Font API como un área de juegos para mezclar fuentes y encontrar combinaciones ideales. Podrá hojear y captar instantáneamente las selecciones que considere adecuadas para sus proyectos. ¿La mejor parte? Solo necesita copiar y pegar nuestro código para implementar estas fuentes en su sitio. Es completamente gratis y no hay descargas requeridas.
¿Por qué Google Fonts?
El juego de fuentes web estaba en el aire hace unos años. Todos tenían una idea y una solución, pero nadie sabía realmente cuál quedaría en pie cuando el polvo se asentara. En mi opinión, este debate ha terminado: @ font-face ganó.
Aquí es por qué @ font-face gana. Primero, una solución CSS pura es una con la que los desarrolladores pueden involucrarse. A continuación, el hecho de que @ font-face sea totalmente compatible con la selección de texto y las acciones como copiar y pegar significa que los expertos en usabilidad lo adoran. Finalmente, el hecho de que pueda preparar fácilmente una receta de @ font-face para casi cualquier fuente significa que a los diseñadores les encanta porque tienen una amplia gama de fuentes con licencia adecuada para elegir. Si tienes programadores, diseñadores y usuarios de usabilidad a bordo, se acabó el juego para Flash, JavaScript y una solución basada en imágenes.
Ahora, dentro del mundo @ font-face hay muchos competidores. Mi solución favorita personal es usar los kits de fuente de FontSquirrel, ya sea que esté descargando una de sus opciones predefinidas o subiendo un archivo de fuente para que el sitio pueda producir el resto para mí.
Sin embargo, he usado esta solución varias veces en Design Shack antes, así que quería cambiar las cosas hoy y usar otra cosa. Dado que el Directorio de fuentes de Google es gratuito y tiene muchas opciones, ¡parecía un ajuste natural!
Consejos rápidos para combinar fuentes
Antes de comenzar, hay algunas reglas básicas que puede tener en cuenta al combinar fuentes. Estos no son absolutos que debe seguir en cada ocasión, sino simplemente algunas pautas a las que debe atenerse cuando tenga dudas.
Utilizar familias de fuentes
En primer lugar, cuando sea posible, revise las distintas fuentes dentro de una sola familia. Estas fuentes se han diseñado meticulosamente para funcionar juntas y, por lo tanto, son el método más seguro para variar su fuente sin crear discordia visual.
El contraste es el rey
A continuación, cuando estés combinando dos fuentes, ve por el contraste. Intente emparejar una losa audaz con una luz sans-serif. Si mezcla dos fuentes que son bastante similares, la falta de contraste hace que parezca que algo está ligeramente apagado con la tipografía en lugar de la impresión prevista de dos tipos de letra diferentes. Deje en claro a los diseñadores y a los no diseñadores que existen dos estilos distintos.
Con calma
Además, limítate a solo unos pocos tipos de letra. Si puede arreglárselas con dos, hágalo, si no, deténgase a las tres. En todas las manos, excepto en las más experimentadas, muchas fuentes diferentes causan estragos en la cohesión de un diseño. Es fácil terminar pareciéndose a un niño que acaba de descubrir el menú de fuentes en Photoshop por primera vez.
Piensa en qué fuentes son apropiadas
Finalmente, deje que el contenido juegue un papel importante en su elección de fuente. Si su contenido es moderno y profesional, apéguese a las fuentes que sugieran estas cualidades. Si se supone que se parece a algo de la década de 1700, Helvetica Neue Ultra Light podría no ser la mejor manera de hacerlo.
¡Las fuentes!
Basta ya de discusión, vamos al asunto. Navega por el Directorio de fuentes de Google y busca las siguientes opciones.
Si nunca ha trabajado con el Directorio de fuentes de Google, no se preocupe, es la solución de fuente personalizada más fácil que existe. Todo lo que tiene que hacer es colocar un enlace en el encabezado de su página y luego hacer referencia a la fuente en su familia de fuentes CSS como lo haría con cualquier otra cosa. Para cada pareado de fuentes a continuación, te proporcionaré todos los fragmentos de código necesarios para que solo tengas que copiar y pegar.
Langosta & Cabina
La langosta es uno de mis guiones favoritos de todos los tiempos. Es atrevido y hermoso a la vez que permanece bastante legible, atributos que no se encuentran fácilmente en otros scripts.
Para complementar esta fuerte afirmación, no desea nada que compita por la atención. En su lugar, elija algo sencillo y simple como la cabina.
El HTML
El CSS
Raleway & Goudy Bookletter 1911
Raleway es una fuente súper atractiva, pero es tan delgada que no siempre funciona de la mejor manera en la copia del cuerpo. Por esta razón, es mejor mantenerlo lo más grande posible siempre que pueda, lo que lo convierte en una fuente perfecta para sus encabezados.
Creo que la combinación de Raleway y el viejo y bastante recargado Goudy Bookletter 1911 conforman un par súper elegante. Sin embargo, ten cuidado, este Goudy en particular es un poco demasiado complejo para toneladas de copias del cuerpo y definitivamente no me gustaría leer una página grande llena de copias escritas en ella. Esta combinación es probablemente la mejor para escenarios con copia mínima.
El HTML
El CSS
Allerta & Crimson Text
Allerta es una sans serif moderadamente audaz con una personalidad.Si no quieres algo aburrido o algo loco, es un buen término medio que se ve bien tanto en el titular como en la copia del cuerpo.
El texto carmesí es una fuente directa con fuertes remates, pero con poca o ninguna diferencia entre los grosores y los delgados. Esto hace que se conserve una buena cantidad de legibilidad incluso cuando es pequeña.
El HTML
El CSS
Arvo & PT Sans
Ninguna selección de fuente estaría completa sin un buen serif de losa. El Directorio de fuentes de Google solo tiene un par de estos y Arvo es actualmente una de las opciones más audaces. Realmente me gusta la mayoría de los personajes, pero admito que el? S? se siente un poco incomodo
Emparejé esto con otro gran sans-serif: PT Sans. Hay varias variantes disponibles, pero la versión simple es la mejor para la copia del cuerpo. Me gusta mucho lo redondos que son los personajes, lo que da una sensación muy amigable.
El HTML
El CSS
Dancing Script & Josefin Sans
Los scripts son difíciles de implementar correctamente, especialmente cuando no son tan aplicables como Lobster. Dancing Script, que se muestra en el ejemplo anterior, definitivamente no es mi script favorito, pero es uno de los mejores disponibles en el Directorio de fuentes de Google.
Dado que Dancing Script es mucho más femenino que Lobster, lo emparejé con Joesfin, un sans-serif muy delgado para mejorar este estilo. Esta combinación es definitivamente apropiada para cualquier producto o sitio web con un sesgo femenino.
El HTML
El CSS
Allan y cardo
Normalmente odio las fuentes de tipo cómico, pero Allan es realmente llamativo y atractivo. Me encanta la audacia de la fuente y la sensación en cursiva.
Mi asociación con una fuente de estilo antiguo (Cardo) parece casi un conflicto de períodos de tiempo, pero realmente me gustó la forma en que se veían juntos. Siéntase libre de optar por un sans-serif ligero.
El HTML
El CSS
Molengo y Lekton
Molengo y Lekton juntos se sienten como un intento de la vieja escuela por una sensación técnica. En gran parte debido a la sensación de la máquina de escribir de estos últimos.
Esta combinación es algo que esperaría ver en un sitio web con un fondo de textura de pergamino junto con fotos con un efecto polaroid y quizás incluso algunas manchas de café.
El HTML
El CSS
Droid Serif & Droid Sans
Uno de nuestros consejos anteriores sugirió permanecer dentro de una sola familia. Pongo esto en práctica aquí con la combinación natural de Droid Serif y Droid Sans.
Como puede ver, ambos son tipos de letra hermosos que se complementan perfectamente. Estos podrían cambiarse fácilmente para que Droid Serif fuera la fuente del cuerpo y Droid Sans la fuente del encabezado. Puedes detectar Droid en la naturaleza en un cierto blog de diseño muy popular.
El HTML
El CSS
Corbin & Nobile
Si eres fanático de Cooper Black, Corben es una excelente alternativa gratuita. Este serif y gordo es perfecto para cualquier cosa que debe tener un toque de 1920.
Nobile es una fuente más moderna con formas de letras que aparecen estiradas verticalmente. El estilo mínimo aquí mantiene su atención en los titulares en negrita.
El HTML
El CSS
Ubuntu y Vollkorn
Ubuntu es un sans notablemente redondeado que tiene un toque moderno. Utilicé la variante en negrita aquí para dar un contraste extra del texto del cuerpo.
Vollkorn es definitivamente un tipo de letra muy diferente, que refleja una época pasada. De nuevo, siempre tenga cuidado al mezclar fuentes de diferentes períodos de tiempo. Asegúrese de que es intencional y con propósito!
El HTML
El CSS
¡Cuéntanos tus favoritos!
Este artículo pretende ser una herramienta que puede marcar y consultar cada vez que se trabe y necesite una buena combinación de fuentes para el sitio web en el que está trabajando. Tanto las fuentes web como los navegadores han recorrido un largo camino y estas soluciones deberían funcionar realmente bien en todos los ámbitos, pero cada una incluye fuentes de respaldo adecuadas en caso de que la fuente de Google no se cargue.
Deja un comentario a continuación y cuéntanos tus combinaciones de fuentes gratuitas favoritas.El directorio de Google no tiene escasez de ofertas espantosas, así que ¡siéntase libre de compartir también sus menos favoritos!
Fuentes de Google
Google Fonts es una biblioteca de más de 800 tipos de letra diferentes, completamente listos para ser integrados en su proyecto web. Esta serie analiza qué es Google Fonts y comparte ejemplos interesantes y combinaciones de fuentes que pueden llevar su proyecto al siguiente nivel.