Schriften mit Elementor verwenden

Wer je in einem Layout-Programm oder einem Zeichenprogramm gearbeitet hat ist verwöhnt: Einstellungsmoeglichkeit bis hinunter in Bruchteile von Millimetern, Zeilenhöhen, Spationierungen… eine jahrhunderte alte Schriftsetzertradition hat seinen Weg in die Computer gefunden. Und dann kam das Web und alles war weg! Nur mühsam mit der Weiterentwicklung von CSS kommen und kamen langsam die Tugenden einer guten Typographie zurück in den Alltag des Screendesigns.

Leseverhalten und technische Voraussetzungen (Handys!) beeinflussen das Nutzerverhalten stark. Es gibt eine grosse Anzahl an guten Schriften, die auch im Web das Lesen erleichtern. Ausserdem ist eine gute Typographie ein Kernbestandteil eines funktionierenden Corporate Designs. 

Ins Detail: was können wir zB. innerhalb des Widgets Überschrift alles gestalten? Welche Änderung führt wo hin?

1. Der Punkt Ausrichtung erlaubt linksbündige, zentrierte und rechtsbündige Gestaltung. Die vierte Möglichkeit Ausgerichtet bedeutet, dass Blocksatz angewandt wird.
2. Der gewählte HTML-Tag wirkt sich dann auf die Gestaltung aus, wenn keine anderen Einstellungen getroffen wurden.
3. Die Groesse (Vorgabe, Klein, Mittel, Gross, XL und XXL) fügt dem gewählten HTML-Tag eine Klasse von elementor-size-small bis elementor-size-xxl hinzu.

1. Textfarbe muss nicht näher erklaert werden. Wie immer bei Farbwählern kann man hier aus den Globalen Farben wählen.
2. Typographie zeigt ein Popup das es in sich hat. S.u.
3. Text Kontur (Text Stroke) erlaubt es dem Text eine Kontur hinzuzufügen.
4. Der Textschatten erlaubt es eben genau so einen zu definieren.
5. Überblendmodus hier lassen sich die CSS Eigenschaften mix-blend-mode einstellen.

Ganz oben die zwei Icons erlauben das zurücksetzen der getroffenen Einstellungen bzw. [+] bieten eine Abkürzung zu den Grundeinstellungen, um dort eine Globale Schriftart festzulegen. 

Die Auswahlmöglichkeiten hier werden unterteilt in Vorgabe, Eigene Schriften (falls vorhanden), System und Google. Wenn Adobe Fonts aktiviert wurden (kostenpflichtig) dann stehen diese auch bereit.

Wer ganz sicher gehen will kann jedoch die gewünschten Schriften selber über den Elementor bereit stellen. Dazu besorgt man sich die Schriftdateien (besonders woff2 ist wichtig!) und legt die Schrift unter

an. Google erlaubt übrigens das lokale Einbinden der Google-Fonts. Wer ganz sicher gehen will kann das Plugin Disable and Remove Google Fonts verwenden.

Zuerst ist die Einheit zu wählen, in der man die Schriftgröße einstellen will. Es stehen 

1. px (Pixel)
2. em (Ems)
3. rem (Root Ems)
4. vw (Viewport With)

zur Auswahl. Während die Angabe in px absolut ist beziehen sich em/rem auf die Größe des Elternelements und vw auf die Breite des Viewports in 1/100 Einheiten. Alles bis auf px ist also relativ. Je nach Einheit erlaubt Elementor nur ganzzahlige Werte (px) oder limitiert auch die maximale Größe (10 bei vw). Diese Einschränkungen wurden sinnvoll gewählt.

Mittels Schieberegler oder im Eingabefeld daneben wird nun die Wunschgröße ausgewählt. 

Mit dem Schriftschnitt legen wir nun fest wie „fett” die Buchstaben sein sollen, von 100 (ganz dünn) bis 900 (ganz dick), oder aber auch Normal oder Bold. Was ist jetzt aber der Unterschied zwischen Normal und 400? Oder Bold und 700? Nähere Auskunft darüber gibt es zB. hier. Einfacher zusammengefasst kann man sagen:

1. Wenn nichts eingestellt wurde wird die Schrift normal dargestellt, das entspricht dem Wert 400.
2. Die Einstellung bold (fett) entspricht dem Wert 700.
3. Schriftschnitte mit numerischen Werten bieten genauere Abstufungen.

Um einen Schriftschnitt einen dieser Werte zuordnen zu koennen hilft diese Tabelle (Quelle: developer.mozilla.org).

Bei Umwandlung werden die CSS-Möglichkeiten von text-transform angewandt. VERSALIEN, klein- und Groß-Schreibung sind selbsterklärend. Normal bedeutet, dass text-transform: none gesetzt wird.

üter dem Punkt Stil kann man die CSS-Angaben für font-style vornehmen. Der Unterschied zwischen Kursiv (font-style: italic;) und Schräg gestellt (font-style: oblique) ist jener, dass im Falle einer geladenen passenden Schrift bei Kursiv ein eigener Font verwendet wird.

