Typografie im Responsive Webdesign #2: Responsive Headlines

Im ersten Teil dieser Artikelserie über Typografie im Responsive Webdesign ging es um die Auswahl und Einbindung der richtigen Schrift. Nachdem ich darin die wichtigsten Punkte von reaktionsfähiger Typografie hinsichtlich der Zugänglichkeit behandelt habe, möchte ich nun mit Dir verschiedene Möglichkeiten erkunden, wie Du flüssige und reaktionsfähige Überschriften für Deine Website umsetzen kannst.

Im Grunde gibt es drei Möglichkeiten, um Responsive Headlines für Deine Website zu erzeugen:

1. Mit einem jQuery-Plugin
2. Durch CSS Viewport-Einheiten
3. Durch Verwendung von Media Queries

1. Mit einem jQuery-Plugin

Es gibt drei ziemlich gute Plugins, mit denen Du Überschriften reaktionsfähig gestalten kannst: FitText, BigText und slabText. Diese drei Plugins machen es möglich, reaktionsfähige Überschriften zu erstellen, welche sich an die Breite ihres übergeordneten Elements anpassen. Zwei von ihnen möchte ich Dir kurz vorstellen.

1.1 slabText

Das slabText-Plugin von Brian McAllister möchte ich kurz wegen seiner Vorteile hervorheben. Dieses Plugin teilt die Überschriften in Zeilen, bevor es die Größe der Zeilen verändert, um den verfügbaren Raum zu füllen. Dabei wird die ideale Anzahl von Zeichen pro Zeile errechnet, woraus wiederum die verfügbare Pixelbreite der Schriftgröße berechnet wird. Das Skript verwendet dann die ideale Zeichenanzahl, während die Überschrift in Wortgruppen aufgeteilt wird, die dann in separate Zeilen angezeigt werden.

Reaktionsfähige Überschrift mit slabText Plugin

Die Einbindung von slabText ist ziemlich einfach. Dabei brauchst Du das Plugin lediglich in Deine Seite einzufügen, einige, auf der Demo-Seite empfohlen CSS-Anpassungen vorzunehmen, und das Plugin zum Schluss über den Head-Bereich Deiner Webseite anzusprechen.

Hier ist eine Demo, die das slabText Plugin verwendet. Über die oberen Tabs kannst Du einen Blick auf den Quell-Code werfen. Der Code ist sehr einfach und selbsterklärend. Betrachte außerdem die Demo in Vollmodus und verändere mal die Größe Deines Browserfensters. Du wirst sehen, wie die Textgröße an die Größe des Bildschirms angepasst wird.

Und voila! Du hast nun eine responsive Headline, die auf verschiedenen Geräten großartig aussieht.

1.2 BigText

Das BigText Plugin von Zach Leatherman ist ebenso unkompliziert und sehr einfach zu nutzen. Dieses Plugin nimmt ein einzelnes Element und verändert den Text innerhalb des untergeordneten divs, um die Breite des Elternelements anzupassen.

Das Markup würde wie folgt aussehen:

<div id="bigtext" style="width: 300px">
    <div>BigText</div>
    <div>…</div>
    <div>…</div>
    <div>…</div>
</div>

Nun brauchst Du nur noch das Plugin in Deine Seite einzubinden und das Elternelement anzusprechen, das den Headline-Text beinhaltet. Die Größe des Headline-Textes wird sich nun verändern, um sich an jede Breite anzupassen:

$('#bigtext').bigtext();

Das Plugin passt die Textgröße auf der Basis der Elementbreite automatisch an, unabhängig der anfänglichen Schriftgröße.

2. Verwendung von CSS Viewport-Einheiten

Eine Ähnliche Wirkung (wie die soeben vorgestellten Plugins) kann auch mit CSS Viewport-Einheiten erreicht werden: vw, vh, vmax, und vmin.

Mit diesen Viewport-Einheiten kannst Du sicherstellen, dass Dein Text sich immer an die Breite des zugehörigen Containers orientiert. Die Schrift ändert sich im relativen Verhältnis zu diesem Container, dem Viewport (die Größe des Browserfensters). Wenn sich die Größe des Browserfensters ändert, ändert sich auch die Schriftgröße. Das klingt ganz nach den beiden vorigen Plugins, nicht wahr? Der Unterschied dazu ist, dass wir denselben Effekt auch ohne jQuery-Plugins erreichen können, und zwar nur mit Hilfe von CSS.

Leider sind die Ergebnisse von Viewport-Einheiten etwas weniger flexibel als die der Plugins (denn sie passen die Überschriften automatisch an die Breite ihrer Container an), bei der Verwendung von Viewport-Einheiten müsstest Du die Änderungen manuell einstellen.

Die Viewport-Prozentlängen sind im Verhältnis zur Größe des ursprünglichen Blocks. Wenn die Höhe oder Breite des Blocks geändert werden, werden sie also entsprechend skaliert.

Lass uns nun zu einem Beispiel kommen, das CSS Viewport-Einheiten verwendet, um die Größe der Überschrift zu ändern. Ähnlich wie bei der vorherigen Demo, kannst Du den Code der eingebetteten Demo überprüfen. Stelle beim Betrachten der Demo lediglich sicher, dass Dein Browser Viewport-Einheiten unterstützt.

Hier nun das Beispiel, welches eine reaktionsfähige Überschrift Mit CSS Viewport-Einheiten umsetzt:

Reaktionsfähige Überschrift mit CSS Viewport-Einheiten

Du kannst sehen, dass einige Zeilen in der Überschrift sich nicht erweitern, um in die Breite des Containers zu passen. Hierbei ist nämlich kein Algorithmus vorhanden, der die Buchstaben verbreitert und eine Berechnung vornimmt, um die ideale Anzahl von Buchstaben in jede Zeile unterzubringen, bevor die Überschrift in Zeilen unterteilt wird, wie es beim slabText Plugin der vorherigen Demo der Fall gewesen ist.

3. Verwendung von Media Queries

Die letzte und bekannteste Art und Weise, Responsive Headlines zu erstellen, ist durch den Einsatz von Media Queries. Mit unterschiedlichen Formatdefinitionen in CSS wird die Schriftgröße auf unterschiedlichen Bildschirmgrößen zugewiesen. Das Ergebnis dieser Textgrößenänderung ist jedoch nicht so flüssig wie bei den vorherigen Techniken.

Angenommen, Du hast eine Formatdefinition für das h1-Element, also für die Überschrift 1. Ordnung, vorgenommen. Dann kannst Du mit Hilfe von Medienabfragen (Media Queries) unterschiedliche Formatierungen der Überschrift für verschiedene Bildschirmgrößen zuweisen, wie folgendes Beispiel zeigt:

body {
    font-size: 100%; /* Mit einer flexiblen Grunddefinition beginnen. */
}
 
h1 {
    font-size: 2.5em;
}
 
@media screen and (max-width: 50em) {
    h1 {
        font-size:2em;
    }
}
 
@media screen and (max-width: 40em) {
    h1 {
        font-size:1.5em;
    }
}
 
@media screen and (max-width: 30em) {
    h1 {
        font-size:1.2em;
    }
}

Fortsetzung

Im nächsten Teil stellen wir uns der letzten Herausforderung, der zunehmenden Komplexität mobiler Geräte gerecht zu werden. Dazu betrachten wir Fünf Lösungen, den Body-Text reaktionsfähig zu gestalten. Darunter em– und rem-Angaben anstelle von Pixelwerten und der Einsatz von jQuery-Plugins.