Acht wichtige Faktoren der guten Web-Typografie

Gute Typografie kann als ein Grundstein für ein erfolgreiches Webdesign sein. Da so viel Webdesign aus Text besteht, ist das Treffen der richtigen Markierung für Ihre Typografie ein Schlüsselfaktor für den Gesamterfolg Ihrer Website. Die Feinheiten der feinen Typografie können für Anfänger schwierig zu verstehen sein... aber heute haben wir 8 Tipps, die Ihnen helfen sollten, Ihr Gesamtdesign zu verbessern.

Warum ist gute Typografie wichtig?

Wie ich bereits erwähnt, kann eine gute Typografie eine entscheidende Rolle für den Erfolg eines Webdesigns spielen. Es kann helfen, eine visuelle Hierarchie zu generieren. Dies kann Text immer deutlich lesbar sein. Wie das Zitat von Steve Jobs 'Stanford-Abschlussfeier unten zeigt, ist Typografie irgendeine zufällige spontane Entscheidung, es gibt viele Faktoren und Werte, die berücksichtigt werden sollten, um gut zugeschnittene Typografie zu generieren, die nicht nur gut aussieht, sondern auch den funktionalen Vorteil bietet, leichter zu lesen und Wert wegzunehmen.

Ich entschied mich für einen Kalligraphie Kurs, um zu lernen, wie man [Kalligraphie lernt]. Ich habe etwas über Serif- und Sans-Serif-Schriften gelernt, über das Variieren des Abstands zwischen verschiedenen Buchstabenkombinationen und darüber, was großartige Typografie großartig macht. Es war wunderschön. Historisch. Künstlerisch subtil auf eine Weise, die die Wissenschaft nicht erfassen kann. Und ich fand es faszinierend. Nichts davon hatte Hoffnung auf eine praktische Anwendung in meinem Leben. Aber 10 Jahre später, als wir den ersten Macintosh-Computer entwarfen, kam alles auf mich zurück. Und wir haben alles in den Mac gestaltet. Es war der erste Computer mit wunderschöner Typografie. Hätte ich nie in diesem einzigen Kurs in der Hochschule fallen gelassen, hätte der Mac niemals mehrere Schriften oder Schriften mit proportionalem Abstand. Und da Windows gerade den Mac kopiert hat, ist es wahrscheinlich, dass kein PC sie haben würde.

Stellen Sie sicher, dass Ihre Typauswahl etwas bedeutet

Wir werden uns gleich mit der Klassifizierung von Schriftarten und deren Auswahl nur in einer Minute befassen... aber ich möchte, dass Sie überlegen, was Schriftarten für Sie (oder das Projekt, an dem Sie gerade arbeiten) wirklich bedeuten. Sicher, können Sie fast jede Schriftart verwenden, um ein Wort zu erstellen - aber was sagt diese Schriftart tatsächlich über das Wort aus? Mehr als jede andere Designentscheidung, die Sie treffen, geben die von Ihnen getroffenen Typauswahlen Ihrer Site Charakter und Kontext. Wählen Sie sie sorgfältig aus und sie helfen Ihnen, mit den Zuschauern zu kommunizieren oder sie abzulenken.

Untersuchen Sie als schnelles Beispiel die folgenden zwei Variationen des Wortes "könnte" (unten). In Bezug auf Farbe oder Größe ändert sich nichts wesentlich, aber die implizite Bedeutung, die Sie (har har) Änderungen einfach mit der Schriftart und Groß- / Kleinschreibung dramatisch wegnehmen könnten.

Es gibt mehrere Hauptklassen von Schriftarten, aber nur zwei, auf die hauptsächlich im Web verwiesen wird (Serife und Sans-Serif). Ersteres ist eine Schriftart mit Serif, kleinen zusätzlichen Details an den Rändern jedes Buchstabens, während letzteres serifenlos ist (übersetzt ohne Serif für diejenigen von uns, die kein Latein verstehen).

Mehr als jede andere Designentscheidung, die Sie treffen, geben die von Ihnen getroffenen Typauswahlen Ihrer Site Charakter und Kontext.

