Web safe lettertypen voor e-mail en de juiste stacks

Web safe lettertypen voor e-mail

Web safe lettertypen voor e-mail: stacks die in elke inbox werken | We.Inc

Font stacks voor HTML-e-mail die standhouden in Gmail, Outlook en Apple Mail, welke inboxen webfonts laden, en een previewer om elke stack op uw eigen apparaat te testen.

Web safe lettertypen voor e-mail zijn lettertypen die al op zowel Windows als macOS zijn geïnstalleerd, zoals Arial, Verdana, Tahoma, Trebuchet MS, Georgia, Times New Roman en Courier New. Omdat Gmail en Yahoo Mail eigen webfonts negeren, schrijft u elke font-family als een stack die eindigt op een van deze en een generieke familie.

Lettertypen die op zowel Windows 11 als macOS Sequoia staan

Lettertype
Soort
Geschikt voor

Arial
Schreefloos
Broodtekst, de veiligste standaard

Verdana
Schreefloos
Kleine tekst; brede letters blijven leesbaar

Tahoma
Schreefloos
Compacte labels en footers

Trebuchet MS
Schreefloos
Koppen met een beetje karakter

Georgia
Schreef
Redactionele nieuwsbrieven en lange teksten

Times New Roman
Schreef
Formele mededelingen

Courier New
Monospace
Codes, ordernummers, bonnen

Een e-mail kan niet in elke inbox lettertypen downloaden zoals een webpagina dat doet. Wat de lezer ziet, hangt af van de mailapp en de lettertypen op het apparaat, dus de truc is een font stack die netjes terugvalt. Kies hieronder een stack om die met uw eigen tekst te bekijken en kopieer de CSS.

Kies een stack. De preview gebruikt het lettertype uit de stack dat uw apparaat heeft, precies zoals een mailapp dat zou doen.
Typ uw onderwerpregel of kop in de voorbeeldtekst en pas de grootte aan.
Kopieer de regel font-family en zet die in een inline style op elke tekstcel, niet alleen in een style-blok.
Stuur een test naar de inboxen die uw lijst echt gebruikt, want de weergave verschilt per app.

Zet de font-family inline op elke td of p met tekst, zodat elk tekstblok zijn eigen stack meedraagt in plaats van afhankelijk te zijn van een style-blok.
Zet lettertypenamen met spaties tussen aanhalingstekens, zoals "Trebuchet MS", en sluit elke stack af met een generieke familie zoals sans-serif of serif.
Laadt u een merklettertype met @font-face, kies dan een web safe terugvaloptie met een vergelijkbare breedte, zodat regeleinden niet veel verschuiven.
Segoe UI zit bij Windows maar niet bij macOS, en Helvetica zit bij macOS maar staat niet in de lijst van Windows 11. Combineer ze met Arial in een stack.

Veelgestelde vragen

Welke lettertypen zijn veilig voor HTML-e-mail?

Lettertypen die op beide grote desktopsystemen staan: Arial, Verdana, Tahoma, Trebuchet MS, Georgia, Times New Roman en Courier New staan allemaal in de lettertypenlijst van Microsoft voor Windows 11 en in die van Apple voor macOS Sequoia.

Ondersteunt Gmail eigen webfonts?

Nee. caniemail.com vermeldt @font-face als niet ondersteund in Gmail, dat in plaats daarvan eigen lettertypen gebruikt. De terugvaloptie in uw stack is wat Gmail-lezers zien, dus kies die zorgvuldig.

Welke e-mailapps tonen wel webfonts?

Volgens caniemail.com ondersteunen Apple Mail op macOS en iOS, Thunderbird en ProtonMail @font-face. Gmail, Yahoo Mail en AOL niet, en de ondersteuning van Outlook.com staat als gedeeltelijk vermeld.

Waarom toont Outlook op Windows Times New Roman?

Het klassieke Outlook voor Windows accepteert de @font-face-regel maar negeert externe lettertypen, en caniemail.com merkt op dat tekst dan kan terugvallen op Times New Roman. Een web safe lettertype eerder in de stack voorkomt dat.

Hoe groot moet broodtekst in e-mail zijn?

Er is geen officiële regel. Veel ontwerpers gebruiken 14 tot 16 pixels voor broodtekst en groter voor koppen; test op een telefoon, waar kleine tekst het moeilijkst te lezen is.

Hoe een lettertype uit een stack wordt gekozen

font-family is een prioriteitenlijst. De mailapp loopt die van links naar rechts af en gebruikt het eerste lettertype dat hij vindt, teken voor teken, dus een stack dekt elke lezer zolang hij eindigt op een lettertype dat iedereen heeft.
MDN raadt aan de lijst altijd af te sluiten met een generieke familie zoals sans-serif. Als niets anders past, kiest de app dan nog steeds een redelijk lettertype in plaats van zijn eigen standaard schreeflettertype.

Toch een merklettertype gebruiken

U kunt een webfont declareren in een style-blok voor de apps die het ondersteunen, en daarna web safe lettertypen opsommen. Lezers in Apple Mail zien het merklettertype en Gmail-lezers zien de terugvaloptie.
Houd belangrijke tekst, zoals prijzen en knoppen, als echte tekst in plaats van afbeeldingen van tekst. Die blijft leesbaar met afbeeldingen uit en werkt met schermlezers.

Welke inboxen webfonts laden

Ondersteuning voor @font-face zoals vastgelegd door caniemail.com, laatst bijgewerkt op 19 december 2023. Controleer de actuele pagina voordat u erop vertrouwt, want mailapps veranderen.

Ondersteuning voor @font-face per e-mailclient

E-mailclient
@font-face

Apple Mail (macOS 12.2 en later, iOS 10.3 en later)
Ondersteund

Thunderbird
Ondersteund

ProtonMail
Ondersteund

Outlook voor Windows (2003 tot 2019)
Regel geaccepteerd, externe lettertypen genegeerd

Outlook.com
Gedeeltelijk

Gmail
Niet ondersteund

Yahoo Mail
Niet ondersteund

AOL
Niet ondersteund

Kopieerbare lettertypecode voor e-mail

Inline font stack op een tabelcel

De stack staat in de inline style van de cel zelf, dus hij hangt niet af van een style-blok in de head.

Merklettertype met een web safe terugvaloptie

Apps die @font-face ondersteunen tonen het merklettertype; de rest valt terug op Trebuchet MS, Arial en ten slotte een willekeurige sans-serif.

Previewer voor e-mail font stacks

Kies een stack en typ uw eigen tekst. De preview gebruikt de lettertypen op dit apparaat, net zoals een mailapp uit de stack kiest.

Web safe lettertypen voor e-mail en de juiste stacks