9 reaktionsschnelle Typografietipps
Es liegt auf der Hand, dass Responsive Web Design eine entsprechende Responsive Typografie erfordert. Aber was bedeutet das eigentlich und wie setzen Sie es um? Schriftgröße, Abstand und Layout sollten zusammenarbeiten, um in jedem Ansichtsfenster eine elegante, lesbare Texteinstellung zu erstellen. Aber wie? Wir haben sieben führende Webdesigner gefragt.
Eine ausführlichere Erklärung finden Sie in unserem Artikel über die Regeln der responsiven Web-Typografie .
01. Passen Sie Ihren Körpertext entsprechend an
'Verwenden Sie eine Skala für verschiedene Bildschirmgrößen', betont der UX-Stratege Jason Pamental , Autor von Responsive Web-Typografie . 'Machen Sie das richtig und alles andere wird von dort fließen.' Wie machst du es richtig?
UX Designer Clarissa Peterson , Autor von Responsive Webdesign lernen schlägt vor, mit der Standard-Schriftartenskalierung des Browsers zu beginnen. 'Stellen Sie Ihre Basisschriftgröße auf 100% ein, und jeder Browser stellt sicher, dass eine Schriftgröße, die die meisten Benutzer auf diesem Gerät problemlos lesen können.'
In der Regel entspricht 100% 16px. Auf dem Desktop mag das überraschend groß aussehen, aber die meisten von uns haben Probleme, kleineren Text zu lesen, sobald sie das mittlere Alter erreicht haben - warum nicht einfach machen? 'Wenn sich der Text zu groß anfühlt, bedeutet dies wahrscheinlich nur, dass Sie den Maßstab für alles andere anpassen müssen', sagt Peterson. Wir werden auf diesen Gedanken zurückkommen.
02. Betrachten Sie den Leser
Ansichtsfenster unterscheiden sich in mehr als physischen oder Pixelabmessungen. Überlegen Sie, wie der Benutzer mit dem Display interagiert.
Außerhalb des Desktops gibt es weniger Platz zum Spielen, aber der Benutzer ist näher am Bildschirm. 'Ihre Typografie sollte in Bezug auf das Lesen skaliert werden', rät Art Director Brian Hoff . „Im Allgemeinen verkleinere ich meine Schriftarten, wenn ich vom Desktop zum Handy wechsle. Menschen neigen dazu, ihre Telefone näher an ihr Gesicht zu halten. Überlegen Sie, wie die Leute den Inhalt konsumieren, und passen Sie die Typografie entsprechend an. '
'Wir sollten uns darüber im Klaren sein, wie wir mit Schrift auf größeren Bildschirmen wie Fernsehgeräten und Konsolenspielsystemen umgehen, die wir aus der Ferne betrachten, aber möglicherweise eine relativ niedrige Auflösung haben', sagt er Aaron Gustafson , Webstandards befürworten bei Microsoft und Autor von Adaptives Webdesign .
'In solchen Situationen kann es sinnvoll sein, den Typ mit vw-Einheiten zu rendern - und sogar das Layout anzupassen -, die proportional zur Breite des Ansichtsfensters sind.'
03. Beobachten Sie Ihre Maßnahme
Die Breite eines Body-Textblocks oder 'Measure' beeinflusst, wie angenehm das Lesen ist. 'Wenn Sie Ansichtsfenster haben, die unbegrenzt wachsen (oder schrumpfen) können, kann die Länge einer Linie unangenehm lang (oder kurz) werden', bemerkt der Designer Elliot Jay Stocks auf seinem Blog . 'Es ist ein Fehler, den viele Leute machen.'
Eine Richtlinie mit 45 bis 75 Zeichen pro Zeile wird häufig von Robert Bringhurst zitiert Die Elemente des typografischen Stils . Studien haben gefunden Längere Zeilen mit bis zu 95 Zeichen werden auf dem Bildschirm schneller gelesen. Es ist jedoch nicht klar, ob dies bedeutet, dass Leser gerne mehr lesen oder besser verstehen. Es gibt zu viele Variablen, um eindeutige Schlussfolgerungen zu ziehen, daher ist es sinnvoll, auf der Seite der Mäßigung zu irren.
Wenn Sie Mobile-First entwerfen, tendieren Sie zu einer kurzen Maßnahme, um zu vermeiden, dass der Text zu klein wird. Auf dem Desktop möchten Sie möglicherweise, dass die Zeilen in größeren Fenstern länger werden. EIN maximale Breite Eine Deklaration kann verhindern, dass dies außer Kontrolle gerät, sollte jedoch nicht erforderlich sein, wenn Sie die Polsterung schrittweise erhöhen.
Sie können die Schriftgröße auch gegen das Maß abwägen, um die Anzahl der Zeichen pro Zeile zu steuern. Hier ist ein Beispiel für eine CSS-Medienabfrage von Stocks:
@media screen and (min-width:1200px) { body { font-size:110%; } /* Increase the font size */ } @media screen and (min-width:1400px) { html { padding:0 15%; } /* Reduce the container width */ } @media screen and (min-width:1600px) { body { font-size:125%; } /* Increase the font size */ } @media screen and (min-width:1800px) { html { padding:0 20%; } /* Reduce the container width */ }04. Zeilenabstand anpassen
Die Linienhöhe, die traditionell als 'führend' bezeichnet wird, wird häufig vernachlässigt. Was gerade ausreicht, um Linien auf einer Skala oder einem Maß deutlich zu halten, kann auf einer anderen zu viel sein und das Auge des Lesers verlieren, wenn er versucht, von einer Linie zur nächsten zu wechseln. 'Niemand liest gerne zwischen den Zeilen', sagt Hoff.
'Unangenehme Lücken' können vermieden werden, schlägt Stocks vor, mit 'einigen sehr cleveren Berechnungen, um sicherzustellen, dass Ihre Werte direkt proportional zu Ihrer Schriftgröße sind' - oder 'tun Sie es einfach nach Gefühl'. 'Optimieren Sie die Linienhöhen an verschiedenen Haltepunkten', empfiehlt der Webdesigner Marko Dugonjic .
05. Verwenden Sie andere visuelle Variationen als die Größe
In einem umfangreichen Desktop-Design können Sie Überschriften aus Gründen der Klarheit und Dramatik um ein Vielfaches größer als Textkörper machen. Auf einem mobilen Bildschirm drücken übergroße Überschriften nur den Text nach unten, wodurch die Kontinuität unterbrochen und übermäßiges Scrollen gefordert wird.
Dugonjić schlägt alternative Wege vor, um eine visuelle Hierarchie zu erreichen. 'Formatieren Sie auf kleinen Bildschirmen Unterüberschriften mit Stilvarianten - Großbuchstaben, Kapitälchen, Kursivschrift, Fettdruck - bei derselben Schriftgröße. Ziehen Sie Absätze ein und verwenden Sie Leerzeichen, um Abschnitte zu trennen. '
06. Wählen Sie Schriftarten mit Bedacht aus
Das Arbeiten in mehreren Maßstäben erfordert noch mehr von Ihren Schriften. Neben der Gewährleistung eines Web-Schriftarten Wenn Sie auf allen Plattformen gut rendern und über einen ausreichenden Unicode-Bereich für die geplanten Internationalisierungen Ihrer Site verfügen, sollten Sie nach einer größeren typografischen Flexibilität suchen.
Mehrere Gewichte, Kapitälchen und komprimierte Varianten bieten Ihnen Optionen für bessere Ergebnisse in verschiedenen Ansichtsfenstern, schlägt Dugonjić vor, dessen Benton Moderne Beispielseite demonstriert den reaktionsschnellen Typ, der an seine Grenzen stößt. Sei einfach nicht verrückt, warnt Pamental. 'Wählen Sie Schriftarten sparsam. Laden Sie nicht zu viel und testen Sie den realen Typ im Browser auf verschiedenen Plattformen auf Aussehen, Seitengewicht und Rendergeschwindigkeit.
Web Font Loader Mit Google und Typekit gemeinsam entwickelt, können Sie das Ladeerlebnis besser steuern. Übersehen Sie nicht den Fallback, wenn Webfonts fehlschlagen. Anna Yeaman bei Stilkampagne , eine auf reaktionsschnelles E-Mail-Design spezialisierte Kreativagentur, empfiehlt, web-sichere Fallback-Schriftarten zu testen und Medienabfragen zu optimieren, um den Reflow zu minimieren.
07. Verwenden Sie einen Typprüfstand
Das Jonglieren von Typbibliotheken und CSS fördert den kreativen Fluss nicht. Dugonjićs Typetester ist jetzt ein vollwertiger WYSIWYG-Web-Typografie-Editor. Sie können damit über 2800 Web-Schriftarten von Adobe Edge, Adobe Typekit und Google Fonts testen, vergleichen und gestalten. Exportieren Sie dann Ihre Designs als vollständig reaktionsfähige HTML- und CSS-Snippets.
08. Typ im Kontext setzen
Layout kann die akribischste Typografie brechen. Denken Sie an 'den weißen Raum um die Wörter - wo Ihr Auge ruhen kann - und die Verwendung von Bildern', sagt Gustafson. Hier muss der reaktionsschnelle Designer besonders aufmerksam sein. 'Auf einem schmalen Bildschirm können Bilder die Lesbarkeit beeinträchtigen. Ein schwebendes Bild könnte lange Wörter darunter und nicht daneben einschließen. '
Die Werte für Breite und Abstand müssen mit der Größe des Ansichtsfensters variieren, damit sich die Layouts optisch „richtig“ anfühlen und die Linienlänge verwaltet wird. Wenn Sie Haltepunkte zwischen mehr- und einspaltigen Layouts festlegen, ist eine breitere einzelne Spalte mit horizontalem Abstand auf mittelgroßen Bildschirmen möglicherweise komfortabler.
09. Lerne von anderen
Eine leere Leinwand muss nicht Ihr Sprungbrett sein. Zurück im Jahr 2015, Yeaman befragte 50 reaktionsfähige E-Mails um die Entscheidungen zu vergleichen, die andere Designer in Bezug auf Schriftart, Größe, Abstand und andere Faktoren getroffen hatten, und fand die Ergebnisse aufschlussreich. Unabhängig von der Art Ihres Projekts gibt es auf diesem Gebiet Beispiele. Der Konsens ist nicht immer optimal, aber es ist kein schlechter Ausgangspunkt.
Weiterlesen:
