Gestern haben wir einen Artikel mit acht einfachen und nützlichen Tipps für den Kerning-Typ veröffentlicht. Dies konzentrierte sich hauptsächlich auf die Grundlagen des Kerning: Was ist es, wie funktioniert es, Buchstabenpaare, auf die man achten kann, usw.
Heute machen wir eine Diskussion darüber, wie Sie mit Lettering.js Ihren Web-Typ festlegen können. Mach dir keine Sorgen, das ist es viel einfacher als du denkst!
Kerning-Webtyp: Eine verlorene Schlacht
Die Typografie im Internet hat in den letzten Jahren einen großen Weg zurückgelegt. Früher war es so, dass es nur eine Handvoll "Sicheres" gab. Schriftarten, die auf einer bestimmten Website verwendet werden. Heutzutage können Sie mit Optionen wie Typekit und Google Web Fonts browserübergreifenden, Live-Text und vollständig auswählbaren Text mit Hunderten verschiedener Schriftarten verwenden.
Als Konsequenz haben sich Webdesigner Hals über Kopf auf den Typ verliebt und können nicht genug davon bekommen. Bei all dem Fortschritt, der beim Einbetten von Schriftarten über CSS erzielt wurde, fehlt in der Toolbox des Typographen immer noch ein wesentlicher Bestandteil: das Kerning.
Es ist fast unmöglich, gut entworfene Überschriften ohne Kontrolle über das Kerning zu strukturieren. In Ihrem CSS-Arsenal gibt es tatsächlich einige Abstandsoptionen, die für das Kerning jedoch ineffektiv sind. Schauen wir uns kurz an, wie diese funktionieren.
Buchstaben-Abstand
Wenn Sie ein CSS-Kerning von Google verwenden, erhalten Sie eine Reihe von Artikeln, in denen Sie darüber informiert werden, dass die Verwendung von Buchstabenabständen angewendet wird. Zu einem bestimmten Selector können Sie Ihren Typ kern. Das ist eigentlich ungenau. Hier ist ein Bild aus dem Artikel von gestern, das zeigt, was ich meine.
Wie Sie sehen, wirkt sich Kerning auf den Abstand zwischen zwei bestimmten Buchstaben aus. Die Nachverfolgung wirkt sich auf den gleichmäßigen Abstand zwischen allen Buchstaben aus und der Abstand auf den Zeilenabstand auf den Zeilenabstand. Lassen Sie uns vor diesem Hintergrund einen Blick darauf werfen, welchen Effekt die Buchstabenabstände haben. Eigenschaft hat auf etwas Text.
Wie Sie sehen können, ist der? Buchstabenabstand? Die Eigenschaft wirkt sich eindeutig auf das Tracking aus, nicht auf das Kerning. Durch Anwenden eines bestimmten Buchstabenabstandswerts wird der Abstand zwischen jedem Buchstaben in Wort, Zeile oder Absatz geändert.
Verwenden des Buchstabenabstands zu Kern
Um ehrlich zu sein, ist die Aussage im vorherigen Abschnitt etwas vereinfacht. In der Realität gilt die Buchstabenabstandseigenschaft für alle Buchstaben, die mit Ihrem Selektor angesprochen werden. Aus diesem Grund ist der? H2? Selektoren wirken sich auf alles in der Kopfzeile aus.
Wenn wir wirklich böse werden wollen, können wir zusätzliche Markierungen hinzufügen, um echtes Kerning mit Buchstabenabstand zu erreichen. Dies würde die Verwendung von Bereichen in Ihrem HTML-Code beinhalten.
Offensichtlich ist diese Methode wegen der zusätzlichen Markierungen ziemlich unerwünscht. Dies gilt insbesondere, wenn Sie mehrere Buchstaben schreiben müssen. Die Ergebnisse sind für die Lesbarkeit Ihres Codes verheerend.
Wortabstand
Eine weitere CSS-Eigenschaft, die sich auf Textabstände bezieht, ist "Wortabstand". Wieder ist dies eine coole Eigenschaft, aber es hilft uns nicht viel bei unserer Suche nach Kern. Dies macht genau das, was es klingt: Es passt die Größe des Abstands zwischen Ihren Wörtern an.
Meet Lettering.js
Wie Sie sehen, sind die aktuellen CSS-Kerning-Lösungen ziemlich lecker. Soweit ich das beurteilen kann, gibt es wirklich keinen guten Weg, ohne ernsthafte Auswirkung auf Ihr Markup vorzugehen.
Glücklicherweise gibt es eine kostenlose jQuery-Erweiterung namens? Lettering.js? Dies eröffnet eine Vielzahl von Optionen für die einfache Gestaltung von Web-Typografie.
Was tut es?
Lettering.js wurde nicht ausschließlich für das Kerning erstellt, sondern ist ein Werkzeug, mit dem Sie einfach einzelne Buchstaben, Wörter oder Zeilen in Ihrem CSS anzeigen können. Dies eröffnet wiederum die Möglichkeit für viele verschiedene Effekte, einschließlich Kerning!
Wie Sie sich vorstellen können, können Sie, wenn Sie problemlos bestimmte Buchstaben in CSS anvisieren können, Ränder oder andere Layout-Eigenschaften verwenden, um alles genau nach Ihren Wünschen zu positionieren und zu gestalten. Kernbuchstaben, wenden verschiedene Farben und Rotationen an; verrückt werden!
Wie funktioniert es?
Um Lettering.js zu verwenden, sollten Sie zunächst bei GitHub vorbeischauen und sich den kostenlosen Download herunterladen. Stellen Sie außerdem sicher, dass Sie die neueste Version von jQuery verwenden.
Als Nächstes entscheiden Sie, was Sie anvisieren möchten. In den meisten Fällen handelt es sich hierbei um eine Überschrift oder um einen anderen kleinen Textteil. Sie wollen eigentlich nie einen ganzen Absatz anfangen!
Nehmen wir an, wir möchten ein? H2? Tag wie in den vorherigen Beispielen, hier ist unser HTML-Markup ohne Nonsens:
Warum habe ich einen so unsinnigen Satz benutzt? Weil das Standard-Kerning für diese Überschrift ein Zugunglück ist. Schauen Sie sich an, wie der Browser diesen Typ darstellt.
Wie Sie sehen, mit einem schlechten Beispiel ist es klar, dass wir zumindest gelegentlich eine Lösung für Kerning-Anpassungen benötigen. Zum Glück haben wir unsere Geheimwaffe.
Um die Kraft von Lettering.js zu nutzen. Fügen Sie einfach das folgende Code-Snippet in Ihren Code ein. Sie müssen nur die? H2? Teil, wenn Sie etwas anderes anvisieren möchten.
Damit setzt die JavaScript-Magie ihren Lauf und verwandelt unseren sauberen Code im Wesentlichen in die Hässlichkeit, die wir mit dem Buchstabenabstand-Trick gesehen haben. Beachten Sie jedoch, dass unser Quell-HTML-Code nur dann umgewandelt wird, wenn der Benutzer die Seite lädt. Unsere eigentliche Quelldatei bleibt frei von allen span-Tags. Wenn die Seite jedoch geladen ist, wird sie in Folgendes umgewandelt:
Bei diesem Schritt kümmert sich Lettering.js um uns. Bewaffnet mit diesen Klassennamen können wir jetzt mit jedem Buchstaben in CSS tun, was wir wollen.
Kerning
Wenn wir zu unserem CSS wechseln, können wir problemlos alle Klassen anvisieren, die automatisch von Lettering.js generiert werden.Nehmen wir zum Beispiel an, wir wollen an dem AV-Projekt arbeiten. Briefpaarung. Dazu zählen wir zu den? V? (der 11. Buchstabe) und verschieben Sie ihn mit dem folgenden Code.
Beachten Sie, dass Sie die Buchstabenabstandseigenschaft trotzdem verwenden können, wenn Sie der Meinung sind, dass dies korrekter ist. anstelle des? V? obwohl.
So oder so, mit sehr wenig Arbeit haben wir die gewünschte Wirkung erzielt!
Mit Kern.js wird das Kerning noch einfacher
Lettering.js ist unglaublich einfach zu implementieren und zu verwenden. Das Kerning kann jedoch ein wenig langweilig werden, da Sie den Code ständig anpassen und dann die Vorschau aktualisieren müssen, um zu sehen, ob die Anpassung zu viel, zu wenig oder genau richtig war. Glücklicherweise können wir ein weiteres kostenloses Tool verwenden, um uns zu helfen.
Kern.js ist keine Bibliothek oder Erweiterung, sondern eher eine Web-App, die es uns ermöglicht, den Kern-Typ visuell zu erkennen, wie wir es in Photoshop oder Illustrator tun würden.
Um dieses Tool zu verwenden, halten Sie auf der Website Kern.js an und installieren Sie das Bookmarklet. Öffnen Sie dann Ihre Testwebseite in Ihrem Browser und klicken Sie auf das Bookmarklet. Von hier aus wird alles, auf das Lettering.js angewendet wird, interaktiv, das heißt, Sie können einfach alle Ihre Buchstaben anklicken und ziehen.
Wenn Sie fertig sind, klicken Sie auf "Bearbeitung beenden". und das erforderliche CSS wird automatisch generiert. Kopieren Sie diese einfach in Ihren Code und Sie können loslegen!
Vor-und Nachteile
Natürlich ist diese Methode für das Kerning-Web-Typ nicht fehlerfrei. Es ist jedoch die beste Lösung, auf die ich gestoßen bin. Wenn Sie also etwas Besseres wissen, schreiben Sie unten einen Kommentar. In der Zwischenzeit empfehle ich, Lettering.js und Kerning.js für Ihre Web-Kerning-Anforderungen zu überprüfen.
Die Vorteile liegen auf der Hand: Sie erhalten eine äußerst einfache und leicht zu implementierende Lösung für das Kerning von Live-Typografie im Web. Der Text bleibt perfekt wählbar und Sie müssen Ihre HTML-Markierung nicht mit einer Reihe von unangenehmen Span-Tags beschmutzen. Sie werden hinzugefügt, aber auf eine Weise, die Ihren Code sauber hält.
Es gibt auch einige Nachteile. Für Anfänger ist dies eine JavaScript-Lösung, die offensichtlich für Benutzer mit deaktiviertem JavaScript nicht funktioniert. Das Tolle daran ist jedoch, dass diese Benutzer im Wesentlichen dieselbe Erfahrung machen würden wie sie, wenn Sie diese Methode vollständig ausgelassen hätten! Im Grunde sind sie wirklich nichts. Offensichtlich gibt es auch bei der Verwendung von JavaScript einige geringfügige Auswirkungen auf die Geschwindigkeit.
Der größte Nachteil ist, dass Sie ein anständiges Stück unbeholfenes CSS erhalten. Wenn Sie jedoch einzelne Buchstaben formatieren möchten, können Sie nicht mehr viel tun. In meinem Beispiel ist hier der resultierende Code, nachdem Kern.js verwendet wurde, um eine Reihe von Dingen manuell zu bewegen. Um ehrlich zu sein, ist es wirklich nicht so schlimm!
Fazit
Um es zusammenzufassen, saugt das Kerning im Web. Entgegen der landläufigen Meinung wird der "Buchstabenabstand" Die CSS-Eigenschaft an sich ist eher auf das Tracking als auf das Kerning ausgerichtet. Sie müssen Ihren HTML-Code wirklich in den Papierkorb werfen.
Als Alternative kann Lettering.js in weniger als einer Minute implementiert werden und bietet wirklich vollständige Flexibilität in Bezug auf den Kern Ihres Typs. Sie können sogar Kern.js verwenden, um Ihren Typ in einer visuellen Benutzeroberfläche zu kürzen, genau wie bei der Verwendung von Grafiksoftware!
Wenn Sie nach einem besseren Weg zum Kern-Live-Web-Typ gesucht haben, probieren Sie diese Lösung aus und lassen Sie uns wissen, was Sie in den Kommentaren denken.