• Haupt / Wie Man

Die Regeln der reaktionsschnellen Web-Typografie

Responsive Web-Typografie ist schwierig - Sie müssen sowohl über Design-Chops als auch über technisches Know-how verfügen. So schwierig es auch sein mag, es ist keine Option, etwas falsch zu machen, da Typografie der Eckpfeiler des Webdesigns ist.

Wie bekommen Sie sowohl das Design als auch den Code richtig? Wie kommunizieren Ihre Entwickler mit pixelschiebenden Designern? Wie können Ihre Designer nonchalante Entwickler dazu bringen, sich für Typografie zu interessieren? Der schnellste und einfachste Weg besteht darin, Ihre Designer und Entwickler dazu zu bringen, dieselbe Sprache zu sprechen, sich gegenseitig für ihr Handwerk zu respektieren und sowohl die Prinzipien als auch die Einschränkungen der Web-Typografie zu verstehen.

Dieser Artikel soll sowohl Designern als auch Entwicklern die Grundlage bieten, auf der sie mit der Kommunikation zum Thema Typografie beginnen können. Wir werden die notwendigen Gestaltungsprinzipien behandeln und praktische Lösungen für untersuchen reaktionsschnelle Typografie .

Was ist gute Typografie?

'Gut' ist immer subjektiv; Es ist kein fester Anker, an den wir die Kommunikation hängen können. Damit Designer und Entwickler effektiv kommunizieren können, müssen wir zunächst über einen gemeinsamen Nenner sprechen, den beide Seiten verstehen können. Dieser Nenner ist der Zweck der Typografie.

Typografie ist das Erscheinungsbild von Text; Wir verkleiden den Text. Der Zweck des Anziehens besteht darin, den Träger ansprechend genug zu machen, um ein Gespräch anzulocken, aber nicht so viel Aufmerksamkeit zu erregen, dass die andere Partei vom Gespräch abgelenkt wird.

Ebenso besteht der Zweck der Typografie darin, den Lesern zu ermöglichen, sich auf den Inhalt des Textes zu konzentrieren und in ihn einzutauchen. Gute Typografie ist per Definition eine Typografie, die dem Text hilft, seinen Kommunikationszweck zu erfüllen.

Zwei Dinge müssen passieren, damit sich die Leser konzentrieren und in den Text eintauchen können. Erstens muss die Typografie angemessene (wenn überhaupt) Emotionen vermitteln. Zweitens muss der Text leicht lesbar sein. Dies bringt uns zu vier wesentlichen Eigenschaften, die Sie benötigen, um richtig zu machen.

• Schriftfamilie
• Schriftgröße
• Linienhöhe (auch als führend bezeichnet)
• Textbreite (auch als Textmaß bezeichnet)

Wenn Sie die richtige Schriftfamilie finden, können die zugrunde liegenden Emotionen des Textes durchscheinen. Wenn Sie die anderen drei Eigenschaften richtig einstellen, ist Ihr Text leicht zu lesen. Zum größten Teil sind Designer hervorragend darin, die richtige Schriftfamilie zu finden. Im weiteren Verlauf dieses Artikels konzentrieren wir uns auf die anderen drei Faktoren.

Die Kunst des lesbaren Textes

Der erste Schritt in einem Projekt ist das Festlegen der Schriftgröße , Zeilenhöhe und Breite Ihres Körpertextes. Dieser Vorgang wird als Satz bezeichnet. Beginnen Sie mit dem Satz mit einer Seite, die Informationen enthält, die ein Benutzer benötigt. Diese Seite sollte so weit wie möglich mehrere Elemente enthalten, wie z. B. h1, h2, h3, Textkörper und Beschriftungen, für die Sie bewusst entscheiden müssen, was für Ihr Design funktioniert. Je mehr Elemente Ihre Seite enthält, desto besser sind Ihre Chancen, ein Typschema festzulegen, das auf der ganzen Linie funktioniert.

Wenn Sie die auswählen Schriftgröße , Zeilenhöhe und messen Sie für Ihren Körpertext, stellen Sie sicher, dass Sie echten Inhalt verwenden. Wenn Sie keinen tatsächlichen Inhalt haben, verwenden Sie Text aus Wikipedia anstelle von Lorem Ipsum.

