Wie kann ich meine Schrift anpassen?
Schriften spielen eine entscheidende Rolle bei der Wahrnehmung von Websites. In setHUB können Sie Ihre Schrift nach Belieben anpassen und hinzufügen. Die im Style enthaltenen Absatzformate dienen als Vorlage und sollten nicht gelöscht werden, da sie insbesondere für Überschriften (h1 bis h6) von großer Bedeutung sind. H1 steht dabei für die Hauptüberschrift oder den Titel der Website, während h2 bis h6 für untergeordnete Überschriften mit abnehmender Hierarchie stehen. Durch die zentrale Anpassung der Absatzformate können Sie sicherstellen, dass Ihre Website einheitlich gestaltet ist. In dieser Anleitung zeigen wir Ihnen, wie Sie die die Schriften für Ihre Website anpassen können.
- Klicken Sie in der Navigationsleiste auf Style
- Wählen Sie den zu bearbeitenden Style aus
- Klicken Sie im Menü links auf die Rubrik Fonts
- Klicken Sie auf das zu bearbeitende Absatzformat (h1, h2, h3, p, usw.), um das Fenster Edit Font zu öffnen
Responsive Schrift
In den Einstellungsmöglichkeiten für Schriften können Sie die Schriftgröße für jede Ansicht (Desktop, Tablet, Mobile) separat anpassen.
- Wählen Sie mit einem Klick auf Desktop, Tablet oder Mobile das Endgerät aus, für das Sie die Schrift anpassen möchten
- Führen Sie für das jeweilige Endgerät die gewünschten Einstellungen aus
- Klicken Sie auf Speichern, um die Änderungen zu speichern und den Vorgang abzuschließen
Schriftart
- Klicken Sie in das Eingabefeld Font family
- Entfernen Sie die eingetragene Schriftart, um alle Schriftarten anzuzeigen
- Geben Sie den Namen Ihrer Schriftart ein oder suchen Sie nach dieser
- Klicken Sie auf den Namen der Schriftart, um diese festzulegen
Neue Schriftart hinzufügen
- Klicken Sie auf das + Icon im Eingabefeld Font family
- Geben Sie den Titel Ihrer Schriftart ein
- Laden Sie die Woff oder Woff2 Dateien Ihrer Schriftart für Normal, Bold und Italic hoch indem Sie jeweils auf Select File drücken und die jeweiligen Dateien auswählen.
- Drücken Sie auf Save, um die Schriftart hinzuzufügen
Ausrichtung
Wählen Sie eine der folgenden Textausrichtungen, durch einen Klick aus:
- Linksbündig: Der Text wird an der linken Kante ausgerichtet und bildet eine gerade Linie an der linken Seite
- Zentriert: Der Text wird mittig ausgerichtet, so dass die gleichen Abstände von der linken und rechten Seite vorhanden sind
- Rechtsbündig: Der Text wird an der rechten Kante ausgerichtet und bildet eine gerade Linie an der rechten Seite
Transformation
Wählen Sie bei Bedarf eine der folgenden Texttransformationen, durch einen Klick aus:
- Kapitälchen (Tt): Der erste Buchstabe jedes Wortes wird in Großbuchstaben gesetzt, während die anderen in Kleinbuchstaben verbleiben z. B. The Digital Easy
- Uppercase (TT): Jedes Wort wird in Großbuchstaben gesetzt z. B. THE DIGITAL EASY
- Lowercase (tt): Jedes Wort wird in Kleinbuchstaben gesetzt z. B. the digital easy
Farbe
- Klicken Sie in das Feld Color
- Wählen Sie Ihre gewünschte Farbe aus
Abstände und Größen
- Schriftgröße: Im Eingabefeld Font size können Sie die Schriftgröße für Ihre Schrift festlegen.
- Laufweite: Mit der Laufweite wird der Abstand zwischen den einzelne Buchstaben definiert. Die Laufweite kann im Eingabefeld Letter spacing definiert werden.
- Zeilenabstand: Mit der Laufweite wird der Abstand zwischen den einzelnen Zeilen definiert. Der Zeilenabstand kann im Eingabefeld Line height definiert werden.
- Abstand nach oben: Der Abstand der oberhalb des Textabschnitts ist, kann mit Margin top definiert werden
- Abstand nach unten: Der Abstand der unterhalb des Textabschnitts ist, kann mit Margin bottom definiert werden
Größeneinheiten: Für alle Abstände und Schriftgrößen können Sie verschiedene Einheiten verwenden. Eine gängige und empfohlene Einheit ist "Pixel". Alle Größeneinheiten werden im folgenden genannt:
- Pixel (px): Eine absolute Einheit, bei der die Größe in Bildschirmpixeln angegeben wird (Empfohlen)
- Prozent (%): Eine prozentuale Einheit, die sich auf die Größe des übergeordneten Elements bezieht
- Root Emphasis (rem): Eine relative Einheit, die sich auf die Schriftgröße des Root-Elements bezieht
- Emphasis (em): Eine relative Einheit, die sich auf die Schriftgröße des nächsten übergeordneten Elements bezieht
- Viewport-Einheiten (vw, vh, vmin, vmax): Relative Einheiten, die sich auf die Größe des sichtbaren Bereichs des Viewports beziehen
Schriftstil
- Klicken Sie auf das Feld Font Style, um das Drop Down Fenster zu öffnen
- Wählen Sie zwischen einem der folgenden Styles mit einem Klick aus
- Normal (standard)
- Italic (kursiv)
- Oblique (fett)
Gewicht der Schrift
Das Gewicht oder die Stärke einer Schrift wird oft mit Begriffen wie "normal", "fett", "dünn", "extrafett" oder "leicht" beschrieben und kann in unterschiedlichen Abstufungen oder Stufen vorhanden sein, je nach der verwendeten Schriftart.
- Klicken Sie auf das Feld Font weight, um das Drop Down Fenster zu öffnen
- Wählen Sie zwischen einem der folgenden Gewichtungen mit einem Klick aus
- Lighter
- Normal
- Bold
- Bolder
Speichern
Nachdem Sie alle gewünschten Einstellungen vorgenommen haben, vergessen Sie bitte nicht, auf den Speichern-Button zu klicken. Beachten Sie, dass alle Änderungen verloren gehen, wenn Sie das Fenster schließen, ohne auf den "Speichern"-Button zu klicken.