Typographie im Alltag: So werden deine Texte lesbar

Mit den folgenden Tipps gestaltest du deine Texte wesentlich lesbarer und sorgst noch dazu für eine bessere Auffindbarkeit im bereits randvollen Weltennetz.

Typographie im Alltag: So werden deine Texte lesbar

Wenn du als Seitenbetreiber denkst, Typographie brauche dich nicht zu interessieren, dann irrst du. Die reine Lesbarkeit deiner Texte ist nämlich auch schon eine Frage der Typographie.

Typographische Hierarchie strukturiert den Text

Wenn du mehr oder weniger regelmäßig ins Netz schreibst, dann ist dir schon bekannt, dass die Einhaltung der korrekten Hierarchie eines Textes ein wichtiger Faktor für die Auffindbarkeit deiner Inhalte in Suchmaschinen ist. Wahrscheinlich achtest du schon aus diesem Grund zumeist auf die richtige Auszeichnung.

Dabei sind es aber nicht nur die Suchmaschinen, die es weitaus leichter haben, sich durch einen sauber strukturierten Text zu arbeiten. Auch deine Leserinnen und Leser profitieren von einer logischen Unterteilung des Inhalts.

Es reicht oft, sich auf die Überschriften der Stufen eins bis drei (h1 – h3), den korrespondierend kleiner gesetzten Fließtext und die noch kleiner gesetzten Fußnoten zu fokussieren. Dafür gibt es ein paar sehr simple Annahmen, anhand derer sich eine saubere Struktur für jeden Text gut umsetzen lässt.

Ausgangspunkt der Betrachtung ist stets der Fließtext, also das, was wir im Netz in die p-Tags schreiben. Dieser Fließtext ist der Index, hält also die Schriftgröße 100 Prozent. Alle anderen Elemente werden davon abgeleitet.

Zunächst gilt es demnach, den Fließtext auf eine angenehm lesbare Größe zu bringen. Das ist zu einem großen Teil Geschmackssache. Bei mir liegt dieser Wert bei 18 Pixeln, kleiner möchte ich es nicht haben. Gängige Publikationen liegen zumeist eher im Bereich um die 14 Pixel. Egal, welche Größe du konkret definierst, stets gilt, dass sie die Grundlage aller weiteren Elemente ist.

Hauptüberschriften (h1) sollten 180 bis 200 Prozent der Ausgangsgröße haben, sekundäre (h2) noch 130 bis 150 Prozent und tertiäre (h3) nur wenig mehr als der Fließtext selbst. Häufig siehst du h3 auch als bloßen Fettsatz. Bis 125 Prozent darfst du wohl problemlos gehen. Fußnoten und anderer, kleiner gesetzter Text, sollte 75 Prozent der Größe des Fließtext nicht überschreiten.

Auf diese Weise erreichen wir schon durch die Größen unterschiedlicher Textteile eine visuelle Hierarchie, die Orientierung bietet und das Lesen angenehmer gestaltet.

Großzügige Zeilenhöhen erleichtern das Lesen

Wir alle sind schon mehr als einmal in Textwüsten verdurstet. Allein der Anblick eines wild dahin gewürfelten Buchstabenhaufens lässt die Kehle spontan trocknen. Dabei ist die Rettung so einfach: Trenne die einzelnen Zeilen sichtbar voneinander und bringe so den Lesefluss zum Strömen. Auch hierfür gibt es einfache Faustformeln.

Der Abstand einer Zeile zur vorhergehenden sollte zwischen 120 und 160 Prozent der Größe des Ausgangstextes entsprechen. Jones gibt als Faustregel den Tipp, dass ein liegendes kleines h in der Ausgangsgröße in den Zwischenraum passen sollte, ohne die oberen und unteren Spitzen der Buchstaben in den beiden Zeilen zu berühren. Durch klar voneinander getrennte Zeilen lassen sich die Wörter leichter erfassen, was zu einem schnelleren, aber auch angenehmeren Lesen führt.

