() translation by (you can also view the original English article)
Typografie ist ein riesiges Feld. Die Menschen widmen Jahre ihres Lebens diesem alten Handwerk, und dennoch gibt es immer etwas Neues zu lernen. In diesem Artikel werde ich die wichtigsten Punkte überprüfen, die Sie bei der Auswahl einer Schriftart für eine Website berücksichtigen müssen.
Alle paar Wochen besuchen wir einige der Lieblingsbeiträge unserer Leser aus der gesamten Geschichte der Website. Dieses Tutorial wurde erstmals im Oktober 2010 veröffentlicht.
Praktische Typografie
Wenn Sie für das Web entwerfen, müssen Sie akzeptieren, dass sich der Inhalt ändert. Es kommt einfach nicht in Frage, sich die Zeit zu nehmen, um jeden Titel auf einer riesigen Website zu kern (Abstand zwischen einzelnen Buchstaben anpassen). Mit anderen Worten, Sie geben die Kontrolle auf.
Worauf ich mich heute konzentrieren werde, ist praktische Typografie. Für mich bedeutet dies zu akzeptieren, dass Sie niemals die vollständige Kontrolle über den Typ auf Ihren Websites haben werden. Wenn Sie sich für eine Schriftart entscheiden und sich für eine Größe entscheiden, haben wir als Designer ein Mitspracherecht. Praktische Typografie bedeutet, zu lernen, wie und vor allem warum Sie anpassen können, worüber Sie die Kontrolle haben. Lass uns anfangen.
Lesbarkeit
Was machen Sie mit Typ? Lesen Sie es! Warum machen es so viele Websites so verdammt schwierig, genau das zu tun? Das kann winzige Schriftgrößen, überfüllte Zeilenhöhe oder einfach nur hässliche Schriftarten sein, es scheint, dass viele Websites entschlossen sind, Ihnen nicht zu erlauben, Ihren Inhalt zu genießen!
Indem Sie Ihren Typ lesbar machen, springen Sie sofort mindestens der Hälfte der Konkurrenz voraus, was wirklich ein Glück ist, denn es ist nicht so schwer!
Schriften
Beachten Sie bei der Entscheidung, welche Schriftart auf Ihrer Website verwendet werden soll: Denken Sie nicht darüber nach. Ich weiß, dass viele Designer es hassen, Helvetica zu verwenden, weil es wild überbeansprucht wird. Ich stimme dem zu, aber es gibt eine sehr wichtige Information, die diese Aussage auslässt: warum. Die Leute benutzen Helvetica zu oft, weil es so verdammt gut ist. Es passt zu praktisch jedem erdenklichen Design und eignet sich sowohl für kleine als auch für große Größen.
Wenn das Ihnen viele Sorgen macht, dann versuchen Sie es.
Ihre Körperkopie ist wohl der Teil Ihres Designs, der am besten lesbar sein muss. Wählen Sie daher eine Schriftart aus, die in kleinen Größen gut funktioniert. Was meine ich damit? Wenn Sie Ihre Kopie auf 10px einstellen können und trotzdem erkennen können, was darin steht, ist dies ein guter Hinweis darauf, dass Sie eine lesbare Schrift gewählt haben.
Das betrifft die Körperkopie, aber was ist mit Titeln?
Die Lesbarkeit in großen Titeln ist weitaus einfacher herauszufinden als in Textkopien. Wenn Sie sofort erkennen können, was darauf steht, ist es lesbar genug.
Das Gute an Schriften ist, dass Sie, sobald Sie an genügend Projekten gearbeitet haben, eine gute Vorstellung davon haben, was funktioniert und was nicht. Von dort aus sind Sie in einer besseren Position, um kritische Entscheidungen über Schriftarten zu treffen.
Es gibt keine Formel für die Auswahl der richtigen Schriftarten für Ihre Website. Oft ist der beste Weg, sich für eine zu entscheiden, einfach jede Schriftart auszuprobieren, von der Sie glauben, dass sie funktioniert, und sie dann zu vergleichen. Die Auswahl von Schriftarten ist wirklich ein Bauchgefühl, aber es ist wichtig zu bedenken, dass ein Benutzer in 90% der Fälle nicht darüber nachdenkt, welche Schriftarten verwendet werden. Wenn sie also lesbar sind, ist das oft gut genug.
Paarung
Es gibt selten (wenn überhaupt) eine Situation, in der nur eine Schrift für die Verwendung auf einer Site geeignet ist. Die durchschnittliche Website enthält viel Text. Es gibt keine Möglichkeit, dass eine Schriftart für alle funktioniert! Die überwiegende Mehrheit der gut gestalteten Websites verwendet zwei Schriftarten: eine für Textkopien und eine für Überschriften.
Bei der Auswahl eines Schriftartenpaares ist vor allem zu berücksichtigen, wie sie zusammenarbeiten. "Sind sie ähnlich genug?" "Zu ähnlich?" "Nicht anders genug?" Das alles sind Fragen, die Sie sich stellen müssen. Ich finde, dass der beste Weg, ein Paar funktionierender Schriftarten auszuwählen, darin besteht, viele davon nebeneinander zu stellen und sich für die beste zu entscheiden. Es gibt keine Möglichkeit zu wissen, welches das Beste ist, bis Sie alle ausprobiert haben.
Manchmal sind zwei Sans-Serifs am besten geeignet, während Sie manchmal eine Sans ohne Überschriften und eine Serif mit Textkopien wünschen. Es spielt keine Rolle, ob sie ähnlich aussehen, sondern ob sie sich ähnlich verhalten. Dies hängt natürlich vom Rest Ihres Designs ab. Unabhängig davon, welche Schriftarten Sie auswählen, muss Ihre Botschaft stark vermittelt werden. Wenn dies kontrastierende Schriftarten bedeutet, entscheiden Sie sich dafür.
Simon Collison verwendet die Schriftpaarung auf seiner Website hervorragend und wählt eine starke serifenlose Schrift für Haupttitel und eine einfache Serife für die anderen, kleineren Überschriften sowie eine Kopie. Diese Partnerschaft zeigt die Nachricht, die die Website zu sagen versucht, fachmännisch auf eine Weise an, die nicht jede Schriftart einzeln ausdrücken kann.
Größe
In der Regel möchten Designer ihre Körperkopie auf mindestens 12 Pixel einstellen. Die meisten entschieden sich jedoch für eine größere Größe wie 14px, was für die Lesbarkeit noch besser ist. Die Größenänderung von Schriftarten ist für die Textkopie sehr einfach zu entscheiden, aber es sind die Titel, die anfangen, kompliziert zu werden.
Wie groß müssen Ihre Titel sein? Es hängt davon ab, ob. Bei meiner Beobachtung und Erstellung von Websites bin ich zu dem Schluss gekommen, dass ein Titel nur so groß sein muss, wie er sein muss. Das bedeutet, dass Sie verschiedene Größen ausprobieren müssen, bis Sie eine finden, die gerade groß genug ist, um die gewünschte Aufmerksamkeit auf sich zu ziehen, aber nicht größer, es sei denn, Sie möchten großen Text. In diesem Fall fahren Sie fort.
Hierarchie
Die Natur eines Titels ist groß. Es ist ein wichtiger Punkt auf der Seite, also es muss natürlich größer sein, oder? Ja und nein. Ja, Titel sind im Allgemeinen größer als andere Elemente, aber nein, dies ist nicht die einzige Möglichkeit, auf sie aufmerksam zu machen. Farbe, Gewicht und Platzierung sind gleichermaßen wichtig, um eine klare visuelle Hierarchie für Ihre Seiten zu erstellen.
Der wichtigste Punkt, an den Sie sich bei der visuellen Hierarchie erinnern sollen, ist, dass alles relativ ist. Der Text auf Ihrer Website muss sich nur von den anderen Texten auf Ihrer Website abheben. Nehmen wir zum Beispiel die Website von Wilson Miner. Seine Titel sind ziemlich klein für ihre Bedeutung und überraschend groß. Seine Verwendung von Farbe unterscheidet jedoch den wichtigsten Titel und verleiht ihnen mehr Bedeutung.
Die Verwendung von Typ ist ein sehr wichtiges Werkzeug, um eine visuelle Hierarchie zu erstellen, sei es durch Größe, Farbe, Gewicht oder sogar Platzierung.
Führen
Das Führen oder der Abstand zwischen Textzeilen ist ein unschätzbares Werkzeug für lesbaren Text. Eine schlechte Führung kann ein ansonsten herausragendes Exemplar ruinieren, und eine gute Führung kann selbst den schlechtesten Typ lesbar erscheinen lassen. Glücklicherweise ist die Implementierung nicht so kompliziert.
Mit der CSS line-height für die Zeilenhöhe können Sie problemlos Leerzeichen zwischen Ihren Kopierzeilen zuweisen. Im Allgemeinen ist für große Textblöcke das 1,5-fache der Textgröße eine gute Größe. Kleinere Texte müssen eine engere Führung haben, und große Texte müssen viel haben. Es ist wirklich nicht so kompliziert.
Verfolgung
Tracking ist der Abstand zwischen Zeichen im Text. Ich gebe zu, dies ist eine Grauzone, wenn es um „Praktische Typografie“ geht, da CSS uns keine große Kontrolle darüber gibt. Normalerweise müssen Sie sich bei kleinen Texten keine Sorgen machen, nur bei Titeln wird es zu einem Problem. Im Allgemeinen wird der Buchstabenabstand letter-spacing: 1px; oder letter-spacing: 2px; zu Ihrem CSS soll genügend Platz zwischen den Buchstaben sein.
Ein weiterer Ort, an dem das Hinzufügen von Tracking von Vorteil wäre, sind Small Caps. Hier wird es allgemein als bewährte Methode angesehen, ein oder zwei zusätzliche Pixel zwischen die Zeichen einzufügen, da diese natürlich größer erscheinen.
Farbe
Farbe ist zwar keine streng genommene Typografie, aber ein sehr wichtiger Bestandteil des Typs jeder Website. Ich spreche nicht von color schemes, sondern von dem Kontrast, der erforderlich ist, um die Lesbarkeit auf Ihrer Website zu gewährleisten. Schwarzer Text auf weißem Hintergrund (oder hellem Hintergrund) wird allgemein als die am besten lesbare Farbe für Text angesehen.
Ich sage nicht, dass Sie alles auf Schwarz-Weiß einstellen müssen, nur dass Sie sich beim Entwerfen des Kontrasts Ihres Textes bewusst sein müssen. Es könnte zurückkommen, um dich zu beißen, wenn Sie nicht aufpassen.
Das Gitter
Meiner Meinung nach ist die Verwendung des Rasters die wichtigste Idee für die praktische Typografie im Web. Sie können großartige Schriftarten, Abstände und Farben verwenden, aber wenn Sie kein gutes Layout haben, können Sie auch Comic-Sans verwenden.
Die Verwendung eines Rasters beim Entwerfen mit Typ verleiht Ihrem Entwurf eine klare Balance und geometrische Struktur. Es ist nicht die magische Lösung für ein schlechtes Design, aber wenn Sie von Anfang an mit einem Raster entwerfen, können Sie sicher sein, dass Ihr Layout zumindest solide ist.
Was hat ein Raster mit Typografie zu tun? Einfach gesagt: alles. Das Raster verkörpert alle grundlegenden Ideale der Typografie. Es ist geometrisch, konsistent, verwendbar und vor allem: schön.
Das Festlegen Ihres Textes mit einem Raster ist eine wichtige Methode zum Erstellen einer visuellen Hierarchie und ein guter Indikator dafür, wie groß (oder klein) Ihr Text sein muss.
Herausragend
Wie ich bereits sagte, wenn Ihre Typografie lesbar ist, sind Sie bereits 50% der Konkurrenz voraus. Was ist also mit der anderen Hälfte? Wenn Sie es bis hierher geschafft haben, verlassen wir gemeinsam die klaren, einheitlichen Regeln der Lesbarkeit und betreten die trübe und mysteriöse Welt des Einzigartigen.
Schriftarten
Sie möchten, dass Ihre Website auffällt? Schritt 1. Verwenden Sie eine einzigartige Typografie. Vermutlich bedeutet dies für Sie, einige einzigartige Schriftarten zu verwenden. Aber was macht eine einzigartige Schriftart aus? Für mich ist es nicht eines, das nicht oft verwendet wird, sondern eines, das eine Botschaft oder ein Gefühl hat, das von anderen Gesichtern nicht verwendet wird.
Bei der Auswahl einer einzigartigen Schriftart geht es wirklich um das Gefühl. Fühlt sich diese Schrift anders an? Oder sieht es einfach anders aus? Bei der Auswahl von Schriftarten für Projekte müssen Sie immer das Gefühl des Designs berücksichtigen. Da dies eine ganz persönliche Meinung ist, kann ich Ihnen nicht helfen, eine einzigartige Schrift zu finden. Was ich tun kann, ist ein Beispiel für einzigartige Schriftarten zu zeigen.
Die Designkabine hat ein sehr einzigartiges Logo und Design. Es ist stark und doch edel, aufmerksamkeitsstark und doch subtil. Wenn ich mir das Design anschaue, sickert das Gefühl der Klasse einfach aus der Site heraus. Es heißt: "Ich weiß, was ich tue."
Sei unorthodox
Wie viele Websites kennen Sie, deren Logo so groß ist wie der Inhalt? Was ist mit einem ultradünnen Titel? Im Gegensatz zu meinem letzten Punkt bedeutet unorthodox zu sein, zu sehen, was andere tun, und dann das Gegenteil zu tun.
Die Leute im Savvy Belfast sind schlau. Sie bemerkten das beengte Aussehen der meisten Websites und beschlossen, all diese bedeutungslose Kopie durch eine Aussage zu ersetzen.
Selbst wenn Sie ihre Website nur für einen Moment besuchen, können Sie nicht anders, als sich an ihren Namen zu erinnern.
Passen Sie zu Ihrem Design
Typografie ist keine eigene Sache. Es ist wie jedes andere Teil des Webdesigns. Typ ist wichtig, ja, aber Sie müssen nicht vergessen, dass das nur ein Teil dessen ist, was ein Webdesign großartig macht. Sie müssen Ihren Typ unter Berücksichtigung des restlichen Designs entwerfen.
Wenn Sie eine sehr ausgefeilte Hintergrundtextur verwenden, ist eine schöne Serife möglicherweise gut für Ihre Titel.
Mein Punkt hier ist einfach: Vergessen Sie nicht den Kontext. Design ist ein riesiges Feld, und heute spreche ich nur über einen Teil davon. Für ein erfolgreiches Website-Design müssen alle Teile erfolgreich ineinander greifen. Das ist das Ziel: die Erfahrung zu gestalten, die jemand auf Ihrer Website haben wird. Sie können das nicht nur mit Typ, Farbe oder Inhalt tun!
Emotionaler Typ
So viel Erfahrung hängt davon ab, wie Sie sich fühlen: glücklich, traurig, amüsiert, wütend, bla bla bla. Menschen haben eine breite Palette von Emotionen, und als Designer ist es unsere Aufgabe, diese Emotionen mit unseren Designs hervorzurufen.
Von all den Dingen, über die ich heute gesprochen habe, ist dies bei weitem das abstrakteste und es ist ein wenig schwer zu erklären. Anstatt Ihnen dies zu erklären, möchte ich es Ihnen zeigen.
Als ich Solid Giant zum ersten Mal besuchte, lächelte ich. Ich lächelte das nächste Mal, wenn ich es sah, und sogar das nächste Mal. Sofort fühlte ich eine Verwandtschaft mit dem Design. Dieses große, verschwommene „G“ ist einfach zu bezaubernd, um es zu vergessen!
Ehrlich gesagt denke ich, dass es genial ist.
Es gibt keine Möglichkeit, emotionales Design zu lehren, es ist etwas, das man erleben und dann in seinen eigenen Designs spielen muss.
Praktische Typografie
Nun, Sie haben das Ende des Beitrags erreicht. Ich hoffe, dass Sie zumindest etwas gelernt haben, aber wenn nicht, ist das auch in Ordnung. Wenn es einen Gedanken gibt, mit dem ich Sie nach dem Lesen verlassen möchte, dann ist es vor allem: lesbar sein. Der Rest wird folgen.
Was ist Ihrer Meinung nach der wichtigste Teil der Typografie im Web? Hinterlassen Sie Ihre Meinung in den Kommentaren!
Auch auf Tuts +
