Día 43: CSS Font Pairings
La ruta del desarrollador web frontend autónomo🤹♂️
Las grandes combinaciones de fuentes son esenciales para un gran diseño.
Reglas para combinar fuentes
Aquí hay algunas reglas básicas para crear excelentes combinaciones de fuentes:
1. Complemento
Siempre es seguro encontrar combinaciones de fuentes que se complementen entre sí.
Una gran combinación de fuentes debe armonizar, sin ser demasiado similar o demasiado diferente.
2. Usa superfamilias de fuentes
Una superfamilia de fuentes es un conjunto de fuentes diseñadas para funcionar bien juntas. Por lo tanto, usar diferentes fuentes dentro de la misma superfamilia es seguro.
Por ejemplo, la superfamilia Lucida contiene las siguientes fuentes: Lucida Sans, Lucida Serif, Lucida Typewriter Sans, Lucida Typewriter Serif y Lucida Math.
3. El contraste es el rey
Dos fuentes que son demasiado similares a menudo entran en conflicto. Sin embargo, los contrastes, hechos de la manera correcta, sacan lo mejor de cada fuente.
Ejemplo: Combinar serif con sans-serif es una combinación bien conocida.
Una superfamilia fuerte incluye variaciones serif y sans-serif de la misma fuente (por ejemplo, Lucida y Lucida Sans).
4. Elige una fuente principal
Una fuente debe ser el jefe. Esto establece una jerarquía para las fuentes en su página. Esto se puede lograr variando el tamaño, el peso y el color.
Ejemplo:
Sin duda “Georgia” es el principal aquí:
A continuación, mostramos algunas combinaciones de fuentes populares que se adaptarán a muchas marcas y contextos.
Georgia y Verdana
Georgia y Verdana es una combinación clásica. También cumple con los estándares de fuentes seguras para la web:
Ejemplo:
Use la fuente "Georgia" para los encabezados y "Verdana" para el texto:
Helvetica y Garamond
Helvetica y Garamond es otra combinación clásica que utiliza fuentes web seguras:
Ejemplo:
Use la fuente "Helvetica" para los encabezados y "Garamond" para el texto:
Combinaciones populares de fuentes de Google
Si no quieres utilizar las fuentes estándar de HTML, puedes utilizar las fuentes de Google.
Las fuentes de Google son de uso gratuito y tiene más de 1000 fuentes para elegir.
A continuación se muestran algunos combinaciones populares de fuentes de Google.
Merriweather y Open Sans
Use la fuente "Merriweather" para los encabezados y "Open Sans" para el texto:
Ejemplo:
Ubuntu y Lora
Use la fuente "Ubuntu" para los encabezados y "Lora" para el texto:
Ejemplo:
Abril Fatface y Poppins
Utilice la fuente "Abril Fatface" para los encabezados y "Poppins" para el texto:
Ejemplo:
Cinzel y Fauna One
Use la fuente "Cinzel" para los encabezados y "Fauna One" para el texto:
Ejemplo:
Fjalla One y Libre Baskerville
Use la fuente "Fjalla One" para los encabezados y "Libre Baskerville" para el texto:
Ejemplo:
Space Mono y Muli
Utilice la fuente "Space Mono" para los encabezados y "Muli" para el texto:
Ejemplo:
Spectral y Rubik
Use la fuente "Espectral" para los encabezados y "Rubik" para el texto:
Ejemplo:
Oswald y Noto Sans
Use la fuente "Oswald" para los encabezados y "Noto Sans" para el texto:
Ejemplo:
Resumen
El artículo presenta reglas para combinar fuentes en CSS, incluyendo la importancia de la complementariedad, el uso de superfamilias de fuentes y el contraste. También se proporcionan ejemplos de combinaciones populares de fuentes, tanto clásicas como de Google Fonts.
Traducido con 💚 desde W3Schools.com