Gleiches gilt für das Setzen des richtigen Abstands zwischen Absätzen. Früher betätigte man einfach die Zeilenschaltung doppelt, was aber in der Regel zu einem zu großen Abstand zwischen den Absätzen führt. Besser erscheint es daher, für den Abstand die Größe des Ausgangstexte zu verwenden.

Lass die Zeilen nicht zu lang werden

Verwender großer Bildschirme kennen sicherlich diese Blogs, deren Betreiber ihre Seite so eingestellt haben, dass sich die Breite des Textes auf die Breite der Anzeige des Besuchers anpasst. Das nennt sich Fluid Design und ist ein valides Gestaltungsmittel, aber nicht in dieser Verwendung.

Als angenehm zu lesen gelten Zeilenlängen von maximal 75 Zeichen. Dann sollte ein Umbruch erfolgen. Daraus resultiert der Mehrspaltensatz der altehrwürdigen Holzmedien. Natürlich gibt es auch zu diesem Thema abweichende Meinungen. Im recht breiten Konsens bewegst du dich, wenn du deine Zeilen irgendwo zwischen 40 und 80 Zeichen beendest.

In einspaltigen Layouts sollte laut Typographie-Papst Robert Bringhurst nach 65 Zeichen Schluss sein. Die erforderliche Breite für den Text in deinem Layout berechnest du nach Bringhurst so, dass deine geplante Schriftgröße nimmst und sie mit 30 multiplizierst. Wenn du also meine bevorzugte Schriftgröße von 18 Pixeln annimmst, kommst du so auf einen Wert von 540 Pixeln für die Textspalte.

Verwende unterschiedliche Stärken der gleichen Schrift

Wenn du nun die grundlegenden Strukturen geschaffen hast, kannst du trotzdem noch den einen oder anderen Tipp umsetzen. Um Text differenzierter zu organisieren, als es mit bloßen Fettsetzungen und anderen Formatierungsoptionen möglich ist, empfiehlt sich der Einsatz unterschiedlicher Ausprägungen der gleichen Schrift.

Vielfach werden Schriften vollständig mit einem separaten Gewicht gestaltet und stehen dann auch als solche für den Einsatz zur Verfügung. Solche Typen sind weitaus attraktiver als die computerseitig verfügte Abwandlung der verwendeten Ausgangsschrift.

Zudem gibt es sie in mehr Variationen. Sollte ein und dieselbe Schrift mal keine Alternativen bieten, so kannst du auch den Einsatz einer Schrift aus der gleichen Familie erwägen. Dabei solltest du allerdings immer ganze Textteile ändern und nicht innerhalb des Fließtextes oder der Überschriften mischen.

Es sollte sich von selbst erschließen, dass dieser Tipp zugleich ein Plädoyer für den Einsatz von Web-Fonts ist. Verlasse dich nicht länger auf die konventionellen Systemschriften, die es auf jedem Rechner in der ein oder anderen Form gibt. Stattdessen nimm das Gestaltungsruder in die Hand und verwende interessantere Schriften, die sich gleichzeitig besser in ihrem Aussehen kontrollieren lassen.

Verwende nie mehr als zwei Schriften

Ich erinnere mich noch daran, dass früher alle Elemente einer Präsentation durch Powerpoint animiert auf die Leinwand flogen, gern garniert mit aufdringlichen Soundeffekten. Jede auf dem Computer installierte Schrift wurde auf wildeste Weise benutzt. Teilweise wurden gezielt furchtbare Schriften nachinstalliert. Augenärzte erlebten Hochkonjunktur, weil der Augeninnendruck ganzer Bevölkerungsgruppen unaufhaltsam zu steigen schien. Gut, jetzt übertreibe ich es ein wenig…

