Verwirre deine Leser mit Smaller/Larger: Wie du mit CSS die Schriftgrößen manipulierst

Du denkst, du weißt, wie man die Schriftgrößen in CSS anpasst? Denk nochmal nach! In diesem Tutorial zeige ich dir, wie du mit der ‚Smaller/Larger‘-Funktion die Leser deiner Website noch mehr verwirren und frustrieren kannst. Schließlich ist es doch viel lustiger, wenn man sich durch ein Meer von verschiedenen Schriftgrößen kämpfen muss, oder? Ich werde dir auch zeigen, wie du die Größen von untergeordneten Elementen so manipulierst, dass sie größer oder kleiner als ihre Elternelemente sind. Wenn du also genug hast von einfach zu lesenden Webseiten und stattdessen Lust auf ein frustrierendes Erlebnis hast, dann schau dir dieses Tutorial an!
Aber Moment mal, warum sollte man das überhaupt tun? Nun, wenn du deine Besucher dazu bringen möchtest, sich auf deiner Website festzukrallen und eine Achterbahnfahrt der Schriftgrößen zu erleben, dann ist dies der perfekte Weg. Außerdem, wer möchte schon eine langweilige, leicht lesbare Website haben? Schließlich geht es doch darum, die Grenzen zu überschreiten und die Schriftgrößen bis zum Limit zu treiben!

Schritt 1: Verwendung der ‚Smaller/Larger‘-Funktion

Mit der ‚Smaller/Larger‘-Funktion kannst du die Schriftgröße von Elementen in Bezug auf ihre Elternelemente ändern. Zum Beispiel, wenn du die Schriftgröße von einem bestimmten Absatz verkleinern möchtest, kannst du einfach den folgenden Code in deinem Stylesheet verwenden:

				
					p {
font-size: smaller;
}

Dieser Code wird die Schriftgröße des Absatzes auf eine kleinere Größe als die Schriftgröße des übergeordneten Elements setzen. Wenn du stattdessen die Schriftgröße vergrößern möchtest, kannst du stattdessen ‚larger‘ verwenden.

Schritt 2: Manipulation von untergeordneten Elementen

Du möchtest, dass deine Besucher noch mehr Spaß beim Lesen deiner Website haben? Warum verkleinerst du dann nicht einfach die Schriftgröße der untergeordneten Elemente? Mit CSS kannst du die Größe von untergeordneten Elementen relativ zur Größe des übergeordneten Elements ändern.

Zum Beispiel kannst du die Schriftgröße eines untergeordneten Elements um 50% verkleinern, indem du den folgenden Code in deinem Stylesheet verwendest:

				
					.parent {
font-size: 24px;
}
.child {
font-size: 50%;
}

Dieser Code wird die Schriftgröße des untergeordneten Elements auf 12px setzen, wenn die Schriftgröße des übergeordneten Elements 24px beträgt.

Schritt 3: Verwendung von verschiedenen Schriftgrößen

Warum sich auf nur eine Schriftgröße beschränken, wenn du doch so viele zur Verfügung hast? Mit CSS kannst du verschiedene Schriftgrößen auf deiner Website verwenden, um das Lesevergnügen deiner Besucher noch weiter zu verbessern.

Zum Beispiel kannst du verschiedene Schriftgrößen für verschiedene Absätze festlegen, indem du den folgenden Code in deinem Stylesheet verwendest:

Solltest du dich jetzt noch immer nicht sicher sein, ob du diese Schriftgrößen-Funktion auf deiner Website einsetzen willst, denk daran: Wer braucht schon Lesbarkeit und Benutzerfreundlichkeit, wenn man stattdessen die Grenzen des Designs ausreizen kann? Lass uns die Langweiligkeit von klar strukturierten Webseiten hinter uns lassen und stattdessen ein Abenteuer in der Welt der unvorhersehbaren Schriftgrößen erleben!

Also, worauf wartest du noch? Verwirr deine Leser mit wilden Schriftgrößenänderungen und mach deine Website zu einem unvergesslichen Erlebnis. Schau dir jetzt das Tutorial an und lass uns gemeinsam die Welt der CSS-Schriftgrößen erobern!

Hier klicken, um mehr zu erfahren