Schriften mit Elementor

Schriften mit Elementor verwenden

tl;dr: Wie man Schriften einstellt, woher diese kommen und worum es dabei geht behandelt dieser Artikel. Mit Elementor Pro kannst du auch eigene Schriften verwenden. Ausserdem geht es um typographische Grundeinstellungen.

Inhalt

Wer je in einem Layout-Programm oder einem Zeichenprogramm gearbeitet hat ist verwöhnt: Einstellungsmöglichkeit 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 große 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?

 

Elementor Schriften Inhalt
Schon im Tab "Inhalt" findet man 3 formgebende Einstellungsmöglichkeiten.
  1. Der Punkt Ausrichtung erlaubt linksbündige, zentrierte und rechtsbündige Gestaltung. Die vierte Möglichkeit Ausgerichtet bedeutet, daß Blocksatz angewandt wird. Dies funktioniert erst ab 2zeiligem Text. Die Ausrichtung kann für die 3 Gerätegrößen unterschiedlich gewählt werden. 
  2. Der gewählte HTML-Tag wirkt sich dann auf die Gestaltung aus, wenn keine anderen Einstellungen getroffen wurden. Ja nach Theme und Grundeinstellungen wird dann der Text formatiert.
  3. Die Größe, die man hier einstellen kann (Vorgabe [bedeutet immer keine Angabe], Klein, Mittel, Groß, XL und XXL) fügt dem gewählten HTML-Tag eine Klasse von elementor-size-small bis  elementor-size-xxl hinzu. Die voreingestellen Größen reichen von 15 px bis 59 px. Diese Größen scheinen wohl irgendwo in den Untiefen des Elementor festgeschrieben und sind nicht veränderbar. 
Elementor Titel Stil
Im Stil-Tab gibt es die 4 Punkte Textfarbe, Typographie, Textschatten und Überblendmodus.
  1. Textfarbe muß nicht näher erklärt werden. Wie immer bei Farbwählern kann man hier aus den Globalen Farben wählen, die man voreingestellt hat.
  2. Typographie zeigt ein Popup das es in sich hat. S.u.
  3. Der Textschatten erlaubt es eben genau so einen zu definieren.
  4. Überblendmodus,  hier lassen sich die CSS Eigenschaften mix-blend-mode einstellen um verschiedenen Effekte mit zB: Hintergrundbildern oder Hintergrundfarben zu erzielen.

Typographie

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 einzelnen Punkte 

  • Schriftfamilie
  • Größe
  • Schriftschnitt
  • Umwandlung
  • Stil
  • Auszeichnung
  • Zeilenhöhe
  • Zeichenabstand (Laufweite)

werden nun im Detail besprochen. Responsive Einstellungen können für die Größe, die Zeilenhöhe und die Laufweite vorgenommen werden, nicht aber für die restlichen Angaben. Hier muß man sich ggf. mit CSS weiterhelfen oder auch das gewünschte Element doppeln und wechselseitig ausblenden (=unschöne Lösung).

Elementor Typographie Einstellungen
Immer wenn typographische Einstellungen vorgenommen werden können wird es komplex.

Schriftfamile

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. Je nachdem, welche Schriften man verwendet kann es ev. notwendig sein, dies auch in der Datenschutzerklärung der Webseite anzuführen. Der Hintergrund ist der, dass Schriften ggf. von einem anderen Server geladen werden. 

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

Dashboard > Elementor > Benutzerdefinierte Schriftarten 

an. Google erlaubt übrigens das lokale Einbinden der Google-Fonts. Mehr dazu weiter unten. Wer ganz sicher gehen will und auf gar keinen Fall einen Google Font über einen Google-Server einbinden will kann das Plugin Disable and Remove Google Fonts verwenden. Dieses Plugin verhindert die Einbindung auch im Elementor.

Elementor Eigene Schriftarten
Eigene Schrift im Elementor verwenden

Diese Website verwendet übrigens die Laufschrift Work Sans die lokal eingebunden wurde. Diese taucht im Popup Schriftfamilie auf. 