Es ist dennoch ein Tipp und vor allem seine Beachtung wert: Kombiniere nie mehr als zwei Schriften in einem Inhalt. Und selbst bei der Kombination dieser beiden Schriften, achte bitte darauf, keine gegensätzlichen Schriftkonzepte zu nutzen.

Verwende die automatische Silbentrennung

MIt CSS3 hat die Eigenschaft hyphens Einzug gehalten. So ausgezeichnete Textbereiche, etwa die Paragraph-Tags, sollen dann im Benutzerbrowser zur Darstellung ordentlich getrennter Texte führen. Die Auszeichnung an sich ist sehr einfach:

p { hyphens: auto; }

Leider funktioniert die automatische Silbentrennung nur in Firefox, Safari, IE11 und Edge. Chrome unterstützt die Eigenschaft nur unter macOS und Opera gar nicht. Dabei kann eine automatisch getrennte Spalte so schön aussehen, wie dieses Beispiel von Mediaevents.de zeigt, das ich unter Verwendung von Edge als Screenshot verewigen konnte:

Im HTML-Tag muss für die ordnungsgemäße Funktion der Silbentrennung Deutsch als Sprache des Dokuments hinterlegt sein, also

<html lang="de">

Wenn du die Möglichkeit hast, die Eigenschaft zu setzen, solltest du es in jedem Falle tun. Die Lesbarkeit deiner Texte verbessert sich (in den unterstützten Browsern) deutlich.

Webentwickler interessieren sich bestimmt für diese Polyfill-Lösung namens Hyphenator.js.

Nutze Weißraum, Bilder und Kontrast

Streng genommen ist dieser Tipp kein typographischer Rat. Da es aber um die Lesbarkeit von Texten geht, finde ich, sollte ich ihn dennoch hier erwähnen.

Ich treffe immer noch sehr häufig auf Texte im Web, denen man die hohe fachliche Qualität nach ein paar Zeilen schon ansieht, die ich aber dennoch nicht bis zum Ende durchlesen kann. Wenn es nicht auf einen der bereits genannten Fehler zurückzuführen ist, den die Seitenbetreiber gemacht haben, liegt es schlussendlich stets immer entweder an fehlenden Bildern oder daran, dass der Textbereich optisch kaum von seinen umgebenden Elementen zu differenzieren ist.

Daher bitte ich dich, baue Bilder in deinen Text ein. Sie lockern den Lesefluss auf und tragen, wenn sie klug gewählt sind, sogar noch zum besseren Verständnis des Textes an sich bei. Zudem sorge bitte für ein gerüttelt Maß an White Space, also nicht mit Text oder anderen Elementen belegtem Bildschirmplatz. So können sich des Lesers Augen einfacher orientieren und dem Textfluss leichter folgen, als wenn sie stets und ständig gegen die nächste Ablenkung kämpfen müssen.

Achte zudem darauf, Text und Hintergrund stets mit deutlichem Kontrast darzustellen. Bücher sind nicht ohne Grund stets mit schwarzem Text auf weißem Papier bedruckt. Dieser Kontrast darf als optimal gelten. Allzu waghalsige Experimente in dieser Richtung werden fast zwangsläufig dazu führen, dass du Teile deiner Leserschaft verlierst.

Typographie ist mehr als Zeilenabstand und Schriftarten

Damit soll es für heute reichen. Natürlich können diese Tipps nur die Spitze des Eisbergs markieren. Wer also alle Tipps dieses Artikels beachtet, ist noch lange kein Profi. Aber er bietet seinen Leserinnen und Lesern auf jeden Fall schon weit mehr als viele andere Texter oder Seitenbetreiber. Nicht nur im E-Commerce kann das kaufentscheidend und somit umsatzrelevant sein. Auch das Freelancer-Blog wird weit lieber gelesen, wenn es lesbar gestaltet ist. So oder so, du setzt dich vom Wettbewerb ab.

Typografisches Einmaleins für Websites

