Saltar al contenido

La lista definitiva de fuentes HTML y CSS seguras para la web

febrero 4, 2022
html css web safe fonts.jpegkeepProtocol

Lo crea o no, la fuente de su sitio web es parte de su mensaje de marketing.

Más específicamente, juega un papel crucial en la creación de una identidad de marca única. Es probable que observe fuentes «estándar» particulares asociadas con marcas establecidas, especialmente en sus logotipos. Por ejemplo, Facebook, Amazon, Disney y Microsoft tienen fuentes distintas que los distinguen. La mayoría están hechos a medida y son variaciones de las fuentes existentes.

Descargar ahora: Guía de introducción gratuita a HTML y CSSNo hace mucho tiempo, las mismas fuentes monótonas aparecían en casi todos los sitios web, independientemente de la industria o la marca. Fue difícil implementar fuentes únicas porque no había forma de mostrarlas correctamente en todos los navegadores.

Hoy en día, sin embargo, hay una mayor variedad de fuentes CSS y HTML seguras para la web que puede usar para ayudar en el proceso de desarrollo de su sitio web y mejorar la marca de sus esfuerzos de marketing digital.

Anteriormente, si un usuario no tenía la fuente de su sitio web en particular instalada en su computadora, su navegador mostraba una fuente genérica como respaldo, como Times New Roman.

Como resultado, los especialistas en marketing no sabían cómo se mostraban sus páginas web al usuario final. Si el contenido de una página no se adapta perfectamente a una fuente diferente, el usuario puede encontrarse con problemas de funcionalidad y diseño.

Las fuentes seguras para la web resuelven este problema y ahora son un estándar en el diseño web. Al elegir una fuente segura para la web, puede estar seguro de que su texto siempre aparecerá como se esperaba. La mejor parte es que no tienes que quedarte con las fuentes serif. Echemos un vistazo a los diferentes tipos.

¿Cuáles son los diferentes tipos de fuentes web?

Para fuentes seguras para la web, puede usar fuentes serif, sans-serif, monoespaciadas, cursivas, fantasía y MS.

  • Serif las fuentes contienen remates, pequeños trazos decorativos que sobresalen del cuerpo principal de la letra. Las fuentes serif son más fáciles de leer en formatos impresos físicos, ya que las serif dirigen la mirada del espectador de un carácter a otro. Times New Roman es una fuente serif.
  • sans-serif las fuentes no tienen serifas. Las fuentes sans-serif son más fáciles de leer en las pantallas, por lo que son mucho más comunes en la copia de sitios web. Arial es una fuente sans-serif.
  • monoespaciado se refiere a las fuentes que tienen el mismo espacio entre caracteres. Courier es una fuente monoespaciada.
  • Cursivo se refiere a fuentes que se asemejan a la escritura a mano. Brush Script MT es una fuente cursiva.
  • Fantasía se refiere a fuentes decorativas muy estilizadas. Luminari es una fuente de fantasía.
  • SRA significa Microsoft e indica que la fuente fue creada por Microsoft para dispositivos digitales. Trebuchet MS es un ejemplo.

Con tantos avances en el diseño web, es fácil preguntarse si las fuentes seguras para la web están obsoletas. Después de todo, ahora tenemos bots de IA y un marco dedicado para diseñar páginas móviles. Seguramente existe una tecnología que hace que todas las fuentes sean seguras para la web.

Pero esto simplemente no es verdad. Analicemos por qué las fuentes seguras para la web siguen siendo importantes hoy en día.

Las fuentes seguras para la web son la forma más fácil de garantizar una experiencia de usuario uniforme en caso de que su fuente preferida no se cargue correctamente. Es posible que haya elegido la fuente más hermosa de Fuentes de Googlepero si no lo combina con una fuente segura para la web en su pila de fuentes CSS, corre el riesgo de mostrar texto que se vea fuera de marca en su sitio.

Imagine, por ejemplo, la representación del sitio de HubSpot en Times New Roman, todo porque no establecimos nuestra fuente preferida segura para la web en el backend. Time New Roman es perfectamente seguro para la web: el problema es que el navegador lo establece de manera predeterminada, por lo que nuestro sitio web termina luciendo inconsistente y, bueno, un poco fuera de marca.