Beide Schriftarten können gut funktionieren, entweder innerhalb eines Schemas von hauptsächlich diesen oder unter bestimmten Umständen als Kombination. Wenn Sie es jedoch falsch verstehen, kann dies Ihrem Webdesign das völlig falsche Gefühl und Eindruck vermitteln oder einfach nur schlecht aussehen. Betrachten Sie die folgenden Beispiele und den Ton, den die verwendeten Schriften jedem Design gebracht wird:

Sie sollten auch einige andere Aspekte berücksichtigen, z. B. ob Ihr Text in einer Serifenschrift genauso lesbar ist, wie in einer Sans-Serif-Schrift. Kleinere Texte werden in der Regel besser in einer Sans-Serif-Schrift dargestellt, solange Sie mit einigen der anderen Faktoren, die ich heute erwähne, gut spielen.

Es ist auch erwähnenswert, dass das Aufkommen von Google Fonts, Typekit, CSS @ font-face-Diensten und andere Schrift-Ersatz-Technologien eine neue Welle von Schriftarten eingeleitet haben, die möglicherweise nicht in die Kategorien nur Serife oder Sans-Serif fallen. Betrachten Sie die folgenden Beispiele:

Halten Sie die Anzahl der verschiedenen Schriftarten auf ein Minimum

Eine Site, die willkürlich viele verschiedene Schriften verwendet, ist wie eine Person, die viele verschiedene Stimmen in derselben Konversation verwendet. Es scheint eine gute Idee zu sein, aber es besteht die Möglichkeit, dass Sie am Ende einfach wie eine verrückte Person an jemanden, der vorbeikommt, klingen.

Allgemeines Wissen hat Webdesignern einmal geraten, eine einzelne Schriftart auszuwählen und dabei zu bleiben, aber es kann oft visuell viel interessanter sein, zwei oder drei Schriftarten auszuwählen und sie zu verwenden (konsistent und einheitlich!) in sorgfältig gestalteten Kombinationen. Hier kann das Mischen von Serif- und Sans-Serif-Schriften wirklich interessant werden. Betrachten Sie die folgenden Beispiele und wie die Vielfalt der Typen dazu beiträgt, die Designs zum Leben zu erwecken:

Beachten Sie, dass in jedem Design zwar mehr als eine Schriftart verwendet wird, werden sie angemessen und auf jeder Site einheitlich (siehen Sie Tipp 1) verwendet.

Die Anzahl der verschiedenen Schriftarten kann jedoch zu Lesbarkeit und anderen allgemeinen Designproblemen führen. Dies bedeutet also nicht, dass Sie dies tun sollten, nur weil Sie 100 verschiedene Schriftarten verwenden können. Es gibt einige Fälle, in denen viele gleichzeitig verwendete Schriftarten als künstlerische Aussage gut funktionieren, aber es ist im Allgemeinen eine gute Faustregel, die Anzahl der Schriftarten auf ein Minimum zu beschränken.

Warum denn? Eine einfache Antwort ist, dass eine Seite, die willkürlich viele verschiedene Schriften verwendet, wie eine Person ist, die viele verschiedene Stimmen in derselben Konversation verwendet... es scheint eine gute Idee zu sein, aber es besteht die Möglichkeit, dass Sie am Ende einfach wie eine verrückte Person an jemanden, der vorbeikommt, klingen. Wenn Sie die Anzahl der Schriftarten auf einer Seite begrenzen, können Sie Hierarchie und Ton festlegen, ohne sie zu übertreiben.

Natürlich ist es auch wichtig, die richtigen Schriftarten in dieser Auswahl auszuwählen. Bestimmte Schriftarten eignen sich gut für andere bestimmte Schriftarten, insbesondere solche, die in ähnlichen Kategorien wie Serif / Sans-Serif sind. Eine Slab-Schrift passt möglicherweise nicht zu der ultradünnen Schrift, die Sie direkt neben sie gestellt haben. Probieren Sie verschiedene Kombinationen aus, bis Sie die richtigen 2 oder 3 gefunden haben, die für Sie funktionieren.