War Typografie zu den Anfängen des World Wide Webs etwas Nebensächliches, hat es in den letzten Jahren zunehmend an Bedeutung gewonnen. Vor allem dank CSS sind zahlreiche typografische Features möglich, die vor einigen Jahren noch undenkbar oder nur auf Umwegen zu realisieren waren. Doch alles, was möglich ist, muss auch gut umgesetzt werden. Dieses kleine Einmaleins zeigt dir, worauf du achten solltest und wie du deine Website typografisch in den Griff bekommst.

Webfonts statt Systemschriften

Eigentlich versteht es sich mittlerweile ja von selbst: Der Einsatz von Systemschriften ist keine Option mehr, wenn es um zeitgemäße und individuell gestaltete Websites geht. Neben den vielen kommerziellen Anbietern gibt es ebenso viele, bei denen du kostenlos Webfonts für deine Website findest. Allen voran sei da Google Fonts genannt. Aber auch Fontsquirrel hat eine große Auswahl hochwertiger Schriften. Bedenke, dass Google Fonts datenschutzkonform eingebunden werden müssen. Um keine Probleme mit dem Datenschutz zu bekommen, solltest du darauf verzichten, Schriften durch Google hosten zu lassen. Lade sie dir herunter und stelle sie über deinen eigenen Webspace bereit. Dann gibt es keinen Ärger bezüglich der DSGVO. Denn Google Fonts erfasst über die JavaScript-Einbindung personenbezogene Daten.

Das mittlerweile etablierte Dateiformat WOFF2 für Webfonts schafft es zudem, Schriften deutlich besser zu komprimieren als sein Vorgänger. Über zu große Dateien musst du dir also auch keine Sorgen machen.

Schriften richtig kombinieren

In der Regel kommt auf einer Website mehr als eine Schrift zum Einsatz. Für ein abwechslungsreiches Design ist eine gewisse typografische Abwechslung auch durchaus sinnvoll. Hier solltest du natürlich zwei Schriften finden, die gut zueinander passen. Auf der sicheren Seite bist du, wenn du Schriften derselben Familie kombinierst.

So lassen sich die „Source Sans“ und die „Source Serif“ von Adobe aus nachvollziehbaren Gründen immer kombinieren. Ansonsten gilt: Je ähnlicher zwei Schriften sind, desto schwieriger wird es. Wenn du eine Serifenlose ausschließlich in Versalien (Großbuchstaben) verwendest, kannst du fast jede andere Serifenschrift damit kombinieren. Je ähnlicher sich die Schriften sind, desto mehr musst du unter anderem darauf achten, dass die x-Höhe – also der Abstand zwischen Grund- und Mittellinie – der beiden Schriften ähnlich ist.

Auch hier hilft ein Blick zu Google Fonts. Dort werden dir passende Schriftkombinationen zu einer Schriftart angeboten. In jedem Fall gilt: Mehr als zwei Schriften solltest du in der Regel nicht kombinieren. Variationen kannst du durch verschiedene Styles – zum Beispiel fett oder kursiv – erreichen.

Die richtige Größe wählen

Wichtig für die Lesbarkeit einer Schrift ist natürlich die Größe. Eine perfekte Größe lässt sich pauschal für eine Schrift nicht festlegen. Letztendlich muss eine Schriftgröße immer für das jeweilige Gerät passen. Auf Smartphones ist mitunter eine andere Schriftgröße notwendig als auf einem großen Monitor am Schreibtisch.

Per Media Queries solltest du also unterschiedliche Größen definieren, die sich je nach Auflösung des Displays beziehungsweise Größe des Browserfensters richten.

