Schriftpaare und Raster: Typografie für Einsteiger

Was Typografie eigentlich ist - einfach erklärt

Eine Schrift ist die Stimme des Textes. Dasselbe Wort kannst du flüstern, schreien oder ruhig und mit Nachdruck sagen. Und dann stürzt sich ein Einsteiger das erste Mal auf die Schriftenliste - und benimmt sich wie ein Kind im Süßwarenladen. Man will alles und sofort. Heraus kommt eine Seite, auf der sechs Schriften sich gegenseitig anbrüllen, und lesen lässt sich das nicht mehr.

Das Geheimnis ist übrigens ärgerlich simpel. Gutes Textdesign besteht aus ein bis zwei Schriften, einer klaren Größentreppe und einem einheitlichen Abstands-Schritt. Kein Talent, keine zehn Jahre geschultes Auge. Nur ein paar Regeln, die immer funktionieren.

Warum sich ein Einsteiger mit Schriften auskennen sollte

Zeichnen musst du vielleicht nicht können. Aber Text setzt du ständig: Landingpage, Präsentation, Post, README, das Interface der App, die du gerade zusammenvibecodest. Und Typografie verrät den Laien als Allererstes - schneller als Farbe und Bilder.

• Du verstehst, warum die Seite eines anderen teuer aussieht und deine „zusammengeschustert“, obwohl der Text exakt derselbe ist.
• Du hörst auf, Schriften „nach Bauchgefühl“ auszuwählen, und stellst stattdessen Paare zusammen, die garantiert harmonieren.
• Jeder Bildschirm ist sofort lesbar: Das Auge findet von selbst, wo das Wichtige ist, ohne dass du es erklären musst.
• Raster und einheitlicher Abstand beseitigen dieses „irgendwas stimmt nicht, aber ich weiß nicht was“. Meistens ist es ein Block, der ein paar Pixel verrutscht ist.

Neun von zehn „dilettantischen“ Layouts sind kein schlechter Geschmack. Es sind fünf Schriften, Größen nach Augenmaß und Abstände, die mit Leerzeichen gesetzt wurden. Die drei Regeln unten reparieren fast alles.

Die vier Säulen guter Typografie

Wie viele Schriften auf einer Seite

Die eiserne Einsteiger-Regel: eine Schrift - okay, zwei - gut, drei - das Maximum. Eine gute Schrift in verschiedenen Fettungen und Größen deckt praktisch alles ab. Das ist keine Armut. Das ist Disziplin.

Wozu dann eine zweite? Um die Rollen zu trennen: Die Display-Schrift Eine Display-Schrift (Schaubild- oder Auszeichnungsschrift) ist groß, hat Charakter und ist für Überschriften und Akzente da. Oft zu verspielt, um damit langen Text zu lesen, dafür fängt sie die Aufmerksamkeit. fängt die Aufmerksamkeit, und die Body-Schrift Eine Body-Schrift (Lauftext-Schrift) ist ruhig, ohne überflüssigen Charakter und auf langes Lesen in kleinem Grad ausgelegt. Ihre Aufgabe ist es, nicht zu stören, sondern transparent zu sein. trägt in Ruhe den Sinn. Wie Frontmann und Bassist: Einer leuchtet, der andere hält den Laden zusammen.

Wie du ein Schriftpaar findest: Kontrast und Verwandtschaft

Ein gutes Paar steht auf zwei Beinen gleichzeitig.

