Willkommen zur neunten Lektion unserer Web Design for Kids-Serie, die sich mit Typografie beschäftigt.
In diesem Tutorial werden wir untersuchen, worum es bei der Typografie geht und warum sie beim Design so wichtig ist. Wir haben bisher viel über die Benutzererfahrung gesprochen und dieses Tutorial macht da keine Ausnahme. Wir werden hart arbeiten, um sicherzustellen, dass unser Text schön ist und leicht zu lesen!
Vergessen Sie nicht, Fragen in den Kommentaren am Ende dieser Seite zu stellen!
Typografie ist überall. So sehen wir geschriebene Wörter, also überall, wo wir auf Wörter stoßen, sehen wir Typografie. Diese Wörter sind auf Bildschirmen, Papier und Schildern um uns herum zu finden.
Mit der Typografie können wir das „Look and Feel“ dieser Wörter ändern und ihre Auswirkungen auf den Leser verändern. Das Design Von Wörtern werden unsere Benutzer häufig betroffen sein, bevor sie überhaupt die Möglichkeit erhalten, unseren Inhalt zu lesen. Daher ist es wichtig, dass das Design und das allgemeine Gefühl unserer Typografie mit dem Inhalt des Inhalts übereinstimmen.
In der letzten Lektion haben wir darüber gesprochen, wie wichtig der Inhalt ist. Es spielt keine Rolle, wie gut unsere Website aussieht, wenn sie keine Informationen enthält, die jeder lesen möchte! Wie wir diese Wörter dem Benutzer präsentieren, wird jedoch genauso Teil der Nachricht wie die Wörter selbst.
Typografie beinhaltet eine ziemlich ähnliche Terminologie.
EIN Schrift ist das allgemeine Design einer Sammlung von Zeichen (Wörtern und Symbolen), während a Schriftart ist eine bestimmte Größe, Gewichtung (Stärke der Buchstaben), Stil und Verwendung einer Schrift.
Unser Tuts + Town-Design verwendet a Schrift genannt "Open Sans". Wir verwenden unterschiedliche Größen und Gewichte dieser Schrift, die uns sagen, welche Schriftarten in die Seite laden.
Obwohl wir Schriftarten auf unserer Website verwenden, basieren diese Schriftarten auf Schriftarten, die jemand viel Zeit mit dem Entwerfen verbracht hat.
Eine Schrift kann sein serif oder serifenlos. EIN serif wird am besten als die Enden oder Erweiterungen an den Enden einiger Buchstaben beschrieben.
Eine Serifenschrift hat folgende 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, was auf unserer Website verwendet werden soll Gefühl Wir versuchen, die am besten lesbare Option zu finden, wenn wir unser Layout und die Textmenge berücksichtigen.
Eine Serifenschrift ist allgemein leichter auf Papier zu lesen oder wenn viel Text vorhanden ist, während eine Serifenlose auf einem Bildschirm oder mit insgesamt weniger Text möglicherweise besser ist.
Um die bestmögliche Typografie für unsere Websites zu erhalten, müssen wir darüber nachdenken, was jede Schrift von einer anderen unterscheidet. Es gibt viele verschiedene Teile jeder Schrift, die jemand ausführlich entworfen und überlegt hat.
Es sind diese Details, die die Einzigartigkeit jedes einzelnen ausmachen, und es liegt an uns zu entscheiden, welches für verschiedene Designs und Situationen am besten geeignet ist.
Werfen wir einen kurzen Blick auf einige Details von Schriften, um besser zu verstehen, wie diese unsere Designs verbessern (oder verschlimmern) können:
Es ist nicht nötig, diese Teile jetzt auswendig zu lernen, aber wissen Sie einfach, dass Variationen davon dazu beitragen, dass jede Schrift zu etwas Besonderem wird.
Wie bei den meisten Dingen, die mit der Typografie zu tun haben, ist der Abstand äußerst wichtig, um die beste Erfahrung für unsere Benutzer zu erzielen. Der Abstand zwischen jedem Buchstaben, zwischen Wörtern und zwischen Wortzeilen kann einen großen Unterschied machen Lesbarkeit.
Zu wenig Abstand gibt uns Buchstaben und Wörter, die zu dicht sind, um sie gut lesen zu können, während zu viel Abstand alles zerbricht und ebenso schwer zu lesen und zu folgen ist.
Schriften haben einen eigenen Abstand, der im Allgemeinen sehr schön zu lesen ist. Aber werfen wir einen Blick darauf, wie der Abstand bezeichnet wird und wie Änderungen in unserem CSS vorgenommen werden müssen, falls dies in unseren Designs erforderlich ist.
Verfolgung ist der allgemeine Abstand zwischen allen Zeichen (Buchstaben) in einem Textstück.
Wir können dies in unserem CSS ändern, wenn wir möchten, indem wir das verwenden Buchstaben-Abstand
Eigentum:
h1 Buchstabenabstand: 5px;
Wortabstand
Eigentum:h1 Wortabstand: 15px;
Kerning ist der Abstand zwischen zwei Zeichen.
Das Kerning zwischen jedem Zeichenpaar wird vom Schriftgestalter geändert, da einige Buchstaben näher zusammen und einige weiter voneinander entfernt aussehen. Dies ist völlig darauf zurückzuführen, dass die Dinge ausgewogen aussehen, und dies ist nur mit CSS allein schwierig.
Führend bezieht sich auf den Abstand zwischen Satzzeilen.
Wir können Anpassungen an diesem Abstand vornehmen, indem wir einen Wert angeben, der die voreingestellte Standardeinstellung der verwendeten Schriftart durch ändert Zeilenhöhe
Eigentum.
p Zeilenhöhe: 2;
Ein Wert von 2
Hier wird sichergestellt, dass unser Leading doppelt so hoch ist wie der Standardwert für diese Schriftart.
Wenn ein einzelnes Wort in einer Zeile (aaaah) am Ende eines Textblocks verbleibt, wird es als a bezeichnet Witwe.
Nehmen wir an, die Blöcke im folgenden Bild repräsentieren Wörter in Spalten. Die Witwe ist der blaue Block, der am Ende der Spalte alleine sitzt, denn hier endet der Satz:
Ein Waise ist ein einzelnes Wort, das in einer Zeile am Anfang einer Spalte steht und normalerweise neben der Spalte steht, in der sich der größte Teil des zugehörigen Textes befindet.
Witwen und Waisen gelten als schlechte Typografie, weil sie ablenkend wirken können und das Leseerlebnis insgesamt verschlechtern.
Es gibt verschiedene Ansätze, um eines dieser Probleme zu beheben, wenn dies auf unseren Websites der Fall ist:
Wir können wählen ausrichten unser Text auf der linken Seite (Standardeinstellung im Web für von links nach rechts geschriebene Sprachen wie Englisch), in der Mitte oder nach rechts.
Text im Web sollte im Allgemeinen linksbündig ausgerichtet sein (wiederum für von links nach rechts geschriebene Sprachen), da dies das Lesen von Lesern und Lesern dieser Sprachen ist.
Die Zentrierausrichtung wird häufig für Titel und Überschriften verwendet, wodurch sie sich stärker vom Haupttext einer Seite abheben. Wir können dies in unserem CSS mit der Textausrichtung
Eigenschaft zum Beispiel:
h1 text-align: center;
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 einen großen Textbereich im Web nicht zentrieren, da dies für unsere Benutzer viel schwieriger zu lesen ist. Mit dem zentrierten Text werden von Zeile zu Zeile sehr unterschiedliche Breiten erzeugt, sodass das Auge nur schwer folgen kann.
Einige Sprachen (z. B. Hebräisch) werden von rechts nach links geschrieben, sodass die Standardausrichtung nach rechts ausgerichtet ist.
Als Designer können wir auch festlegen, dass bestimmte kleine Textabschnitte rechtsbündig angeordnet sind, sodass er etwas mehr hervorgehoben werden kann, wie Bildunterschriften. Diese Bildunterschriften sind Titel oder Beschreibungen für Bilder mit eigenem HTML-Element, figcaption
.
Die obige Ausrichtung erfolgt durch Deklaration Recht
zu dem Element in einem CSS-Dokument:
figcaption text-align: right;
Ein Großteil der von uns entworfenen Typografie ist darauf zurückzuführen, dass der Inhalt selbst gelesen wird und bei Bedarf Anpassungen vorgenommen werden. Es gibt jedoch einige allgemeine Tipps, mit denen wir uns mit unseren Typografie-Fähigkeiten vertraut machen können.
EIN Schriftgröße
weniger als 16px
Der Text, der den Großteil unseres Inhalts ausmacht, wird normalerweise als zu klein und als schwer lesbar auf Bildschirmen angesehen.
Wir haben viel darüber geredet visuelle Hierarchie im vorherigen Tutorial zu Design-Grundlagen. Durch das Festlegen der Hierarchie für den Text in unserem gesamten Design wird die Navigation der Website durch das Trennen verwandter Inhalte und das Hervorheben der wichtigsten Elemente erleichtert.
Der Text auf unserer Tuts + Town-Site hat mehrere verschiedene Hierarchieebenen, wobei der Titel die wichtigste ist, gefolgt von den Geschäftskategorien und spezifischen Shops, und endet mit dem Abschnitt „Erstellt von“ ganz unten.
Die Hierarchie wird hier durch unterschiedliche Größen, Farben und Positionen auf der Seite festgelegt.
Wir werden im nächsten Tutorial ausführlicher über Farben und Kontrakte sprechen. Informieren Sie sich also über die Farbe Ihres Textes und darüber, ob er mit der Hintergrundfarbe kollidiert oder nicht, was das Lesen erschwert.
Hier ist ein Beispiel für einen schlechten Kontrast links und einen besseren Kontrast rechts:
Der hellrosa Text auf einem dunklen türkisfarbenen Hintergrund auf der linken Seite zeigt die Auswirkungen eines schlechten Kontrasts. Der Text ist schwer zu lesen, wirkt etwas verschwommen und schmerzt in den Augen!
In der Regel sollten nicht mehr als zwei bis drei verschiedene Schriftarten pro Projekt verwendet werden. Gepaarte Schriftarten sollten zueinander passen und das Gesamtgefühl und die Ideen hinter dem Design unterstützen.
Nicht alle Schriftarten funktionieren gut im Web und eignen sich nur für den Druck. Glücklicherweise bieten Google Fonts, mit denen wir Open Sans in unsere Tuts + Town-Site importiert haben, eine erstaunliche Liste an für das Internet geeigneten Fonts.
In diesem Tutorial haben wir die Typografie genau angesprochen, einen Überblick über die Unterschiede zwischen verschiedenen Teilen einer Schrift und andere gegeben und abschließend einige allgemeine Tipps zum Umgang mit Text und Schriftarten im Web enthalten. Alles, um ein Endziel zu erreichen: unsere Inhalte lesbarer zu machen.
Im Folgenden werden einige allgemeine Regeln für die Verwendung von Farben im Web beschrieben und die Informationen, die wir unseren Benutzern mitteilen, basierend auf unserer allgemeinen Farbauswahl.
Wir sehen uns in der Stadt!