Immer wieder gibt es Diskussionen, welche Einheit für die Angabe einer Schriftgröße denn die passende ist. Meist bietet sich die Einheit „em“ an. „1em“ entspricht bei den meisten Browsern einer Größe von 16 Pixeln. Der Vorteil der „em“-Einheit besteht darin, dass sie relativ ist. Wer Überschriften zum Beispiel immer doppelt so groß dargestellt haben möchte wie Fließtext, wählt „2em“. Ändert sich die Größe des Fließtextes, werden auch Überschriften entsprechend größer dargestellt. Während „em“ immer relativ zum jeweiligen Elternelement definiert ist, gibt es mit „rem“ eine Einheit, die immer relativ zum „<body>“-Element definiert ist.

Mit der Einheit „vw“ (für „view width“) kannst du Schriften auch direkt an der Breite des Browserfensters beziehungsweise Viewports ausrichten. „1vw“ entspricht dabei ein Prozent der Breite des Viewports. Der Vorteil dieser Einheit besteht darin, dass Texte bei veränderter Breite immer mit skalieren – ähnlich wie Bilder, die sich immer an der Breite des Viewports orientieren. Vor allem für Überschriften und kurze Texte bietet sich diese Einheit prima an.

OpenType-Features nutzen

Im klassischen Desktop-Publishing werden OpenType-Features wie Ligaturen, Mediävalziffern und andere typografischen Besonderheiten und Raffinessen bereits lange eingesetzt. Aber dank CSS verwendest du die verschiedenen Möglichkeiten von OpenType-Schriften auch im Webdesign – vorausgesetzt natürlich, die jeweilige Schrift unterstützt diese Features.

Um bestimmte OpenType-Merkmale zu nutzen, musst du diese per CSS aktivieren. Die entsprechenden Eigenschaften beginnen mit „font-variant“. Um zum Beispiel Ligaturen zu verwenden, nutzt du die Eigenschaft „font-variant-ligatures“. Der Wert „common-ligatures“ aktiviert die Standard-Ligaturen einer Schrift. Dazu zählen klassische Ligaturen, bei denen Buchstabenpaare wie „fi“, „fl“ und „ff“ durch entsprechende Ligaturen ersetzt werden.

Daneben gibt es noch sogenannte bedingte Ligaturen, welche oft zur Verschnörkelung verwendet werden. Diese werden mit dem Wert „discretionary-ligatures“ aktiviert. Es gibt zahlreiche weitere Features – zum Beispiel für Zahlenformate und Kapitälchen. Nicht immer unterstützt eine Schrift jedoch alle OpenType-Merkmale.

Interpunktion und Sonderzeichen richtig einsetzen

Wer typografisch alles richtig machen will, achtet natürlich auf die korrekte Interpunktion und die Verwendung richtiger Zeichen. Das fängt bei Anführungszeichen an, die im Deutschen entweder „so“ oder »so« aussehen, aber niemals „so“.

Wenn du Zitate per „<cite>“ oder „<blockquote>“ auszeichnest, kannst du die Anführungszeichen auch per CSS definieren, indem du per „::before“ und „::after“ und der „content“-Eigenschaft die öffnenden beziehungsweise schließenden Anführungszeichen hinterlegst.

Außerdem solltest du den Unterschied zwischen Trenn- und Gedankenstrich berücksichtigen – letzterer ist deutlich länger als der Trennstrich. Dank UTF-8 müssen all diese Zeichen nicht mehr per HTML-Entitys ausgezeichnet werden.

Die hier erwähnten Beispiele zählen schon zur sogenannten Detailtypografie, mit denen ganze Bücher gefüllt sind. Aber wer die hier vorgestellten Regeln und Tipps beachtet, macht schon eine Menge richtig, wenngleich es in der Typografie ziemlich viel gibt, was man falsch machen kann.

Sechs Typosünden in der Web-Typografie

Typografie ist im Web nur zum Teil zu realisieren. CSS erlaubt zwar die Kontrolle über Buchstaben- und Zeilenabstände. Doch wenn es um typografisch korrekte grafisch dargestellte Überschriften, Zitate und Buttons geht, reicht das nicht aus.

