Funktionieren -Tags in einer Signatur?

Nicht zuverlässig. Viele Clients entfernen den -Block bei der HTML-Bereinigung, und eine in ein Einstellungsfeld eingefügte Signatur verliert meist alles, was nicht inline steht. Die Styles müssen über style-Attribute an jedem Element hängen.

Kann man eine eigene Schriftart verwenden?

Nein, nicht zuverlässig: Webfonts werden in den meisten E-Mail-Clients nicht geladen. Verwenden Sie eine Systemschrift und geben Sie einen Fallback-Stack an.

HTML-E-Mail-Signatur: die Kompatibilitätsregeln, die Sie einhalten müssen

Signatur-HTML ist kein Website-HTML. Tabellen, Inline-Styles, Abmessungen als Attribute: die Regeln, mit denen eine Signatur in Outlook, Gmail und auf dem Smartphone gleich aussieht.

HTML in E-Mails folgt nicht denselben Regeln wie HTML auf Websites. Was in einem modernen Browser funktioniert, kann in Outlook zerfallen, und ein im Sinne des W3C einwandfrei valider Code kann ein unbrauchbares Ergebnis liefern. Hier sind die tatsächlichen Vorgaben – und ihre Gründe.

Warum es diese Vorgaben gibt

Nicht alle E-Mail-Clients nutzen eine Web-Rendering-Engine. Outlook für Windows – in der klassischen Version, die in Unternehmen noch weit verbreitet ist – stellt HTML mit der Engine von Microsoft Word dar. Word wurde nie dafür entwickelt, und seine CSS-Unterstützung beschränkt sich auf eine kleine Teilmenge.

Webmailer wiederum bereinigen eingehendes HTML aus Sicherheitsgründen: Sie entfernen Skripte, oft <style>-Tags, manchmal ganze Attribute.

Eine Signatur muss also auf dem kleinsten gemeinsamen Nenner korrekt dargestellt werden. Das neue Outlook verbessert die Lage – siehe Was sich 2026 ändert –, doch solange der alte Client im Einsatz ist, bleibt die Vorgabe bestehen.

Regel 1 – Tabellen für das Layout

flexbox und grid werden von der Word-Engine nicht unterstützt. Die Elemente werden dann untereinander gestapelt, und jedes Spaltenlayout verschwindet.

Die Positionierung muss daher auf Tabellen beruhen:

<table cellpadding="0" cellspacing="0" border="0" role="presentation">
  <tr>
    <td style="padding-right:16px;vertical-align:top">
      <img src="..." width="120" height="40" alt="Unternehmen" />
    </td>
    <td style="vertical-align:top">
      <div style="font-weight:700">Vorname Nachname</div>
    </td>
  </tr>
</table>

Drei Details sind wichtig. cellpadding="0" cellspacing="0" border="0" neutralisiert die Standardabstände, die von Client zu Client variieren. role="presentation" teilt Screenreadern mit, dass die Tabelle dem Layout dient und keine Daten enthält. Und vertical-align muss explizit angegeben werden: Die Standardwerte unterscheiden sich.

Regel 2 – Alle Styles inline

Ein externes Stylesheet ist nicht erreichbar. Ein <style>-Tag wird häufig entfernt. Und wenn man eine Signatur in das Einstellungsfeld eines Clients einfügt, verschwindet alles, was nicht über ein style-Attribut definiert ist.

Jede Eigenschaft muss daher am betreffenden Element deklariert werden. Das ist wortreich, redundant – und alternativlos.

Regel 3 – Bildabmessungen als Attribute

Outlook ignoriert häufig per CSS gesetzte width und height. Das Bild erscheint dann in seiner Originalgröße: Eine 1.200 px breite Datei nimmt die ganze Breite der Nachricht ein.

Legen Sie die Abmessungen über die HTML-Attribute fest und doppeln Sie sie per CSS für moderne Clients:

<img src="https://cdn.beispiel.de/logo.png"
     width="180" height="48" alt="Unternehmen"
     style="display:block;border:0;width:180px;height:48px" />

display:block entfernt den störenden Abstand unter dem Bild; border:0 beseitigt den blauen Rahmen, wenn es verlinkt ist. Details dazu finden Sie unter Logo einfügen, ohne dass es kaputtgeht.

Regel 4 – Systemschriften mit Fallback-Stack

Webfonts werden nicht zuverlässig geladen. Geben Sie einen realistischen Stack an:

font-family: Arial, Helvetica, sans-serif;

Die Ersatzschrift selbst zu wählen ist besser, als sie dem Client zu überlassen.

Regel 5 – Absolute Einheiten

Relative Einheiten – rem, em, Prozentangaben bei Schriftgrößen – verhalten sich uneinheitlich. Verwenden Sie Pixel für Schriftgrößen, Innenabstände und Bildabmessungen. Prozentangaben bleiben für die Breite von Tabellen akzeptabel.

Regel 6 – Explizite Links

Ein Link muss sein vollständiges Protokoll enthalten, auch bei Telefonnummern:

<a href="tel:+491701234567" style="color:#1A1A1A;text-decoration:none">+49 170 1234567</a>

Ohne explizites style wenden manche Clients ihr eigenes unterstrichenes Blau an, das sich mit Ihrem Corporate Design beißt.

Regel 7 – Inhalte, die auch ohne Bilder funktionieren

Externe Bilder werden bei unbekannten Absendern standardmäßig blockiert. Beruht Ihre Signatur auf einem Bild, sieht der Empfänger statt Ihrer Kontaktdaten ein leeres Rechteck.

Name, Funktion, Telefonnummer und Pflichtangaben müssen Text bleiben. Und jedes Bild erhält ein sinnvolles alt – den Firmennamen beim Logo, den Namen des Netzwerks bei einem Icon.

Gut zu wissen: Testen Sie immer mit deaktivierten Bildern. Das ist der schnellste Test, um zu sehen, ob Ihre Signatur auch im ungünstigsten Fall brauchbar bleibt.

Muss man dieses HTML von Hand schreiben?

Man kann – aber es ist schlecht investierte Zeit. Die typischen Fehler – nicht geschlossene Tabelle, vergessenes cellspacing, fehlende Abmessung, beim Kopieren verlorener Style – sind beim Lesen schwer zu erkennen und zeigen sich nur in bestimmten Clients.

Ein visueller Editor, der direkt regelkonformes HTML erzeugt und die Darstellung in Outlook für Windows, Outlook im Web, Gmail, Apple Mail und auf Mobilgeräten in der Vorschau zeigt, beseitigt den Großteil des Problems. Genau das leistet der Signally-Editor, der kostenlos zugänglich ist.

Der Gewinn liegt nicht nur in der Zeit, sondern in der Zuverlässigkeit. Eine zentrale Vorlage garantiert, dass die obigen Regeln von allen Signaturen der Organisation eingehalten werden – auch von denen der Personen, die noch nie von cellpadding gehört haben.