Was ist eine Symbolschrift? (Und wie man eins benutzt)

Symbolschriftarten sind eine beliebte Lösung für ein häufig auftretendes CSS-Problem. So integrieren Sie Web-Symbole effizient und schnell in Ihr Website-Design.

Mit zahlreichen verfügbaren Diensten, die die Auswahl und Verwendung einer Symbolschrift erleichtern, müssen Sie keine eigene erstellen. Symbolschriftarten sind überall im Internet.

Aber was genau ist eine Symbolschrift? Und wie benutzt du sie? Hier finden Sie eine Anleitung zu allem, was Sie über Symbolschriftarten wissen müssen.

Erkunden Sie Schriftarten

Was ist eine Symbolschrift?

Symbolschriftarten sind Schriften, die winzige Bilder anstelle von Buchstabenformen verwenden. Wie der Typ ist jedes Zeichen skalierbar und kann mithilfe von CSS geändert werden.

Die Hauptgründe für die Verwendung einer Symbolschriftart sind, dass Sie Größe, Farbe und Form problemlos ändern können. Symbolschriftarten sind von Natur aus transparent, sodass Sie sie auf jede Farbe oder jeden Hintergrundtyp setzen und Striche hinzufügen oder die Deckkraft von Symbolen ändern können.

Alles wird mit CSS erledigt, sodass Sie nicht für jede neue Instanz eines Symbols im Design eindeutige Bilder erstellen müssen. (Dies ist ideal, um Ihre Website und Ihren Code leicht zu halten.)

Symbolschriftarten sind Vektorbilder, dh sie sind skalierbar. Wie bei jeder anderen Schriftart können Sie sie so groß oder klein machen, wie Sie möchten. Verwenden Sie Symbolschriftarten allein als Kunstelemente oder sogar über andere Textfelder verteilt.

Die beliebteste und bekannteste Bibliothek mit Symbolschriftarten ist Font Awesome. Es wird für mehr als 100 Millionen Websites verwendet und enthält eine robuste Sammlung von Symboloptionen. Es funktioniert mit allen gängigen Tools, einschließlich Web-Schriftarten + CSS, SVG + JS, Skizze, Adobe Apps, Vue.js, Angular, React und Ember.

Es gibt auch einige andere ziemlich bekannte Schriftsymbolsätze.

• Flaticon
• Icofont
• Fontello
• IcoMoon

Vor- und Nachteile der Verwendung von Symbolschriftarten

Warum sollten Sie eine Symbolschrift verwenden oder vermeiden? Hier sind einige der Vor- und Nachteile der Arbeit mit diesem Kunststilelement.

Vorteile der Verwendung von Symbolschriftarten

• Symbole sind einfach zu skalieren, solange die richtigen Klassen in Ihrem CSS vorhanden sind
• Sie können große Symbolbibliotheken mit wenig Aufwand erhalten
• Das Ändern der Symboleigenschaften ist einfach, unabhängig davon, was Sie zum Erstellen Ihrer Website verwendet haben
• Es ist einfach, Symbole zu jeder Seite der Website hinzuzufügen (geben Sie einfach den Symbolnamen ein).
• Es stehen Tausende von Symbolen in verschiedenen Stilen zur Auswahl
• WordPress-Benutzer können Symbolschriftarten mit einem einfachen Plugin oder durch Kopieren des Schriftartenverzeichnisses in den Code (fast jede Schnittstelle) hinzufügen.
• Sie können Ihre eigene Symbolschrift erstellen, wenn Sie etwas Super-Benutzerdefiniertes benötigen

Nachteile der Verwendung von Symbolschriftarten

• Symbole sind eine einzelne Farbe oder ein Farbverlauf (in den meisten Fällen). Einige weitere Premium-Packs ändern dies
• Kein guter Fallback, wenn die Symbolschrift nicht geladen wird
• Möglicherweise benötigen Sie keinen vollständigen Symbolsatz
• Einige Bildschirmleser wissen nicht, was sie mit Symbolschriftarten tun sollen
• Möglicherweise finden Sie keine Packung, die Ihren Anforderungen entspricht