ß – bei Großbuchstaben

Dies ist eine typografische Todsünde und muss gegen „ss“ getauscht werden. Wer mehr erfahren möchte, für den hat Dr. Web bereits den passenden Artikel dazu.

Fusstritt

Hier berühren sich bei geschwungenen oder kursiven Schriften die Unterlängen zweier Buchstaben, etwas „g“ und „f“. Leider lässt sich hier kaum etwas tun, als ein anderes Wort oder eine andere Schrift zu benutzen. Ein Vergrößern der Buchstabenabstände innerhalb des Wortes fällt nur unschön auf.

Zum Glück tritt dieser Fehler selten auf, da im Web meist serifenlose Schriften (etwa Arial und Verdana) genutzt werden.
Fusskuss
Dieser Fehler tritt auf, wenn die Zeilenabstände manuell mit CSS oder bei einer Grafik etwa mit Photoshop verkleinert wurden. Die Unterlängen der einen Zeile stoßen dabei an die Oberlängen oder die Großbuchstaben der nächsten Zeile. Das sieht nicht nur unschön aus, ein so geringer Zeilenabstand senkt die Lesbarkeit des Textes deutlich.

Wer den Zeilenabstand nicht vergrößern möchte, kann durch Umstellung der Wörter im Satz versuchen, dem Problem aus dem Weg zu gehen, oder durch leichtes Vergrößern oder Verkleinern der Buchstabenabstände die beiden Wörter weiter auseinanderzurücken.

Falsche Ligaturen

Ligaturen sind Sonderzeichen für nahe zusammenstehende Buchstabenkombinationen wie „fi“ oder „fl“. Um sie zu nutzen, muss die verwendete Schrift diese Zeichen enthalten – und das tut nicht jede. Die meisten Programme wie Photoshop oder Indesign tauschen die Einzelbuchstaben automatisch gegen die Ligaturzeichen aus, sofern eben die Schrift darüber verfügt.

Diese Einstellung lässt sich in beiden Programmen unter dem Palettenmenü der Zeichenpalette überprüfen und einstellen.

Text ohne und mit Ligaturen
Wenn die Schrift über keine Ligaturen verfügt, hilft es nicht, die Buchstaben einfach näher an einander zu schieben. Dies sieht zwar auf den ersten Blick ähnlich aus, ist aber typografisch falsch. Wer nicht auf einen anderen Schriftsatz zurückgreifen kann, sollte für normale Abstände zwischen den Einzelbuchstaben sorgen.

Anführungszeichen

Hier lässt sich viel falsch machen, denn meist wird statt echten Anführungszeichen der Einfachheit halber das Zoll-Zeichen („) genutzt. Wem die deutschen Anführungszeichen zu eintönig sind, kann auch die französische Variante ausprobieren. Diese kann hierzulande auch in beide Richtungen genutzt werden und reißt nicht ganz so große Lücken in die Texte. Mehr zu korrekten Anführungszeichen und den passenden HTML-Codes

Spationieren

Das Spationieren ist für lange Fließtexte kaum ratsam, da dort sehr viele Buchstaben bearbeitet werden müssen. Mit dem Spationieren lässt sich der Buchstabenabstand zwischen zwei Buchstaben angleichen, damit die Abstände gleich und harmonisch aussehen. Dies lohnt sich besonders bei Logos und Überschriften. Wenn aber Antialias-Text mit Photoshop geschrieben wird, zum Beispiel mit den modernen Pixelfonts, müssen hier die Abstände fast immer manuell justiert werden.
Alle Programme der Adobe-Familie erlauben das Spationieren mit „ALT + Pfeil rechts/links“. So lassen sich, wenn der Textcursor vor einem Buchstaben steht, dessen Abstand zum nächsten Nachbarn vergrößern oder verkleinern.