• Kontrast. Die Schriften müssen sich deutlich unterscheiden, sonst - wozu zwei? Es sieht wie ein Fehler aus. Der Klassiker schlechthin: eine Serifenschrift Eine Serifenschrift hat an den Strichenden kleine „Füßchen“. Sie wirkt klassisch, buchartig, seriös. plus eine Grotesk Eine Grotesk (serifenlos, sans-serif) hat Buchstaben mit glatten Enden, ohne „Füßchen“. Sie wirkt modern, sauber, interface-tauglich. . Eine mit Serifen, eine ohne - den Unterschied sieht man sofort.
• Verwandtschaft. Dabei muss es trotzdem etwas Gemeinsames geben, sonst zerfällt das Paar. Das wichtigste Merkmal ist eine ähnliche x-Höhe Die x-Höhe gibt an, wie hoch die Kleinbuchstaben einer Schrift wie „x“ im Vergleich zu den Großbuchstaben sind. Ist sie bei zwei Schriften unterschiedlich, wirken sie nebeneinander wie aus verschiedenen Epochen. . Bei der einen sind die Buchstaben groß und bauchig, bei der anderen klein und schmal? Nebeneinander wirken sie wie Fremde.

Der sicherste Lifehack: Nimm eine Schriftfamilie in verschiedenen Schnitten - dünn, normal, fett. Kontrast hast du, und Verwandtschaft ist garantiert: Es ist buchstäblich eine Schrift. Wenn du mutiger wirst, fügst du die zweite hinzu.

Überschriften-Hierarchie: damit das Auge das Wichtige selbst findet

Hierarchie Hierarchie ist die visuelle Reihenfolge nach Wichtigkeit. Das Wichtigste ist am stärksten hervorgehoben, Nebensächliches leiser. Das Auge liest sie in Sekundenbruchteilen, noch vor dem eigentlichen Lesen. ist eine Landkarte fürs Auge. Du landest auf einer Seite und verstehst in einer Sekunde: hier die Überschrift, hier die Unterüberschrift, hier der Text. Gemacht wird sie mit drei kostenlosen Werkzeugen, und Schriften brauchst du dafür weiterhin genauso wenige.

• Größe. Die Überschrift ist deutlich größer als der Text. Nicht um ein paar Prozent - sondern so, dass der Unterschied sofort ins Auge springt.
• Fettung. Das Wichtige fett, der Rest normal. Oft reicht schon das allein.
• Luft. Um das Wichtige herum lässt du mehr Leerraum. Leere heißt nicht „nicht fertig geworden“, Leere ist eine Hervorhebung.

Und damit du Größen nicht nach Augenmaß setzen musst, nehmen Designer eine Treppe - eine Größenskala Eine Größenskala (modulare Skala) ist ein vorab festgelegter Satz von Schriftgraden, bei dem sich jeder nächste durch Multiplikation des vorigen mit ein und demselben Faktor ergibt. Die Größen wirken stimmig, weil sie über einen gemeinsamen Schritt verbunden sind. . Du nimmst die Basisgröße des Textes, multiplizierst mit einem konstanten Faktor - und erhältst eine Reihe: Text, Unterüberschrift, Überschrift, Riesenüberschrift. Die Größen wirken wie aus einem Guss, weil sie aus einem einzigen Schritt gewachsen sind.

Raster und Abstände: ein einheitlicher Seitenrhythmus

Ein Raster Ein Raster (Grid) ist ein unsichtbares System aus Hilfslinien, an dem sich die Blöcke auf der Seite ausrichten: Spalten, Abstände, Kanten. Es selbst ist nicht sichtbar, aber sein Fehlen spürt man sofort. sind unsichtbare Schienen. An ihnen richten sich Textkanten, Spalten und Bilder aus. Steht alles auf denselben Schienen, wirkt die Seite zusammengefügt. Lebt jeder Block für sich, entsteht genau dieses „verrutscht“.

Aber die stärkste und einfachste Regel ist der einheitliche Abstands-Schritt. Wähle eine Basiseinheit und baue alle Zwischenräume als Vielfache davon. In der Branche nimmt man am häufigsten einen Schritt, der ein Vielfaches von 8 ist: die Reihe 8, 16, 24, 32, 40 und so weiter. So sind große Designsysteme wie Material Design von Google aufgebaut. Für Kleinigkeiten kannst du in Vielfachen von 4 unterteilen. Hauptsache, du brütest keine zufälligen 7, 13, 19 Pixel aus.

Wie du die Typografie eines Bildschirms in 6 Schritten zusammenstellst

