Du liebst Typografie, wer tut es nicht? Die Frage ist, wie schlampig sind Sie, wenn es darum geht, Typ in Ihren Designs zu implementieren?
Heute erarbeiten wir einige einfache und einfache Typografie-Tipps, die jeder kennen sollte, der mit type arbeitet. Ob Sie ein Experte oder ein Anfänger sind, lesen Sie weiter, um zu sehen, ob Sie sich dieser Fallstricke schuldig gemacht haben.
Nicht: Lassen Sie Photoshop Kern Ihren Text
Dieses Prinzip ist die Typografie 101. Photoshop ist ein großartiges Werkzeug, aber es und alle anderen Programme, die mit einem Werkzeug ausgestattet sind, können diesen verrückten Bereichen, die in die Vorderseite Ihres Gesichts (Ihren Augen) implantiert werden, nicht gewachsen sein.
Software verwendet einen Algorithmus, um eine "beste Vermutung" zu finden. wie ein Teil der Typografie eingeschnitten werden sollte. In einigen Apps können Sie zwischen verschiedenen Versionen wählen. In Photoshop und Illustrator können Sie beispielsweise zwischen Metriken oder und eine? optische? Modus.
Dies ist eine nette Option, mit der Sie häufig für verschiedene Textblöcke experimentieren sollten. Ich habe nicht herausgefunden, dass eine der Optionen in 100% der Fälle besser funktioniert, es hängt wirklich von den verwendeten Buchstaben und Schriftarten ab.
Beachten Sie auch, dass unterschiedliche Schriftarten unterschiedliche Kerning-Anforderungen erfordern. Um das Kerning in einer Schriftart zu testen, tippe ich oft das Großbuchstabe? LAVA? damit ich ein Gefühl für einige der typischen Problembereiche bekommen kann.
Mach: Kern manuell
Die verschiedenen automatischen Kerning-Modi sind nett, aber für wirklich wichtigen Text ist es immer am besten, ihn nur zu beobachten.
Denken Sie daran, dass ich sagte: "Wirklich wichtiger Text". Wenn Sie mit großen Absätzen arbeiten, lohnt es sich mehr, den gesamten Textbereich durchzublättern als einzelne Kerning-Paare. Sicher, Sie könnten jedes Wort manuell eingeben und bearbeiten, aber es wäre eine sinnlose Übung. Wenn Sie jedoch ein Logo erstellen, lohnt es sich, sicherzustellen, dass jeder einzelne Buchstabe perfekt platziert wird.
Nicht: Verwenden Sie die Standardunterlinie
Ich habe bereits ein paar Mal auf Design Shack erwähnt, dass ich zwar den Einsatz von Linien für visuelles Interesse an einem Design befürworte, aber in den meisten Anwendungen definitiv kein Fan der standardmäßigen Unterstreichung ist.
Der Text im obigen Beispiel wurde mit dem Textunterstrichbefehl von Photoshop erstellt. Wie Sie sehen können, ist es sehr unangenehm, besonders wenn es mit Abseilgeräten kombiniert wird.
Do: Mit Unterstrichen kreativ werden
Genau wie beim Kerning sind Unterstreichungen oft am besten, wenn sie manuell bearbeitet werden. Wenn Sie einen Strich zeichnen, haben Sie die vollständige Anpassungssteuerung. Sie können das Strichgewicht ändern, einen doppelten Strich erstellen, die Unterstreichung über das Wort hinaus vergrößern oder sogar die Linie in interessante Formen umwandeln.
Ein Trick, den ich oft mit Unterstrichen benutze, ist das Erstellen einer kleinen Kerbe für Abseilgeräte, wie im zweiten Beispiel oben gezeigt. Es ist keineswegs eine Regel, dass Unterstriche keine Unterlänge überschneiden können. Ich bevorzuge nur das Aussehen, wenn Sie das Treffen der beiden vermeiden.
Nicht: Verwenden Sie verzierte Schriftarten für Körperkopie
Dies ist ein klassischer Fehler, den neue Designer und Nicht-Designer ständig machen. Schriften sind eine einfache Möglichkeit, Spaß und Persönlichkeit in ein Design einzubringen. Daher ist die Versuchung, interessante Schriften zu verwenden, fast unerträglich.
Das Problem ist, dass viele Leute nicht wissen, wie man eine einzigartig aussehende Schrift richtig implementiert. Nehmen Sie zum Beispiel folgendes.
Hier habe ich die sehr beliebte Lobster-Schriftart in einer Art und Weise verwendet, die ich auf echten Websites gesehen habe. Das Problem sollte offensichtlich sein, der Absatz mag ausgefallen aussehen, aber es dauert ewig, bis er gelesen hat.
Außerdem fehlt der Kontrast zwischen der Überschrift und der Hauptteilkopie. Sicher, sie sind unterschiedlich groß, aber ebenso wichtig ist die Berücksichtigung von Kühnheit.
Do: Verwenden Sie Orntate Fonts Fonts für Überschriften
In dem Beispiel unten habe ich das Problem behoben. Wir können immer noch unsere verrückte Schrift verwenden, aber anstatt den Leser damit zu überfordern, werden wir selektiver.
Beachten Sie, dass unsere beiden Textelemente jetzt sehr gut kontrastieren. Die Überschrift ist groß, der Absatz ist klein. Die Überschrift ist fett, der Absatz ist dünn. Die Überschrift ist fantastisch, der Absatz ist einfach. Die Unterschiede gehen immer weiter.
Der Schlüssel hier ist, dass attraktive Designelemente in kleinen Dosen geschätzt werden. Verwenden Sie eine kreative Schriftart in einer Überschrift und ich denke, Sie sind ein anständiger Designer, verwenden Sie sie überall und ich denke, Sie haben keine Ahnung, was Sie tun.
Nicht: Verwenden Sie Cufon zum Ersetzen von Text
Dies ist eine Debatte, über die ich schon früher geschrieben habe, und trotz meiner Zurückhaltung halte ich meine Position fest. Früher dachte ich, Cufon sei eine großartige Lösung, aber moderne Praktiken haben sich wirklich zu CSS entwickelt.
Cufon hat einige große Nachteile. Für den Anfang ist es ein JavaScript-basiertes Textersetzungsskript. Zugegeben, ich bin ein großer Fan von JavaScript für alles, aber ich bin mir einfach nicht sicher, ob es hier notwendig ist, wenn CSS eine solide Lösung hat (obwohl ich Google Web Fonts verwende, vielleicht bin ich ein Heuchler).
Noch wichtiger ist, dass ich als Benutzer Cufon immer merke, weil ich Text nicht richtig auswählen / kopieren / einfügen kann. Es ist ärgerlich, Live-Text zu sehen und beinahe die Fähigkeit zu haben, mit ihm zu interagieren, aber durch fehlerhafte Auswahlen gestoppt werden.
Do: Verwenden Sie @ font-face
Die CSS-Lösung ist natürlich @ font-face. Es ist einfach, lädt schnell, ist einfach zu bedienen und funktioniert in modernen Browsern.
Bei der Arbeit mit @ font-face sind einige Dinge zu beachten. Vor allem das? Beste? Die Syntax hat sich einige Male geändert. Der aktuelle Favorit des Webentwicklers ist Fontsprings New Bulletproof @ Font-Face-Syntax.
Auch wenn @ font-face die bevorzugte Technologie für Google Web Fonts, Typekit und andere ist, bevorzugt nicht jeder es gegenüber Cufon. Einige weisen auf Probleme bei der Wiedergabe von Schriftarten hin, insbesondere auf Windows-basierten Computern, als Grund, @ font-face zu vermeiden. Um diese Seite des Arguments zu erkunden, schauen Sie sich Cufon vs.Font-face: Ein visueller Vergleich.
Nicht: Verwenden Sie Faux Small Caps
Die Verwendung von Kapitälchen kann eine unterhaltsame Möglichkeit sein, um der Kopfzeile aller Kopfbedeckungen eine kleine Variation hinzuzufügen. Grundsätzlich verwenden Sie nur Großbuchstaben, behalten aber die Buchstabengröße bei, wenn Sie die Groß- / Kleinschreibung verwenden (der erste Buchstabe ist größer).
Der knifflige Teil dieses Problems ist, dass Ihr erster Instinkt, wie Sie es tun sollen, falsch ist. Betrachten Sie das Beispiel unten:
Hier habe ich Text in Großbuchstaben eingegeben und dann einfach den ersten Buchstaben jedes Wortes größer gemacht. Das Ergebnis sind wirklich unterschiedliche Schriftgrößen, die für den aufmerksamen Betrachter ziemlich hässlich sind. Beachten Sie, dass die Liniendicke zwischen den beiden verschiedenen Buchstabentypen sehr unterschiedlich ist.
Do: Verwenden Sie eine Schriftart mit Kapitälchen
Die naheliegendste Lösung für dieses Problem ist die Verwendung einer Schrift, die eigentlich mit Kapitälchen erstellt wurde. Trajan ist der übliche Fall, aber es gibt viele andere wie Goudy Small Caps und Old Style Figures. Schriftarten wie diese sind so konzipiert, dass sie trotz unterschiedlicher Briefgrößen ein einheitliches Erscheinungsbild haben.
Wenn Sie zwischendurch etwas benötigen, haben Photoshop und Illustrator sowohl einen Option in die Zeichenpalette integriert. Dies wird in den? Besseren Small Caps? Beispiel oben. Beachten Sie, dass die Buchstaben viel konsistenter sind als im ersten Beispiel, bei dem ich dasselbe manuell ausprobierte.
Bei einigen Schriftarten im alten Stil kann die Funktion für Kleinbuchstaben recht gut funktionieren. Die Ergebnisse können jedoch genauso schlecht oder schlechter sein als der manuelle Aufwand für andere Schriftarten. Zum Beispiel passiert Folgendes, wenn Sie versuchen, die Funktion in Helvetica zu verwenden.
Wie Sie sehen, sind wir wieder in einem merklichen Mangel an Konsistenz in der Strichbreite. Mein bester Rat ist, immer Small Caps in Verbindung mit einer integrierten Schrift zu verwenden. Wenn dies nicht möglich ist, versuchen Sie, die Softwarefunktion für Small Caps zu verwenden und das Ergebnis zu testen, um festzustellen, ob es akzeptabel ist.
Komm zurück für den zweiten Teil!
Vielen Dank, dass Sie unsere 5 typografischen Do's und Don'ts gelesen haben, die jeder wissen sollte. Die Überraschung ist, wir haben noch fünf weitere! Später in dieser Woche finden Sie weitere Schlussfolgerungen und einige Hinweise, wie Sie diese vermeiden können.
Hinterlassen Sie in der Zwischenzeit einen Kommentar und lassen Sie uns wissen, was Ihre Typografie-Haustiere sind und welche Fehler Sie begangen haben.