Cuando se habla de tipografía muchos lo asimilan con el lettering o el arte de que la letra simplemente se vea bonita y llamativa. La realidad es que, una buena tipografía te permitirá comunicar ideas, establecer jerarquías visuales y mejorar rotundamente la experiencia de usuario. Podríamos decir que, con el uso correcto de FontFamily en HTML, lograrás sitios web increíbles. Aquí te explico cómo sacarle provecho.
¿Qué es FontFamily en HTML?
La propiedad FontFamily en HTML es una regla CSS con la que puedes especificar el tipo de letra (o conjunto de tipos de letra) que se usará para mostrar un texto. Lo grandioso es que, este atributo no solo define una fuente principal, sino que también incluye fuentes alternativas y genéricas que el navegador puede usar si la primera no está disponible.
Por ejemplo:
p {
font-family: "Arial", Helvetica, sans-serif;
}
Si observas bien, el navegador intentará usar Arial, pero si esta no está disponible, usará Helvetica, y finalmente recurrirá a una fuente genérica de tipo sans-serif.
¿Por qué usar FontFamily en HTML?
Lo cierto es que definir correctamente la FontFamily en HTML te ayudará a garantizar que tus páginas web sean legibles y coherentes, independientemente del dispositivo o navegador que utilicen los usuarios. Además, esta propiedad te da control total sobre la estética y el tono de tu contenido.
Ventajas:
- Compatibilidad: Las fuentes alternativas aseguran que tu diseño funcione incluso si el sistema del usuario no tiene instalada tu fuente principal.
- Personalización: Puedes crear identidades visuales únicas utilizando combinaciones específicas de fuentes.
- Mejora de accesibilidad: Facilita la lectura en diferentes dispositivos y resoluciones.
Cómo usar FontFamily en HTML correctamente
🔴 ¿Quieres Aprender a Programar con Python? 🔴
Descubre el Full Stack Jr. Bootcamp - Aprende a Programar desde Cero de KeepCoding. La formación más completa del mercado y con empleabilidad garantizada
👉 Prueba gratis el Bootcamp Aprende a Programar desde Cero por una semanaExisten varias formas de aplicar FontFamily en HTML dependiendo de tus necesidades y del alcance de tu proyecto. Estas son las más comunes:
Usa un nombre genérico
Los nombres genéricos representan categorías amplias de fuentes. Algunas opciones comunes son serif, sans-serif, monospace, cursive y fantasy. Este método es útil como respaldo cuando no necesitas especificar una fuente en particular.
p {
font-family: serif;
}
Establece una fuente específica
Si deseas usar un tipo de letra concreto, debes indicar su nombre. Recuerda, si contiene espacios, enciérralo entre comillas.
h1 {
font-family: "Times New Roman", serif;
}
Como ves, el navegador prioriza Times New Roman y, si no está disponible, selecciona una fuente genérica de tipo serif.
Crea una pila de fuentes
La pila de fuentes es una lista ordenada de opciones que establece el navegador, de mayor a menor prioridad. Lo bueno de este enfoque es que asegura que siempre se renderice un tipo de letra compatible.
p {
font-family: "Georgia", "Palatino Linotype", Times, serif;
}
Aquí, el navegador intentará usar Georgia, luego Palatino Linotype, después Times, y como último recurso, cualquier fuente de la categoría serif.
Usa Google Fonts para personalizar tus proyectos
Si buscas fuentes modernas y estilizadas que no estén instaladas en los sistemas de los usuarios, puedes usar Google Fonts. A pesar de ser gratuita, ofrece cientos de opciones que puedes integrar fácilmente en tu proyecto.
Pasos para usar Google Fonts:
- Visita Google Fonts y selecciona la fuente que desees.
- Copia el enlace de la fuente y agrégalo dentro de la etiqueta
<head>de tu archivo HTML.
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">- Aplica la fuente a los elementos que desees en tu archivo CSS:
h1 { font-family: "Roboto", sans-serif; }Con este método tienes acceso a fuentes de alta calidad y no tienes que preocuparte por su instalación en los dispositivos de los usuarios.
Ejemplos prácticos del uso de FontFamily en HTML
Usa una fuente genérica con estilos adicionales
p {
font-family: monospace;
font-size: 14px;
font-weight: bold;
}
Crea una combinación de fuentes personalizada
body {
font-family: "Open Sans", Arial, sans-serif;
line-height: 1.5;
}
Aplica Google Fonts
h1 {
font-family: "Lato", sans-serif;
font-style: italic;
}
Otros aspectos que puedes personalizar en la tipografía
Anímate a aprender a cambiar el color de la letra en HTML, a subrayar frases importantes, descubre cómo hacer espacios en blanco y aplica letra cursiva cuando lo necesites.
Ahora sabes que la propiedad FontFamily en HTML te servirá bastante en cualquier proyecto de desarrollo web. Con su uso adecuado podrás personalizar la apariencia de tus textos, asegurando una experiencia visual única y profesional.
En KeepCoding, te ayudamos a transformar tu pasión por la tecnología en una carrera profesional. Con el Bootcamp Programación desde Cero, aprenderás desde los fundamentos de HTML hasta las técnicas más avanzadas para crear páginas web impactantes. Únete hoy y da el primer paso hacia una carrera en tecnología que cambiará tu vida. ¡Te esperamos!
