7.1 Grundprinzipien
Responsive Schriftarten spielen eine wichtige Rolle bei der Erstellung von adaptivem Webdesign. Der Einsatz von relativen Einheiten wie vw, vh, vmin und vmax ermöglicht es, dass sich Schriftarten dynamisch mit der Größe des Viewports ändern und dadurch die optimale Anzeige des Textes auf verschiedenen Geräten gewährleistet wird. Lass uns genauer betrachten, wie diese Einheiten funktionieren und wie man sie zur Erstellung von responsive Schriftarten nutzen kann.
Grundkonzepte
vw und vh:
vw(viewport width): 1 Einheitvwentspricht 1% der Breite des Viewportsvh(viewport height): 1 Einheitvhentspricht 1% der Höhe des Viewports
vmin und vmax:
vmin(viewport minimum): 1 Einheitvminentspricht 1% der kleineren Dimension des Viewports (entweder Breite oder Höhe)vmax(viewport maximum): 1 Einheitvmaxentspricht 1% der größeren Dimension des Viewports (entweder Breite oder Höhe)
Vorteile von responsiven Schriftarten:
- Verbesserte Lesbarkeit: Die Schriftgröße passt sich automatisch an die Bildschirmgröße an und sorgt so für ein angenehmes Lesen auf allen Geräten
- Flexibilität im Design: Responsive Schriftarten tragen dazu bei, ein harmonisches und ausgewogenes Design zu wahren, wenn sich die Größe des Viewports ändert
- Einheitlicher Ansatz: Der Einsatz relativer Einheiten für Schriften ermöglicht einen einheitlichen Ansatz zur Erstellung adaptiven Designs
7.2 Beispiele für die Verwendung von vw und vh
Beispiel 1: Grundschriftgröße mit Verwendung von vw
Erstellen wir ein Beispiel, in dem sich die Schriftgröße basierend auf der Breite des Viewports ändert:
body {
font-size: 2vw; /* Schriftgröße entspricht 2% der Breite des Viewports */
}
h1 {
font-size: 4vw; /* Schriftgröße des Headers entspricht 4% der Breite des Viewports */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Schrift mit Verwendung von vw</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Responsive Überschrift</h1>
<p>Dieser Text ändert seine Größe basierend auf der Breite des Viewports.</p>
</body>
</html>
Code-Erklärung:
body { font-size: 2vw; }: legt die Schriftgröße für den Text imbodyfest, die 2% der Breite des Viewports entsprichth1 { font-size: 4vw; }: legt die Schriftgröße für den Headerh1fest, die 4% der Breite des Viewports entspricht
Beispiel 2: Grundschriftgröße mit Verwendung von vh
Jetzt erstellen wir ein Beispiel, in dem sich die Schriftgröße basierend auf der Höhe des Viewports ändert:
body {
font-size: 2vh; /* Schriftgröße entspricht 2% der Höhe des Viewports */
}
h1 {
font-size: 4vh; /* Schriftgröße des Headers entspricht 4% der Höhe des Viewports */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Schrift mit Verwendung von vh</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Responsive Überschrift</h1>
<p>Dieser Text ändert seine Größe basierend auf der Höhe des Viewports.</p>
</body>
</html>
Code-Erklärung:
body { font-size: 2vh; }: legt die Schriftgröße für den Text imbodyfest, die 2% der Höhe des Viewports entsprichth1 { font-size: 4vh; }: legt die Schriftgröße für den Headerh1fest, die 4% der Höhe des Viewports entspricht
7.3 Beispiele für die Verwendung von vmin und vmax
Beispiel 1: Grundschriftgröße mit Verwendung von vmin
Erstellen wir ein Beispiel, in dem sich die Schriftgröße basierend auf der kleineren Dimension des Viewports ändert:
body {
font-size: 2vmin; /* Schriftgröße entspricht 2% der kleineren Dimension des Viewports */
}
h1 {
font-size: 4vmin; /* Schriftgröße des Headers entspricht 4% der kleineren Dimension des Viewports */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Schrift mit Verwendung von vmin</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Responsive Überschrift</h1>
<p>Dieser Text ändert seine Größe basierend auf der kleineren Dimension des Viewports.</p>
</body>
</html>
Code-Erklärung:
body { font-size: 2vmin; }: legt die Schriftgröße für den Text imbodyfest, die 2% der kleineren Dimension des Viewports entsprichth1 { font-size: 4vmin; }: legt die Schriftgröße für den Headerh1fest, die 4% der kleineren Dimension des Viewports entspricht
Beispiel 2: Grundschriftgröße mit Verwendung von vmax
Erstellen wir ein Beispiel, in dem sich die Schriftgröße basierend auf der größeren Dimension des Viewports ändert:
body {
font-size: 2vmax; /* Schriftgröße entspricht 2% der größeren Dimension des Viewports */
}
h1 {
font-size: 4vmax; /* Schriftgröße des Headers entspricht 4% der größeren Dimension des Viewports */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Schrift mit Verwendung von vmax</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Responsive Überschrift</h1>
<p>Dieser Text ändert seine Größe basierend auf der größeren Dimension des Viewports.</p>
</body>
</html>
Code-Erklärung:
body { font-size: 2vmax; }: legt die Schriftgröße für den Text imbodyfest, die 2% der größeren Dimension des Viewports entsprichth1 { font-size: 4vmax; }: legt die Schriftgröße für den Headerh1fest, die 4% der größeren Dimension des Viewports entspricht
GO TO FULL VERSION