Estas son algunas de las razones por las que querrá usar fuentes seguras para la web.

1. Su texto HTML se mantendrá consistente.

Si usa una fuente sans-serif en su sitio web, querrá elegir una fuente sans-serif segura para la web como respaldo. Para tomar el ejemplo anterior, el sitio de HubSpot se vería extraño con una fuente serif, porque solo usamos tipos de letra sans-serif en nuestras páginas. Sin embargo, si te encontraste con el sitio de HubSpot en Verdana, el cambio no será tan discordante.

También es importante darle al navegador algunas copias de seguridad de fuentes para caracteres únicos. Considere el símbolo registrado (®). Si su fuente preferida no es compatible con este símbolo, pero la siguiente en su pila de fuentes sí lo es, puede asegurarse de que el símbolo se vea similar a la fuente original.

2. El navegador tendrá varias opciones antes de establecer su fuente web preferida de forma predeterminada.

Todos los navegadores tienen una fuente predeterminada que mostrarán si, por alguna razón, no pueden cargar el archivo de fuente de su sitio web. Puede retrasar este proceso utilizando una serie de fuentes seguras para la web en su pila de fuentes.

Esto permitirá que su fuente se “degrade con gracia”. En lugar de cambiar directamente de Playfair Display a Times New Roman, la fuente puede pasar de Playfair Display a Didot, una alternativa mucho más cercana. Si Didot no está disponible, entonces la fuente puede cambiar a Georgia y, por último, a la fuente serif predeterminada que usa el navegador.

Ejemplo de pila de fuentes con 4 fuentes serif

3. Tendrá varias copias de seguridad si está utilizando una fuente autohospedada.

Hoy en día, puede conectarse fácilmente a Google Fonts y usar una fuente que sea aceptada por la mayoría de los navegadores. Rara vez encontrará una página escrita en Open Sans que no se renderice en Open Sans. Pero si cargó una fuente personalizada en los archivos alojados de su sitio, la compatibilidad no está garantizada. Es posible que su servidor web se caiga momentáneamente o que el navegador del usuario final no admita esa fuente específica.

Puede estar tranquilo si agrega fuentes seguras para la web a su pila de fuentes. Esto asegurará que su fuente se degrade en pasos en lugar de pasar de manera predeterminada inmediatamente a la fuente segura para la web establecida por el navegador.

Pilas de fuentes

Las pilas de fuentes CSS le permiten proporcionar varias copias de seguridad de fuentes al navegador. Y no son solo copias de seguridad en caso de fallas técnicas o del servidor. Por ejemplo, considere a un usuario al que no le gusta la fuente predeterminada del sistema y la elimina de su sistema operativo. No puedes controlar eso, así que es mejor estar seguro.

Para abordar este problema, CSS le permite agregar una lista de fuentes de respaldo similares en una pila de fuentes. Una pila de fuentes mejora la compatibilidad universal de su sitio con diferentes navegadores y sistemas operativos. Si la primera fuente no funciona, el navegador probará con la siguiente de la pila, y así sucesivamente.

Para hacer una pila de fuentes, agregue varios nombres de fuentes relacionados a la Familia tipográfica propiedad. Las fuentes deben ordenarse por prioridad: la fuente que más desee debe aparecer primero y una familia de fuentes genérica debe finalizar la lista. Aquí hay un ejemplo:

 p { font-family: “Playfair Display”, “Didot”, "Times New Roman", Times, serif; }

Todas estas son fuentes serif, lo que garantiza que la experiencia se mantenga constante. Alternativamente, puede usar otro tipo de fuente en su pila de fuentes.

¿Necesito descargar fuentes seguras para la web para usarlas en una pila de fuentes?

No. Debido a que estas fuentes son seguras para la web, no es necesario descargar un archivo de fuente. Cuando especifica estas fuentes en su pila de fuentes, su navegador reconocerá inmediatamente la fuente a la que se refiere y se la mostrará al usuario final.

Veamos ahora algunas de las mejores fuentes seguras para la web que puede usar.

