Día 38: CSS Web Safe Fonts
La ruta del desarrollador web frontend autónomo🤹♂️
Table of contents
¿Qué son las fuentes seguras para la Web?
Las fuentes web seguras son fuentes que se instalan universalmente en todos los navegadores y dispositivos.
Fuentes alternativas
Sin embargo, no hay fuentes 100% completamente seguras para la web. Siempre existe la posibilidad de que no se encuentre una fuente o no se instale correctamente.
Por lo tanto, es muy importante utilizar siempre fuentes alternativas.
Esto significa que debes agregar una lista de "fuentes de respaldo" similares en la propiedad font-family. Si la primera fuente no funciona, el navegador probará con la siguiente, y con la siguiente, y así sucesivamente. Siempre finalice la lista con un nombre de familia de fuente genérico.
Ejemplo:
Aquí, hay tres tipos de fuentes: Tahoma, Verdana y sans-serif. La segunda y tercera fuentes son copias de seguridad, en caso de que no se encuentre la primera.
Las mejores fuentes web seguras para HTML y CSS
La siguiente lista son las mejores fuentes web seguras para HTML y CSS:
Arial (
sans-serif)Verdana (
sans-serif)Tahoma (
sans-serif)Trebuchet MS (
sans-serif)Times New Roman (
serif)Georgia (
serif)Garamond (
serif)Courier New (
monospace)Brush Script MT (
cursive)
Nota: Antes de publicar su sitio web, siempre verifique cómo aparecen sus fuentes en diferentes navegadores y dispositivos, y siempre use fuentes alternativas.
Arial (sans-serif)
Arial es la fuente más utilizada tanto para medios impresos como en línea. Arial también es la fuente predeterminada en Google Docs.
Arial es una de las fuentes web más seguras y está disponible en todos los principales sistemas operativos.
Ejemplo:
Verdana (sans-serif)
Verdana es una fuente muy popular. Verdana es fácilmente legible incluso para tamaños de fuente pequeños.
Ejemplo:
Tahoma (sans-serif)
La fuente Tahoma tiene menos espacio entre los caracteres.
Ejemplo:
Trebuchet MS (sans-serif)
Trebuchet MS fue diseñado por Microsoft en 1996. Utilice esta fuente con cuidado. No es compatible con todos los sistemas operativos móviles.
Ejemplo:
Times New Roman (serif)
Times New Roman es una de las fuentes más reconocibles del mundo. Se ve profesional y se usa en muchos periódicos y sitios web de "noticias”. También es la fuente principal para dispositivos y aplicaciones de Windows.
Ejemplo:
Georgia (serif)
Georgia es una fuente serif elegante. Es muy legible en diferentes tamaños de fuente, por lo que es un buen candidato para el diseño móvil.
Ejemplo:
Garamond (serif)
Garamond es una fuente clásica utilizada para muchos libros impresos. Tiene un aspecto atemporal y una buena legibilidad.
Ejemplo:
Courier New (monospace)
Courier New es la fuente serif monoespaciada más utilizada. Courier New se usa a menudo con pantallas de codificación, y muchos proveedores de correo electrónico lo usan como su fuente predeterminada. Courier New es también la fuente estándar para guiones de películas.
Ejemplo:
Brush Script MT (cursive)
La fuente Brush Script MT fue diseñada para imitar la escritura a mano. Es elegante y sofisticado, pero puede ser difícil de leer. Úselo con cuidado.
Ejemplo:
Resumen
Las fuentes web seguras se instalan universalmente en todos los navegadores y dispositivos, pero siempre es importante agregar fuentes alternativas en la propiedad font-family. Las mejores fuentes web seguras para HTML y CSS incluyen Arial, Verdana, Tahoma, Trebuchet MS, Times New Roman, Georgia, Garamond, Courier New y Brush Script MT. Antes de publicar un sitio web, siempre se debe verificar cómo aparecen las fuentes en diferentes navegadores y dispositivos y usar fuentes alternativas.
Traducido con 💚 desde W3Schools.com