Größe

Zuerst 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. 

Schriftschnitt

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 (eigentlich 1-1000, in der Praxis aber die 9 Stufen der hunderter-Schritte) bieten genauere Abstufungen. Natürlich müssen diese Schriftschnitte auch geladen sein damit diese dargestellt werden können. 

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

WertDeutschEnglisch
100feinthin (hairline)
200extra leichtextra light (ultra light)
300leichtlight
400normalnormal (regular)
500mediummedium
600halbfettsemi bold (demi bold)
700fettbold
800extra fettextra bold (ultra bold)
900schwarzblack (heavy)
950extraschwarzextra black (ultra black)

Umwandlung

Elementor Font Transform
Die Möglichkeiten der Schriftumwandlung als Beispiel

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 (im Unterschied zu Vorgabe, wo kein Wert angegeben wird).

Stil

Font Stil Elementor
Der Elementor Font Stil.

Unter dem Punkt Stil kann man die CSS-Angaben für font-style vornehmen. Auch hier wieder: Vorgabe setzt keinen Wert während Normal den Wert none setzt. 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. Schräg gestellt macht genau was man vermutet: es verzerrt die Schrift (normalerweise um 14°). Dieses Oblique ist übrigens auch der Fallback zu kursiv. Ausserdem bietet CSS die Möglichkeit hier einen anderen Winkel als 14° einzustellen.

Auszeichnung

Elementor Schrift Auszeichnungen
Die 3 Auszeichnungsmöglichkeiten sind Unterstreichen, Überstreichen und Durchstreichen.

Wer eine Auszeichnung benötigt hat hier die Möglichkeit zwischen Unter-, Über- und Durchstreichen zu wählen. Keine bedeutet hier wieder, das none gesetzt wird. 

Zeilenhöhe

Zeilenhöhe in Elementor
Die Zeilenhöhe kann in px oder em angegeben und für die 3 Viewports unterschiedlich eingestellt werden

Bei der Wahl Zeilenhöhe kommt es für eine gute Lesbarkeit auf die Schriftgröße an. Die echte Zeichenhöhe kann bei unterschiedlichen Schriften bei der selben numerischen Angabe verschieden hoch sein. Man kann auch keine allgemeinen Angaben machen, wie das Verhältnis zwischen Textgröße und Zeilenabstand zu wählen ist. Das Beispiel oben zeigt bei einer gewählten Schriftgröße von 2 em die Zeilenabstände 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ößeren Zeilenhöhe auch der Inhalt innerhalb des Blocks nach unten, wenn die Zeilenhöhe niedriger als die Schriftgröße ist auch hinauf.

Schrift Oberkante
Die Oberkante der Buchstaben (also eigentlich die Grundline der Schrift) rutscht je nach gewählten Zeilenabstand hinunter oder sogar hinauf

Zeichenabstand (Laufweite)

Elementor Zeichenabstand ändern
Der Zeichenabstand kann zwischen -5 und + 10 gewählt werden, Voreinstellung ist 0

Mit der Zeichenabstand kann man den Raum zwischen den Buchstaben einstellen. Dies wird mittles der CSS-Eigenschaft letter-spacing umgesetzt. Elementor erlaubt hier Werte von -5 Pixel bis + 10 Pixel (keine andere Einheit), die Voreinstellung ist ±0. 

Mehrspaltiger Text

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.

Elementor Text spalten
Mehrspaltiger Text ist mit Elementor auf Knopfdruck möglich

Der Abstand der Spalten kann (responsiv) extra eingestellt werden. Ausdrücklich gewarnt wird hier vor der Kombination schmale Spalten und Blocksatz

Schlechter Blocksatz mit Elementor
Schwere Satzfehler entstehen automatisch wenn Text „ausgerichtet” wird.

Nur auf den ersten Blick scheint ein mehrspaltiger Blocksatz aufgeräumt und ordentlich. Im Detail sind einfach 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 große 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”.