Zeilenabstand

Der Zeilenabstand kann als ein wichtiger Faktor für ein gutes Typografie-Schema sein. Der Zeilenabstand ist genau das, der Abstand der Zeilen Ihres Textes. Bewegen Sie sie weiter auseinander und es wird im Allgemeinen viel lesbarer und augenschonender. Ihr Zeilenabstand sollte in der Faustregel etwa 0,3 bis 0,5 em größer als Ihre Schriftgröße sein, obwohl er je nach Design unterschiedlich sein kann. Obwohl dies eine Faustregel ist, sollten Sie darüber hinaus erkennen, dass der Zeilenabstand je nach Wahl der Schriftart unterschiedlich sein sollte, da andere Schriftarten möglicherweise mehr oder weniger Zeilenabstand erfordern.

Zum Erkennen, warum ein großzügiger Zeilenabstand bei den meisten Designs ein Muss ist, lesen Sie die folgende Grafik, um ein grundlegendes Verständnis zu gewinnen. Auf dieser Ebene sind beide ziemlich gut lesbar, aber der Abstand ist immer so, da jedes Wort mehr Raum hat, um sich zu unterschieden und von den anderen zu trennen.

Sieht das Beispiel auf der rechten Seite nicht viel einfacher zu lesen aus?

Die Hierarchie

Das Konzept einer visuellen Hierarchie besteht darin, dass die Elemente, die Ihr Leser zuerst sehen und wahrnehmen soll, am prominentesten sind, unabhängig davon, ob dies durch Farbe, Größe, Schriftart oder etwas ganz anderes gemacht wird. Typografie kann eine Rolle in der Gesamthierarchie Ihrer Seite spielen, aber sie kann tatsächlich eine eigene haben. Das einfachste Beispiel, dies zu erklären, ist der Blick auf Text in einem Blog und beachten Sie, wie der Titel im Allgemeinen das größere Beispiel für Text ist.

Sie können verschiedene Faktoren verwenden, um Ihre Hierarchie zu erstellen. Farbe ist ein Beispiel und spielt sich gut in den Kontrast, wobei die Elemente, die Sie Ihr Benutzer zuerst lesen möchten, sind die einfachsten. Die Größe ist jedoch vielleicht das größte Beispiel, da Sie zweifellos eine massive 10em Textzeichenfolge über Ihrem Standardabsatz mit der Größe 1em bemerken werden.

Macintude verwendet das Black Sakura-Thema von ThemeForest. Sie lesen wahrscheinlich den Titel, bevor Sie in den Inhalt eintauchen, nicht wahr?

Weitere Informationen zur visuellen Hierarchie im Webdesign finden Sie in Brandons Artikel zu diesem Thema.

Messung

Messung ist auch ein wichtiger Aspekt. Messen ist die Breite Ihres Textes und ein Faktor, der bestimmen kann, ob Ihr Text zu breit oder zu schmal ist. Messung arbeitet im Allgemeinen mit dem Zeilenabstand zusammen, um den Text für den Endbenutzer leicht lesbar zu machen, indem der Inhalt auf den Bereich zugeschnitten wird, den das menschliche Auge auf seiner Reise über die Seite bequem zurücklegt.

Sofern es sich bei Ihrer Vorlage nicht speziell um ein schmales oder breites Design handelt, möchten Sie Ihren Text wahrscheinlich auf eine konstante Breite beschränken, die dieser einfachen mathematischen Summe entspricht: 30 x Textgröße. Verwenden Sie dies als Grundlage neben Ihrer Polsterung und Ihrer Verwendung des Goldenen Schnitts (sollten Sie sich dafür entscheiden), um eine Breite zu erstellen, die leicht zu lesen ist. Verderben Sie einfach nicht alles, indem Sie den Zeilenabstand verringern oder den Text zu klein machen.

Es ist etwas schwieriger zu definieren, was eine gute Messung ist, da sie sich zwischen verschiedenen Designs sehr stark unterscheiden kann. Breiterer Text passt möglicherweise besser zu einem bestimmten Design.

Ausrichtung

