() translation by (you can also view the original English article)
Willkommen zur neunten Lektion unserer Web Design for Kids Serie, die sich mit Typografie beschäftigt.
In diesem Tutorial werden wir uns ansehen, worum es bei Typografie geht und warum es im Design so wichtig ist. Wir haben bis jetzt viel über die Erfahrung des Benutzers gesprochen und dieses Tutorial wird keine Ausnahme sein; Wir werden hart arbeiten, um sicherzustellen, dass unser Text schön und leicht zu lesen ist!
Vergessen Sie nicht, Fragen im Kommentarbereich am Ende dieser Seite zu stellen!
Was ist Typografie genau?
Typografie ist überall. So sehen wir geschriebene Wörter, und überall, wo wir auf Wörter stoßen, sehen wir Typografie. Diese Wörter können auf Bildschirmen, Papier und Zeichen überall um uns gefunden werden.
Mit der Typografie können wir das "Look and Feel" dieser Wörter verändern und deren Auswirkungen auf die Leser verändern. Das Design von Wörtern wirkt sich häufig auf unsere Benutzer aus, bevor sie überhaupt eine Chance bekommen, unseren Inhalt zu lesen. Daher ist es wichtig, dass das Design und das Gesamtbild unserer Typografie mit dem Gefühl des Inhalts selbst übereinstimmen.
In der vorherigen Lektion haben wir darüber gesprochen, wie wichtig Inhalte sind. Es ist schließlich egal, wie gut unsere Seite aussieht, wenn sie keine Informationen enthält, die jemand lesen möchte! Wie wir diese Worte dem Benutzer präsentieren, wird jedoch ebenso Teil der Botschaft wie die Worte selbst.
Schriftart gegenüber Schriften
Typografie beinhaltet eine ziemlich ähnliche Terminologie.
Eine Schriftart ist das allgemeine Design einer Sammlung von Zeichen (Wörter und Symbole), während eine Schriftart eine bestimmte Größe, Gewicht (wie dick die Buchstaben sind), Stil und Verwendung einer Schriftart.
Unser Tuts+ Town Design verwendet eine Schriftart namens "Open Sans". Wir verwenden verschiedene Größen und Gewichte dieser Schrift, die uns sagen, welche Schriftarten in die Seite geladen werden sollen.
Während wir Schriften auf unserer Website verwenden, basieren diese Schriften auf Schriftarten, für die jemand viel Zeit aufgewendet hat.
Serif gegen Sans-Serif
Eine Schriftart kann serif oder serifenlos sein. Eine Serif wird am besten als die Schwänze oder Erweiterungen an den Enden einiger Buchstaben beschrieben.
Eine Serifenschrift hat diese Erweiterungen:
Open Sans ist eine serifenlose Schrift; Bedeutung ohne Serif. Eine serifenlose Schrift hat keine Erweiterungen wie der obige Buchstabe:
Es gibt keine richtige oder falsche Antwort auf unsere Website, aber wir möchten, dass sie dem gesamten Design und dem Gefühl entspricht, das wir erreichen wollen, und dass sie die beste Lösung darstellt, wenn man unser Layout und die Menge an Text berücksichtigt.
Eine Serifenschrift ist in der Regel leichter auf Papier zu lesen oder wenn viel Text vorhanden ist, während eine Sans-Serif auf einem Bildschirm besser sein kann oder insgesamt weniger Text enthält.
Die Teile von Schriften
Um die beste Typografie für unsere Websites zu erhalten, müssen wir darüber nachdenken, was jede Schriftart von anderen unterscheidet. Es gibt viele verschiedene Teile jeder Schrift, die jemand entworfen und ausführlich durchdacht hat.
Es sind diese Details, die die Einzigartigkeit jedes Einzelnen ausmachen, und es liegt an uns, zu entscheiden, welche für verschiedene Designs und Situationen am besten geeignet ist.
Werfen wir einen Blick auf einige Details von Schriften, um besser zu verstehen, wie diese unsere Designs verbessern (oder verschlechtern) können:
Sie müssen sich diese Teile jetzt nicht unbedingt merken, aber wissen Sie nur, dass Variationen dazu beitragen, jede Schrift zu etwas Besonderem zu machen.
Abstand
Wie bei den meisten Dingen, die mit der Typografie zu tun haben, ist der Abstand sehr wichtig, wenn wir die beste Erfahrung für unsere Benutzer erstellen. Der Abstand zwischen jedem Buchstaben, zwischen Wörtern und zwischen Wortfolgen kann einen großen Unterschied für die Lesbarkeit ausmachen.
Nicht genügend Abstand gibt uns Buchstaben und Wörter, die zu gut gebündelt sind, um zu gut zu lesen, während zu viel Abstand alles aufreißt und genauso schwer zu lesen und zu folgen ist.
Schriftarten haben ihre eigenen Abstände, die im Allgemeinen ziemlich gut zu lesen sind, aber werfen wir einen Blick darauf, wie diese unterschiedlichen Abstände heißen und wie wir Änderungen in unserem CSS vornehmen können, falls wir es jemals in unseren Entwürfen tun sollten.
Kerning und Tracking
Kerning ist der Abstand zwischen den einzelnen Zeichen.
Jede Schriftart, die wir verwenden, hat bereits eigene Kerning-Regeln, aber wir können Anpassungen in unserem CSS vornehmen, indem wir die Eigenschaft letter-spacing verwenden:
1 |
h1 { |
2 |
letter-spacing: 5px; |
3 |
}
|
Tracking ist der Abstand zwischen jeder Gruppe von Zeichen oder Wörtern.
Wenn die Schriftart nicht genügend Nachverfolgung bietet, können wir Änderungen an diesem Abstand über die word-spacing vornehmen:
1 |
h1 { |
2 |
word-spacing: 15px; |
3 |
}
|
Führen
Leading bezieht sich auf den Abstand zwischen Zeilen von Sätzen.
Wir können Anpassungen an diesem Abstand vornehmen, indem wir einen Wert angeben, der die Standardvorgabe der verwendeten Schriftart über die Eigenschaft line-height ändert.
1 |
p { |
2 |
line-height: 2; |
3 |
}
|
Ein Wert von 2 hier stellt sicher, dass unser Zeilenabstand doppelt so hoch ist wie der Standardbetrag für diese Schriftart.
Witwen und Waisen
Wenn ein einzelnes Wort in einer Zeile (aaaah) am Ende eines Textblocks steht, wird es als Witwe bezeichnet.
Nehmen wir an, dass die Blöcke im folgenden Bild Wörter innerhalb von Spalten darstellen. Die Witwe ist der blaue Block, der am Ende der Kolumne sitzt, denn dort endet der Satz:
Ein Waisenkind ist ein einzelnes Wort, das in einer eigenen Zeile am Anfang einer Spalte existiert und normalerweise neben der Spalte lebt, in der sich der meiste verwandte Text befindet.
Witwen und Waisen werden wegen ihrer Ablenkung als schlechte Typografie betrachtet, was das Leseerlebnis insgesamt verschlimmert.
Es gibt mehrere verschiedene Ansätze, die wir ergreifen können, um eines dieser Probleme zu beheben, wenn dies auf unseren Websites geschieht:
- Passen Sie die Schriftgröße an
- Passen Sie die Breite des Containers an
- Text hinzufügen oder entfernen
- oder passen Sie das Unterschneiden oder Verfolgen des Textes an
Ausrichtung
Wir können unseren Text nach links ausrichten (Standard im Web für Sprachen, die von links nach rechts geschrieben werden, z. B. Englisch), in der Mitte oder rechts.
Links
Text im Internet sollte generell linksbündig sein (wiederum für Sprachen, die von links nach rechts geschrieben sind), weil die Sprecher und Leser dieser Sprachen das Lesen gewohnt sind.
Center
Bei Titeln und Überschriften wird häufig die Ausrichtung in der Mitte verwendet, damit sie sich besser vom Haupttext einer Seite abheben. Wir können dies in unserem CSS mit der Eigenschaft text-align tun, zum Beispiel:
1 |
h1 { |
2 |
text-align: center; |
3 |
}
|
Text, der auf diese Weise ausgerichtet ist, kann normalerweise auf Schildern und Flyern gefunden werden, die versuchen, die Aufmerksamkeit von jemandem auf sich zu ziehen, aber wir sollten nicht einen großen Textkörper im Web zentrieren, weil es für unsere Benutzer viel schwieriger zu lesen ist. Mittig ausgerichteter Text erzeugt von Zeile zu Zeile sehr unterschiedliche Breiten, was es für das Auge schwieriger macht, zu folgen.
Recht
Einige Sprachen (z. B. Hebräisch) werden von rechts nach links geschrieben, sodass die richtige Ausrichtung die Standardausrichtung ist.
Als Designer können wir auch auswählen, dass bestimmte kleine Textblöcke rechtsbündig ausgerichtet werden, damit sie etwas mehr hervortreten, wie Bildunterschriften. Diese Untertitel sind Titel oder Beschreibungen für Bilder mit ihrem eigenen HTML-Element figcaption.
Die obige Ausrichtung erfolgt durch Deklarieren right des Elements in einem CSS-Dokument:
1 |
figcaption { |
2 |
text-align: right; |
3 |
}
|
Allgemeine Hinweise
Ein Großteil der Typografie, die wir entwerfen, wird dadurch entstehen, dass wir den Inhalt selbst lesen und Anpassungen nach Bedarf vornehmen. Es gibt jedoch einige allgemeine Tipps, die uns helfen können, mit unseren typografischen Fähigkeiten vertrauter zu werden.
Schriftgröße und visuelle Hierarchie
Eine font-size von weniger als 16px auf dem Text, der den Großteil unseres Inhalts ausmacht, wird in der Regel als zu klein und auf den Bildschirmen schwer lesbar angesehen.
Wir haben viel über die visuelle Hierarchie im vorherigen Tutorial zu den Grundlagen des Designs gesprochen. Die Festlegung der Hierarchie für den Text während des gesamten Designs stellt sicher, dass die Website einfacher zu navigieren ist, indem zusammenhängende Inhalte getrennt und hervorgehoben werden, was am wichtigsten ist.
Der Text auf unserer Website von Tuts+ Town weist mehrere Hierarchieebenen auf, wobei der Titel am wichtigsten ist, gefolgt von den Geschäftskategorien und bestimmten Geschäften, und am Ende ganz unten mit dem Abschnitt "erstellt von" endet.
Die Hierarchie hier wird durch verschiedene Größen, Farben und Positionen auf der Seite festgelegt.
Kontrast
Im nächsten Tutorial werden wir uns ausführlicher mit Farben und Kontrasten befassen. Sie sollten also wissen, welche Farbe Ihr Text hat und ob er mit der Hintergrundfarbe kollidiert oder nicht, was das Lesen erschwert.
Hier ist ein Beispiel für schlechten Kontrast links und besseren Kontrast rechts:
Der helle rosa Text auf einem dunklen Türkishintergrund auf dem links zeigt die Auswirkung des schwachen Kontrastes. Der Text ist schwer zu lesen, sieht etwas verschwommen aus und schmerzt unsere Augen!
Anzahl der Schriftarten
In der Regel empfiehlt es sich, nicht mehr als zwei bis drei verschiedene Schriftarten pro Projekt zu verwenden. Gepaarte Schriftarten sollten zueinander passen und beide unterstützen das allgemeine Gefühl und die Ideen hinter dem Design.
Webschriftarten
Nicht alle Schriftarten funktionieren gut im Internet und eignen sich am besten nur für den Druck. Glücklicherweise stellen Google Fonts, mit denen wir Open Sans in unsere Tuts + Town-Site importiert haben, eine erstaunliche Liste von Fonts bereit, die für das Web geeignet sind.
Einpacken
In diesem Tutorial haben wir uns mit der Frage beschäftigt, welche Typografie genau ist, wie unterschiedliche Teile einer Schrift sie von anderen unterscheiden können, und haben einige allgemeine Tipps für die Arbeit mit Text und Schriftarten im Internet gegeben. Alles um ein ultimatives Ziel zu erreichen: um unsere Inhalte leserlicher zu machen.
Als nächstes werden wir uns mit einigen allgemeinen Regeln befassen, die mit der Verwendung von Farben im Web und der Nachricht, die wir unserem Benutzer mitteilen, basierend auf unserer allgemeinen Farbauswahl, umgehen.
Wir sehen uns in der Stadt!