Sie müssen sich auch in die gleiche Situation versetzen, für die Sie gesetzt haben, da der Abstand zwischen den Augen eines Lesers und dem Bildschirm für verschiedene Geräte unterschiedlich ist. Wenn Sie für ein mobiles Gerät setzen, überprüfen Sie Ihre Ausgabe über ein Telefon. Wenn Sie einen Laptop setzen, setzen Sie sich mit Ihrem Laptop an Ihren Schreibtisch und so weiter.

Sobald Sie sich in der richtigen Umgebung eingelebt haben, starten Sie Ihren Satzprozess, indem Sie zuerst auswählen Schriftgröße , gefolgt von Maßnahme und schließlich Zeilenhöhe . Denken Sie daran, dass es keine perfekte Kombination gibt. Schauen Sie sich einfach andere Seiten an, die Ihrer Meinung nach eine gute Typografie haben, und Sie werden feststellen, dass keine von ihnen dieselbe verwendet Schriftgröße , Zeilenhöhe und messen. Was Sie also anstreben, ist einfach Text, der leicht zu lesen ist.

Das Einstellen der richtigen Größen ist schwieriger schriftlich zu erklären, daher habe ich einige Videos erstellt, die Ihnen dabei helfen sollen Schriftgröße , messen und führen .

Im Folgenden finden Sie einige schnelle Richtlinien, mit denen Sie sicherstellen können, dass Sie eine gute Schriftgröße, Zeilenführung und Messgröße haben.

Ihre Schrift ist zu klein, wenn:

• Sie müssen sich konzentrieren, um den Text zu lesen
• Du musst deine Augen zusammenkniffen
• Sie haben den Drang zu zoomen

Ihre Schrift ist zu groß, wenn:

• Sie bemerken Buchstabenformulare, anstatt den Inhalt zu lesen
• Sie können jeweils nur ein bis drei Wörter lesen
• Sie haben den Drang zu verkleinern

Ihr Textmaß ist zu lang, wenn:

• Sie müssen den Kopf drehen, um den Text zu lesen
• Sie verlieren auf halbem Weg die Konzentration

Ihr Textmaß ist zu kurz, wenn:

• Sie sind irritiert, wenn der Text in die nächste Zeile übergeht
• Ihre Augen werden müde, wenn Sie schnell nach links und rechts springen

Ihre Führung ist zu eng, wenn:

• Der Text fühlt sich dicht und überwältigend an
• Sie haben versehentlich die falsche Textzeile gelesen

Ihr Vorsprung ist zu groß, wenn:

• Sie werden durch den Leerraum zwischen den Wortreihen abgelenkt

Denken Sie immer an die Definition guter Typografie: Sie streben nicht nach Perfektion, sondern suchen einfach nach Text, der leicht zu lesen ist. Währenddessen möchten Sie Ihre Satzentscheidungen mit Ihrem Publikum testen (Freunde und Kollegen sind ebenfalls großartige Tester), um sicherzustellen, dass Sie Recht haben. Fahren Sie erst mit dem Festlegen der Größe anderer Elemente fort, wenn Sie den Texttext vollständig gesetzt haben.

Andere Elemente setzen

Viele Designer und Entwickler haben sich für das entschieden Schriftgröße für Elemente wie h1 und h2 visuell und hoffe einfach, dass diese magischen Zahlen in ihrem Design gut funktionieren. Aber es ist nicht nötig, Zahlen einfach aus der Luft zu ziehen. Typografen verwenden seit Jahrhunderten Typografieskalen, um dabei zu helfen. Sie wählen eine Zahl aus der Typografieskala als Größe Ihres Elements aus. Leider können diese Skalen nicht direkt für das Web verwendet werden, da sie für das Druckdesign entwickelt wurden.

Tim Brown, ein Experte auf dem Gebiet der Typografie, entwickelte eine Lösung, die als modulare Skala bezeichnet wird. Es funktioniert genau wie eine Typografieskala, außer dass Sie die modulare Skala mit dem Text erstellen, für den Sie sich entschieden haben.

Um die modulare Skala zu erstellen, nehmen Sie den Textkörper Schriftgröße (auch als Basisschriftgröße bezeichnet) und multiplizieren Sie es mehrmals mit einem Verhältnis, bis Sie eine Skala erhalten. Oft wird das von Ihnen verwendete Verhältnis von Musik abgeleitet (da Musik Wurzeln in der Harmonie hat). Oben sehen Sie ein Beispiel für eine Skala, die mit Hilfe von a erstellt wurde modularer Skalenrechner .

