Die Standards für Typografie im Internet haben sich verschoben. Konstrukteure setzen auf eine größere, einfacher zu lesende Typografie, die nahtloser und einheitlicher für alle Geräte ist. Der Trend zu einer größeren Web-Typografie begann mit übergroßen Behandlungen über der Schriftrolle, von Überschriften bis hin zu künstlerischen Heldentextelementen.
Gleichzeitig vergrößerte sich die Größe von Textkörpern auf mobilen Geräten, um die Lesbarkeit zu verbessern. Von da an begann der Trend zu fast allen Aspekten des Web-Typs. Wenn Sie in letzter Zeit noch nicht über die Größe der Kopie auf Ihrer Website nachgedacht haben, sollten Sie die 12- oder 14-Punkt / Pixel-Kopie erneut aufrufen. Großer Text ist in!
Übergroße Schlagzeilen
Die naheliegendste und einfachste Implementierung von umfangreichem Text ist die Verwendung übergroßer Überschriften, um die Aufmerksamkeit des Benutzers zu fordern.
Eine übergroße Überschrift funktioniert am besten, wenn nicht viele lange oder komplizierte Wörter zu berücksichtigen sind. Dies ist eine In-Your-Face-Behandlung, sodass die tatsächliche Beschriftung leicht verständlich sein muss.
Tipps zum Erfolg:
- Halten Sie sich an eine serifenlose oder serifenlose Schrift, die Sie in anderen Teilen des Designs verwenden können. Neuheiten- oder Skriptoptionen können schnell schwierig werden.
- Machen Sie es groß - unbequem groß - und dann ein wenig zurück, um die richtige Harmonie im Design zu finden.
- Beginnen Sie mit einem Text, der mindestens 80 Punkte umfasst, und erweitern Sie den Bildschirm. Stellen Sie sicher, dass Sie im endgültigen Design eine relative Größe verwenden, damit sie auf allen Geräten entsprechend skaliert werden kann. (Die entsprechende CSS-Regel lautet "Schriftgröße". Diese verwendet eine Prozent-Skalierung basierend auf einer Standardgröße von 100 Prozent.)
Den Fall für eine größere Körperkopie erstellen
Wenn die Körperkopie auf Ihrer Website nicht mindestens 16 Punkte umfasst, sollten Sie Ihre Typografiesituation überdenken.
Diese Regel? hat Wurzeln in Mobile, da Text, der kleiner ist als der für Eingaben, bei manchen Geräten tatsächlich vergrößert wird. (Dies kann in Bezug auf die Benutzererfahrung ärgerlich sein.) Der Design-Fix besteht darin, Typografie-Ebenen zu erstellen, die groß genug sind, um sie leicht lesen und verstehen zu können.
Das Ziel ist ferner, dass Text auf einem mobilen Gerät bequem lesbar ist, wenn er in einer natürlichen Entfernung gehalten wird (normalerweise etwa eine halbe Armlänge, ähnlich wie beim Lesen eines Buches).
Größerer Text kann in dieser Entfernung leichter lesbar sein und ist für die Bildschirmgröße besser geeignet. Benutzer sollten das Gerät nicht schielen oder näher bringen, um den Text zu verstehen.
Tipps zum Erfolg:
- Beginnen Sie mit einer Körperkopiengröße von etwa 16 Punkten. Dies ist normalerweise für Desktop- und mobile Geräte akzeptabel.
- Verwenden Sie eine gut lesbare Schrift mit normaler Strichbreite und klaren Linien, um die Lesbarkeit zu maximieren.
- Passen Sie die Größe für dünne oder größere Schrift (etwas größer) oder etwas breiter (etwas kleiner) an.
- Erwägen Sie bei textlastigen Seiten die Möglichkeit, den Körpertext noch weiter auszudehnen, um die Belastung der Augen zu verringern, z. B. 18 Punkte oder sogar 20 Punkte. (Als Leitfaden verwendet Medium 21 Textkörper, und die Seite von Jeffrey Zeldman befindet sich an 24 Punkten.)
Gesamthierarchie erhöhen
Sie müssen also mehr als nur die Textgröße in einem Teil Ihres Website-Designs anpassen. Sie müssen die gesamte Typografiehierarchie neu überdenken.
Mit zunehmender Größe des Haupttextes sollten Sie den Rest des Typs entsprechend skalieren. Andernfalls kann es zu einer erschütternden typografischen Skala kommen, bei der einige Textgrößen schwer voneinander zu unterscheiden sind.
Bei der Vergrößerung großer Typografien wie Überschriften oder Unterüberschriften ist es weniger wichtig, die gesamte typografische Skala anzupassen. Selbst wenn diese Elemente größer werden, bleibt (natürlich) die natürliche Unterscheidung von Textelementen erhalten. Sie sollten auch die Gesamttextgröße des Textes erhöhen, wenn er nicht mehr richtig aussieht oder wenn die Größe des großen Typs den Textkörper kleiner erscheinen lässt, als er wirklich ist. (Optische Täuschungen können eine Entwurfshierarchie ruinieren.)
Tipps zum Erfolg:
- Passen Sie die Textgröße im gesamten Design an.
- Achten Sie darauf, wie sich der Farb- und Größenkontrast auf das Aussehen der Vermietungsgrößen auswirkt.
- Vertraue deinen Augen; Wenn der Text viel zu groß oder zu klein aussieht, nehmen Sie weitere Anpassungen vor, bis er sich richtig anfühlt.
Vergessen Sie nicht, den Zeilenabstand anzupassen
Vernachlässigen Sie beim Anpassen von Textelementen nicht den Abstand zwischen den Textzeilen. Größerer Text erfordert häufig einen größeren Zeilenabstand.
Erstellen Sie Zeilenabstandsregeln, die auf einem Prozentsatz der Textgröße und nicht auf einer festen Höhe basieren. (Auf diese Weise werden diese Änderungen automatisch angepasst.)
Tipps zum Erfolg:
- Beginnen Sie mit dem 1,5-fachen (150 Prozent) der Textgröße für den Zeilenabstand desselben Blocks zu Text. Wenn es sich eng anfühlt, vergrößern Sie den Zeilenabstand.
- Hintergrund- und Textelemente mit extremem Kontrast erfordern oft ein wenig mehr Zeilenabstand für ein harmonischeres Gefühl. Fügen Sie den Zeilenabstand für weißen Text auf einem schwarzen Hintergrund hinzu, und verringern Sie ihn für einen mittleren grauen Hintergrund.
- Achten Sie genau auf Auf- und Abstiegsgrade Ihrer gewählten Schrift und passen Sie den Zeilenabstand entsprechend an.
Textgrößen nehmen auch offline zu
Während dieser Typografientrend hauptsächlich auf Webdesign-Projekte abzielt, nimmt die Textgröße im Allgemeinen zu. Von E-Mails bis zu gedruckten Materialien verwenden Designer die gleichen Richtlinien für digitale Projekte mit gedruckten Designs ähnlicher Größe. (Sie können ein mobiles Gerät einer Postkarte zuordnen.)
Gutes Design ist gutes Design.
Und so viele Projekte enthalten mehrere Komponenten, bei denen wir uns auf eine gemeinsame Benutzererfahrung konzentrieren. Sie möchten also, dass das Design einer Website dem Design einer verwandten Postkarte ähnelt.
Die andere Gemeinsamkeit ist, dass sich Ihre Augen daran gewöhnen, Text in einer bestimmten Größe zu sehen. Genau wie das Arbeiten mit Benutzermustern machen visuelle Muster die Dinge leichter verständlich und sehen schnell. Größere Texte sind keine Ausnahme.
Fazit
Haben Sie in verschiedenen Designprojekten eine Veränderung in den Größen festgestellt, die Sie für die Typografie verwenden? Ich war persönlich überrascht, wie schnell es mich annahm. Ich finde, dass ich ständig auf größere und größere Schriftgrößen dränge.
So beginnen Trends und Änderungen an gängigen Entwurfsmustern. Ich würde gerne Ihre Erfahrungen mit dem Ausprobieren eines größeren Typs hören. Wurde es gut angenommen oder haben Sie viel Rückstoß erhalten? Lass es mich auf Twitter wissen und @designshack taggen.