Typografie macht den Unterschied.
Zwölf Beispiele zum Vergleichen und Entdecken. Wählen Sie ein Thema.
Gleiche Worte. Andere Persönlichkeit.
Wie soll Ihre Marke sprechen? Wählen Sie links und rechts je eine von sechs Stimmen. Vergleichen Sie Ihren eigenen Text direkt nebeneinander.
Ausgangspunkt
Information braucht Orientierung.
Ob Geschäftsbericht, Website oder App: Menschen suchen Informationen, die sie verstehen und einordnen können. Typografie gibt dem Inhalt eine Form und unterstützt die Orientierung.
Entscheidend ist das Zusammenspiel von Schrift, Abständen und Struktur. Eine passende Gestaltung berücksichtigt das Medium und die Menschen, die den Text lesen.
Überarbeitet
Information braucht Orientierung.
Ob Geschäftsbericht, Website oder App: Menschen suchen Informationen, die sie verstehen und einordnen können. Typografie gibt dem Inhalt eine Form und unterstützt die Orientierung.
Entscheidend ist das Zusammenspiel von Schrift, Abständen und Struktur. Eine passende Gestaltung berücksichtigt das Medium und die Menschen, die den Text lesen.
AusgangspunktProportionalziffern · rechtsbündig
| Kennzahl | 2024 | 2025 |
|---|---|---|
| Umsatz | 1.118,11 | 8.888,88 |
| Betriebsergebnis | 88,18 | 111,11 |
| Investitionen | 711,71 | 188,18 |
| Bilanzsumme | 8.111,18 | 9.888,88 |
ÜberarbeitetTabellenziffern · rechtsbündig
| Kennzahl | 2024 | 2025 |
|---|---|---|
| Umsatz | 1.118,11 | 8.888,88 |
| Betriebsergebnis | 88,18 | 111,11 |
| Investitionen | 711,71 | 188,18 |
| Bilanzsumme | 8.111,18 | 9.888,88 |
Proportionalziffern
111111888888
Die Ziffern sind unterschiedlich breit. Das passt häufig zu Zahlen im laufenden Text.
Tabellenziffern
111111888888
Jede Ziffer belegt denselben Platz. Werte lassen sich dadurch leichter untereinander vergleichen.
Auch die Ziffernform zählt.
Versalziffern haben eine einheitliche Höhe. Mediävalziffern besitzen unterschiedliche Höhen und zum Teil Ober- und Unterlängen; sie können sich ruhiger in Fließtext einfügen. Beide Formen können proportional oder gleich breit gestaltet sein, sofern die Schrift diese Varianten enthält.
Für Berichte prüfen wir außerdem, ob die Tabellenziffern im normalen und fetten Schnitt gleich breit sind.
Ausgangspunkt
"Gute Gestaltung" - 25 % der Seiten sind fertig, z. B. für den Bericht.
Überarbeitet
„Gute Gestaltung“ – 25 % der Seiten sind fertig, z. B. für den Bericht.
Ein typografischer Beispielsatz. Markieren Sie die Details, um die Unterschiede zu entdecken.
- 01 Anführungszeichen
- Deutsche Anführungszeichen geben dem Zitat eine eindeutige Form.
- 02 Gedankenstrich
- Der längere Gedankenstrich gliedert den Satz; ein Bindestrich verbindet Wörter.
- 03 Geschützte Abstände
- Zahl und Prozentzeichen bleiben zusammen. Ein schmaler Abstand hält die Verbindung auch optisch eng.
- 04 Abkürzungen
- Schmale, geschützte Abstände verbinden die Bestandteile von „z. B.“.
Anführungszeichen
"Gute Gestaltung"
„Gute Gestaltung“
Im deutschen Satz stehen öffnende Anführungszeichen unten und schließende oben.
Apostroph
Sommer's Entwurf
Sommer’s Entwurf
Der typografische Apostroph ersetzt den geraden Strich. Ein Akzent ist kein Apostroph.
Zollzeichen
15”-Display
15″-Display
Bei Maßangaben steht das Doppelprime-Zeichen. Anführungszeichen erfüllen eine andere Aufgabe.
Malzeichen
30 x 40 cm
30 × 40 cm
Das Malzeichen unterscheidet sich vom Buchstaben x. Zahl und Einheit bleiben zusammen.
Zahlenbereich
2024-2026
2024–2026
Ein Bis-Strich verbindet die Grenzen eines Zahlenbereichs.
Auslassung
Wir gestalten ...
Wir gestalten …
Das Auslassungszeichen ist ein eigenes Zeichen. Hier ersetzt es ausgelassene Wörter und steht mit Abstand.
Ein A lässt neben seiner schrägen Form anderen Raum frei als ein H mit gerader Kante. Deshalb können rechnerisch gleiche Abstände zwischen Buchstaben ungleich aussehen. Kerning gleicht einzelne Paare so aus, dass ein Wort zusammenhängend wirkt.
Gute Schriften bringen solche Korrekturen bereits mit. Bei normalem Lesetext reicht das meist aus. Bei Logos und großen Überschriften kann zusätzliche Handarbeit sinnvoll sein: Hier beurteilt man das ganze Wort, seine Größe und die gewünschte Wirkung.
In diesem Experiment ist das automatische Kerning ausgeschaltet. Sie können die Abstände selbst abstimmen und anschließend mit dem Kerning der Schrift vergleichen.
Stimmen Sie das Wort nach Ihrem Auge ab. Die Zwischenräume sollen gleichmäßig wirken. Dafür dürfen die gemessenen Abstände unterschiedlich sein.
Zum Ausprobieren: ohne automatisches Kerning
Referenz der Schrift · alle hinterlegten Korrekturen
WERTARBEIT
Gelb markiert sind alle Buchstabenpaare, für die diese Schrift einen eigenen Abstand hinterlegt hat. Bei WERTARBEIT ist das T / A. Die Markierung bleibt unabhängig vom oben gewählten Paar sichtbar.
Zwischen zwei Buchstaben klicken und ziehen. Der gewählte Abstand lässt sich auch mit − / + oder den Pfeiltasten ändern. Eigene Änderungen bleiben gelb markiert. Die Referenz zeigt alle in der Schrift hinterlegten Korrekturen.
Welche Sprachen verwendet Ihr Unternehmen heute und welche kommen hinzu? Wählen Sie eine Sprache und entdecken Sie einige der Zeichen, die Ihre Schrift dafür mitbringen muss.
Deutsch · Namen und Orte
Berlin · Köln · München
Zeichen im Beispiel: ö · ü
Eine Schrift muss zu Ihren Märkten, Sprachen und Anwendungen passen. Das prüfen wir, bevor sie unternehmensweit eingesetzt wird.
Für die Zeichenproben verwenden wir Noto Sans. Alle hier gezeigten Zeichen sind in der eingebundenen Datei enthalten. Die Beispiele zeigen einen Ausschnitt der jeweiligen Anforderungen. In der Beratung prüfen wir den benötigten Sprachumfang, die passenden Schriftdateien und die Darstellung in Ihren Anwendungen.
Nur Farbe
Unser neuer Bericht ist veröffentlicht. Im Jahresbericht finden Sie die Ergebnisse und die nächsten Schritte.
Farbe und Unterstreichung
Unser neuer Bericht ist veröffentlicht. Im Jahresbericht finden Sie die Ergebnisse und die nächsten Schritte.
Beide Absätze enthalten denselben Link: Jahresbericht. Blenden Sie die Farbe aus und vergleichen Sie.
Wer die Linkfarbe nicht vom übrigen Text unterscheiden kann, braucht einen weiteren sichtbaren Hinweis. Eine Unterstreichung macht den Link auch ohne Farbe erkennbar. Das hilft beim Lesen und bei der Orientierung.
Vertiefung: leserlich.info: Kontrast und Farben · WCAG: Use of Color
Ein guter Bericht macht Zusammenhänge verständlich. Er hilft Menschen, wichtige Informationen zu finden und Entscheidungen zu treffen.
Nur Großbuchstaben: Die Buchstaben sind fast gleich hoch. Wechseln Sie zur Groß- und Kleinschreibung.
Groß- und Kleinbuchstaben unterscheiden sich stärker in ihren Formen. Bei längeren Texten unterstützt diese Vielfalt das Lesen. Versalien können kurze Titel betonen, sollten aber nicht den gesamten Lesetext bestimmen.
Anregung: leserlich.info: Schreibweise
Zum Vergleichen: Light
Ihre Auswahl: Regular
Die Ausstellung ist vom 12. November bis zum 8. Dezember geöffnet. Besuchen Sie uns dienstags bis sonntags von 10 bis 18 Uhr.
Weitere Informationen zu Anreise, Eintritt und Führungen finden Sie auf unserer Website. Bei Fragen hilft Ihnen unser Team gerne weiter.
Regular ausgewählt: Vergleichen Sie die dünneren und kräftigeren Striche. Text, Schriftgröße und Abstände bleiben gleich.
Bei kleinen Angaben brauchen auch die feinen Striche genügend Substanz. Ein sehr kräftiger Schnitt kann dagegen die Innenräume der Buchstaben verengen. Wir prüfen die Schriftstärken dort, wo sie eingesetzt werden: in Publikationen, auf Websites und in Apps.
Vergleichsschrift: Noto Sans, echte Schnitte mit den Stärken 300, 400 und 600. Anregung: leserlich.info: Strichstärke
Tippen Sie auf die Zeile. Ihr Text erscheint sofort in beiden Varianten.
Stimme A
Wassersport
Stimme B
Wassersport
Welche Stimme passt zu Ihrer Marke und den Menschen, die Sie erreichen möchten? Vergleichen Sie zwei Varianten direkt. Wir stimmen Schriftwahl, Gewicht und Abstände auf Ihre Positionierung und Ihre Anwendungen ab.
Vergleichsschriften: NN Nouvelle Grotesk Normal, Unbounded Black, Kalam Regular, Bodoni Moda Regular, IBM Plex Mono und Anton Regular. Wortlaut, Schriftgröße und Textfarbe bleiben gleich.
Runde 1 von 2
Welches Zeichen ist das kleine l?
Eine eindeutige Zeichenform hilft beim Lesen von Kennungen, Zahlen und kleinen Angaben. Wir prüfen Schriftwahl und Abstände im Zusammenhang mit Ihren tatsächlichen Anwendungen.
Wählen Sie eines der Zeichen oder lösen Sie auf. Sie können vorher auch die Schrift wechseln.
Großes I, kleines l und Ziffer 1. Buchstabe O und Ziffer 0. Wie deutlich sie sich unterscheiden, hängt von der Schrift ab. Besonders bei Kennungen und kleinen Angaben lohnt ein genauer Blick.
Vergleich: Helvetica (Systemschrift, alternativ Arial) und Atkinson Hyperlegible. Die Schriftgröße bleibt gleich. Die Auflösung benennt jedes Zeichen.
Die Markenschrift ist vorhanden. Der Titel passt in das vorgesehene Textfeld.
Die Schrift wird ersetzt. Der Titel läuft in das nächste Textfeld.
Der Titel braucht eine zusätzliche Zeile. In dieser Vorlage überschneiden sich dadurch zwei Textfelder.
Fehlt die Markenschrift, kann sich ein sorgfältig gestalteter Entwurf beim Öffnen verändern. Hier hat die Vorlage feste Textfelder. Mit »Vorlage anpassen« bekommt der Titel auch in der Ersatzschrift genügend Raum. Wir planen Schriftwahl, Ersatzschriften und Office-Vorlagen gemeinsam und prüfen sie an echten Inhalten.
Typografisches Beispiel mit NN Nouvelle Grotesk und Arial beziehungsweise der verfügbaren Systemalternative. Inhalt, Schriftgrößen und Textbreite bleiben gleich. Angepasst wird die Aufteilung der Textfelder.
Ein Gestaltungsbeispiel. Welche Lösung passt, hängt von Inhalt, Schrift und Anwendung ab.
»The details are not the details—they make the product.«
»Gute Typographie bemerkt man so wenig wie gute Luft zum Atmen. Schlechte merkt man erst, wenn es einem stinkt.«
Typografische Beratung für Ihr Projekt.
Wir unterstützen Ihr Team bei der Schriftwahl, der Lesbarkeit und der typografischen Ausarbeitung. Bei einzelnen Fragen oder begleitend von der Konzeption bis zur Umsetzung.