Share
Typografie ist ein riesiges Feld. Die Menschen widmen diesem alten Handwerk Jahre ihres Lebens, 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 sollten.
Erneut veröffentlichtes TutorialAlle 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.
Wenn Sie für das Web entwerfen, müssen Sie akzeptieren, dass sich der Inhalt ändert. Es ist einfach unmöglich, jeden Titel auf einer großen Website zu kern (Abstand zwischen einzelnen Buchstaben anzupassen). Mit anderen Worten, Sie geben etwas Kontrolle auf.
Worauf ich mich heute konzentrieren werde, ist praktische Typografie. Für mich bedeutet dies, dass Sie niemals die vollständige Kontrolle über den Typ Ihrer Websites haben. Wenn Sie sich für eine Schrift entscheiden, für eine Größe entscheiden, sind dies alles Dinge, die wir als Designer mitbestimmen können. Praktische Typografie bedeutet, zu lernen, wie und was noch wichtiger ist, das, was Sie kontrollieren, anzupassen. Lass uns anfangen.
Was machst du mit Typ? Lies es! Warum machen es so viele Websites so schwierig, genau das zu tun? Egal, ob es sich um winzige Schriftgrößen, überfüllte Zeilenhöhen oder einfach um hässliche Schriftarten handelt, scheinen viele Websites entschlossen zu sein, sich nicht an deren Inhalt zu erfreuen!
Indem Sie Ihren Typ lesbar machen, springen Sie sofort mindestens die Hälfte der Konkurrenz an, was wirklich ein Glück ist, weil es nicht so schwer ist!
Bei der Entscheidung, welche Schriftart auf Ihrer Website verwendet werden soll, müssen Sie Folgendes beachten: denke nicht darüber nach. Ich weiß, dass viele Designer Helvetica hassen, weil sie stark überstrapaziert wird. Ich stimme dem zu, aber es gibt eine sehr wichtige Information, die diese Aussage auslässt: warum. Die Leute überfordern Helvetica, weil es einfach so ist So verdammt gut. Es passt genau in jedes denkbare Design und funktioniert sowohl in kleinen als auch in großen Größen.
Es mag gegen Ihren Glauben verstoßen, wenn Sie Ihren Typ in ein so missbräuchliches Gesicht setzen, wenn es funktioniert, dann machen Sie es.
Ihre Körperkopie ist wahrscheinlich der Teil Ihres Designs, der am besten lesbar sein muss. Stellen Sie daher sicher, dass Sie eine Schrift wählen, die in kleinen Größen gut funktioniert. Was meine ich damit? Wenn Sie Ihre Kopie auf 10px setzen können und immer noch erkennen können, was sie sagt, dann ist das ein guter Hinweis, dass Sie eine lesbare Schriftart gewählt haben.
Das umfasst die Textkopie, aber was ist mit Titeln??
Die Lesbarkeit in großen Titeln ist viel einfacher zu erkennen als in Text. Wenn Sie sofort erkennen können, worum es geht, ist es lesbar genug.
Das Gute an Schriften ist, dass Sie, wenn Sie an genug Projekten gearbeitet haben, eine gute Vorstellung davon haben, was funktioniert und was nicht. Von dort aus sind Sie in der Lage, kritische Entscheidungen zu Schriftarten zu treffen.
Es gibt keine Formel für die Auswahl der richtigen Schriftarten für Ihre Website. Oft ist es die beste Möglichkeit, sich für eine zu entscheiden, indem Sie einfach jede Schrift ausprobieren, von der Sie glauben, dass sie funktionieren könnte, und dann vergleichen. Die Auswahl von Zeichensätzen ist wirklich ein Instinkt, aber es ist wichtig zu wissen, dass in 90% der Fälle ein Benutzer nicht darüber nachdenkt, welche Schriftart verwendet wird. Wenn er also lesbar ist, ist das oft gut genug.
Es gibt selten (wenn überhaupt) eine Situation wo nur einer Die Schrift eignet sich für die Verwendung auf einer Website. Die durchschnittliche Website hat viel Text. Es gibt keine Möglichkeit, dass eine Schrift für alle funktioniert! Die überwiegende Mehrheit gut gestalteter Websites verwendet zwei Schriftarten: eine für Textkopien und eine für Überschriften.
Bei der Auswahl eines Zeichensatzpaares ist zu beachten, wie diese zusammenarbeiten. „Sind sie sich ähnlich?“ „Zu ähnlich?“ „Nicht anders genug?“ Dies sind Fragen, die Sie sich stellen sollten. Ich finde, der beste Weg, ein paar Schriftarten auszuwählen, die funktionieren, besteht darin, viele von ihnen nebeneinander zu stellen und sich für die beste zu entscheiden. Es gibt keine Möglichkeit herauszufinden, welches das Beste ist, bevor Sie alle ausprobiert haben.
Manchmal sind zwei Sans-Serifen am besten geeignet, während Sie zu anderen Zeiten eine Sans für Schlagzeilen und eine Serife für die Körperkopie wünschen. Es ist nicht besonders wichtig, wenn sie ähnlich aussehen, was zählt, wenn sie ähnlich handeln. Dies hängt natürlich vom Rest Ihres Designs ab. Unabhängig davon, welche Schriftarten Sie wählen, muss Ihre Botschaft stark vermittelt werden. Wenn Sie also kontrastierende Schriftarten verwenden möchten, entscheiden Sie sich dafür.
Simon Collison verwendet Font-Pairing hervorragend auf seiner Website und wählt eine starke Sans-Serif für Haupttitel und eine einfache Serif für die anderen, kleineren Überschriften sowie für das Kopieren. In dieser Partnerschaft wird die Nachricht, die die Website zu sagen versucht, auf eine Art und Weise dargestellt, die jede Schrift nicht individuell ausdrücken konnte.
In der Regel setzen Designer ihre Body Copy gerne auf mindestens 12 Pixel. Die meisten haben sich jedoch für eine größere Größe wie 14px entschieden, was für die Lesbarkeit noch besser ist. Die Schriftgröße lässt sich für die Textkopie sehr einfach festlegen, aber die Titel werden immer komplizierter.
Wie groß sollten deine 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 sollte, wie er sein muss. Das bedeutet, dass Sie verschiedene Größen ausprobieren sollten, bis Sie eine gefunden haben, die gerade groß genug ist, um die gewünschte Aufmerksamkeit auf sich zu lenken, jedoch nicht größer, es sei denn, Sie haben großen Text. Dann sollten Sie sofort weitermachen.
Die Art eines Titels ist groß. Es ist ein wichtiges Element auf der Seite, also sollte es natürlich größer sein, oder? Ja und nein. Ja, Titel sind im Allgemeinen größer als andere Elemente, aber nein, dies ist nicht der einzige Weg, um auf sie aufmerksam zu machen. Farbe, Gewicht und Platzierung sind gleichermaßen wichtig, um ein klares Bild zu erhalten visuelle Hierarchie zu Ihren Seiten.
Der wichtigste Punkt bei der visuellen Hierarchie ist, dass alles relativ ist. Text auf Ihrer Site muss sich nur im Vergleich zu dem anderen Text auf Ihrer Site hervorheben. Nehmen Sie zum Beispiel die Seite von Wilson Miner. Seine Titel sind recht klein für ihre Wichtigkeit und überraschend klein. Seine Verwendung von Farbe unterscheidet jedoch den wichtigsten Titel und verleiht ihnen mehr Bedeutung.
Die Verwendung von Schriftarten ist ein sehr wichtiges Werkzeug für die Erstellung einer visuellen Hierarchie, sei es durch Größe, Farbe, Gewicht oder sogar Platzierung.
Das Führen oder der Abstand zwischen den Textzeilen ist ein unschätzbares Werkzeug für lesbaren Text. Schlechtes Leading kann ein ansonsten herausragendes Exemplar ruinieren, und gutes Leading lässt selbst den schlechtesten Typ lesbar erscheinen. Glücklicherweise ist die Implementierung nicht so kompliziert.
CSS verwenden Zeilenhöhe Eigenschaft können Sie leicht Platz zwischen Ihren Kopierzeilen zuweisen. Bei großen Textblöcken ist die 1,5-fache Textgröße im Allgemeinen eine gute Größe. Kleinere Texte sollten engere Zeilenabschnitte haben und riesige Texte sollten sehr viel haben. Es ist wirklich nicht so kompliziert.
Tracking ist der Abstand zwischen Zeichen im Text. Ich gebe zu, dies ist ein bisschen eine graue Fläche, 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 Gedanken darüber machen, nur für Titel wird dies zu einem Problem. Im Allgemeinen hinzufügen Buchstabenabstand: 1px; oder Buchstabenabstand: 2px; zu Ihrem CSS sollte ausreichend Platz zwischen den Buchstaben sein.
Ein weiterer Ort, an dem es sinnvoll wäre, das Tracking hinzuzufügen, ist Small Caps. Im Allgemeinen gilt es als gute Praxis, ein oder zwei zusätzliche Pixel zwischen den Zeichen einzufügen, da sie natürlich größer erscheinen.
Farbe ist zwar keine strikt sprechende Typografie, aber die Farbe ist ein sehr wichtiger Bestandteil des Typs jeder Website. Ich spreche nicht über Farbschemata, Sondern über den Kontrast, der zur Gewährleistung der Lesbarkeit auf Ihrer Website erforderlich ist. Schwarzer Text auf weißem Hintergrund (oder hellem Hintergrund) gilt allgemein als die lesbarste Farbe für Text.
Ich sage nicht, dass Sie alles auf Schwarz-auf-Weiß setzen sollten, nur wenn Sie beim Entwerfen den Kontrast Ihres Textes berücksichtigen. Es könnte zurückkommen, um dich zu beißen, wenn du nicht aufpasst.
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 haben, aber wenn Sie kein gutes Layout haben, können Sie auch Comic-Sans verwenden.
Durch die Verwendung eines Rasters beim Entwurf mit type erhält Ihr Design 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 also ein Raster mit Typografie zu tun? Einfach ausgedrückt: alles. Das Raster verkörpert alle grundlegenden Ideale der Typografie. Es ist geometrisch, konsistent, nutzbar und vor allem: wunderschönen.
Das Festlegen Ihres Textes mit einem Raster ist eine wichtige Möglichkeit, um eine visuelle Hierarchie festzulegen, und es ist ein großartiger Indikator dafür, wie groß (oder klein) Ihr Text sein soll.
Wie gesagt, wenn Sie Typografie lesbar sind, sind Sie bereits 50% der Konkurrenz voraus. Was ist mit der anderen Hälfte? Wenn Sie es bis hierher geschafft haben, verlassen wir gemeinsam die klaren, einheitlichen Regeln der Lesbarkeit und betreten die düstere und geheimnisvolle Welt des Einzigartigen.
Sie möchten, dass Ihre Website hervorsticht? Schritt 1. Verwenden Sie eine einzigartige Typografie. Vermutlich bedeutet dies für Sie die Verwendung einiger eindeutiger Schriftarten. Aber was macht eine einzigartige Schrift aus? Für mich ist es nicht eine, die nicht oft benutzt wird, sondern eine, die eine Botschaft oder ein Gefühl hat, die nicht von anderen Gesichtern verwendet wird.
Bei der Auswahl einer einzigartigen Schriftart geht es wirklich um die Gefühl. Tut diese Schrift Gefühl anders? Oder sieht es einfach anders aus? Bei der Auswahl von Schriften für Projekte sollten Sie immer das Gefühl des Designs berücksichtigen. Da dies eine ganz persönliche Meinung ist, kann ich Ihnen nicht helfen, eine eindeutige Schrift zu finden. Was ich tun kann, ist ein Beispiel für eindeutige Schriftarten.
Die Design Cubicle hat ein sehr einzigartiges Logo und Design. Es ist stark, aber elegant, aufmerksamkeitsstark und dennoch subtil. Wenn ich mir das Design ansehe, strömt das Gefühl der Klasse einfach aus dem Gelände. Es heißt: "Ich weiß, was ich tue."
Wie viele Websites kennen Sie, deren Logo so groß ist wie der Inhalt? Was ist mit einem ultradünnen Titel? Anders als bei meinem letzten Punkt geht es darum, unorthodox zu sein, zu sehen, was andere tun, und dann das Gegenteil zu tun.
Die Leute von Savvy Belfast sind schlau. Sie bemerkten das beengte Aussehen der meisten Websites und beschlossen, diese sinnlose Kopie durch eine Aussage zu ersetzen.
Selbst wenn Sie die Website nur für einen kurzen Moment besuchen, können Sie sich nur an ihren Namen erinnern.
Typografie ist keine eigene Sache. Es ist wie jedes andere Teil des Webdesigns. Typ ist wichtig, ja, aber Sie sollten nicht vergessen, dass dies nur ein Teil eines Webdesigns ist. Sie sollten Ihren Typ im Hinblick auf den Rest Ihres Designs entwerfen.
Wenn Sie eine sehr aufwendige Hintergrundtextur verwenden, wäre eine schöne Serife möglicherweise gut für Ihre Titel.
Mein Punkt hier ist einfach: Vergiss das nicht Kontext. Design ist ein riesiges Feld und heute spreche ich nur von einem Teil davon. Für ein erfolgreiches Website-Design müssen alle Teile erfolgreich ineinander greifen. Das ist das Ziel: die Erfahrung gestalten, die jemand auf Ihrer Website haben wird. Das kannst du nicht mit machen Schreib einfach, oder nur Farbe, oder auch nur zufrieden!
So viel Erfahrung wird von Ihrem Gefühl bestimmt: 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 bisschen schwer zu erklären. Anstatt zu versuchen, Ihnen das zu erklären, lassen Sie mich es Ihnen zeigen.
Als ich Solid Giant zum ersten Mal besuchte, lächelte ich. Das nächste Mal, wenn ich es sah, und auch das nächste Mal, lächelte ich. Ich fühlte sofort eine Verwandtschaft zum Design. Dieses große, unscharfe "G" ist einfach zu entzückend, um es zu vergessen!
Ehrlich gesagt, finde ich es genial.
Es gibt keine Möglichkeit, emotionales Design zu vermitteln. Es ist etwas, das Sie erleben und dann mit Ihren eigenen Designs spielen müssen.
Nun, Sie haben das Ende des Beitrags erreicht. Ich hoffe, dass Sie zumindest etwas gelernt haben, aber wenn nicht, ist das auch gut. Wenn Sie glauben, ich möchte Sie nach dem Lesen verlassen, ist es das vor allem: lesbar sein. Der Rest wird folgen.
Was ist Ihrer Meinung nach der wichtigste Teil der Typografie im Internet? Hinterlassen Sie Ihre Meinung in den Kommentaren!
Accentsconagua