Estás leyendo la publicación: Las mejores fuentes web seguras compatibles con HTML y CSS para usar en 2023
Durante años, muchos sitios web se basaron en las mismas fuentes para mostrar mensajes y símbolos a los visitantes. Sin embargo, las fuentes se han vuelto mucho más dinámicas en los últimos cinco años. También hay muchas fuentes que probablemente quería usar en un sitio web pero descubrió que no había forma de mostrarlas correctamente en ningún navegador.
Las fuentes web seguras son el nuevo estándar en el diseño web. Estas fuentes funcionan en todos los navegadores y dispositivos. Anteriormente, si la computadora del usuario no tenía la fuente almacenada, podría ver una fuente totalmente diferente, como Times New Roman o Verdana. Para evitar esto, los desarrolladores web idearon una forma de mostrar la fuente correcta sin importar qué fuente estuviera instalada en la computadora del usuario.
Solo hay unas pocas fuentes seguras para la web / fuentes css que se consideran universales. Sin embargo, los diseñadores pueden usar las fuentes css web actuales que son casi universales en los navegadores modernos y las aplicaciones de correo electrónico.
Estas fuentes css seguras para la web incluyen:
Arial
Mensajero Nuevo
Georgia
Times New Roman
verdana
Sin embargo, algunas fuentes web también están diseñadas para su uso en todo tipo de aplicaciones y sitios web.
Algunas de las nuevas fuentes css que se consideran populares incluyen:
abrir sans
roboto
Lato
Helvética
Montserrat
Estas fuentes también se utilizan en los correos electrónicos. Es posible que en el pasado te haya preocupado usar una fuente específica en el correo electrónico porque no se mostraría correctamente. El diseño seguro para la Web cambia todo eso.
Gran parte del diseño web actual se reduce a los activos de diseño web y, lo que es más importante, a las fuentes que seleccione. Si bien puede usar Google Web Fonts y Typekit para crear páginas web con fuentes web, aún deberá diseñar con fuentes seguras para la web en mente. Esto se debe a que no todos los usuarios tendrán acceso a esas fuentes, incluso si están almacenadas por Google. Esto significa que si desea mostrar a un usuario en un navegador anterior, aún debe tener seleccionada una fuente predeterminada o segura para la web.
¿Debería usar fuentes seguras para la web?
En resumen, es probable que todos los sitios web que ve en línea hoy en día ya utilicen una fuente css segura para la web. Esto es para evitar que Times New Roman aparezca en el navegador Internet Explorer de alguien si tiene una máquina vieja o si tiene una mala conexión y no puede cargar fuentes web desde un Typekit. También hay problemas por tener diferentes sistemas operativos. Los visitantes no necesariamente saben qué fuente seleccionó porque la mayoría de las personas no miran el código fuente para entender por qué todo está de repente en Times New Roman.
Los diseñadores y propietarios de sitios web deben especificar los tipos de fuentes que se mostrarán. Si desea mostrar una fuente sans serif como Lato, también debe tener instalada una fuente segura para la web, como Arial, para asegurarse de que el sitio se vea similar al diseño si el usuario no puede cargar su fuente web.
Correo electrónico y fuentes web
Las fuentes web son prácticamente universales en los navegadores modernos de hoy. No debería encontrar demasiados usuarios que no puedan cargarlos. Sin embargo, es un poco diferente para los clientes de correo electrónico. Hay algunos clientes de correo electrónico que admiten fuentes web, entre ellos:
correo de manzana
Correo de iOS
Correo de Android
perspectiva 2000
Aplicación Outlook.com
Puede utilizar diferentes métodos para diseñar correos electrónicos con fuentes web. Por ejemplo, el método @Import le permite importar fuentes de Google y Typekit al correo electrónico a través de un código.
También puede utilizar el método
También puede probar el método de la familia de fuentes, que es el menos exitoso.
En cada caso, aún desea asegurarse de tener una fuente predeterminada seleccionada en caso de que el usuario no pueda ver su fuente web.
Cómo usar fuentes web
Puede navegar a Google o Typekit para obtener el código que se usará para la fuente web. Puede buscar en una biblioteca de fuentes disponibles, incluidas serif, sans-serif, escritura a mano y más. Cada fuente tendrá su propio código único que puede usar en su diseño web.
Aquí hay algunos kits de fuentes diferentes para elegir en línea:
Fuentes de Google
Esta es una de las opciones más populares hoy en día. Puede cargar cientos de fuentes diferentes a través de Google. Es completamente gratis y puede descargar fuentes web directamente a su computadora para ayudarlo a simular diseños en su programa de diseño favorito. Trabajan con Adobe y Sketch.
Typekit de Adobe
Esta es otra opción que utilizan muchos diseñadores si ya trabajan con Adobe. Puede usar el servicio de suscripción de fuentes de Adobe para crear fuentes usando CSS dentro de Adobe como parte de su diseño. Es una excelente opción para los equipos de diseño y desarrollo web que trabajan en estrecha colaboración.
Otras fuentes web
También puede probar algunos de estos servicios si está buscando más selecciones. La mayoría de estos tienen un costo más alto.
Mis fuentes
fuente de primavera
Tienda de fuentes
Tipo de proceso Fundición
Tipo comercial
Puede comprar las fuentes y las licencias directamente de los autores con las opciones anteriores.
Recuerde probar sus fuentes
Antes de publicar un sitio web o enviar un correo electrónico, siempre debe probar sus fuentes en varios navegadores y clientes de correo electrónico. Debe saber si sus fuentes web se mostrarán correctamente o si está utilizando las fuentes seguras para la web correctas para evitar que sus usuarios vean un estilo de fuente totalmente diferente que arruinará su diseño.
Uso correcto de fuentes seguras para la web
Si bien puede instalar una fuente de Google con bastante rapidez, es posible que no sepa cuándo usar fuentes seguras para la web. Es importante que siempre que tenga una familia de fuentes que use una fuente web, también especifique una fuente predeterminada o segura para la web. Esto puede significar simplemente que pones, “familia de fuentes: Montserrat, Arial, Sans Serif”; en el código. Si bien la computadora intentará cargar primero la fuente web Montserrat, usará Arial de manera predeterminada como la fuente segura para la web.
La larga lista de las mejores fuentes web seguras
‘sans-serif’: fuentes normales serif
Arial (sans-serif)
Arial es una de las fuentes san serif más populares y ampliamente utilizadas en el mundo. Es métricamente idéntico a Helvetica y a menudo se confunde con Helvetica. Creado originalmente para parecerse a Helvetica para que las imprentas no tuvieran que pagar la licencia para usar Helvetica. Entonces, realmente Arial no es más que un impostor para el mundo de las fuentes.
Arial Black (sans-serif)
Esta es la versión más audaz de la fuente Arial básica y es grande y audaz, por decir lo menos. Ideal para encabezados en lugar de cuerpo de texto.
Helvética (sans-serif)
Helvetica es la fuente alternativa favorita de todos. Si todo lo demás falla, al menos tienes Helvetica para mejorar las cosas.
Verdana (sans-serif)
Otra fuente sólida que es muy popular impresa y en la web. Es una verdadera fuente web debido a su estructura simple, líneas aerodinámicas y letras grandes y claras. Si bien está cerca de Arial y Helvetica, Verdana es una fuente sans serif más antigua que puede ser un poco grande cuando se muestra. Su tipografía tiene líneas alargadas, así que ten cuidado al usar esta fuente en ciertos diseños web.
Trebuchet MS ( sans-serif )
Esta fuente sans-serif fue diseñada por Vincent Connare para la corporación Microsoft en 1996. Esta fuente se usa más comúnmente en el cuerpo del texto en Internet y es una fuente muy popular para ese propósito.
Gill Sans (sans-serif)
Gill Sans es una tipografía sans-serif con un toque de modernidad. Como parte de la familia humanista, esta fuente tiene una cualidad manuscrita que guía el ojo horizontalmente. Esto hace que Gill Sans sea ideal para leer pasajes largos.
Noto Sans (sans-serif)
Noto Sans es parte de la familia de fuentes Noto. La familia Noto se creó para crear una continuidad visual entre diferentes idiomas y símbolos en Internet. Esto hace de Noto Sans una excelente opción para pasajes multilingües y una opción segura para cualquier sitio web.
Óptima (sans-serif)
Al igual que Gill Sans, Optima es un tipo de letra humanista con cualidades orgánicas manuscritas. La fuente recuerda al texto romano antiguo y agrega un aire majestuoso a cualquier página web. Es una de las fuentes más populares de su tipo y se usa ampliamente para logotipos y nombres.
Arial estrecho (sans-serif)
Arial Narrow es una de las fuentes más populares debido a su versatilidad. Su diseño intencionalmente genérico hace que el tipo de letra sea una buena opción para grandes cuerpos de texto. Debido a que la familia de fuentes Arial está disponible en Mac y Windows, no tendrá que preocuparse por las discrepancias visuales entre los sistemas operativos.
‘serif’: fuentes normales serif
Veces (serif)
La fuente Times es una fuente de impresión de periódico tradicional. Una de las fuentes más reconocibles del mundo.
Times New Roman (serif)
Time New Roman es la fuente serif más popular y es lo que Arial es para la familia de fuentes san-serif. Utilizado principalmente en dispositivos y aplicaciones de Windows, Times New Roman es la versión actualizada y más nueva de la fuente Times.
Didot (serif)
Didot es un tipo de letra francés antiguo utilizado originalmente para imprentas. Es una fuente serif, lo que significa que cada letra está estilizada con líneas pequeñas. Didot es conocido por su estética elegante, y por esa razón agrega una calidad formal al texto.
Georgia (serif)
Georgia, como Didot, es una fuente serif con un aire elegante. Sus trazos gruesos lo convierten en una excelente opción para el texto de páginas web porque es legible en pantallas de baja resolución. Por esta razón, se usa comúnmente en lectores electrónicos.
Palatino (serif)
Palatino es una fuente serif que también forma parte de la familia tipográfica humanista. Se utiliza mucho en encabezados y títulos debido a su sólida estructura. La amplia disponibilidad de Palatino la convierte en una fuente segura para el texto del sitio web.
Bookman (serif)
Bookman es un tipo de letra serif. También conocida como Bookman Old Style, esta fuente clásica tiene una estructura atrevida y alargada. Su diseño simple y acechado hace de Bookman una excelente opción para grandes pasajes de texto pequeño.
Libro escolar del nuevo siglo (serif)
Como sugiere el nombre, New Century Schoolbook es una fuente serif creada específicamente para el cuerpo del texto. El tipo de letra es bastante nostálgico, ya que la fuente aparece en muchos libros de texto para lectores principiantes. Al igual que Bookman, New Century Schoolbook es una buena opción de fuente para grandes cuerpos de texto.
Máquina de escribir americana (serif)
American Typewriter es una fuente serif que imita el texto de una máquina de escribir. La versatilidad de su predecesora hace de esta fuente una buena opción para el cuerpo del texto. El tipo de letra también cuenta con una calidad clásica y nostálgica que agrega un aire estilizado a cualquier página web.
‘monospace’: fuentes de ancho fijo
Andale Mono ( monoespacio )
Andale Mono es una fuente sans-serif monoespaciada. Esto significa que cada letra tiene el mismo ancho, lo que le da al tipo de letra una calidad mecánica. Las versiones de esta fuente admiten varios idiomas diferentes, por lo que es una buena opción para sitios web multilingües.
Courier Nuevo ( monoespacio )
Probablemente haya visto algunos sitios web con esta fuente tipo periódico de estilo antiguo. Si bien es similar a Times New Roman, está desactualizado. Sin embargo, si está buscando una fuente monoespaciada simple, esta sería la elección correcta.
Mensajero (monoespacio)
Courier es una fuente serif monoespaciada que recuerda al texto de una máquina de escribir. Es el texto predeterminado para muchos proveedores de correo electrónico y es prácticamente universal debido a sus raíces libres de regalías. La fuente también se usa ampliamente en codificación y programación de computadoras.
FreeMono ( monoespacio )
FreeMono es una fuente monoespaciada menos conocida que forma parte del proyecto GNU FreeFont. Al igual que las fuentes monoespaciadas descritas anteriormente, esta fuente recuerda al texto de una máquina de escribir y tiene una cualidad mecánica. Como su nombre lo indica, es completamente gratis.
‘cursiva’: fuentes que emulan la escritura a mano
Comic Sans MS (cursiva)
Comic Sans es la fuente que a la gente le encanta odiar. Es un tipo de fuente de “no te tomes demasiado en serio”. Un poco de diversión. Pero si te tomas en serio el diseño, ¡no lo uses jaja!
Cancillería de Apple (cursiva)
Apple Chancery es una fuente cursiva creada por Apple Inc. Es un tipo de letra elegante que evoca una impresión formal. Esto lo convierte en una opción maravillosa para un sitio web sofisticado.
Mano de Bradley (cursiva)
Bradley Hand es un tipo de letra caligráfico basado en la letra de Richard Bradley. La fuente tiene una calidad informal y personal que difiere de la mayoría de las fuentes cursivas. Es una buena opción para cuerpos cortos de texto y encabezados.
Brush Script MT (cursiva)
Brush Script MT es otro tipo de letra caligráfico que se basa en la escritura casual. El tipo de letra es un poco más formal que Bradley Hand, pero aún conserva una calidad personal. Su estilo audaz y único lo convierte en una fuente de logotipo común.
‘fantasy’: fuentes decorativas, para títulos, etc.
Impacto (fantasía)
Impact funciona mejor como fuente de título, especialmente si son solo unas pocas palabras. Realmente no es adecuado en el cuerpo del texto. Se ve horrible.
Luminaria (fantasía)
Luminari es una fuente de estilo de fantasía que recuerda a la escritura medieval. Evoca pensamientos de cuentos de hadas y texto de iglesia gótica. Esto hace que Luminari sea una excelente fuente para agregar una calidad caprichosa o gótica a una página web.
Chalkduster (fantasía)
Como sugiere su nombre, Chalkduster es una fuente que imita la tiza en una pizarra. Debido a que la pizarra es casi inseparable del aula de la escuela primaria, esta fuente es una maravillosa adición a cualquier página web educativa. Su estilo audaz y detallado lo hace más adecuado para textos cortos y encabezados.
Jazz LET (fantasía)
Jazz LET es un tipo de letra que evoca visiones de The Great Gatsby. Esta fuente es una excelente manera de evocar los locos años 20 en una página web. Al igual que Chalkduster, es una fuente en negrita y detallada que es más adecuada para textos cortos y encabezados.
Blippo (fantasía)
Blippo es una de las fuentes más audaces de esta lista. Cada personaje fue diseñado usando la forma del rectángulo y el círculo. Su naturaleza robusta hace de Blippo una gran fuente para títulos y encabezados extravagantes.
Stencil Std (fantasía)
Como sugiere el nombre, Stencil Std es un tipo de letra basado en letras estarcidas. El efecto es una fuente llamativa con actitud. Este tipo de letra se utiliza mejor en títulos y encabezados en negrita.
Marcador de fieltro (fantasía)
Marker Felt es una fuente basada en la escritura a mano realizada con un marcador con punta de fieltro. Las letras incluso incluyen el punto residual al final de cada trazo de marcador. Marker Felt es una excelente opción para sitios web educativos debido a su parecido con la escritura de un marcador de borrado en seco.
Trattatello (fantasía)
Trattatello, el último tipo de letra de esta lista, es un estilo de fuente basado en la caligrafía china. Aporta una cualidad elegante y misteriosa a cualquier pasaje. Esto hace de Trattatello una elección maravillosa para la poesía y los pasajes breves.
Las siguientes dos pestañas cambian el contenido a continuación.
Mi nombre es Jamie Spencer y he pasado los últimos 10 años creando blogs para ganar dinero. Después de cansarme del 9-5, viajar y nunca ver a mi familia, decidí que quería hacer algunos cambios y lancé mi primer blog. Desde entonces, he lanzado muchos blogs de nicho exitosos y después de vender mi blog de supervivencia, decidí enseñar a otras personas cómo hacer lo mismo.