Die Textausrichtung ist ebenfalls ein wichtiger Faktor. Es gibt im Allgemeinen vier Typen, die Sie möglicherweise verwenden könnten: linksbündig, Text zentrieren, rechtsbündig und Text im Blocksatz ausrichten. Die goldene Regel für Typografie lautet, sie lesbar zu machen und Sie haben weniger Kontrolle darüber, wenn Sie sich für die Blocksatz Textausrichtung entscheiden. Blocksatz Textausrichtung ist im Wesentlichen, wo der Text so optimiert wird, dass er die gesamte Breite Ihres Elements ausfüllt und das perfekte Rechteck aus Text erstellt. Das mag in Zeitungen und Printmedien gut sein, aber im Internet es funktioniert nicht so gut. Eine Zeile ist möglicherweise viel überfüllter als eine andere, aber das können Sie nicht speziell kontrollieren.

Skalierung

Sicher, Sie könnten Ihre Typografie möglicherweise auf der 100% -Skala perfektioniert haben, aber einige Benutzer könnten sie möglicherweise mit vergrößertem oder verkleinertem Browserfenster ansehen. Daher muss Ihre Typografie gut skalierbar sein, wenn der Benutzer ein Vergrößern oder Verkleinern befiehlt. Dies ist sehr einfach zu testen und zu manipulieren, indem Sie lediglich Ihren Browser skalieren.

Beachten Sie Ihre Besucher mit Barrierefreiheitsanforderungen, sowohl innerhalb als auch außerhalb der Typografie. Natürlich kann die Skalierung von jedem verwendet werde und die meiste Zeit kann sie tatsächlich zufällig sein. Das Netbook meines Bruders hat das Chrome-Fenster regelmäßig zu weit vergrößert, rein zufällig aufgrund der Geste auf dem Trackpad.

Natürlich ist die Art des gestaffelten Zooms, die in den meisten Browsern möglich ist, nur eine Art. Mac OS X Lion stellt einen wunderschönen iOS-ähnlichen Pinch-Funktion-Zoom vor, das eine Seite vergrößert, als wäre es ein Bild. Man sollte auch diese Art von Zoom berücksichtigen und wie ihr Text aussieht, wenn er im gleichen Layout angezeigt wird, nur bei einer viel näheren Ansicht.

Gewicht

Kurz gesagt, das Gewicht einer Schrift ist, wie dick sie ist. Eine Schrift kann in vielen Gewichten erhältlich sein, von der ultraleichten Haarlinie bis zur ultraschwarzen Platte Das Ändern der Gewichtung eines Textes wird im Allgemeinen verwendet, um eine subtile Definition zur Bestimmung oder Bedeutung hinzuzufügen, z. B. das Hervorheben von Schlüsselwörtern oder eines einleitenden Absatzes, wenn dieser in einem Absatz verwendet wird.

Das Schriftgewicht kann in vielen verschiedenen Szenarien verwendet werden. Sie können es beispielsweise in einem Beitrag verwenden, um Schlüsselwörter oder Phrasen auszuwählen. Die Unterscheidung nach Schriftgewicht bedeutet, dass mehrfache Schriftarten weniger benötigt werden oder andere Faktoren eingeführt werden, die die Lesbarkeit beeinträchtigen können.

Abschließende Gedanken

Typografie ist ein wesentlicher Bestandteil des Designs. Wenn Sie sich ein Blog ansehen, werden Sie feststellen, wie viel Text auf der Seite vorhanden ist und welchen Einfluss dies auf das Gesamtdesign haben kann. Diese acht Faktoren sind für die Typografie am wichtigsten und können die Ästhetik des Designs drastisch verändern.

Zum Auswählen, ob Ihre Schriften Serifen verwenden, ist eine wichtige Entscheidung und wie sie gemischt werden, ist noch wichtiger. Die Anzahl der Schriftarten, der Abstand zwischen den Textzeilen, die Messung, die Ausrichtung und das Gewicht sind ebenfalls wichtige Merkmale. Kurz gesagt, Ihre Typografie sollte gut durchdacht und nicht nur zufällig zusammengewürfelt werden.