Lorem Ipsum Generator mit Element-Vorschau und Längen-Cheatsheet

Ein Lorem Ipsum Generator, der mehr macht als „Anzahl Absätze“. Du wählst ein Element, also Button, H1, Meta-Description oder Karte, und der Text wird auf die typische Länge zugeschnitten. Direkt daneben siehst du, wie er in einer echten UI-Komponente aussieht, bei einer Bildschirmbreite, die du selbst einstellst.

Was passiert, wenn echte Inhalte länger sind als der Blindtext?

Designs platzen, wenn der echte Inhalt reinkommt - meist, weil das Layout an einem Blindtext gemessen wurde, der kürzer war. Ein Button mit fünf Zeichen Lorem Ipsum sieht ausgewogen aus, bis dein Label „Termin vereinbaren“ heißt. Genau diese Lücke schließt der Element-Modus: Der Text wird auf die typische Länge der echten Karte, der echten Überschrift, des echten Buttons zugeschnitten.

Der typische Fall: ein Platzhalter mit 100 Zeichen im Entwurf, das echte Eingabefeld kappt aber bei 60. Mit fünf Zeichen Lorem Ipsum ist das nie aufgefallen. Die Lücke zwischen Beispieltext und echtem Inhalt ist eine typische Ursache für „sah in Figma gut aus, bricht im Browser“. Der Element-Modus dreht die Frage: statt „wie viele Absätze?“ heißt es „für welches Element?“. Eine Statusanzeige in grün, gelb oder rot zeigt sofort, ob du im empfohlenen Bereich bist.

Wie lang sollte ein Button, eine Headline oder eine Meta-Description sein?

Jedes Element hat einen typischen Bereich, der sich aus UX-Praxis, technischer Obergrenze der Plattform oder gelebter Konvention ergibt. Ein Button-Label bleibt meist unter 30 Zeichen, weil längere Phrasen vom Auge weniger klar als Handlungsaufforderung gelesen werden. Das Title-Tag liegt zwischen 50 und 60 Zeichen, weil Suchergebnisse es sonst am Rand abschneiden (Moz). Die gleiche Spanne ist auch für die H1 ein guter Anker, wenn du beides synchron hältst. Eine Meta-Description bleibt meist unter 155 Zeichen, sonst kürzt Google die Snippet-Anzeige je nach Gerätebreite.

Die Übersicht (Quellen im Tool verlinkt):

Hinweis zum Tweet-Zähler: angezeigt wird die JavaScript-Zeichenzahl. X zählt URLs als 23 Zeichen und gewichtet Emojis sowie CJK-Zeichen anders, sodass dein Tweet-Count auf X für Plain-Text mit unserem übereinstimmt, für Links und Emojis aber abweicht.

Im Tool sind die Bereiche je Element mit ihrer Quelle verlinkt. Liegt dein eigener Text knapp daneben, zeigt der Zähler ihn ehrlich gelb oder rot. Das heißt nicht „falsch“, nur außerhalb des typischen Bereichs.

Wann deutscher Stress-Text die ehrlichere Wahl ist

Latein bricht dein Layout nicht. Deutsch tut es. Wenn dein Button-Label „Gesellschafterversammlung“ heißt oder deine Karten-Überschrift „Datenschutz-Folgenabschätzung“, merkst du das erst nach Launch - es sei denn, du testest vorher mit Text, der dieselben Wortlängen produziert. Die Variante „Deutsch (Layout-Stress)“ zieht aus echten deutschen B2B-Webseiten und füllt deine Vorschauen mit zusammengesetzten Wörtern, an denen dein CSS sich entscheiden muss.

Beispiele aus echten Layouts, die Lorem Ipsum nicht aufdeckt:

• Button: „Termin vereinbaren“ (18 Zeichen) gegenüber „Gesellschafterversammlung einberufen“ (36 Zeichen). Der Letztere kann in schmalen oder fix breiten Buttons leicht überlaufen.
• Karten-Überschrift: „Sicherheit zuerst“ (17 Zeichen) gegenüber „Datenschutz-Folgenabschätzung“ (29 Zeichen) mit sichtbarem Umbruch in der Vorschau.
• Mobile Wortlängen: Lorem-Ipsum-Wörter sind im Schnitt fünf Zeichen lang; deutsche Komposita (zusammengesetzte Wörter) können leicht 18 bis 25 erreichen.

