10 Web-Typografie-Trends für 2012

Letztes Jahr, 2011, war das Jahr, in dem die Web-Typografie endlich erwachsen wurde und Fonts an Popularität gewann. Die Geschichte des Webdesigns ist voller Inspirationen und Innovationen, aber nur wenig davon betraf die Typografie, was größtenteils auf den Mangel an Font Auswahlmöglichkeiten zurückzuführen ist. Sicher, Typografie ist Über weit mehr als nur die Font, aber wenn man für die meisten seiner Arbeiten nur fünf Fonts zur Auswahl hat, stellt man sich eine kulinarische Welt vor, in der man nur aus fünf Zutaten wählen könnte.

Web Designer ist endlich aus dem Schriftkoma der letzten 15 Jahre erwacht und verwendet eine Vielzahl von Schriften in ihren Kompositionen. Mit der breiten Einführung der @Font-face CSS-Regel und dem Aufkommen von Web Font Servicebüros gibt es jetzt fast 50.000 Fonts für Ihre Designs, die auf praktisch allen Webbrowsern funktionieren - ja, sogar auf der Internet Explorer®-Plattform. Der IE unterstützt Web Fonts seit Version 4.

Wir haben eine Renaissance des visuellen Erscheinungsbildes von Seiten im gesamten Web erlebt. Designer experimentiert jetzt mit neuen Möglichkeiten der Textdarstellung, die vorher nicht oder nur durch die Verwendung von Text in Bildern möglich waren.

2011 war eine Zeit intensiver Experimente - einige erfolgreicher als andere -, aber es zeichnen sich einige klare Trends ab, wie sich die Web-Typografie entwickeln und wie sie sich von der Print-Typografie abheben wird.

1. Typografische Stimmenvielfalt

 

Schrift ist für Text das, was Stimme für Sprache ist. Die von Ihnen gewählte Fonts hat einen dramatischen Einfluss auf den Ton und die Emotionen der Botschaft, die Sie vermitteln. Wie der berühmte Buchgestalter Richard Bringhurst es ausdrückte: "Wenn die Schrift schlecht gewählt ist, sind das, was die Worte sprachlich aussagen, und das, was die Buchstaben visuell andeuten, unehrlich, unharmonisch, verstimmt." Jetzt, da wir nicht mehr auf die "Fatal Five" beschränkt sind - die Schriftarten Arial®, Georgia®, Trebuchet® MS, Times® und Verdana® - können wir eine größere Vielfalt an typografischen Stimmen erforschen, mischen und kombinieren.

Einige befürchten, dass dies zu einer Explosion von Fonts in den Designs führen wird, wobei unerfahrene Designer ein Sammelsurium von Schriften mischen und eher eine Kakophonie von Stimmen als einen Chor schaffen. Die Zeit wird es zeigen, aber zumindest ist die Ära der monotonen typografischen Stimmen endlich zu Ende.

2. Größere Font Größen

Der Text im Web ist schon viel zu lange zu klein. Aus einer Vielzahl von Gründen, darunter der Mythos "above the fold" und der Glaube, dass kleine Schriften raffinierter aussehen, sind die meisten Schriften im Web auf dem Bildschirm auf 12 Pixel oder weniger gesetzt. Ein kluges und einfaches Experiment von Information Architects hat jedoch gezeigt, dass eine 12-Punkt-Druckschrift visuell genauso groß ist wie eine 16-Pixel-Bildschirmschrift.

Ich beginne alle meine Projekte mit einer Basisgröße Font von 100 %, die die Standardgröße des Browsers verwendet, in der Regel 16 px, sofern nicht anders auf Nutzer eingestellt. Ich verwende dann Größen, die mit der Einheit em eingestellt werden, um den Text je nach Bedarf zu vergrößern oder zu verkleinern. Kleinerer Text - wie Fußzeilentext und Notizen - kann bis zu .625em (~10px unter der Annahme, dass die Basisgröße 16px beträgt) skaliert werden, aber Fließtext sollte mindestens .875em (14px) bis 1em (16px) groß sein, und Kopfzeilen beginnen bei einem em und gehen bis zwei em, drei em und sogar vier em oder größer. Wenn Sie Hilfe für die Konvertierung in PXs oder PTs benötigen, ist PXtoEM.com eine hervorragende Quelle.

