Text-Banner in HTML und CSS: Werbung ohne Bild
Ein Werbebanner ohne Bild: warum Text und CSS oft reichen, wie der komplette Code aussieht und wo die Grenze liegt.
Ein Text-Banner ist ein Werbebanner, das ohne Bild auskommt: eine HTML-Datei, etwas CSS, fertig. Keine Fotolizenz, kein Grafikprogramm, kein Animations-Tool. Für Dienstleistungen, Aktionen und alles, was sich in einem Satz sagen lässt, ist das oft die schnellste Art, überhaupt ein Banner zu haben.
Technisch bleibt es ein HTML5-Banner. Die Grundlagen dazu, vom ZIP-Aufbau bis zu den gängigen Größen, stehen im Beitrag Was ist ein HTML5-Banner. Hier geht es um den Sonderfall ganz ohne Bilddateien: warum der kein Notbehelf ist, wie der Code aussieht und wo die Grenze liegt.
Warum ein Banner ohne Bild lädt, skaliert und lesbar bleibt
Drei Eigenschaften bekommst du geschenkt, sobald du das Bild weglässt:
Es lädt sofort. Bei Google Ads dürfen Bildanzeigen bis 150 KB wiegen, ein HTML5-ZIP bis 600 KB (Stand: August 2026, Google-Ads-Hilfe). Ein reines Text-Banner liegt bei wenigen Kilobyte. Auf einer News-Seite mit fünf Werbeplätzen ist deins das einzige, das schon steht, während die anderen noch nachladen.
Es bleibt scharf. Text im Bild ist gerastert: Auf hochauflösenden Displays wird er weich, es sei denn, du exportierst in doppelter Auflösung, und dann kämpfst du wieder mit den 150 KB. Text im HTML bleibt Text, der Browser rendert ihn in der nativen Auflösung jedes Displays. Ein Text-Banner sieht auf dem billigsten Monitor und dem neuesten Smartphone gleich sauber aus.
Es skaliert über Formate. Beim Bild-Banner schneidest du das Motiv für jedes Format neu zu. Beim Text-Banner passt CSS Schriftgrößen und Abstände an, der Inhalt bleibt derselbe. Genau dafür habe ich den kostenlosen HTML-Banner-Generator gebaut: Texte und Farben rein, und du bekommst alle gängigen Formate als ZIP, mit ad.size und clickTag schon an der richtigen Stelle.
Der Code: ein komplettes Text-Banner in 300 × 250
Das hier ist ein vollständiges, hochladbares Banner. Keine gekürzte Skizze:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Anzeige</title>
<meta name="ad.size" content="width=300,height=250">
<script>var clickTag = "https://deine-zielseite.de";</script>
<style>
body { margin: 0; }
.banner {
box-sizing: border-box;
width: 300px; height: 250px;
display: flex; flex-direction: column;
justify-content: space-between;
padding: 20px;
background: #14532d; color: #fff;
font-family: Georgia, 'Times New Roman', serif;
text-decoration: none;
}
.claim { font-size: 26px; line-height: 1.2; margin: 0; }
.sub { font-size: 14px; opacity: .85; margin: 10px 0 0;
font-family: Arial, Helvetica, sans-serif; }
.cta { align-self: flex-start; padding: 10px 16px;
background: #fff; color: #14532d;
font-size: 14px; font-weight: bold;
font-family: Arial, Helvetica, sans-serif; }
</style>
</head>
<body>
<a class="banner" href="javascript:window.open(window.clickTag)">
<div>
<p class="claim">Dein Angebot in einem Satz.</p>
<p class="sub">Eine Zeile, die es erklärt.</p>
</div>
<span class="cta">Mehr erfahren</span>
</a>
</body>
</html>Zwei Angaben machen daraus eine gültige Google-Ads-Anzeige: ad.size nennt dem Adserver das Format, und über den clickTag setzt Google die Ziel-URL ein und zählt den Klick. Klickbar macht die Fläche das a-Element, das hier das ganze Banner umschließt. Beides gilt für jedes HTML5-Banner, mit oder ohne Bild.
Gestaltung ohne Bild: Typografie ist das Motiv
Die meisten Banner scheitern nicht am fehlenden Bild, sondern an zu viel Botschaft. Ein Text-Banner zwingt dich zur richtigen Reihenfolge: eine große Aussage, eine kleine Ergänzung, ein Button. Mehr passt nicht rein, und mehr liest auch niemand.
Was das Bild ersetzt, ist Kontrast. Eine kräftige Farbfläche in deiner Markenfarbe fällt zwischen weißen Content-Spalten mehr auf als das dritte Stockfoto daneben. Dazu ein deutlicher Größensprung zwischen Aussage und Ergänzung: Wenn die Headline nur ein bisschen größer ist als der Rest, sieht das Banner aus wie ein Formular. Bei hellem Banner-Hintergrund gehört außerdem ein sichtbarer Rahmen dazu, sonst verschwimmt die Anzeige mit der Seite.
Animation geht auch ohne Animations-Tool: ein Wortwechsel in der Headline oder ein einblendender Button, als CSS-Keyframes direkt im Code. Die Google-Regel dazu ist klar: Nach spätestens 30 Sekunden muss die Animation stehen, sonst wird die Anzeige abgelehnt.
Schrift im Banner: Systemschrift schlägt Webfont
Die schnellste Schrift ist die, die schon auf dem Gerät liegt. Arial, Georgia, Verdana kosten null Kilobyte und null Ladezeit. Wenn es eine Webschrift sein soll: Bei Google Ads sind als Webfonts nur Google-Webschriftarten erlaubt. Die Markenschrift, die nur auf deinem Server liegt, bleibt draußen.
Meine Haltung dazu: Fürs Banner ist die Stimmung der Schrift wichtiger als der exakte Schnitt. Eine Serifenschrift für Ruhe und Anspruch, eine Groteske für Klarheit, das trägt weiter als der Versuch, das Corporate Design auf 300 × 250 Pixel zu pressen.
Wo die Grenze liegt
Ehrlich: Sobald das Produkt selbst überzeugen soll, braucht es ein Bild. Ein Gericht, ein Gesicht, ein Raum, eine Stimmung lassen sich nicht hinschreiben. Dann bist du beim klassischen HTML5-Banner mit Bildmaterial, und der Aufwand für Zuschnitt und Formate kommt zurück.
Die zweite Grenze ist der Zugang: Den HTML5-Upload muss sich ein Google-Ads-Konto erst freischalten lassen, Google knüpft ihn unter anderem an Kontoalter und bisherige Ausgaben. Wer die Hürde nicht nimmt, fährt mit responsiven Displayanzeigen besser: Dort lieferst du Text- und Bild-Bausteine, und Google setzt sie zusammen. Für Direktplatzierungen, etwa bei einem regionalen Portal oder im Newsletter eines Verbands, gelten die Regeln des jeweiligen Anbieters, und die sind fast immer lockerer.
Fazit: Weniger Werkzeug, mehr Botschaft
Ein Text-Banner ist kein abgespecktes Banner. Es ist die Form, die übrig bleibt, wenn du alles weglässt, was nicht zur Botschaft beiträgt: schneller geladen, immer scharf, in Minuten angepasst. Sein einziger echter Verzicht ist das Foto, und erstaunlich viele Angebote brauchen keins.
Was jedes Banner dagegen braucht, ist eine Zielseite, die das Versprechen einlöst. Ein Klick ist nur der Anfang: Wie ich Websites baue, die aus dem Klick eine Anfrage machen, steht auf meiner Leistungsseite.
Häufige Fragen
Ist ein Text-Banner ein HTML5-Banner?
Ja. Technisch ist es ein HTML5-Banner, das nur ohne Bilddateien auskommt: eine HTML-Datei mit CSS, als ZIP hochgeladen. Es gelten dieselben Regeln wie für jedes HTML5-Banner, bei Google Ads also ad.size-Meta, clickTag, maximal 600 KB pro ZIP.
Welche Schriften darf ein Text-Banner bei Google Ads verwenden?
Systemschriften wie Arial, Georgia oder Verdana immer, sie liegen auf dem Gerät und kosten keine Ladezeit. Als Webfonts erlaubt Google Ads nur Google-Webschriftarten; Schriftdateien vom eigenen Server darf ein HTML5-Banner nicht laden.
Darf ein Text-Banner animiert sein?
Ja, zum Beispiel mit CSS-Keyframes direkt im Code. Bei Google Ads muss die Animation nach spätestens 30 Sekunden stehen, sonst wird die Anzeige abgelehnt. Dezente Bewegung reicht: ein Wortwechsel in der Headline oder ein einblendender Button.
Warum lädt ein Text-Banner schneller als ein Bild-Banner?
Weil die Bilddatei fehlt, die beim klassischen Banner fast das ganze Gewicht ausmacht. Bildanzeigen dürfen bei Google Ads bis 150 KB wiegen, ein reines Text-Banner liegt bei wenigen Kilobyte und steht, während andere Werbeplätze noch nachladen.
Banner brauchst du auch?
Selbst bauen oder bauen lassen
Für den Standardfall gibt es hier ein kostenloses Tool: Texte und Bild rein, fertigen HTML5-Banner raus — mit ad.size und clickTag, in allen gängigen Formaten. Soll es nach deiner Marke aussehen statt nach Vorlage, gestalte ich dir die Banner von Hand.