In einem Satz
Lorem Ipsum ist ein bedeutungsloser, lateinisch anmutender Platzhaltertext, der verwendet wird, um Inhaltsbereiche in einem Design zu füllen. So können sich die Beteiligten auf das Layout und die visuelle Hierarchie konzentrieren, ohne von lesbarem Inhalt abgelenkt zu werden.
Welches Problem es löst
Stell dir Folgendes vor: Du bist ein Designer und entwirfst gerade ein geniales neues Website-Layout. Du hast Boxen für Überschriften, Absätze und Bildunterschriften. Aber was packst du da rein?
Du könntest „Hier kommt die Überschrift hin“ und „Inhalt für diesen Absatz wird später geliefert“ schreiben. Aber das hat zwei Probleme. Erstens sieht es nicht wie echter Text aus. „Hier kommt die Überschrift hin“ sind fünf Wörter; eine echte Überschrift hat vielleicht zehn oder zwanzig. Ein Textblock, der immer wieder „Inhalt hier“ wiederholt, erzeugt ein seltsames, ablenkendes Muster, das nicht die natürliche Textur eines echten Absatzes widerspiegelt. Zweitens, und das ist noch heimtückischer, wenn du echtes, lesbares Deutsch wie „Unsere Firma wurde 1998 mit der Mission gegründet, ...“ verwendest, wird dein Kunde oder Chef unweigerlich anfangen, es zu lesen. Anstatt dein wunderschönes Design zu beurteilen, werden sie sagen: „Moment, wir wurden 1999 gegründet“, und du wirst in ein Gespräch über den Text (Copy), nicht über die Komposition, verwickelt.
Das Kernproblem ist die Trennung der Bewertung von Form und der von Inhalt.
Und hier kommt Lorem Ipsum ins Spiel. Seine Entstehungsgeschichte ist cooler, als du vielleicht denkst. Es ist nicht nur zufälliges Kauderwelsch. Der Standardtext ist ein verwürfelter und modifizierter Auszug aus einem klassischen lateinischen Text, „De finibus bonorum et malorum“ („Vom höchsten Gut und vom größten Übel“), verfasst vom römischen Staatsmann Cicero im Jahr 45 v. Chr.
Die Praxis, es als Fülltext zu verwenden, geht mindestens bis ins 16. Jahrhundert zurück, als ein unbekannter Drucker vermutlich eine Druckfahne (Galley of Type) durcheinanderbrachte, um ein Schriftmusterbuch zu erstellen. Aber sein moderner Ruhm stammt aus den 1960er Jahren. Eine Firma namens Letraset verkaufte Abreibebuchstaben-Bögen für Grafikdesigner und machte auf diesen Bögen Lorem-Ipsum-Passagen populär. Als in den 1980er Jahren Desktop-Publishing-Software wie Aldus PageMaker aufkam, enthielt sie einen eingebauten Lorem-Ipsum-Generator und zementierte damit für immer seinen Platz im Werkzeugkasten des digitalen Designers.
Es funktioniert, weil es wie eine plausible europäische Sprache aussieht. Es hat unterschiedliche Wortlängen, Großbuchstaben und Satzzeichen, was eine realistische „Farbe“ oder „Textur“ auf der Seite erzeugt. Weil es unentzifferbar ist, zwingt es das Gehirn des Betrachters, mit dem Lesen aufzuhören und sich stattdessen auf die Dinge zu konzentrieren, die bei einer Design-Review wichtig sind: Ist die Schrift lesbar? Stimmt der Zeilenabstand? Wirkt das Layout ausgewogen? Ist die Überschrift prominent genug? Es hält die Konversation genau da, wo sie sein muss.
Wie es unter der Haube funktioniert
Man könnte meinen, ein Lorem-Ipsum-Generator sei nur eine Textdatei, die kopiert und eingefügt wird. Während die einfachsten Versionen genau das sind, ist ein guter Generator etwas cleverer und verwendet einfache Algorithmen, um natürlicher aussehende und variablere Textblöcke zu erstellen.
Der Quelltext: Ciceros Erbe
Der Prozess beginnt mit einem Quelltext. Das klassische Lorem ipsum dolor sit amet... ist eine verstümmelte Version einer Passage von Cicero. Die Originalpassage beginnt so:
...neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
Was übersetzt so viel heißt wie:
...und es gibt auch niemanden, der den Schmerz an sich liebt, sucht oder begehrt, nur weil er Schmerz ist...
Wie du siehst, ist das erste Wort des Platzhalters, Lorem, ein Teil von dolorem. Die Wörter sind echtes Latein, aber sie sind zerstückelt, neu angeordnet und mit einigen unsinnigen Wörtern gespickt, was die gesamte Passage grammatikalisch falsch und bedeutungslos macht – und genau das ist der Punkt.
Das „Wörterbuch“ eines Generators ist eine große Liste dieser lateinischen und lateinähnlichen Wörter.
| Original Cicero | Verwürfeltes Lorem Ipsum |
|---|---|
dolorem ipsum |
Lorem ipsum dolor |
quia dolor sit |
quia dolor sit |
amet, consectetur |
amet, consectetur |
adipisci velit |
adipiscing elit |
Der Generierungs-Algorithmus
Ein konfigurierbarer Generator spuckt nicht jedes Mal den gleichen 100-Wörter-Block aus. Er baut Absätze von Grund auf neu, indem er einen einfachen Satz von Regeln anwendet.
Satzgenerierung: Um einen einzelnen Satz zu erstellen, wählt der Algorithmus zufällig eine Anzahl von Wörtern (sagen wir, zwischen 8 und 20) aus seiner Wortliste. Er verbindet sie mit Leerzeichen, schreibt das erste Wort groß und fügt einen Punkt hinzu. Um es schicker zu machen, könnte er zufällig nach ein paar Wörtern Kommas einfügen.
Absatzgenerierung: Um einen Absatz zu erstellen, ruft der Algorithmus den Satzgenerator einfach eine zufällige Anzahl von Malen auf (sagen wir, zwischen 3 und 7) und fügt die resultierenden Sätze zusammen.
Konfigurierbare Ausgabe: Wenn du „5 Absätze“ anforderst, führt das Tool die Absatzgenerierungs-Schleife einfach fünfmal aus. Einige Generatoren bieten mehr Kontrolle, wie z.B. die Angabe von Wort- oder Zeichenanzahlen, was lediglich bedeutet, dass die Wortauswahl-Schleife so lange läuft, bis die Zielanzahl erreicht ist.
Hier ist ein winziges JavaScript-artiges Pseudocode-Beispiel der Kernlogik:
// Das Wörterbuch der Wörter
const LOREM_WORDS = ["lorem", "ipsum", "dolor", "sit", "amet", "consectetur", ...];
// Generiert einen Satz mit variabler Länge
function generateSentence(minWords = 8, maxWords = 20) {
const wordCount = Math.floor(Math.random() * (maxWords - minWords + 1)) + minWords;
let words = [];
for (let i = 0; i < wordCount; i++) {
const randomIndex = Math.floor(Math.random() * LOREM_WORDS.length);
words.push(LOREM_WORDS[randomIndex]);
}
let sentence = words.join(" ");
// Ersten Buchstaben großschreiben und einen Punkt hinzufügen
return sentence.charAt(0).toUpperCase() + sentence.slice(1) + ".";
}
// Generiert einen Absatz mit einer variablen Anzahl von Sätzen
function generateParagraph(minSentences = 3, maxSentences = 7) {
const sentenceCount = Math.floor(Math.random() * (maxSentences - minSentences + 1)) + minSentences;
let sentences = [];
for (let i = 0; i < sentenceCount; i++) {
sentences.push(generateSentence());
}
return sentences.join(" ");
}
// 3 Absätze generieren
for (let p = 0; p < 3; p++) {
console.log(generateParagraph());
}
Diese einfache Struktur ist alles, was man braucht, um bei Bedarf endlose, einzigartig aussehende Blöcke von Platzhaltertext zu erzeugen.
Geschichten aus der Praxis
Der übereifrige Kunde
Die freiberufliche Designerin Maria erstellte eine Website für eine neue Handwerksbäckerei. Sie entwarf eine wunderschöne Homepage und verwendete Lorem Ipsum für die Abschnitte „Unsere Geschichte“ und die Produktbeschreibungen. Stolz auf ihre Arbeit schickte sie dem Kunden einen Link zur Design-Abnahme und erklärte in ihrer E-Mail, dass der Text nur ein Platzhalter sei. Der Kunde, der mit seiner Bäckerei beschäftigt war, überflog die E-Mail und klickte auf den Link. Eine Stunde später erhielt Maria eine panische E-Mail: „Das Design ist schön, aber die Website ist auf Latein! Wir verkaufen kein ‚dolor sit amet‘! Bitte korrigieren Sie den Text sofort.“ Maria verbrachte die nächsten 20 Minuten am Telefon damit, ihn zu beruhigen und den Zweck des Platzhaltertextes erneut zu erklären.
Lektion: Geh niemals davon aus, dass ein technisch nicht versierter Stakeholder weiß, was Lorem Ipsum ist. Erkläre proaktiv, dass es ein Werkzeug ist, das ihnen hilft, sich auf das visuelle Design zu konzentrieren, und dass der eigentliche Text später folgt.
Der Fall des unbrechbaren Wortes
Der Frontend-Entwickler Sam baute eine responsive Card-Komponente für eine Nachrichten-App. Die Card hatte einen Titel, ein Bild und einen kurzen Textausschnitt. Sie musste auf einem Smartphone gut aussehen, was bedeutete, dass die Textspalte ziemlich schmal war. Sam fügte ein paar Sätze Lorem Ipsum ein, und es sah perfekt aus. Der Text umbrach wunderbar, der Abstand stimmte, und er lieferte die Komponente aus. Wochen später zog die App einen echten Artikel aus einem deutschen Wissenschaftsjournal mit dem Wort Rechtschreibreform herein. Das Wort war länger als die gesamte Breite der Card. Es wurde nicht umgebrochen und lief stattdessen aus seinem Container heraus, was das Layout komplett zerstörte.
Lektion: Lorem Ipsum verwendet kurze, lateinbasierte Wörter. Es ist großartig, um den allgemeinen Fluss zu überprüfen, aber furchtbar für den Stresstest von Layouts. Teste deine UI immer mit realistischen Worst-Case-Inhalten, wie langen Wörtern, kurzen Überschriften oder Texten in verschiedenen Sprachen.
Das Missgeschick auf der Live-Seite
Die Junior-Entwicklerin Chloe sollte einen neuen Werbebanner auf einer live geschalteten E-Commerce-Website hinzufügen. Es war ein Eilauftrag, angefragt um 16 Uhr an einem Freitag. Sie codierte den Banner, stylte ihn und fügte etwas Lorem Ipsum ein, um die Ausrichtung zu überprüfen. In ihrer Eile, vor dem Wochenende zu deployen, committete sie ihren Code und pushte ihn in die Production. In den nächsten drei Stunden zeigte die Homepage des Unternehmens einen prominenten Banner mit dem Text: „Entdecken Sie unsere neue Frühlingskollektion! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.“
Lektion: Platzhaltertext ist radioaktiv – er darf niemals in die Production gelangen. Implementiere Überprüfungen in deinem Deployment-Prozess, wie ein einfaches Skript, das in deiner Codebase nach „lorem ipsum“ sucht und den Build abbricht, wenn es gefunden wird. Das ist ein billiges und effektives Sicherheitsnetz gegen peinliche Fehler.
Häufige Fehler und Fallstricke
- Es zu vergessen, es zu ersetzen. Das ist die Kardinalsünde. Eine Seite, die mit Lorem Ipsum live geht, wirkt unprofessionell und kaputt. Verwende Pre-Deployment-Skripte oder eine manuelle Checkliste, um es aufzuspüren und auszumerzen.
- Den Kunden damit zu verwirren. Wenn du nicht erklärst, was es ist, werden Kunden verwirrt sein und denken, dass etwas nicht stimmt. Eine Erklärung im Voraus spart allen Zeit und Nerven.
- Anzunehmen, dass es die reale Inhaltslänge darstellt. Eine Zeile „Lorem ipsum dolor sit amet...“ ist keine echte Überschrift. Ein generierter Absatz hat nicht die gleiche Länge wie eine echte Nutzer-Bio. Entwirf flexibel, denn echter Inhalt ist unvorhersehbar.
- Internationalisierung (i18n) ignorieren. Der Zeichensatz und die Wortstruktur von Lorem Ipsum sind lateinbasiert. Es wird nicht aufzeigen, wie dein Design mit den breiteren Zeichen von Chinesisch (中文), den langen zusammengesetzten Wörtern im Deutschen oder dem Rechts-nach-Links-Fluss von Arabisch (عربى) umgeht.
- Es für UX-Tests zu verwenden. Es ist darauf ausgelegt, ignoriert zu werden. Wenn du testest, ob ein Benutzer Anweisungen folgen oder einen Call-to-Action verstehen kann, musst du realistischen, aussagekräftigen Text verwenden. Lorem Ipsum für benutzerorientierte Anweisungen zu verwenden ist, als würde man jemandem eine Karte ohne Beschriftungen geben.
Warum du es auf dem Schirm haben solltest
Als Entwickler, Designer oder sogar als Projektmanager ist Lorem Ipsum ein grundlegender Teil des digitalen Schaffensprozesses. Du solltest daran denken, wann immer du in einer Situation bist, in der die Struktur aufgebaut werden muss, bevor der Inhalt fertig ist.
- Frontend- & UI-Entwicklung: Wenn du eine React-Komponente, ein CSS-Grid-Layout oder eine einfache HTML-Seite baust, musst du sehen, wie der Text fließt. Lorem Ipsum ist dein Mittel der Wahl, um diese
p-Tags unddivszu füllen, damit du das Styling hinbekommst, ohne auf die Texter warten zu müssen. - UI/UX-Design & Wireframing: In Figma, Sketch oder Adobe XD sorgt die Verwendung von Platzhaltertext dafür, dass Feedback-Runden auf Layout, Hierarchie und User Flow fokussiert bleiben, anstatt zu Textkorrektur-Sessions zu verkommen.
- Database Seeding: Beim Bauen einer App brauchst du Testdaten. Ein Skript, das 1.000 gefälschte Benutzer generiert, kann Lorem Ipsum verwenden, um deren „Biografie“-Felder zu füllen, wodurch sich deine Entwicklungsumgebung viel realistischer anfühlt als eine Datenbank voller
NULLoder leerer Strings. - Druck & Grafikdesign: Der ursprüngliche Anwendungsfall ist immer noch quicklebendig. Beim Entwerfen einer Broschüre, eines Magazins oder eines Buchcovers verwenden Typografen es, um Schriftarten, -kombinationen, den Zeilenabstand (Leading/line-height) und die Buchstabenabstände (Kerning/letter-spacing) zu bewerten.
Geh tiefer ins Thema
- Wikipedia: Lorem Ipsum — Der endgültige, gut belegte Überblick über die Geschichte, den Ursprung und den Zweck von Lorem Ipsum.
- Cicero's "De finibus bonorum et malorum" — Lies den originalen lateinischen Text (mit englischer Übersetzung), aus dem Lorem Ipsum geboren wurde. Die relevante Passage befindet sich in Buch 1, Abschnitte 1.9.32-33.
- Lipsum.com — Einer der ältesten Lorem-Ipsum-Generatoren im Web, mit einer guten Erklärung der Geschichte und häufiger Missverständnisse.
- "Designing with Real Content" von A List Apart — Ein exzellenter Artikel, der die Grenzen von Lorem Ipsum diskutiert und dafür plädiert, so früh wie möglich im Designprozess realistische Inhalte zu verwenden.