Dieser Artikel enthält äußerst nützliche Tipps und Best Practices für diejenigen, die noch nicht mit der Typografie im Internet vertraut sind.
Wir werden die gängigsten Methoden zum Einbetten von Webschriftarten, zur Größenanpassung der Schriftarten und zum Festlegen einer durchgehenden Linienhöhe durchgehen.
Web-Typografie: Die Grundlagen
Ich habe meine Designkarriere im Printbereich begonnen, und so war der Übergang zu der webbasierten Denkweise für mich der schlimmste Übergang im Bereich der Typografie. Für das Druckdesign kann ich jede Schriftart verwenden, die ich für jedes Stück verwenden möchte, solange es mir gehört und es auf meinem Computer vorhanden ist. Außerdem kümmert es niemanden wirklich, wie ich die Schriftgröße skaliere, solange sie groß genug ist!
Dieser Artikel enthält einige Techniken, von denen ich wünschte, ich hätte sie von Anfang an gekannt und musste auf harte Weise durch ungeheure Fehler lernen, und andere, von denen ich gerade erst lerne!
Jede dieser drei Techniken mag für einen Profi recht grundlegend erscheinen und wird wahrscheinlich sogar von einigen diskutiert. Ich empfehle jedoch jedem, der sich mit Webdesign beschäftigt, sich mit allen diesen Konzepten vertraut zu machen, um sich für ein Verteidigungsmittel zu entscheiden Position für die Online-Einrichtung Ihres Typs.
Einbetten von Webfonts: Verwenden Sie @ font-face
Vor ein oder zwei Jahren war das Web-Font-Spiel ziemlich unsicher. Jeder wusste, dass eine Revolution kommen würde, aber es gab eine Reihe verschiedener Techniken, die verfolgt wurden, und nur wenige waren sich sicher, wo wir enden würden.
Bis heute ist eine einzige Lösung weitestgehend als die beste Lösung für viele oder sogar die meisten Situationen bekannt. Wenn Sie benutzerdefinierte Schriftarten in eine Website einbetten möchten, ist @ font-face der richtige Weg. Es handelt sich um eine reine CSS-Lösung mit hervorragender Browserunterstützung. Im Gegensatz zu Cufon und seinen Cousins ergibt sich ein perfekt auswählbarer Text, der funktioniert und sich wie eine native Schriftart anfühlt.
Bulletproof @ font-face-Syntax von Fontspring
Dies ist ein perfektes Beispiel dafür, wie sich Best Practices im Webdesign ständig ändern. Das letzte, was ich überprüft habe, war die beste Art und Weise, wie Paul Irishs Smiley-Gesicht mit kugelsicherer @ Font-Face-Syntax war. Bei der Recherche in diesem Artikel entdeckte ich jedoch, dass eine neue Methode aufgetaucht ist, die Paul Irish selbst als "die bestmögliche Lösung" bezeichnet.
Die neue Methode ist die Bulletproof @ Font-Face-Syntax von Fontspring, die Bedenken hinsichtlich der fehlenden Unterstützung von Android in der ursprünglichen irischen Technik anspricht.
Wenn Sie sich über das Fragezeichen wundern, ist es ein cleverer Trick, IE9 in die Vorlage zu täuschen, indem Sie die richtigen Schriftarten laden und einen 404-Fehler vermeiden. Weitere Informationen zur Funktionsweise finden Sie in diesem Beitrag.
Zwei Free @ font-face Services
Wenn Sie kostenlose benutzerdefinierte Schriftarten in Ihre Webseite einbetten möchten, ist der absolut einfachste Weg, den ich gefunden habe, die Verwendung von Google Web-Schriftarten. Dieser erstaunliche Service enthält über 180 Schriftfamilien und erfordert keine Datei-Downloads. Durchsuchen Sie einfach die Bibliothek, wählen Sie die gewünschten Schriftarten aus, kopieren Sie die angegebenen Codeausschnitte und fügen Sie sie ein. Einfacher geht es nicht!
Als Alternative empfehle ich immer FontSquirrel. Hier müssen Sie @ font-face-Kits herunterladen, was ein wenig mehr Arbeit bedeutet, aber die Auszahlung ist eine unschlagbare Sammlung von schönen kostenlosen Schriftarten und die Möglichkeit, eine einzelne Schriftartdatei hochzuladen, die automatisch in verschiedene Formate konvertiert wird verwandelte sich in ein brauchbares @ font-face-Kit.
Das Schriftgrößen-Dilemma
Während wir uns mit Schriftarten beschäftigen, wollen wir kurz die Schriftgröße beschreiben. Dies ist tatsächlich ein viel heftiger diskutiertes Thema als das vorherige. Die Wahrheit ist, egal welche Methode Sie wählen, es gibt viele Webentwickler, die darauf bestehen, dass Sie es falsch machen!
Zum größten Teil? Em? scheint die populäre Wahl zu sein. Die Quintessenz ist die Verwendung von? Px? führt zu Schriftarten, die in bestimmten Browsern nicht gut skaliert werden. Kyle Schaeffer hat einen interessanten Artikel darüber, warum die Verwendung von Prozentsätzen eine bessere Option ist, aber was ich sagen kann, sind die meisten Leute immer noch für "em"? (oder zumindest eine em% -Hybrid).
Nun, seit? Em? Es kann ein wenig umständlich sein, damit zu arbeiten. Es ist üblich, die Schriftgröße des Körpers auf 62,5% festzulegen und dann "em" zu verwenden. für alles andere. Der Grund dafür ist, dass die Ergebnisse leicht zu übersetzen sind: 1.2em = 12px, 1.4em = 14px, 2.4em = 24px usw.
Leider verursacht diese Methode ein seltsames Zusammensetzungsproblem, wenn mit mehreren Ebenen von Eltern / Kind-Beziehungen gearbeitet wird. Sobald Sie ein paar Level erreicht haben, passen Sie die Größe mit "em" an. wird schwierig. Die Problemumgehung besteht normalerweise darin, untergeordnete Elemente bei "1em" zu deklarieren, aber Jonathan Snook hat möglicherweise eine noch bessere Lösung.
Schriftgröße mit REM
Die? Rem? Die Einheit stammt aus dem CSS3-Beutel mit Goodies und Schriftgrößen relativ zum Stamm (html) und nicht zum übergeordneten Element, wodurch das Problem der Zusammenstellung vermieden wird. Hier ist Snooks Syntax aus seinem Artikel Font Sizing With REM:
Der Nachteil hier ist, dass Sie Backups in? Px? Deklarieren müssen. für verschiedene Versionen von Internet Explorer. Laut Snook ist das Ergebnis jedoch eine konsistente und vorhersagbare Größenanpassung in allen Browsern und eine Anpassung der Textgröße in den aktuellen Versionen aller gängigen Browser.
Ärger im Paradies
Wie ich oben erwähnt habe, gibt es immer jemanden, der sagt: "Das stimmt nicht!" Der Entwickler Harry Roberts hat kürzlich einen Artikel bei CSS Wizardry veröffentlicht, in dem er beschreibt, warum er mit "rem" dimensioniert wird. kann vermieden werden.Sein Argument ist, dass der 62,5% ige Trick aus Faulheit des Entwicklers (eine gute Sache nach Roberts) entsteht, aber letztendlich zu einem Ergebnis führt Mehr Arbeit (eine schlechte Sache).
Roberts argumentiert weiter gegen die Festlegung beliebiger Basisschriftgrößen, die Sie nicht benötigen oder sogar verwenden, und fordert stattdessen dazu auf, die Basisstation an der gewünschten Stelle zu positionieren und nur die Ausnahmen zu gestalten.
Beide Entwickler haben absolut gültige Punkte. Die Methode von Snook ist sicherlich einfacher zu verstehen, aber Roberts macht ein etwas überzeugendes Argument, um den 62,5-Prozent-Trick überhaupt zu vermeiden. Sie sollten sich auf jeden Fall beide genau ansehen und entscheiden, welche Sie sich vorstellen können.
Zeilenlose Zeilenhöhe und typografische Raster
Das letzte, was ich noch einmal machen möchte, ist etwas, von dem ich bis vor kurzem nicht wusste, dass es eine Zeilenhöhe ohne Einheiten gibt. Eric Meyer erklärt diese Idee hier ausführlich, aber ich gebe Ihnen einen schnellen Überblick.
Das Konzept hier ist ein bisschen schwer zu verstehen, aber ich möchte mit mir umgehen. Wenn Sie die Zeilenhöhe mit einem einheitlichen Wert wie "1em" deklarieren, wird dieser berechnete Wert automatisch an die Nachkommen weitergegeben. Hier ist das Beispiel, das Eric Meyer zubereitet hat:
Dies scheint zunächst richtig genug zu sein, aber das Ergebnis bezieht sich tatsächlich auf die Zeilenhöhe der untergeordneten Elemente von diesem berechneten übergeordneten Wert. Daher ist der obige Code genau derselbe, als hätten Sie folgendes geschrieben:
Beachten Sie, dass die Zeilenhöhe für alle Elemente bei 15px bleibt. Um dies zu vermeiden, schlägt Meyer vor, unitlose Zeilenhöhen zu verwenden, die als Multiplikator für die Zeilenhöhe der untergeordneten Elemente verwendet werden. Das obige Beispiel wurde umgeschrieben, um diese Technik anzuwenden:
Das Ergebnis für den obigen Code ist genau das gleiche wie das des nachfolgenden Codes. Daraus können wir erkennen, dass unsere Zeilenhöhe von 1? wird mit der Schriftgröße von multipliziert li und klein Elemente und die Ergebnisse sind viel vorhersehbarer.
Beachten Sie hierbei, dass die Zeilenhöhe der Schriftgröße jedes Elements entspricht. Es ist wichtig zu verstehen, dass dies kein Argument für das Festlegen der Zeilenhöhe auf Ihre Schriftgröße ist. Dies wurde nur für das Beispiel durchgeführt. Für die Zeilenhöhe kann eine beliebige Zahl verwendet werden, und Sie sollten ausprobieren, was am besten funktioniert (das nächste Beispiel verwendet 1.231).
HTML5-Heizplatte genehmigt!
Um zu sehen, ob dies üblich ist, habe ich eine Kopie von HTML5 Boilerplate heruntergeladen und im CSS herumgespielt. Sicher genug, ich fand in der Praxis eine einheitenlose Strichhöhe, wenn auch in einer prägnanteren Kurzfassung.
Erstellen eines typografischen Gitters
Wenn Sie sich wirklich mit der Erstellung einer schönen Web-Typografie beschäftigen möchten, lesen Sie den Artikel "Compose to a Vertical Rhythm" von Richard Rutter, in dem einige nützliche Techniken zum Jonglieren von Schriftgröße, Zeilenhöhe und -rand oder Padding beschrieben werden, um einen perfekten Rhythmus für Ihre Seite zu erzeugen .
Chris Coyier bei CSS-Tricks greift diese Technik auf und führt sie weiter, indem sie sie kombiniert, wartet darauf, unitless line-height! Auf dieser Seite können Sie das vorgefertigte typografische Raster von Chris mit diesen Methoden anzeigen und herunterladen.
Fazit
Diese drei Lektionen lassen sich gut zusammenfassen. Wenn Sie Schriftarten im Web einbetten, verwenden Sie @ font-face für eine äußerst funktionale Cross-Browser-Lösung. Zur Zeit scheint die Syntax von Fontspring die beste Lösung für die Formatierung Ihrer @ font-face-Deklarationen zu sein. Google Web Fonts und Fontsquirrel sind die idealen Orte, wenn Sie kostenlose Web-Fonts wünschen, die einfach in jede Seite eingefügt werden können.
Als nächstes seit? Px? kann und hat Schwierigkeiten, die Größe in verschiedenen Browsern zu ändern, indem Sie? oder? rem? Für Schriftgröße ist wahrscheinlich der beste Weg. Verwenden von? Rem? Der 62,5-Prozent-Trick kann problemlos verwendet werden, ohne dass Probleme auftreten. Es gibt jedoch ein vernünftiges Argument gegen das Aufgeben dieser Technik, das Festlegen einer beabsichtigten Basisschriftgröße und die manuelle Berechnung der Ausnahmen für Ausnahmen wie Kopfzeilen.
Wenn Sie mit der Zeilenhöhe arbeiten, empfiehlt es sich, einen vertikalen Rhythmus oder alle typografischen Raster einzustellen. Eine wichtige Methode, die zu beachten ist, ist die Verwendung von Zeilenhöhen, um die Vererbung zu vereinfachen.
Dies sind aktuelle Best Practices, soweit ich sie sehe. Fühlen Sie sich frei, eine heftige Widerlegung in den Kommentaren für alle diese Techniken zu hinterlassen. Ich liebe es, mich mit diesen Dingen zu beschäftigen und wenn ich alternative Methoden habe, möchte ich sie sehen!