Bei der Wahl Zeilenhöhe kommt es für eine gute Lesbarkeit auf die Schriftgröße an. Das Beispiel oben zeigt bei einer gewählten Schriftgröße von 2 em die Zeilenabstaende von 2 em, 1 em und 0,5 em.

Wo wirkt nun die Zeilenhöhe auf den Text? Vereinfacht gesprochen (ausführlicher und genauer hier) wird die angegebene Zeilenhöhe halbiert und über der Oberlänge und unter der Unterlänge der Buchstaben addiert.

Daher rutscht bei einer grösseren Zeilenhöhe auch der Inhalt innerhalb des Blocks nach unten.

Wenn du das Widget Text-Editor verwendest kannst du ausser den oben angeführten Einstellungen im Tab Inhalt auch die Spaltenanzahl einstellen, auf die der Text innerhalb des Blocks aufgeteilt werden soll.

Nur auf den ersten Blick scheint ein mehrspaltiger Blocksatz aufgeräumt und ordentlich. Im Detail sind einige Fehler zu erkennen:

1. Der voreingestellte Spaltenabstand ist zu gering, wenn die Lücken zwischen den Worten breiter als die Spalten sind.
2. Da nur der Wortabstand erhöht wird entstehen grosse Löcher im Schriftbild.
3. Hurenkinder und Schusterjungen, also Rumpfzeilen am Beginn von Spalten oder am Ende stören das Lesen.
4. Die Grundlinien der Spalten sind nicht gleich, der Text springt.

Da (besonders) die deutsche Sprache sehr lange Worte zulässt ist sowohl für den mehrspaltigen Text als auch für schmale Spalten (responsive Design!) Silbentrennung eine gute Sache. Die gültige CSS-Anweisung lautet:

ein möglicher CSS-Code. Das Beispiel hier verwendet selector, also jenen speziellen Begriff den ich bei einem Widget unter

Wer sich den Weg über CSS sparen will kann auch das sogenannte Weiche Trennzeichen (Soft Hyphen) einsetzen. Dieses hat den Code

Ob und wo man dieses Zeichen findet ist sehr vom Betriebssystem abhängig. Hier eine gute Zusammenstellung auf Wikipedia: Bedingter Trennstrich.

Woher kommen die Schriften eigentlich? Wenn wir sog. Systemschriften verwenden (Times, Arial, Helvetica) werden diese vom lokalen Computer verwendet.

Wer mit der Adobe Creative Cloud arbeitet (kostenpflichtig) ist mehr gewohnt. Elementor unterstuetzt auch die Adobe Fonts (Type Kit). Ein Type Kit Video gibt es hier.

Wer gerne Google Fonts verwendet kann diese einfach im Typographie-Menu auswählen. Allerdings erfolgt dann eine Google-Font-Einbindung die in DE nicht ohne User-Einwilligung erfolgen darf.

Der bessere Weg lautet: zuerst unter

(Neu ab Elementor V3.10). Danach die gewuenschten Schriften lokal einbinden.

Wie funktioniert das? Als erstes muessen wir uns den oder die Schriften besorgen. Der geniale google-webfont-helper macht es einfach.

Dort sucht man sich die gewünschte Schrift. Als erstes ist der Zeichensatz zu wählen. Nun markiert man die Schnitte, die man verwenden möchte. Beim 3. Schritt (Copy CSS) wählt man zwischen Best Support und Modern Browsers. Im Ersten Fall werden 5 Filetypen produziert, im anderen Fall nur 2.

Wer also ganz sicher gehen will wählt die erste Option (Best Support). Im 4. Punkt können wir nun das zusammengestellte Archiv downloaden, im Beispiel hier sehen wir 2 Schriftschnitte mit jeweils 5 Filearten der Schrift Changa.

Am obigen Screenshot zu sehen: während die svg-Datei der fetten Variante 53 kb Daten benötigt kommt die woff2-Variante mit nur 15 kb aus.

Nun wechselt man ins Dashboard der Webseite, unter

Im Setting-Panel für Typographie kann man nun die zuvor getroffenen Globalen Einstellungen anwenden. Alle jene, die Elementor nicht als einziges Designtool verwenden muessen hier besonders aufpassen.

Hier können wir also

• Body
• Link
• H1 – H6

gestalten. Wer nicht starre Pixel sondern die Einheiten EM bzw. REM verwendet wird oft zu stimmigeren Ergebnissen kommen.

Bei der Gestaltung der Links ist mit Vorsicht heranzugehen, man sollte gar nicht glauben, wo überall Links verborgen sind.

Obwohl wir noch lange nicht die Qualitaet von gedruckten Text erreichen koennen, kann man mit der richtigen Schriftwahl und den richtigen Einstellungen ein ordentliches Lesegefuehl erreichen. Elementor hilft dabei, in der Pro-Version ist die Unterstuetzung noch besser durch die Schriftverwaltung. Gerade am mobilen Geraet bleibt nur recht wenig Raum fuer individuelle Gestaltung, hier kann mittels eigener Typographie ein ordentlicher Mehrwert erreicht werden.