Angenommen, du baust eine einfache Landingpage oder einen App-Bildschirm. Du rätst nicht - du gehst Schritt für Schritt vor.

Wähle zwei Schriften: eine mit Charakter für die Überschriften, eine ruhige für den Text. Bist du unsicher - nimm eine Schrift in zwei Schnitten, normal und fett. Das ist schon ein funktionierendes Paar.
Prüfe die Verwandtschaft: Stelle beide nebeneinander und schau auf die Höhe der Kleinbuchstaben. Stark unterschiedlich - tausche eine aus, sie werden nicht harmonieren.
Lege eine angenehm lesbare Basisgröße für den Text fest. Daraus baust du die Treppe: multipliziere etwa mit 1,25 bis 1,5 und erhalte Unterüberschrift, Überschrift, große Überschrift.
Setze die Hierarchie: das Wichtige größer und fetter, das Nebensächliche kleiner und ruhiger. Nicht mehr als drei bis vier Ebenen, sonst gibt es wieder Brei.
Wähle einen einheitlichen Abstands-Schritt als Vielfaches von 8. Alle Zwischenräume zwischen den Blöcken nimmst du nur aus diesem Satz: 8, 16, 24, 32. Keine zufälligen Zahlen.
Richte die Kanten aller Blöcke an einer Linie links aus. Genau das ist dein einfachstes Raster. Tritt einen Schritt zurück und schau aus der Ferne - alles sollte gerade stehen und atmen.

Wenn du vibecodest und möchtest, dass der Assistent die Typografie selbst zusammenstellt, schreib nicht „mach schöne Schriften“. Gib ihm dieselben Regeln in Worten - dann wird das Ergebnis vorhersehbar.

Stelle die Typografie für diesen Bildschirm nach Regeln zusammen, nicht nach Augenmaß.

Verwende maximal zwei Schriften: eine charaktervolle Display-Schrift, eine ruhige Body-Schrift. Im Zweifel - eine Grotesk in den Schnitten regular und bold.
Baue die Größen mit einer modularen Skala aus dem Basisschriftgrad des Textes mit einem Faktor von etwa 1,3: Text, Unterüberschrift, Überschrift, große Überschrift.
Erzeuge die Hierarchie durch Größe, Fettung und Luft, nicht durch neue Schriften. Nicht mehr als vier Ebenen.
Nimm alle Abstände nur als Vielfache von 8 (8, 16, 24, 32, 40). Keine willkürlichen Werte.
Richte alle Blöcke an einer einheitlichen linken Linie aus. Zeige die finale Größenskala und den Satz der Abstände als separate Liste.

Häufige Einsteigerfehler in der Typografie

• Fünf Schriften „der Schönheit wegen“. Jede neue Schrift macht es schlechter, nicht besser. Reduziere auf eine bis zwei, die Abwechslung holst du dir über Fettung und Größe.
• Ein Paar ohne Kontrast. Zwei ähnliche Schriften sehen wie ein Fehler aus, nicht wie ein Paar. Trenne die Rollen: mit Serifen plus ohne Serifen.
• Größen nach Augenmaß. „Hier ein bisschen größer, da ein bisschen kleiner“ ergibt eine matschige Hierarchie. Bau eine Treppe aus einem einzigen Faktor.
• Überschrift fast wie der Text. Der Größenunterschied ist kaum zu sehen - also gibt es keine Hierarchie. Mach den Kontrast deutlich, geniere dich nicht.
• Zufällige Abstände. 7 Pixel hier, 13 dort - und die Seite „verrutscht“. Ein Schritt, ein Vielfaches von 8, für alle Zwischenräume.
• Eng, ohne Luft. Alles auf Stoß - schwer zu lesen und wirkt billig. Die Leere um das Wichtige ist kein Lückenfüller, sondern ein Akzent.
• Ausrichtung kreuz und quer. Ein Block linksbündig, ein anderer zentriert, der dritte verrutscht. Setze alles auf eine linke Linie - und sofort wirkt es ordentlich.