Im Unterschied zu Layout-Programmen wie Indesign, XPress oder Affinity Publisher beherrscht das Web (CSS)  die Details eines qualitativen Schriftsatzes nicht. Daher besser keinen Blocksatz (also Ausgerichteten Text, align: justify; verwenden).

Automatische Silbentrennung

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. Seit CSS3 gibt es das, ob und wie das unterstützt wird liegt am Browser.  Die gültige CSS-Anweisung lautet:

hyphens: auto;

was von Chrome und Firefox verstanden wird. Damit auch Safari damit umgehen kann und auch ein paar andere ist

selector {hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
}

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

... Erweitert > Eigenes CSS

eingeben kann, damit das aktuelle Widget diesen zusätzlichen CSS-Code interpretiert.

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

­ bzw ­

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

Soft Hyphen
Bedingter Trennstrich im Web.
werkform hilft
werkform hilft bei der Arbeit mit Elementor - auch bei Schriften und Typographie. Kontaktiere mich wenn du professionelle Hilfe brauchst.
In eigener Sache

Schriften lokal einbinden

Woher kommen die Schriften eigentlich? Wenn wir sog. Systemschriften verwenden (Times, Arial, Helvetica) werden diese vom lokalen Computer verwendet. Da diese nicht erst aus dem Netz geladen werden müssen geht das sehr schnell. Der Nachteil: die Gestaltung ist langweilig, ein eigener Charakter der Seite kann nicht entstehen.

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

Wer gerne Google Fonts (aktuell 1048 Schriftfamilen, Stand April 2021) kann diese einfach im Typographie-Menü auswählen. Auf die Frage, ob das DSGVO-konform möglich ist gibt es mehrere Antworten (also eine klassische juristische Frage). Man kann sich einerseits eine plausible Antwort suchen und sich an den damit verbundenen Weg halten – oder man umgeht das Problem, indem man die Google Fonts lokal einbindet. Darf man das überhaupt? Um das zu überprüfen geht es hier weiter. Die gelebte Praxis antwortet eindeutig mit ja.

Wie funktioniert das? Als erstes müssen wir uns den oder die Schriften (Schriftschnitte) besorgen. Der geniale google-webfont-helper macht es es einfach.

Dort sucht man sich die gewünschte Schrift. Als erstes ist der Zeichensatz zu wählen. Normalerweise wird die Voreinstellung latin für die Schriftzeichen passen, wer mehr Zeichen benötigt (zB. für Ostsprachen) wird latin-extended wählen (genauere Erklärung hier). 

Nun markiert man die Schnitte, die man verwenden möchte. Nicht bei allen Schriften sind alle Stärken verfügbar. 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.  

EndungFiletypErklärung
eotEmbedded Open Typekommt aus der Microsoft-Welt, veraltet
ttfTrue Type Formatttf und später otf ist ein Schriftformat das bereits aus den 80ern stammt
svgScalable Vector Graphicsbesonders für IPhone und IPad
woffWeb Open Font Formatseit 2012, W3C-Standard
woff2Web Open Fornt Format 2Weiterentwicklung des woff-Formats, etwa 30% reduzierte Filegröße

Wer also ganz sicher gehen will wählt die erste Option (Best Support), vermutlich wird in den meisten Fällen ausreichen sich auf woff bzw. woff2-Files zu beschränken.

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. 

Beispielschrift Changa
2 Schriftschnitte x 5 Files ergibt 10 einzelne Dateien.

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 

Dashboard > Elementor > Benutzerdenfinierte Schriftarten

fügt man eine neue Schriftart hinzu, danach werden die einzelnen Files hochgeladen. Bei der SVG-Datei gibt es normalerweise keine Vorschau, ev. muss auch der Upload von SVG-Files erst in den Einstellungen erlaubt werden.

Schriften Elementor Lokaler Uopload
Die 5 Schriftdateien für die Schriftstärke und den Stil >> normal <<

nach dem ersten Upload steht dann der Button Schiftart Variante Hinzufügen unter der Liste der Schriften, wo man genau das erledigt.