Verwendung von Symbolschriftarten

Während die Anweisungen zur Verwendung von Symbolschriftarten je nach ausgewähltem Anbieter leicht variieren können, ist die Grundidee dieselbe.

Im Allgemeinen haben Sie drei Möglichkeiten (es sei denn, Sie planen, selbst etwas härter zu codieren):

• Verwenden Sie ein Plugin, das alles installiert, sodass Sie nur die Symbole aufrufen müssen, die Sie verwenden möchten. (Super einfach!)
• Verwenden Sie integrierte Schriftsymbole aus Ihrem CMS oder Website Builder. Dies funktioniert hervorragend, wenn Sie keine benutzerdefinierte Site haben oder eine bestimmte Art von Schriftart benötigen. Die meisten Website-Ersteller kommen mit etwas "out of the box".
• Manuelles Verknüpfen mit einer extern gehosteten Symbolschriftart. (Die kompliziertere Version der Verwendung eines Plugins.)

Icon Fonts vs. SVGs

Die größere Debatte verlagert sich dahin, ob Sie eine Symbolschrift im Vergleich zu SVG-Bildern verwenden sollten (oder möchten), um kleine Bilder in Ihre Website einzufügen. Beide Optionen sind gleichermaßen realisierbar und haben viel mit persönlichen Vorlieben zu tun.

Symbolschriftarten sind für die meisten Menschen im Allgemeinen leichter zu finden und zu verwenden. SVG-Symbole werden von Benutzern bevorzugt, die mehr Designkontrolle benötigen.

Eine SVG-Datei (Scalable Vector Format) bietet Ihnen etwas mehr Flexibilität beim Design. (Sie sind nicht auf eine Farbe beschränkt). Die kleinen, skalierbaren Dateien können direkt in Ihr Medienverzeichnis hochgeladen werden und sind einfach zu bearbeiten. Dies ist eine gute Option, wenn Sie nur eine Handvoll Symbole benötigen und sich nicht mit einer Bibliothek befassen möchten.

SVGs sind flexibler und können mehr Farben und Animationen hinzufügen.

Symbolschriftarten werden auf lange Sicht möglicherweise schneller geladen, da sie zwischengespeichert werden. Der Unterschied kann jedoch sehr gering sein.

Das Positionieren von Symbolschriftarten kann etwas schwierig werden, da sie typischen Schriftartenregeln wie Größe, Zeilenabstand und vertikaler Ausrichtung unterliegen. Dies allein ist der Grund, warum sich die meisten Benutzer einer Symbolschriftart für einen etablierten Anbieter entscheiden, anstatt zu versuchen, einen eigenen zu erstellen.

SVGs können Elemente enthalten, die sie zugänglicher machen als Symbolschriftarten, die Bildschirmlesern als Buchstabenzeichen dienen können.

Symbolschriftarten sind für die meisten Menschen im Allgemeinen leichter zu finden und zu verwenden. Bibliotheken sind allgemein verfügbar und nicht schwer zu verstehen. SVG-Symbole werden von Benutzern bevorzugt, die mehr Designsteuerungs- und Anpassungsoptionen wünschen.

Beide Optionen werden häufig verwendet und funktionieren in den meisten Fällen gut. Die Auswahl hat viel damit zu tun, was Ihnen am besten gefällt und was zu Ihrer Designästhetik und Benutzeroberfläche passt.

Fazit

Ein Grund, warum Symbolschriftarten so beliebt sind, ist, dass sie vielseitig und einfach zu verwenden sind. Dank eines skalierbaren Formats, das mit wenigen Klicks auf die meisten Content-Management-Systeme installiert werden kann, kann fast jeder schnell mit der Verwendung von Symbolschriftarten beginnen.

Der eigentliche Vorteil einer Symbolschrift besteht darin, dass das Element CSS verwendet und keine unabhängige Bilddatei ist. Dies ist gut geeignet, um eine schlanke Website mit Elementen zu erstellen, die schnell und in einem Vektorformat geladen werden (ideal, wenn Sie die Größe später ändern müssen).