Wenn Sie mit dem Aufbau der modularen Skala fertig sind, können Sie mit dem Satz der restlichen Elemente fortfahren und eine Zahl aus der Skala als Ihre auswählen Schriftgröße . Stellen Sie dann die Führung ein und messen Sie mit demselben Vorgang, bis Sie eine gute Balance zwischen lesbaren Elementen erhalten.

Vertikaler Rhythmus

Der nächste Schritt besteht darin, die einzelnen Elemente mithilfe einer als vertikaler Rhythmus bezeichneten Technik miteinander zu verbinden. Damit ein Element harmonisch in das nächste fließt, müssen wir das, was sie verbindet, optimieren: den Leerraum. Dieser Leerraum muss groß genug sein, um ein Element deutlich vom nächsten zu unterscheiden, aber er muss klein genug sein, um sicherzustellen, dass der Fluss nicht unterbrochen wird.

Wie viel Leerraum sollten Sie verwenden? Viele Designer wählen eine Figur wie 10px, die für sie leicht zu entwerfen ist. Andererseits neigen viele Entwickler dazu, eine Zufallszahl (wie 6px) entweder aus einem anderen Rastersystem oder einem Artikel, den sie online gelesen haben, herauszuholen. Kein Wunder, dass diese beiden nicht kommunizieren können.

Wie Sie sich vielleicht vorstellen können, müssen Sie sich nicht auf eine magische Zahl für den Leerraum verlassen. wir können ein Vielfaches der verwenden Zeilenhöhe Wert unseres Körpertextes. Dies liegt daran, dass wir Leerzeichenmuster im Text instinktiv erkennen. Je stärker das Muster, desto sicherer fühlen wir uns und desto einfacher ist es, unsere Gedanken in den Inhalt eintauchen zu lassen.

Um den vertikalen Rhythmus zu verwenden, müssen Sie lediglich:

1. Stellen Sie den Leerraum zwischen den Elementen auf ein Vielfaches der Basis ein Zeilenhöhe
2. Stellen Sie die Zeilenhöhe aller anderen Elemente auf ein Vielfaches der Basis Zeilenhöhe

Das betreffende Vielfache muss keine Ganzzahl sein. Sie können Werte wie 0,5x und 1,25x der Basis verwenden Zeilenhöhe um Ihnen mehr Flexibilität zu bieten. Diese Werte funktionieren, weil der vertikale Rhythmus das Prinzip der Wiederholung verwendet.

Grundlinienraster oder nein?

Immer wenn wir den vertikalen Rhythmus erwähnen, kommt unweigerlich das Konzept eines Grundlinienrasters ins Spiel. Obwohl das Grundlinienraster möglicherweise hilfreich sein kann, handelt es sich meistens um ein Zugunglück, da Anfänger so viel Energie darauf konzentrieren, Text zwischen (oder auf) Grundlinien zu platzieren, dass sie das Gefühl haben, dass es unmöglich ist, den vertikalen Rhythmus richtig einzustellen.

Ehrlich gesagt, Sie werden nie Grundlinienraster erhalten, die im Web perfekt funktionieren, da die Mathematik in der Typografie immer Subpixel (wie 24,8 Pixel) enthält und alle Browser Subpixel unterschiedlich behandeln. Einige Browser bewirken beispielsweise, dass jedes Element auf der Seite um 1 Pixel verschoben ist. Diese 1px-Fehler häufen sich und schieben alle Elemente, die sich weiter unten auf der Seite befinden, noch weiter vom Raster weg. Aus diesem Grund empfehle ich, kein Grundlinienraster zu verwenden.

Lassen Sie uns fortfahren und in den Bereich der Reaktionspraktiken und des Entwurfs für mehrere Bildschirme eintreten.

Typografie für mehrere Bildschirme

Das Entwerfen von Typografie für mehrere Bildschirme ist keine leichte Aufgabe. Es gibt drei Dinge, die wir aus gestalterischer Sicht tun müssen.

Erstens hängt der Abstand zwischen den Augen eines Benutzers und seinem Bildschirm davon ab, welche Art von Gerät er verwendet. Im Allgemeinen platziert der Benutzer das Gerät weiter entfernt, wenn er einen größeren Bildschirm verwendet. Dieses Phänomen bedeutet, dass Sie Ihre Schriftgröße erhöhen müssen, wenn die Gerätebreite zunimmt.