Schriftschnitte Eigene Schriften Elementor
Die hier verwalteten Schriften stehen in den Menüs unter unter Eigene Schriften zur Verfügung und werden vom eigenen Webserver geladen.

Grundeinstellungen für Fonts

Weil es recht mühsam werden kann die diversen Einstellungen zu treffen gibt es 2 wesentliche Bereiche in den Einstellungen, die besonders relevant für die Darstellung der Fonts sind.

Panel > Site Settings (Design System)> Globale Schriftart
Panel > Site Settings (Theme Style) > Typographie

Globale Schriftart

Globale Schriftart

Elementor legt 4 Schriftarten an, die jedoch noch keine typographischen Definitionen haben. Primary, Secondary, Text und Accent. Diese können umbenannt werden. Man kann beliebig viele weitere Globale Schriftarten anlegen. 

Der Klick auf das Bearbeiten-Icon öffnen das Typographie-Popup (Beschreibung siehe weiter oben).

Unter den Globalen Schriftarten wird hier die Fallback Font Family eingestellt. Also jener Typ Schrift der zu Anwendung kommen soll, falls die gewählte Schrift nicht geladen werden kann.

Anwendung Globaler Stil

Un einen definierten Global Stil anzuwenden muss man dann nur mehr im jweiligen Stil-Tab das Global-Icon anklicken und aus dem sich öffnenden Popup die Voreinstellung wählen.

Wichtig: wer also zB. Primary auswählt selektiert damit nicht nur die Globale Schriftart sondern auch die Globale Schriftfarbe, die unter Primary hinterlegt wurde.

Globale Schriftarten angewendet
In diesem Beispiel wurden nun die 4 Globalen Schriftarten mit der zuvor lokal Eingebunden Schrift Changa definiert. Primary und Secondary mit der 700er Variante, Text und Accent mit der normalen (400), wobei Accent Schräg gestellt wurde.

Typographie

Im Setting-Panel für Typographie kann man nun die zuvor getroffenen Globalen Einstellungen für Farben und Schriften anwenden. Alle jene, die Elementor nicht als einziges Designtool einer WordPress-Seite verwenden sondern andere Einflüsse wie Theme-Einstellungen etc. zulassen müssen hier besonders aufpassen: eine Einstellung für alle H1 kann dann zB. auch Überschriften betreffen die gar nicht mit Elementor bearbeitet wurden bzw. können Theme-Settings auch dann durchkommen, wenn ich sie in einer mit Elementor gestalteten Seite nicht explizit überschreibe.

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. Der große Vorteil dieser Art der Einstellungen ist es, dass ich nun durch Änderung der Globalen Einstellung automatisch auch Änderungen in deren Anwendungen erreichen kann.
Zum Beispiel: wenn ich für meine Überschriften H1 und H2 eine Displayschrift „Primary“ ausgewählt habe und später diese Schriftart ändern will, so muss ich das nur mehr an einer Stelle machen und nicht an den einzelnen Überschriften selber.

Bei der Gestaltung der Links ist mit Vorsicht heranzugehen, man sollte gar nicht glauben, wo überall Links verborgen sind und wie diese da beeinflusst werden. Wer also seine Links mit der Auszeichnung Unterstreichen versieht kann ev. damit rechnen, dass auch seine Menülinks unterstrichen werden. Ggf. muss dann dort die Auszeichnung keine gewählt werden, wenn man das nicht möchte.

Fazit

Obwohl wir noch lange nicht die Qualität von gedruckten Text erreichen können, kann man mit der richtigen Schriftwahl und den richtigen Einstellungen ein ordentliches Lesegefühl erreichen. Elementor hilft dabei, in der Pro-Version ist die Unterstützung noch besser durch die Schriftverwaltung. Gerade am mobilen Gerät bleibt nur recht wenig Raum für individuelle Gestaltung, hier kann mittels eigener Typographie ein ordentlicher Mehrwert erreicht werden.