1. Arial (sans-serif)

fuentes html css seguras para la web arial

Arial es la fuente sans-serif más utilizada en la web. Fue creado para impresores que querían usar la popular fuente Helvetica sin pagar las tarifas de licencia. Por lo tanto, son virtualmente idénticos.

Arial y los miembros de la familia de fuentes Arial se consideran las fuentes web más seguras porque están disponibles en todos los principales sistemas operativos.

2. Arial Black (sans-serif)

fuentes html css seguras para la web arial black

Arial Black es otra fuente relacionada en la familia Arial. Es una versión muy audaz más adecuada para encabezados, texto decorativo y texto enfatizado. Sin embargo, su prominencia significa que los diseñadores deben usarlo de manera estratégica y cuidadosa.

3. Verdana (sans serif)

fuentes web seguras html css verdana

Verdana es popular tanto en línea como fuera de línea. Si bien se asemeja a Arial y Helvetica, tiene una estructura simple que hace que las letras sean grandes y claras. Algunos de sus caracteres tienen líneas alargadas, lo que puede ser incompatible con algunos diseños. De lo contrario, es una sólida alternativa a Arial.

4. Tahoma (sans serif)

fuentes html css seguras para la web Tahoma

Similar a Verdana, la fuente Tahoma luce un peso más audaz y un seguimiento más angosto (es decir, menos espacio entre caracteres).

5. Trebuchet MS (sans serif)

fuentes html css seguras para la web trebuchet

Trebuchet MS es otra fuente sans-serif segura para la web, diseñada por Microsoft Corporation en 1996. Se usa comúnmente para el cuerpo del texto de muchos sitios web y puede ser una alternativa sólida a la fuente sans-serif de su sitio. También puede no parecer tan «básico» como Arial.

6. Impacto (sans-serif)

impacto de las fuentes css seguras para la web

Impact es una fuente sans-serif pesada excelente para llamar la atención y crear… bueno, impacto. También se destaca por ser una fuente particularmente estrecha: sus caracteres tienen una relación de ancho a alto más alta que otras fuentes comparables.

Impact se introdujo por primera vez en dispositivos digitales en Microsoft Windows en 1998 y desde entonces ha visto un resurgimiento en popularidad en los memes de Internet, superpuestos sobre imágenes para un efecto humorístico.

7. Times New Roman (serif)

seguridad web html css fuentes times new roman

Times New Roman es la fuente serif definitiva. Es extremadamente popular y la fuente principal para dispositivos y aplicaciones de Windows, como Microsoft Word. Los navegadores vuelven a ella cuando no se puede mostrar la fuente especificada.

Técnicamente, Times New Roman es una versión actualizada del Fuente del periódico Timesque se utiliza en periódicos impresos y, como resultado, es una de las fuentes más reconocibles del mundo.

8. Didot (serif)

fuentes html css seguras para la web didot

Este antiguo tipo de letra francés se utilizó originalmente para imprentas. Se destaca por su estética elegante y puede agregar una calidad formal a su copia.

9. Georgia (serif)

fuentes web seguras html css georgia

Georgia es otra fuente serif elegante, pero fue diseñada para ser más legible en diferentes tamaños de fuente que otras fuentes serif. Logra esto con un peso mayor, lo que lo convierte en un candidato ideal para el diseño de respuesta móvil.

10. Máquina de escribir americana (serif)

fuentes html css seguras para la web máquina de escribir americana

Si desea invocar una calidad clásica y nostálgica con su texto, esta es una fuente ideal para hacerlo. American Typewriter imita la impresión de máquina de escribir y funciona bien para texto de cuerpo estilizado.

11. Andalé Mono (monoespacio)

fuentes html css seguras para la web andale

Las fuentes monoespaciadas tienen letras que están separadas por igual, lo que otorga una calidad mecánica al texto.

Andalé Mono es un ejemplo perfecto de una fuente monoespaciada. Esta opción sans-serif fue desarrollada por Apple e IBM y se ha utilizado con frecuencia en entornos de desarrollo de software.

12. Mensajero (monoespacio)

seguridad en la web fuentes html css mensajería

Mensajero…