Unten die jeweils bearbeitete Fassung
Diese Feinjustierung ist für lange Fließtexte übertrieben, gerade bei großen Schriften fallen ungleiche Lücken aber stark auf und sollten nach Möglichkeit ausgeglichen werden.
Spationieren lässt sich auch mit CSS Befehlen, der Abstand zwischen den Buchstaben kann vergrößert und verringert werden:

style="letter-spacing:-0.5em;"

sorgt für verkleinerten Buchstabenabstand. Wohingegen

style="letter-spacing:0.3em;"

eine erweiterten Buchstabenabstand produziert. Diese Einstellungen verleiten zum Experimentieren, in der Regel verfügen die Standard-Einstellungen bereits über eine optimale Lesbarkeit.

Serif vs. Sans: Typographie-Grundlagen in Massen freier Fonts (Infografik)

Im Verlaufe der letzten Woche veröffentlichte das Urban Fonts Team eine elegante Infografik, die sich mit dem Thema Serifen gegen Nicht-Serifen beschäftigt. Unter anderem werden die optischen Unterschiede dargestellt, die allerdings den meisten Leserinnen und Lesern wohl bekannt sein dürften.

Allerdings beschränkt sich das UF Team nicht auf diese Information. Stattdessen wird auch auf die Entstehungsgeschichte der Schriften eingegangen. Als professioneller Designer wird einem nicht neu sein, dass Serifen-Schriften immer noch für Printdesign vorgeschlagen werden, während Schriften ohne Serifen vornehmlich im Web zum Einsatz kommen sollten. Daran hält sich die Masse der heutigen Inhaltsersteller dann auch recht eng. Überschriften im Web werden zu 60%, in Fließtext sogar zu 66% mit Schriften ohne Serifen dargestellt.

Schuld ist immer noch, trotz der kommenden hiDPI-Screens, die geringe Auflösung von Bildschirmen im Vergleich zu Papier. Schriftdarstellung auf Papier lässt nicht einzelnen Pixel erkennen, aus denen sich auch in der analogen Welt die Schriften zusammensetzen. Mit 1.000 Punkten pro Zoll liegt das Papier immer noch deutlich selbst über den besten derzeit erhältlichen Smartphone-Screens, die es immerhin schon über die 400 ppi schaffen.

Ich habe die folgende Infografik in meine Infografik-Sammlung – ja, ich habe eine. Sie doch auch, oder? – integriert. Sie gehört zu den kleinen Helferlein, die man beim Kunden gern mal nonchalant zücken kann, wenn wieder ulkige Vorstellungen geäußert werden. Klicken Sie auf die Infografik, wenn Sie zur Quelle springen wollen:

 

Handverlesene Typographie-Infos für Einsteiger

Korrekte Typografie ist das vernachlässigte Stiefkind eines manchen Webdesigners. Man könnte mit diesem Thema Jahre verbringen und hätte immer noch nicht alles Wissenswerte darüber erlernt – so scheint es. Doch für Webentwickler bedeutet Zeit immer auch Geld und stundenlange Lektüre von Büchern, Whitepapers und Aufsätzen zum Thema sind einfach nicht drin.

Die von uns vorgestellten Infografiken verschaffen Ihnen die Grundlagen, um eine gute Entscheidung bei der Auswahl und Kombination von Fonts im Webdesign treffen zu können. Jede Website wird durch eine weise Auswahl und Nutzung von Font-Kombinationen gewinnen und einen wesentlich besseren Eindruck hinterlassen.

Die 10 Gebote der Typographie

Die 10 Gebote der Typografie von DesignMatic.com ist eine Referenz, die sich jeder Webdesigner und Webentwickler in die Lesezeichen speichern sollte. Es wird klar verständlich erklärt, was man auf keinen Fall tun sollte und auch, welche Kombinationen empfehlenswert sind. Vor jedem Projekt angesehen, bringt diese Infografik viel Wissen und typografische Schönheit in ein Projekt.

