Wie Sie Ihren Typ im Web attraktiver machen
Es ist nicht ungewöhnlich für einen Designer in der heutigen Welt, wenig Aufmerksamkeit darauf zu verwenden, wie der Typ angelegt ist, insbesondere mit den immer so bequemen Standardeinstellungen von Überschriften-Tags und websicheren Fonts, die universell im Web zu finden sind.
Wenn wir als interaktive Designer uns etwas mehr Zeit für die Typografie nehmen können, dann würden die Ergebnisse ein einzigartiges, gut durchdachtes Design im Gegensatz zu einer "Lauf der Mühle" -Kreation zeigen.
Es besteht eine gute Chance, dass die meisten Designer und Designs, die Sie bewundern, gute Beispiele für Typografie präsentieren.
Ich werde Ihnen ein paar Schritte zeigen, die ich beim Anpassen des Set-Typs anwende, um ansprechender zu sein als diese Standardszenarien von 24px H1-Tags zusammen mit 13px in Times New Roman.
Begnügen Sie sich nicht mit den Standardeinstellungen, jeder tut es.
Hier haben wir das immer so übliche Aussehen einer Überschrift zusammen mit einem Stück Körperkopie, dem wir folgen müssen. Das zieht dich nicht gerade an oder hebt sich von all den anderen Samples ab, oder? Um das Textbeispiel optisch ansprechender zu gestalten, nehmen wir zunächst einige Änderungen an unserer Schriftauswahl vor.
Wählen Sie eine Schriftart, die mit Ihrer Überschrift ein höheres visuelles Gewicht hat
Obwohl die Schriftartauswahl nicht genau "Typografie" ist, ist sie tatsächlich eine Quintessenzkomponente, die dem Typ auf einer Seite hilft, sich von anderen Elementen zu unterscheiden. Mit dem Erscheinen von @ font-face stehen Designern überall riesige Auswahlmöglichkeiten zur Verfügung.
Hier habe ich eine Extra Condensed Gothic Style Schriftart verwendet, die leicht auf einer kostenlosen Font Seite wie FontSquirrel.com gefunden werden kann. Wenn wir aufhören und darüber nachdenken, sollte der Name "Condensed" etwas bedeuten, weil es in der Tat dichter ist als das normale Buchstil-Familienmitglied, was wir genau aus einer Überschrift heraus wollen: etwas, das den Benutzer anzieht und hebt sich wirklich von der Körperkopie ab. Es gelingt Ihnen sicherlich, Ihre Aufmerksamkeit besser als das Original zu ergreifen, aber es gibt einige Dinge, die wir tun könnten, um den Text weiter zu verbessern.
Machen Sie es mit zwei CSS-Zeilen ansprechender
Die unmittelbare Veränderung ist in den Briefen; Sie sind jetzt alle großgeschrieben, aber sie haben jetzt auch ein negatives Kerning zwischen den einzelnen Buchstaben (eine Technik, die vom Zeitungsdesign übernommen wurde).
Beide Merkmale können leicht über CSS erreicht werden, { text-transform: Großbuchstaben; und Buchstabenabstand: -Xpx; }. Indem diese zwei Zeilen Codierungsänderungen ergeben, führt dies zu einer wesentlichen Verbesserung des visuellen Gewichtes, insbesondere gegenüber dem Original.
Arbeite letzte kleine Verbesserungen aus
Im nächsten Schritt hat sich die Schriftart, die im body-Absatz verwendet wird, in eine sauberere serifenlose Schrift verwandelt, die den Überschriftentext besser ergänzt. Wir kommen einem optisch viel ansprechenderen Design näher, aber es gibt ein paar Änderungen, die wir machen können, um es noch mehr zu reinigen.
Wie die grünen Indikatoren zeigen, gibt es ungleiche Ränder und was Typografen gerne "Waisen" nennen. Das ist ein einzelnes Wort, das auf die letzte Zeile des Absatzes fällt. Es erzeugt visuell ein sehr ungleiches Gewicht im Vergleich zum Rest des Textes, und dieses Problem kann leicht gelöst werden, indem der Text leicht umformuliert wird.
Wenn es um Margen geht, gibt es keine Regel, dass alle gleich sein müssen. Allerdings, wenn Sie eine junge Web-Design-Karriere starten, ist es gute Praxis, gleiche Margen überall zu haben, bis Sie Techniken erfahren und lernen, die es Ihnen erlauben, über die Richtlinien des Textsatzes hinauszugehen und Ihr Ziel immer noch visuell zu erreichen.
Nachdem Sie ein ausgewogeneres visuelles Zeichen erstellt haben, indem Sie die verwaiste Person entfernen und die Ränder anpassen, können Sie das Endergebnis sehen, ein gut eingestelltes Muster, das sich an der richtigen Stelle befindet.
Was sind deine besten Tipps für die Web-Typografie? Lass es uns in den Kommentaren wissen!