Wie CSS deine Website zum Sprechen bringt – 2

Typografie (Schriftart & Schriftgröße): Die Stimme deiner Website

Die Wahl der Schriftart (Font) und Schriftgröße ist entscheidend für die Lesbarkeit und den Charakter deiner Website. Auch hier hast du mit CSS alle Zügel in der Hand.

• Wähle lesbare Schriftarten: Für lange Texte (deine Blogbeiträge!) sind serifenlose Schriften (wie Arial, Lato, Open Sans) oft am besten geeignet, da sie am Bildschirm leichter zu lesen sind. Serifenschriften (wie Times New Roman) wirken klassischer und sind oft gut für Überschriften oder gedruckte Texte.
• Weniger ist mehr: Beschränke dich auf maximal zwei bis drei verschiedene Schriftarten auf deiner gesamten Website. Eine für Überschriften, eine für den Fließtext und eventuell eine für besondere Akzente. Zu viele verschiedene Fonts wirken unruhig.
• Die richtige Schriftgröße: Der Haupttext sollte am Desktop mindestens 14 Pixel (px) groß sein, auf Mobilgeräten eventuell etwas kleiner, um mehr Inhalt darzustellen. Überschriften sind natürlich größer.
• Die richtige Schriftgröße (line-height): Dieser Wert ist oft unterschätzt, aber enorm wichtig für die Lesbarkeit langer Texte. Ein line-height von 1.5 bis 1.8 ist meist ein guter Wert. Probier es aus! Nutze CSS um diese Werte festzulegen:

Ein Beispiel:

/* Beispiel für Schriftarten und -größen in CSS / body { font-family: „Open Sans“, Arial, sans-serif; / Fallback-Schriftarten angeben / font-size: 18px; / Standard-Schriftgröße für den Haupttext / line-height: 1.6; / Wichtig für die Lesbarkeit: Zeilenabstand */
}

h1 {
font-family: Georgia, serif; /* Eine andere Schriftart für Überschriften / font-size: 2.5em; / Relative Größe zur Basis-Schriftgröße */
color: #4CAF50;
}

p {
margin-bottom: 1em; /* Abstand zwischen Absätzen */
}