Puede ser un reto seleccionar los tipos de letra para tus diseños online. Y es demasiado fácil hundir mucho tiempo en un diseño web en desarrollo, sustituyendo un tipo tras otro sin llegar a conseguirlo. Veamos todo lo que necesitas saber sobre el emparejamiento de fuentes.
Combinación de fuentes en tu diseño web
Como muchas otras partes del diseño, la tipografía tiene pautas para simplificar el descubrimiento de los emparejamientos tipográficos ideales. Le mostraremos cómo mezclar fuentes, y le proporcionaremos algunas combinaciones estupendas para su negocio.
1. Utiliza fuentes que tengan diferentes tonos
La escritura puede transmitir emociones. Los tipos de letra que utilizamos para expresar las palabras impactan también en nuestros pensamientos. Muchos tipos de letra son serios y profesionales, mientras que otros son agradables e informales. Las personalidades de los tipos de letra revelan el significado del texto que muestran. A la hora de elegir las fuentes de un sitio web, la combinación de varios tonos con la tipografía crea contrastes visualmente impresionantes.
Considere el tono de quién o qué va a representar un sitio web a la hora de elegir una combinación de fuentes. Un tipo de letra alegre sería apropiado para una empresa de juguetes, pero podría parecer extraño en la página web de una empresa jurídica. Por otro lado, las serifas demasiado serias podrían ser demasiado para algo desenfadado.
Uno de los factores más importantes a tener en cuenta es el tipo de letra que utilizará para los encabezados y el cuerpo del texto. Los niveles de los encabezados ofrecen un mayor margen de maniobra en cuanto a tipos de letra de estilo porque tienen una escala mayor. Para el cuerpo del texto en tamaños más pequeños se requiere una fuente agradable a la vista.
No tenga miedo de utilizar tipos de letra de tonos opuestos en los diseños de su sitio web; ocasionalmente, el contraste puede despertar el interés.
2. Utilice combinaciones tipográficas que difieran, pero no demasiado
Evite mezclar tipos de letra en los encabezados prácticamente idénticos a los utilizados en el cuerpo del texto. Utilice varios tipos de letra que sean visualmente distintos pero que se complementen entre sí.
¿Qué ocurre si combinamos un tipo de letra con florituras caligráficas como Great Vibes, por ejemplo, y un tipo Serif como Merriweather? Como resultado, el diseño carece de equilibrio y tiene una desagradable sensación de contraste.
Las florituras y los bucles de Great Vibes tienen una sensación relajante y un toque de refinamiento. Northwood es un tipo de letra informal con serifas y colas, mientras que Merriweather es un tipo de letra sencillo con una formalidad transmitida por sus formas de letra con serifas. Aquí, el contraste es demasiado fuerte para que la combinación funcione.
Intentemos una combinación de fuentes más agradable. En la cabecera, utiliza Vollkorn, una fuente algo divertida. Utiliza Open Sans, un tipo de letra sans serif más neutro y sencillo. Esta combinación funciona bien porque, a pesar de la diferencia entre los tipos de letra, la sutileza de ambos los hace visualmente compatibles.
3. Utiliza tres o menos tipos de letra distintos
En la mayoría de los diseños, aplicarás un tipo de letra web para el titular y otro para el cuerpo. También se pueden emplear tipos de letra a mano y otros más estilizados en el diseño con fines creativos. Independientemente de lo tentados que estemos por todos los tipos de letra gratuitos disponibles, sólo se necesitan tres tipos de letra para un solo sitio web.
Muchos diseñadores utilizan una superfamilia de tipos de letra para sus diseños. Una superfamilia es una familia tipográfica relacionada con otra u otras familias. Puede incluir diferencias estilísticas como la cursiva, los pesos ligeros y pesados, las versiones con serifa y sin serifa, entre otras cosas. Lo más agradable de las superfamilias es que eliminan el juego de las adivinanzas en lo que respecta a la combinación de tipos de letra, ya que están hechos para trabajar juntos.
Los tipos de letra individuales pueden utilizarse de varias maneras cuando se emplean en superfamilias. Eche un vistazo a estas opciones de la superfamilia Roboto. La distinción entre Thin 100 Italic y Regular 400 no es sutil.
La mayoría de los tipos de letra se clasifican en superfamilias, lo que significa que tiene muchas alternativas tipográficas con las que experimentar sin dejar de utilizar el mismo estilo.
4. Comunicar la jerarquía visual a través del emparejamiento de fuentes
Visualice la estructura de su jerarquía сomunicada utilizando diferentes diseños, tamaños y colores de tipos de letra. Puede utilizar la tipografía para comunicar información visual sobre la importancia relativa de otras partes de su contenido. Los titulares deben ser los más llamativos, seguidos de los subtítulos y el cuerpo del texto. Utilice sus combinaciones de fuentes para añadir un claro sentido de estructura a su escritura.
5. Utiliza el tamaño de la fuente para dar a entender el orden
El tipo de letra gigante representa lo más importante, mientras que los tamaños de letra decrecientes representan la jerarquía de la información. Las letras mayúsculas son una gran manera de hacer que las piezas críticas, como las llamadas a la acción, destaquen. Está bien usar todas las mayúsculas con moderación; sin embargo, evite que el texto parezca enfadado u hostil.
La mayoría de los diseñadores principiantes integran diferentes tamaños de fuente para establecer la jerarquía visual, pero hay otros métodos para exhibir la escala visual.
6. Experimente con diferentes pesos
La importancia relativa se muestra con pesos mayores, mientras que los pesos más ligeros sugieren un peldaño inferior en la jerarquía. Como vimos con la superfamilia Roboto, se puede lograr mucho con un solo tipo de letra alterando su peso.
7. Varíe los colores de las fuentes
Aunque no quiera utilizar un caleidoscopio de colores contrastados en su diseño, variar los tonos de su texto puede ayudar a que se destaquen términos específicos. Los colores más intensos, como el rojo y el morado, se utilizan para los titulares. La variedad más clara contrasta con las versiones más oscuras, representando un texto que debe ser leído en primer lugar. Asegúrese de que los colores de las fuentes con las que está experimentando no se pierden en el fondo.
8. Serifs
Los tipos de letra serif, que son legibles en la impresión, se remontan a finales de 1700 y están inicialmente pensados para la legibilidad.
Una serifa es una línea delgada o un trazo que se ha añadido a una letra. Los tipos de letra sin gracias tienen muchas señales visuales que ayudan a los ojos de los lectores a seguir. Los tipos de letra con serifas mejoran la eficacia del escaneo, sobre todo en los bloques de texto largos, como los de los libros.
En los inicios de la informática, las resoluciones de pantalla demasiado bajas para que los tipos de letra con serifas se reprodujeran eficazmente causaban problemas. Los diseñadores gráficos, en cambio, pueden utilizar ahora una gran cantidad de serifas gracias a las pantallas de alta resolución de hoy en día.
Combine siempre un tipo de letra con serifas con una fuente sin serifas cuando utilice una. Los tipos de letra con serifas suelen ser demasiado parecidos, lo que da lugar a una combinación de fuentes desagradable.
Los tipos de letra con serifas son muy adaptables. Los siguientes son algunos de los tipos de letra más frecuentes y útiles que se ven en el texto escrito. Son fáciles de leer en varios tamaños, lo que las hace ideales para el cuerpo del texto y los encabezados.
Idea de emparejamiento de fuentes: EB Garamond y Montserrat
Combina la serif EB Garamond con Montserrat para el encabezado y reduce su tamaño para el cuerpo del texto. Cuando se utilizan fuentes con serifa para bloques de texto largos, funcionan mejor cuando son más pequeñas.
Idea de combinación de fuentes: Libre Baskerville y Raleway
Las serifas más marcadas y la angulosidad de Libre Baskerville se contraponen a las finas líneas de Raleway.
9. Sans serifs
La ausencia de líneas adicionales distingue las san serifs de las serifs. Las san serifas pueden utilizarse para el párrafo o el cuerpo del texto a un tamaño más pequeño, o pueden combinarse con una serifa en las cabeceras.
Hay un puñado de tipos de letra en los que pensar cuando se trata de combinaciones de fuentes.
Veamos los tipos de letra más frecuentes y algunas posibilidades creativas que puedes utilizar hoy en día.
Idea de combinación de fuentes: Open Sans y Lato
Algunos diseñadores pueden considerar anticuadas fuentes como Open Sans y Helvetica, pero son famosas. Open Sans es un tipo de letra primario, pero bienvenido, que funciona bien con varias fuentes. Considere su helado de vainilla: es la base sobre la que puede construir muchas otras cosas deliciosas.
Por ejemplo, utilice Open Sans en la cabecera y Lato en el cuerpo del texto. Utilice otro tipo de letra sans serif en el resto de la página.
10. Fuentes de visualización
Si necesita llamar la atención de la gente, las fuentes de visualización son ideales. Suelen estar escritas con formas de letra bonitas y complicadas, como grandes y negritas o escasas y finas. Utiliza tipos de letra diseñados explícitamente para su visualización si quieres que tu diseño destaque y deje huella.
Idea de combinación de fuentes: Bubblegum Sans y Open Sans
Bubblegum Sanc tiene formas de letra brillantes que van bien con la neutralidad de Open Sans.
Idea de emparejamiento de fuentes: Poiret One y Lato
Poiret One es una excelente fuente moderna si busca un toque de refinamiento. Su sutil letra de inspiración art decó y su fino trazado la convierten en una gran fuente contemporánea. Este tipo de letra queda fantástico con otro tipo de letra más modesto, como Lato. Un contraste de este tipo funciona bien junto a un tipo de letra más sutil como Lato.
11. Tipos de letra monoespaciados
En un tipo de letra monoespaciado, todos los caracteres tienen la misma anchura. En el caso de los tipos de letra que tienen diferentes anchos, la medida horizontal estándar los distingue de los tipos de letra con anchos variables, dándoles una sensación de cohesión. Las fuentes monoespaciadas han sido populares durante mucho tiempo en la informática debido a su simplicidad y adaptabilidad a las primeras pantallas de baja resolución.
Idea de combinación de fuentes: IBM Plex Mono y PT Sans
IBM Plex Mono es un tipo de letra contemporáneo con una identidad visual ideal para startups y otras organizaciones relacionadas con la tecnología. Fue creada como un homenaje a IBM. Las tipografías sin serifa, como esta, son más fáciles de ver y dan un mayor sentido de contraste cuando se usan con PT Sans.
Idea de emparejamiento de fuentes: Roboto Mono y Roboto
Muchos diseñadores prefieren Roboto por su excelente legibilidad. Esta combinación de fuentes, que combina Roboto Mono con la versión normal, es cómoda a la vista.
La tipografía es esencial para el diseño web
Crear una presencia online sólida no es fácil. Hay varios factores a tener en cuenta a la hora de hacerlo. Tenga el mismo cuidado a la hora de combinar sus combinaciones de fuentes que el que tendría con una paleta de colores. Los tipos de letra que elijas, la forma en que los estilices y su legibilidad contribuyen a la experiencia del usuario con tu sitio web. Encuentre los tipos de letra más atractivos que reflejen la personalidad de su proyecto y ofrezca a los visitantes la forma más agradable de experimentarlo.