Der Layout-Stress-Modus zieht aus einem kuratierten Korpus deutscher B2B-Webseiten und setzt vollständige Sätze ein, nicht neu kombinierte Wortlisten. So liest sich der Text wie echte Prosa.

Silbentrennung in CSS - vier Optionen, vier Layouts

CSS hat eine ganze Reihe Optionen, mit Überlauf umzugehen (Silbentrennung, word-break, line-clamp, soft hyphens, Layout-Änderungen). Die Vorschau im Tool zeigt vier davon nebeneinander, die für lange deutsche Wörter am häufigsten relevant sind. Probier sie an einem Layout-Stress-Text durch und du bekommst das visuelle Gefühl, das reine Doku nicht gibt.

1. nicht umbrechen - hyphens: none plus overflow-wrap: normal. Das Wort steht starr und läuft sichtbar über den Rand.
2. Silbentrennung (auto) - hyphens: auto plus overflow-wrap: break-word. Der Browser trennt nach Wörterbuch, braucht aber das korrekte lang-Attribut auf einem Vorfahren.
3. Wort umbrechen - overflow-wrap: anywhere. Bricht überall, auch mitten im Wort. Die nukleare Option.
4. mit … kürzen - text-overflow: ellipsis plus overflow: hidden plus white-space: nowrap. Schneidet auf eine Zeile mit drei Punkten ab; nur für einzeilige Slots sinnvoll.

Voreinstellung in der Vorschau ist „Silbentrennung (auto)“. Damit das auf deutsche Wörter trifft, setzt der Vorschau-Bereich automatisch lang="de", sobald du Layout-Stress wählst.

Was bedeutet Lorem Ipsum eigentlich?

„Lorem ipsum“ ist verstümmeltes Latein. Der Abschnitt, aus dem es stammt, ist Ciceros „De finibus bonorum et malorum“ (45 v. Chr.), 1.10.32. Im Original beginnt der Satz mit „Neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit …“ - die Kommas nach „ipsum“ und „sit“ verschwinden in der Setzer-Version. Setzer haben den Text seit dem 16. Jahrhundert in unbrauchbare Häppchen zerlegt; dabei wurde aus „dolorem ipsum“ das anfänglose „Lorem ipsum“.

Warum verstümmeltes Latein und nicht echtes? Echtes Latein lädt zum Lesen ein, der Reviewer fragt: „Was steht da?“. „Lorem ipsum“ ist unverständlich genug, um nicht abzulenken, und lesbar genug für realistische Zeilenlängen und Wortrhythmen. Der kanonische Anfang „Lorem ipsum dolor sit amet…“ hat sich als Konvention etabliert; du kannst ihn als Einleitung ein- und ausschalten.

Häufige Fragen

Wie lang sollte ein Button-Text sein?

Etwa 14 bis 30 Zeichen ist die übliche Spanne (Nielsen Norman Group). Kürzer wirkt vage („OK“, „Senden“), länger verliert die Wahrnehmung als Handlungsaufforderung. Der Element-Modus arbeitet in diesem Bereich; eine Statusanzeige in grün, gelb oder rot zeigt dir, wenn dein eigener Text knapp daneben liegt.

Was ist die maximale Länge einer Meta-Description?

Google nennt keine harte Zeichengrenze, in der Praxis kürzen die meisten Snippets bei rund 120 Zeichen auf Mobile und 155 auf Desktop (Google Search Central). Was darüber hinausgeht, schneidet die Suchergebnisseite mit „…“ weg. Die Vorschau im Tool simuliert diesen Cut visuell, sodass du den Schnittpunkt siehst, bevor du den Text live schaltest.

Wann ist Lorem Ipsum die falsche Wahl?

In Usability-Tests, in detailgetreuen Prototypen und in Vorabtests beim Übersetzen, also überall dort, wo der Reviewer den Inhalt liest. Sobald jemand „aber was steht da?“ fragen könnte, verliert der Blindtext den Zweck. Für deutsche Layouts hilft die Variante „Deutsch (Layout-Stress)“ oft mehr, weil zusammengesetzte deutsche Wörter testen, was Latein nie testet.