Schriftgestaltung
Ein Tanz der Buchstaben und Worte
Inmitten einer prächtigen, endlosen Bibliothek stapeln sich alte Folianten und geheimnisvolle Schriftrollen, gefüllt mit Abenteuern und Geheimnissen. Jede Schrift trägt ihre eigene Persönlichkeit. Manche flüstern sanft wie eine alte Prophezeiung, andere schreien beinahe ihre Botschaft heraus, als wären sie übermütige Magier, die auf dem Marktplatz Zaubertricks vorführen.
Mit CSS hast du die Macht, diese Stimmen zu formen und zu lenken. Die Größe? Ein einfacher Zauberspruch, und sie passt sich deinen Wünschen an! Die Farbe? Ein kleiner Alchemie-Trick, und deine Texte erstrahlen im perfekten Ton. Stärke und Stil? Kein Problem! In deinen Händen wird der schlichteste Text zu einer epischen Erzählung. Jede Anpassung ist ein Zauber, der deine Worte lebendig werden lässt.
Die Kunst der Schriftgestaltung
Von zarten Linien bis fetten Schlagzeilen
Die Schriftfamilie
Eine Bibliothek typografischer Stile
In dieser magischen Bibliothek stolperst du über Schriftfamilien, die mit einer Vielfalt an Stilen und Stärken aufwarten. Websichere Schriften stehen dir wie alte, zuverlässige Weggefährten zur Seite, denn sie sind auf fast jedem Gerät verfügbar. Doch wenn du mutig genug bist, kannst du auch andere Schriftarten beschwören. Wie du das machst, verraten wir in einem eigenen Kapitel.
h1 {
font-family: Arial, Helvetica, sans-serif;
}Schriftfamilie Arial; falls diese auf dem System nicht verfügbar ist, wird Helvetica oder eine serifenlose Schrift verwendet.
Schriftstärke
Die Berührung des Künstlers
Ein wahrer Kalligraf weiß, wie er den Druck seines Stifts variiert, um feine oder kräftige Striche zu erzeugen. Leichte Schriftstärken sind wie zarte Pinselstriche, die sanft flüstern. Kräftige Stärken hingegen sind wie ein dröhnender Donner, der sofort alle Blicke auf sich zieht und Autorität ausstrahlt.
h1 {
font-weight: 700;
}Schriftstärke 700 (bold). Viele Schriften bieten verschiedene Stärken, die bei 100 (sehr dünn) beginnen und bis 900 (black) reichen. Alternativ kannst du auch Begriffe wie light, lighter, bold oder bolder schreiben.
Schriftgröße
Skalierung der Erzählung
Die Größe deiner Schrift bestimmt, ob deine Worte in den Himmel ragen oder sich still durch den Fluss des Textes schlängeln. Große Schriftgrößen sind wie imposante Berge, die man nicht übersehen kann. Kleinere Größen hingegen sind wie verschlungene Pfade, die dich näher heranlocken und zum Entdecken einladen.
h1 {
font-size: 2.5rem;
}Eine Schriftgröße von 2.5rem entspricht 40px, wenn die allgemeine Schriftgröße im Dokument auf den Standardwert von 16px gesetzt ist.
Zeilenhöhe
Die Stufen der Erzählung
Die Zeilenhöhe ist der Abstand zwischen den einzelnen Wortreihen, mal großzügig wie der Ballsaal eines Palastes, mal eng gedrängt wie ein Marktplatz voller Aufregung. Jede Einstellung verändert den Rhythmus deines Textes und gibt ihm seinen eigenen Takt.
p {
line-height: 1.5;
}Ein Zeilenabstand von 1.5-facher Schriftgröße sorgt für gut leserlichen Fließtext. Andere Maßeinheiten sind ebenfalls erlaubt.
Buchstabenabstand
Die Kunst der Dehnung
Ein größerer Abstand zwischen den Buchstaben, wie die weiten Felder einer Wiese, lässt sie gemütlich und frei erscheinen. Doch wenn die Buchstaben eng aneinander rücken, wie Häuser in einer belebten Gasse, entsteht Spannung und Schwung.
h1 {
letter-spacing: 5px;
}Hier wird der Abstand zwischen den Buchstaben der h1 um 5px vergrößert.
Wortabstand
Die Erzählkunst des Barden
Ein Barde weiß, wann er die Wörter fließen lässt und wann er Pausen einlegt. Der Wortabstand ist genau das, der Tanz zwischen den Wörtern. Ein größerer Abstand, wie ein Spaziergang durch den Wald, lässt Gedanken verweilen. Ein engerer Abstand treibt die Erzählung voran und verleiht ihr Dringlichkeit.
p {
word-spacing: 5px;
}Hier wird der Abstand zwischen den Worten der Paragraphen um 5px vergrößert.
In dieser Lektion hast du gelernt…
- Wie du mit
font-familypassende Schriftarten auswählst, um eine klare, lesbare Typografie zu gestalten. - Warum
font-weightdie Wirkung von Text beeinflusst, indem du zwischen leichten, normalen und fetten Schriftstärken variierst. - Wie
font-sizedie Leserlichkeit bestimmt, indem du Schriftgrößen mitpx,remoderemskalierst. - Warum
line-heightwichtig ist, um den Abstand zwischen Zeilen anzupassen und den Text lesbarer zu machen. - Wie du mit
letter-spacingundword-spacingden Abstand zwischen Buchstaben und Wörtern steuerst, um Text optisch zu optimieren und die Lesbarkeit zu verbessern.
Hier siehst du den Code, den du gelernt hast – aber fühl dich frei, zu experimentieren! Probiere Änderungen aus, teste neue Ideen und sieh, was passiert. Das ist dein Raum zum Tüfteln!
Die Geheimnisse der Runen
In einem verschlungenen Winkel des Waldes, wo selbst die Bäume manchmal zu tuscheln scheinen, hat Seran, der alte Waldläufer, ein uraltes Relikt entdeckt: eine Tafel, auf der die Ältesten ihre geheimsten Wissen hinterlassen haben. Um diese Rätsel zu entschlüsseln, musst du lernen, mit den richtigen HTML-Elementen zu hantieren. Sie sind wie die magischen Schlüssel zu den Türen der Weisheit.
Deine Aufgabe: Die Gestaltung der Runenschrift
- Schriftfamilie
• Setze für den gesamten Text eine Schriftfamilie wie Arial oder Georgia ein.
• Setze für die Klasse .subtext Verdana ein. - Schriftstärke
Verwende für die .emphasis-Klasse die Schriftstärke bold. - Schriftgröße und Zeilenhöhe
• Setze für das <h1>-Element eine Schriftgröße von 36px und für die Absätze eine Größe von 18px.
• Setze die Größe der Klasse .subtext auf 13px.
• Verwende eine line-height von 1.5 für die Absätze. - Buchstaben- und Wortabstand
Setze für die .emphasis-Klasse einen Buchstabenabstand (letter-spacing) von 2px
und einen Wortabstand (word-spacing) von 5px.
Öffne Visual Studio Code und lasse diese Worte auf der Seite erscheinen. Oder probiere es direkt hier im Editor aus!
body {
font-family: Georgia, 'Times New Roman', Times, serif;
}
.subtext {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 13px;
}
p {
font-size: 18px;
line-height: 1.5;
}
.emphasis {
font-weight: bold;
letter-spacing: 2px;
word-spacing: 5px;
}