Der Übergang zu größerem Text mag anfangs unangenehm erscheinen - ich musste sogar schon Kunden davon überzeugen, dass der Text nicht zu groß ist -, aber wenn man sich erst einmal daran gewöhnt hat, wirkt kleiner Text schnell verkrampft und amateurhaft.

3. Slab-Serifen Fonts

 

Ein wichtiges Anliegen bei der Web-Typografie ist die Lesbarkeit, d. h. die Sicherstellung, dass die Zeichen so leicht wie möglich zu erkennen sind. Es gibt viele Faktoren, die zu einer lesbaren Font beitragen, aber zwei der wichtigsten sind gleichmäßige Striche und entweder dicke Serifen oder gar keine Serifen. Dünnere Serifen neigen dazu, an den Rändern unscharf zu werden, da sie für das Anti-Aliasing verwischt werden. Aus diesem Grund - und auch aus allgemeinen stilistischen Gründen - wurden im letzten Jahr viele Slab-Serifen Fonts in Web-Designs verwendet.

Bei der Slab-Serif Fonts sind die Serifen quadratisch und im Allgemeinen gleichmäßig breit, so dass sie sich an den Enden kaum oder gar nicht verjüngen. Diese Fonts können eine starke typografische Stimme haben. Sie wirken oft schwer und konstruiert, aber dadurch sind sie klar, heben sich auf einer Seite ab und sind leicht Anwenden typografische Effekte mit Textschatten zu erzielen, insbesondere den Buchdruckeffekt.

4. Buchdruck und andere textschattenbasierte Effekte

Es hat lange gedauert, aber jetzt können Web-Typographen mit CSS Textschatten hinzufügen. Und es kommt noch besser: Da Sie einem einzelnen Textblock mehrere Schatten hinzufügen können, gibt es eine Vielzahl neuer Effekte, die sich im Web schnell durchsetzen, vor allem den Buchdruckeffekt.

Der Buchdruckeffekt wird erreicht, indem der Text auf einer kontrastreichen, aber nicht 100-prozentig kontrastreichen Hintergrundfarbe platziert wird (d. h. nicht 100 Prozent Schwarz oder 100 Prozent Weiß) und dann ein Textschatten mit einer Farbe, die heller als der Hintergrund ist, nach unten und rechts versetzt wird und ein dunklerer Schlagschatten nach oben und links. Der Versatz sollte nur gering sein - ein bis drei Pixel je nach Textgröße -, damit die Ecken keine Lücke aufweisen. Kleinere Schriften benötigen keine Unschärfe, aber größere Schriften können eine leichte Unschärfe hinzugefügt am benötigen, um den Effekt etwas abzumildern.

 

Abgesehen von einfachen Textschatteneffekten ist der Buchdruck der Effekt, den ich am häufigsten sehe, aber es gibt noch viele andere, die alle durch die geschickte Anwendung von Textschatten erreicht werden.

5. Farbkontrast

In der Design-Community Über gibt es eine Debatte über die Notwendigkeit von Kontrasten bei Schriften - ob es akzeptabel ist, dass die Farbe von Font näher an der Hintergrundfarbe liegt. Einige argumentieren, dass dies schlechtes Design sei und die Lesbarkeit beeinträchtige. Viele Designer sind jedoch der Meinung, dass ein geringerer Kontrast im Text dem Erscheinungsbild eine unaufdringliche Raffinesse verleiht und es ihnen außerdem ermöglicht, das Auge des Betrachters durch die Mischung der Kontraste auf der Seite besser zu lenken.

