Responsive Typografie und Layout-Tipps in CSS
February 25, 2017
Ein gutes Web-Layout zeichnet sich durch hervorragende Lesbarkeit (Typografie) und ein responsives Verhalten auf verschiedenen Bildschirmgrößen aus. Durch den gezielten Einsatz von CSS-Berechnungen, relativen Einheiten und flexiblen Layout-Techniken lässt sich dies mit minimalem Code-Aufwand realisieren.
1. Die minimalistische, lesbare Website (Der 7-Zeiler)
Sie benötigen oft nicht viel Code, um ein reines Textdokument auf einer Webseite äußerst ansprechend und gut lesbar zu gestalten. Der folgende "7-Zeiler" setzt bewährte typografische Standards um.
body {
/* Zentriert den Inhalt und begrenzt die maximale Breite auf eine optimale Lesebreite (ca. 65-75 Zeichen pro Zeile) */
max-width: 650px;
margin: 40px auto;
padding: 0 20px;
/* Erhöht den Zeilenabstand für bessere Lesbarkeit */
line-height: 1.6;
font-size: 18px;
color: #333;
}
h1, h2, h3 {
/* Überschriften benötigen einen geringeren Zeilenabstand als Fließtext */
line-height: 1.25;
}
2. Responsive Typografie mit calc() und vw
Anstatt die Schriftgröße stufenweise mit vielen Media Queries für verschiedene Bildschirmbreiten anzupassen, kann die Schriftgröße fließend mit der Breite des Viewports (vw) skalieren.
html {
/* 16px ist die minimale Schriftgröße, die mit 0.3% der Bildschirmbreite wächst */
font-size: calc(16px + 0.3vw);
}
16px: Die minimale Schriftgröße (Untergrenze).0.3vw: Sorgt dafür, dass die Schriftgröße fließend anwächst, je breiter der Bildschirm wird.
Best Practice: Definieren Sie die responsive Schriftgröße ausschließlich auf dem :root-Element (dem <html>-Tag). Alle anderen Elemente im Dokument sollten ihre Schriftgröße relativ dazu über rem-Einheiten beziehen. Dadurch skaliert das gesamte typografische System harmonisch.
3. Der 62.5%-Trick für rem-Einheiten
Die Verwendung von rem (Root Em) ist wichtig für die Barrierefreiheit, da sich die Schriftgrößen an die Einstellungen des Benutzers im Browser anpassen. Da der Standardwert des Browsers meist 16px ist, kann das Rechnen mit rem im Kopf umständlich sein (1.4rem = 22.4px, etc.).
Der 62.5%-Trick setzt die Basisgröße des Dokuments auf 10px zurück (62.5% von 16px = 10px), ohne die Barrierefreiheit zu beeinträchtigen.
html {
font-size: 62.5%; /* Setzt die Basisgröße auf 10px */
}
body {
font-size: 1.6rem; /* Entspricht exakt 16px */
}
h1 {
font-size: 2.4rem; /* Entspricht exakt 24px */
}
Dies erleichtert das Schreiben von CSS-Code erheblich, da Sie die vertrauten Pixel-Werte einfach durch 10 teilen können, um den rem-Wert zu erhalten.
4. Strukturierung von Media-Queries
Media-Queries sollten verwendet werden, um das Layout an den Stellen anzupassen, an denen das Design bricht (Layout-Breakpoints), anstatt sich an den Abmessungen konkreter Geräte (z.B. iPhone, iPad) zu orientieren.
Empfohlene Standard-Breakpoints (in Sass)
$bp-mobile: 480px;
$bp-tablet: 768px;
$bp-desktop: 1024px;
$bp-wide: 1280px;
Verwendung von rem in Media-Queries
Die Verwendung von rem-Einheiten in Media-Queries stellt sicher, dass das Layout auch dann korrekt umbricht, wenn der Benutzer die Standard-Schriftgröße seines Browsers erhöht hat.
/* 48rem entspricht 768px bei einer Standard-Basisgröße von 16px (48 * 16) */
@media (min-width: 48rem) {
.sidebar {
display: block;
width: 25%;
}
}
5. Die klebrige Fußzeile (Sticky Footer) mit Flexbox
Ein häufiges Layout-Problem ist, dass die Fußzeile (Footer) bei Seiten mit wenig Inhalt mitten auf dem Bildschirm "schwebt". Mit Flexbox lässt sich dies elegant lösen, sodass der Footer immer am unteren Bildschirmrand "klebt".
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.main-content {
/* Dehnt sich aus, um den verbleibenden Platz auszufüllen,
wodurch der Footer nach ganz unten geschoben wird */
flex: 1;
}
.footer {
/* Der Footer bleibt am Ende */
}
Fazit
Die Erstellung eines ansprechenden und barrierefreien Layouts erfordert keine riesigen Frameworks. Durch die Kombination von intelligenten Typografie-Berechnungen mit calc(), der Verwendung des 62.5%-Tricks für lesbare rem-Werte, dem Einsatz flexibler Flexbox-Techniken für klebrige Fußzeilen und geräteunabhängigen Media-Queries schaffen Sie ein robustes und hochgradig anpassbares Design mit minimalem Code-Aufwand.