Zweitens möchten wir die Proportionen zwischen dem Textkörper und anderen Elementen konsistent halten. Dies bedeutet, dass wir die Größe aller Elemente erhöhen müssen, wenn wir die Körpertextgröße erhöhen.

Drittens wollen wir an bestimmten Haltepunkten die erhöhen Schriftgröße von bestimmten Elementen (wie dem h1) durch Auswahl einer anderen Zahl aus der modularen Skala. Auf diese Weise können wir die visuelle Hierarchie steuern und sicherstellen, dass Elemente gerade genug Aufmerksamkeit erhalten, um einen Benutzer zum Lesen zu bewegen.

Codierung für reaktionsschnelle Typografie

Wir wissen, dass wir unsere Textgröße proportional erhöhen müssen. Der einfachste Weg, dies zu tun, besteht darin, die zu erhöhen Schriftgröße innerhalb der html Wähler. Wir möchten auch relative Einheiten verwenden, um die eines Benutzers zu respektieren Schriftgröße Präferenz.

html {font-size: 100%;} @media (min-width: 40em) { html {font-size: 112.5%;} }

Wir möchten auch eine relative Einheit für andere Elemente verwenden, damit sie gemäß dem HTML-Code skaliert werden Schriftgröße ( h2 im folgenden Beispiel). Wenn Sie das ändern müssen Schriftgröße auf eine andere Zahl in der modularen Skala ändern Sie lediglich die Schriftgröße entsprechend ( h1 unten).

h1 {font-size: 2.369em;} @media (min-width: 40em) { html {font-size: 3.147em;} } h2 {font-size: 1.777em;}

Obwohl der Prozess einfach aussieht, könnten neue Entwickler aufgrund der Mathematik eine Menge Kopfschmerzen haben, weshalb ich empfehle, Funktionen und Mixins zu verwenden, um zu helfen. Ich benutze oft Frau() von dem modulare Skalenbibliothek . Damit können Sie schreiben ms (4) statt 3.157em und ms (3) statt 2.369em .

Ein Beispiel für eine Funktion, die die Berechnung des vertikalen Rhythmus erleichtern kann, ist:

@function vr($rhythm) {@return $rhythm / 16 * 1rem;}

Dies fr Funktion ermöglicht es Ihnen zu schreiben Fr (3) für ein Vielfaches von drei Basislinien, anstatt es selbst zu berechnen. Um Ihnen (und mir) noch weiter zu helfen, habe ich eine reaktionsschnelle Typografiebibliothek namens erstellt Andere Arten .

Relative Einheiten

Alle Diskussionen über relative Einheiten enden mit der Frage, ob Sie verwenden sollten Geschäft oder im Einheiten. Ich glaube das Geschäft und im haben ihre einzigartigen Anwendungsfälle, und Sie sollten sie unter verschiedenen Umständen verwenden. Hier sind zwei Regeln, die Ihnen bei der Auswahl der zu verwendenden Einheit helfen können:

1. Benutzen im wenn die Eigenschaft mit skalieren muss Schriftgröße
2. Wenn nicht, verwenden Sie Geschäft

Weitere Informationen zur Auswahl zwischen diesen Einheiten finden Sie unter siehe diesen Artikel .

Fassen Sie es zusammen

In diesem Artikel haben Sie die Grundlagen der reaktionsschnellen Web-Typografie kennengelernt. Natürlich werden Sie mehr Details finden, wenn Sie tiefer in Theorie und Implementierung eintauchen, aber was Sie hier haben, deckt 80 Prozent dessen ab, was Sie in einem realen Projekt benötigen. Mit diesem Wissen können Sie sich mit Designern und Entwicklern darüber unterhalten, wie Sie eine gute Typografie für das reaktionsschnelle Web entwerfen und codieren können.

Responsive Typografie ist nicht unglaublich schwierig. Es ist nur eine Herausforderung, weil Sie viel Geduld und Fleiß benötigen, um relevante Prinzipien aufzudecken und sie auf eine Weise anzuwenden, die zum Web passt.

Dieser Artikel erschien ursprünglich in Netzmagazin . Abonnieren Sie hier .

Zum Thema passende Artikel:

• Master zugängliche Web-Typografie
• Entwerfen Sie eine reaktionsfähige Website mit em-basierter Größe
• 10 Regeln zum Erstellen benutzerfreundlicher Webformulare