Jüngste Studien belegen, dass eine Verringerung der Lesbarkeit die Aufmerksamkeit und die Wahrnehmung des Betrachters tatsächlich erhöhen kann. Die Logik lautet in etwa so: Wenn man den Betrachter zwingt, sich mehr Zeit zu nehmen, um etwas zu lesen, indem man die Lesbarkeit verringert, dann ist er gezwungen, aufmerksamer zu sein und die Informationen länger zu behalten. Dieses Argument ist jedoch nicht ganz unumstritten, da in einigen Studien die Schriftart Comic Sans® verwendet wurde, um dies zu beweisen.

Designer intuitiv wissen, dass ein perfekter Kontrast visuell langweilig sein kann. Schwarzer Text auf weißem Hintergrund ist so ähnlich wie alles fett zu machen; alles ist wichtig und nichts sticht hervor. Sie brauchen einen Kontrast, um das Auge des Betrachters zu fesseln, und Hilfe sie priorisieren, was sie betrachten, und eine Möglichkeit, dies zu tun, ist mit verschiedenen Farbkontrasten.

Dennoch gibt es einen Punkt, an dem ein geringer Kontrast den Leser nicht mehr zwingt, sich zu konzentrieren, sondern einfach unlesbar wird. Colour Text Legibility ist eine großartige Ressource zum Testen von Vorder- und Hintergrundkombinationen und warnt Sie auf der Grundlage der W3C-Richtlinien für die Lesbarkeit von Farben und der Richtlinien für die Barrierefreiheit im Web, um sicherzustellen, dass Sie nicht zu weit abschweifen.

6. Mischen Font Gewichte

Viele Web Designer , denen ich begegne, denken, dass "fett" die Schriftart Font ist, aber fett ist eigentlich eine Schriftart Font . Obwohl fett sicherlich die häufigste Schriftart ist, ist sie nicht die einzige Schriftart, die für Fonts verfügbar ist. Es gibt auch dünne, leichte, mittlere, schwere, schwarze und viele andere. Das Design der Neuen Helvetica® beispielsweise umfasst Schriftstärken von ultraleicht bis schwarz.

Außerdem verwenden viele Fonts eine Zahlenskala zur Basis 100, um das Gewicht anzugeben, wobei 100 die leichteste bis zur schwersten Zahl von 1000 ist.

CSS hat jedoch nur begrenzte Möglichkeiten, direkt auf diese Gewichte zuzugreifen. Die Gewichtung Font umfasst Werte für normal, fett, sowie 100, 200, 300, 400, 500, 600, 700, 800, 900 und 1000. Wenn Sie jedoch die @font-face-Regel verwenden, können Sie trotzdem jeden der verfügbaren Font-Schnitte verwenden, indem Sie einfach jedem Schnitt einen eigenen Font-weight-Wert oder alternativ einen eindeutigen Font-Namen für jeden Schnitt zuweisen.

7. Mehr Platz

Zusammen mit der Vergrößerung von Font gibt es einen Trend zu mehr weißem oder negativem Raum in Webdesigns. Dies ist zum Teil eine Reaktion auf die Erkenntnis, dass die "Above-the-fold"-Regel eigentlich ein Mythos ist (die Menschen scrollen und erwarten dies auch, wie Melissa Tarquini 2007 erklärte), sowie auf die Tatsache, dass größere Bildschirme in den letzten Jahren allgegenwärtig geworden sind.

Mehr Platz in Designs ist eine sehr gute Sache, denn er ermöglicht ein einfacheres Scannen und sauberere, weniger überladene Designs. Viele Designer haben begonnen, mit Layouts zu spielen, die wirklich nur auf Bildschirmen funktionieren, die scrollen, und dieser Trend wird sich nur fortsetzen, wenn wir beginnen, die neuen Möglichkeiten zu beherrschen, die @font-face und CSS3 bieten.

