Fuentes seguras para email: stacks que funcionan en cualquier bandeja | We.Inc
Font stacks para email HTML que aguantan en Gmail, Outlook y Apple Mail, qué bandejas de entrada cargan fuentes web y un previsualizador para probar cada stack en tu propio dispositivo.
Las fuentes seguras para email son tipografías ya instaladas tanto en Windows como en macOS, como Arial, Verdana, Tahoma, Trebuchet MS, Georgia, Times New Roman y Courier New. Como Gmail y Yahoo Mail ignoran las fuentes web personalizadas, escribe cada font-family como un stack que termine en una de ellas y en una familia genérica.
Fuentes instaladas tanto en Windows 11 como en macOS Sequoia
Fuente
Tipo
Ideal para
Arial
Sans serif
Texto principal, la opción por defecto más segura
Verdana
Sans serif
Texto pequeño; sus letras anchas siguen siendo legibles
Tahoma
Sans serif
Etiquetas compactas y pies de email
Trebuchet MS
Sans serif
Titulares con algo de personalidad
Georgia
Serif
Newsletters editoriales y lecturas largas
Times New Roman
Serif
Avisos formales
Courier New
Monoespaciada
Códigos, números de pedido, recibos
Un email no puede descargar fuentes en todas las bandejas de entrada como lo hace una página web. Lo que ve el lector depende de su app de correo y de las fuentes de su dispositivo, así que el truco es un font stack que se degrade con elegancia. Elige un stack abajo para previsualizarlo con tu propio texto y copiar el CSS.
Elige un stack. La vista previa usa la fuente del stack que tenga tu dispositivo, exactamente como lo haría una app de correo.
Escribe tu asunto o tu titular en el texto de ejemplo y ajusta el tamaño.
Copia la línea font-family y ponla en un estilo inline en cada celda de texto, no solo en un bloque style.
Envía una prueba a las bandejas de entrada que usa de verdad tu lista, porque el renderizado cambia según la app.
Pon el font-family inline en cada td o p que contenga texto, para que cada bloque de texto lleve su propio stack en lugar de depender de un bloque style.
Pon entre comillas los nombres de fuente con espacios, como "Trebuchet MS", y termina cada stack con una familia genérica como sans-serif o serif.
Si cargas una fuente de marca con @font-face, elige una alternativa segura de anchura parecida para que los saltos de línea no se desplacen mucho.
Segoe UI viene con Windows pero no con macOS, y Helvetica viene con macOS pero no está en la lista de Windows 11. Combínalas con Arial en un stack.
Preguntas frecuentes
¿Qué fuentes son seguras para el email HTML?
Las fuentes presentes en los dos grandes sistemas de escritorio: Arial, Verdana, Tahoma, Trebuchet MS, Georgia, Times New Roman y Courier New aparecen en la lista de fuentes de Windows 11 de Microsoft y en la lista de fuentes de macOS Sequoia de Apple.
¿Gmail admite fuentes web personalizadas?
No. caniemail.com indica que @font-face no está soportado en Gmail, que usa sus propias fuentes. La alternativa de tu stack es lo que ven los lectores de Gmail, así que elígela con cuidado.
¿Qué apps de correo sí muestran fuentes web?
Según caniemail.com, Apple Mail en macOS e iOS, Thunderbird y ProtonMail admiten @font-face. Gmail, Yahoo Mail y AOL no, y el soporte de Outlook.com figura como parcial.
¿Por qué Outlook en Windows muestra Times New Roman?
El Outlook clásico para Windows acepta la regla @font-face pero ignora las fuentes remotas, y caniemail.com señala que entonces el texto puede caer en Times New Roman. Una fuente segura antes en el stack lo evita.
¿Qué tamaño debe tener el texto principal de un email?
No hay una regla oficial. Muchos diseñadores usan de 14 a 16 píxeles para el texto principal y más para los titulares; prueba en un teléfono, donde el texto pequeño cuesta más leerlo.
Cómo se elige una fuente del stack
font-family es una lista de prioridades. La app de correo la recorre de izquierda a derecha y usa la primera fuente que encuentra, carácter a carácter, así que un stack cubre a todos los lectores siempre que termine en una fuente que todos tengan.
MDN aconseja cerrar siempre la lista con una familia genérica como sans-serif. Si nada más coincide, la app sigue eligiendo una tipografía sensata en lugar de su serif por defecto.
Usar igualmente una fuente de marca
Puedes declarar una fuente web en un bloque style para las apps que la admiten y después enumerar fuentes seguras. Los lectores de Apple Mail ven la fuente de marca y los de Gmail ven la alternativa.
Mantén el texto importante, como precios y botones, como texto real y no como imágenes de texto. Sigue siendo legible con las imágenes desactivadas y funciona con lectores de pantalla.
Qué bandejas de entrada cargan fuentes web
Soporte de @font-face según caniemail.com, actualizado por última vez el 19 de diciembre de 2023. Revisa la página en vivo antes de confiar en ello, porque las apps de correo cambian.
Soporte de @font-face por cliente de correo
Cliente de correo
@font-face
Apple Mail (macOS 12.2 y posteriores, iOS 10.3 y posteriores)
Soportado
Thunderbird
Soportado
ProtonMail
Soportado
Outlook para Windows (2003 a 2019)
Acepta la regla, ignora las fuentes remotas
Outlook.com
Parcial
Gmail
No soportado
Yahoo Mail
No soportado
AOL
No soportado
Código de fuentes para email listo para copiar
Font stack inline en una celda de tabla
El stack va en el estilo inline de la propia celda, así que no depende de un bloque style en el head.
Fuente de marca con una alternativa segura
Las apps que admiten @font-face muestran la fuente de marca; el resto pasa a Trebuchet MS, Arial y por último a cualquier sans-serif.
Previsualizador de font stacks para email
Elige un stack y escribe tu propio texto. La vista previa usa las fuentes instaladas en este dispositivo, igual que una app de correo elige dentro del stack.
Font stack
Texto de ejemplo
Tamaño: {n}px
CSS para poner inline
Tu pedido está en camino. Sigue su estado cuando quieras desde tu cuenta.