Die Kunst Schriftarten zu kombinieren

Google Fonts ist eine hervorrage Ressource für Webdesigner und Entwickler. Doch bei mittlerweile über 600 gelisteten Fonts kann die Suche schon mal Zeit in Anspruch nehmen. Wie man die einzelnen Fonts miteinander kombinieren kann, bleibt eine offene Frage und erschwert die Suche zusätzlich ungemein. Die Infografik von FastPrint.co.uk hat sich dieser Thematik angenommen und 20 gut zu kombinierende Fonts herausgesucht. Diese können anhand der Infografik einfach miteinander kombiniert werden, so dass ein ansprechendes Ergebnis erzielt wird.

Welches sind die weltweit wichtigsten Schriftarten?

Obwohl wir alle täglich mit vielen verschiedenen Fonts arbeiten, so wissen wir doch sehr wenig über sie. Die Infografik möchte uns darüber aufklären, wo die einzelnen Schriftarten Ihren Ursprung haben und gibt einen Überblick über die weltweit beliebtesten Schriftarten und Ihre Herkunft.

Schriftarten und welche Psychologie dahintersteckt

Diese Infografik von Crazyegg.com hat das Potential, uns im guten Sinne zu beeinflussen und zum richtigen Punkt zu führen. Die Grafik erklärt anschaulich die Psychologie hinter einer Font-Wahl und geht ins Detail über die verschiedenen Arten der Typografie (Serif, Sans-Serif, Skript etc.). Zudem gibt sie uns Hinweise auf die Emotionen, die wir mit der Wahl eines Fonts hervorrufen können.

Das Periodensystem der Schriftarten

Sollten Sie sich ein bisschen mit Chemie auskennen, dann ist Ihnen das Periodensystem nicht gänzlich unbekannt. Das Periodensystem stellt alle chemischen Elemente mit steigender Kernladung (Ordnungszahl) und entsprechend ihren chemischen Eigenschaften, eingeteilt in Perioden sowie Haupt- und Nebengruppen dar (Wikipedia).

Diese Infografik – erstellt von Cam Wilde – macht das gleiche für Typografie. Es listet alle Schriftbilder zusammen mit ihren Attributen. Beispielsweise zeigt es die Klassifizierung der einzelnen Schriftbilder (dh Grotesk, serif, Skript, Humanist, Slab-serif, etc.) und ordnet sie in eine bestimmte Reihenfolge.

Die Elemente der Typographie

Die Infografik von Thelogocompany.net bereitet sehr schön Grundwissen über Fonts und Typografie auf. Es zeigt Ihnen ein Diagramm von jedem Attribut einer Schriftart. Die Attribute werden im einzelnen vorgestellt und benannt, zum Beispiel die Querlatte, das Kerning, das Bein, die Spur und die Schulter und vieles mehr. Sollten Sie sich mit diesen Dingen nicht auskennen, dann ist diese Infografik genau das Richtige für Sie.

Jetzt braucht es eine Schriftart

Sie benötigen eine Schriftart? Dann kann Ihnen diese einfache Infografik von Julian Hansen bei der Auswahl einer Schriftart für Ihr nächstes Projekt helfen. Beginnen Sie mit der Auswahl einer Projektart (zum Beispiel Logo, Flyer, Einladung, Infografik). Danach folgen Sie den Fragestellungen (Ja oder Nein) und die Grafik führt Sie zu der perfekten Wahl der Schriftart(en) für Ihr Projekt.

Vielleicht erscheint die Grafik etwas umfangreich und kompliziert beim ersten Mal, allerdings führt sie relativ schnell zum Ziel, namentlich den passenden Fonts.

Auch spannend

• Webdesign Trends 2022
• Atomic Design
• Der goldene Schnitt
• Brutalismus im Webdesign
• Neumorphisches Design
• Mehr Webdesign-Kunden finden
• Responsive Design mit Flexbox oder Grid?