8. Responsive Typografie

Obwohl die Monitore von desktop größer geworden sind, werden die Bildschirme, auf denen unser Design angezeigt werden soll, immer kleiner, da immer mehr Menschen das Internet über Tablet-Geräte und Smartphones betrachten. Die gute Nachricht ist, dass wir nicht mehr zu engen Designs für unsere Webseiten zurückkehren müssen, sondern Designs erstellen können, die auf das Gerät "reagieren", auf dem sie angezeigt werden.

Responsive Design (manchmal auch "Reactive Design" genannt) ist eine Entwicklungsmethodik, die auf die bisherige Philosophie der Einheitsgröße verzichtet und stattdessen CSS-Media-Queries und die JavaScript™-Sprache nutzt, um Designs zu liefern, die auf die Fähigkeiten des Geräts von Nutzerzugeschnitten sind. Das bedeutet nicht nur, dass die Größe von Bildern und Oberflächenelementen angepasst wird, sondern auch, dass die Typografie der Designs so verändert wird, dass sie je nach Bedarf vergrößert oder verkleinert werden kann. Dies gilt sowohl für die Größe von Font als auch für die Spaltenbreite, die Zeilenhöhe und in einigen Fällen sogar für den Blocksatz.

Auch wenn es zunächst als lästig erscheinen mag, seine Entwürfe als skalierbar zu betrachten, wird es bald eine Notwendigkeit sein. Es wird vorhergesagt, dass bis 2015 die mobile Nutzung des Internets die Nutzung von desktop übertreffen und die Nutzung von desktop zurückgehen wird.

Neben den mobilen Geräten gibt es auch zukünftige Bildschirmtypen zu berücksichtigen. Obwohl das sagenumwobene WebTV immer nur am Horizont zu sein scheint, gibt es in diesem Bereich einige sehr reale Bewegung mit Google und Apple, die hart daran arbeiten, die richtige Formel zu finden. Es wird nicht mehr lange dauern, bis Sie sich überlegen müssen, wie Ihre Entwürfe auf einem 62″-HDTV aussehen werden.

9. Handschriftlich Fonts

Handschrift Fonts ist ein weiterer Designtyp, der immer beliebter wird. Auch wenn viele der Meinung sind, dass Über Comic Sans - die berüchtigtste aller Handschriften Font - eine Schrift, die aussieht, als wäre sie mit der Hand geschrieben, ein freundliches, offenes und zugängliches Gefühl vermittelt.

Zusätzlich zu den zahlreichen kommerziellen und kostenlosen Fonts ist es jetzt auch relativ einfach, Ihre eigene Handschrift Font zu erstellen, indem Sie das iPad® app, iFontMaker, den Dienst vLetter's custom handwriting Font oder andere Optionen verwenden.

10. Dingbats anstelle von Bildern

Obwohl die Webdings® Font zu den Microsoft® Core Web Fonts gehört, die auf praktisch jedem Computer vorinstalliert sind, hat sich die Verwendung dieser Font für Symbole in Webseiten nie durchgesetzt. Dafür gibt es einen einfachen Grund: Font wird im Firefox®-Browser nicht angezeigt. Der Grund hat mit der Kodierung von Font zu tun, aber das Ergebnis ist, dass man sie nicht verwenden kann.

Wenn Sie jedoch @font-face zum Einbetten von ordnungsgemäß kodierten Fonts verwenden, besteht eine nahezu 100-prozentige Chance, dass der Font verwendet wird. Der Vorteil der Verwendung eines Fonts für ein Dingbat anstelle eines Bildes ist die Skalierbarkeit und die Stile. Während bildbasierte Symbole eine feste Größe haben, können Fonts schnell auf jede beliebige Größe skaliert, in der Farbe verändert oder in anderen Stilen geändert werden, ohne dass es zu einem Verlust der Wiedergabetreue kommt.