Viewport Sized Typography

Es gibt Werte in CSS, die dazu dienen, Dinge in Bezug auf den Viewport (die Größe des Browserfensters) zu skalieren. Sie werden als Viewport-Einheiten bezeichnet, und es gibt eine Reihe von ihnen, die leicht unterschiedliche (aber alle nützliche) Funktionen haben. Eine Einheit entspricht 1 % einer der Achsen des Viewports. Diese können für responsives Design nützlich sein, d. h. für das Gestalten von Websites, die auf verschiedenen Bildschirmgrößen gut aussehen und den ihnen zur Verfügung stehenden Platz nutzen.

Mit Viewport-Einheiten kann man vieles machen, aber lassen Sie uns eine im Besonderen betrachten: Typografie.

Es lohnt sich, unseren neueren Beitrag Simplified Fluid Typography für praktische, geklemmte, viewportbasierte Typengrößen zu lesen.

Warum ist das großartig?

Es gibt viele Gründe. Hier sind zwei.

1. Es gibt eine angenehme Zeilenlänge für das Lesen von Text auf Bildschirmen. Ich möchte keinen Sturm im Wasserglas entfachen, aber sagen wir, sie liegt bei etwa 80 Zeichen. Diese Einheiten ermöglichen es Ihnen, sie perfekt einzustellen und diese Erfahrung auf jede Bildschirmgröße skalieren zu lassen.
2. Sie ermöglichen es Ihnen, die Größenbeziehung beispielsweise eines typografischen Headers und des zugehörigen Inhalts eng zu koppeln. Wie bei Ihrem klassischen Trent Walton-Stil-Blogbeitrag.

Wie sie funktionieren

Eine Einheit bei jedem der drei Werte entspricht 1 % der Viewport-Achse. „Viewport“ == Browserfenstergröße == window-Objekt. Wenn der Viewport 40 cm breit ist, dann ist 1vw == 0,4 cm.

Für die Verwendung mit font-size ist es wohl ein „Buchstabe“, der diese Größe annimmt, aber wie wir wissen, ist die Breite eines Buchstabens bei nicht-monospazierten Schriften eher willkürlich. Ich finde, man muss einfach mit den Werten herumspielen, um es so zu bekommen, wie man es möchte. Was im Grunde das ist, was wir sowieso tun, richtig?

• 1vw = 1 % der Viewport-Breite
• 1vh = 1 % der Viewport-Höhe
• 1vmin = 1vw oder 1vh, je nachdem, welcher Wert kleiner ist
• 1vmax = 1vw oder 1vh, je nachdem, welcher Wert größer ist

Verwendung

Kinderleicht.

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

Demo

Hier ist ein Video von einem einfachen Layout, das vw-Einheiten für font-size verwendet.

Schauen Sie sich die Demo selbst an (siehe Browser-Unterstützung).

Oder hier ist ein GIF für eine super einfache Kopfzeile.

Fehler!

Die Unterstützung ist in Chrome 20+ / Safari 6+ vorhanden, aber sie versagt in einer eher signifikanten Weise. Wenn die Browserfenstergröße geändert wird, passt sich die Schriftart nicht an die neue Viewport-Größe an. Die Spezifikation besagt:

Wenn die Höhe oder Breite des Viewports geändert wird, werden sie entsprechend skaliert.

Ich habe es gemeldet. Vielleicht keine große Katastrophe, da es ziemlich genau nur uns Design-Nerds gibt, die Browserfenster vergrößern und verkleinern, aber trotzdem. Die Schriftart passt sich beim Neuladen einer Seite an.

Um dieses Problem zu beheben (Größenänderung ohne Seitenaktualisierung ermöglichen), müssen Sie ein „Repaint“ des Elements auslösen. Ich habe jQuery verwendet und einfach den (in diesem Fall irrelevanten) z-index-Wert jedes Elements bearbeitet, was den Repaint auslöst.

causeRepaintsOn = $("h1, h2, h3, p");

$(window).resize(function() {
  causeRepaintsOn.css("z-index", 1);
});

UPDATE: Machen Sie sich darüber keine Sorgen mehr und erzwingen Sie definitiv keine Repaints. Dieses Problem mit der Größenänderung ist in Chrome 34+ und Safari 7+ behoben. Es ist nicht üblich, die Viewport-Größe auf mobilen Geräten zu ändern, daher bin ich mir nicht sicher, ob dieser Fehler sie jemals beeinträchtigt hat.

Browser-Unterstützung

IE 10+, Firefox 19+, Chrome 34+, Safari 7+, Android 4.4+, iOS 6+ – Unterstützt

Chrome 20-34, Safari 6 – Unterstützt, aber mit Repaint-Problem

Es gibt noch ein paar andere spezifische browserübergreifende Merkwürdigkeiten, dokumentiert auf Can I Use.

Nicht nur font-size

Zur Klarstellung, dies sind nur Einheiten. Genau wie em, px, was auch immer. Sie können sie für alles verwenden, nicht nur für font-size.

Ich denke, font-size ist der überzeugendste Anwendungsfall, da Dinge wie margin, padding und width bereits auf die Größe des Browserfensters reagieren können, indem sie %-Einheiten verwenden. Es gibt jedoch den Fall, dass ein tiefer verschachteltes Element auf die Größe des Browserfensters reagieren muss und nicht auf die Größe seines direkten Elternelements.

Sofort verwenden

Native Nutzung

Sie möchten zumindest einen Fallback bereitstellen.

h1 {
  font-size: 36px; /* Some tweener fallback that doesn't look awful */ 
  font-size: 5.4vw;  
}

Testen der Unterstützung

Modernizr hat noch keinen Test dafür veröffentlicht, aber Sie können ihn selbst testen, indem Sie ein Wegwerfelement verwenden, das Sie in CSS auf eine schmale Breite setzen, dann aber in JavaScript auf 100vw zurücksetzen, und dann messen, ob die Breite gleich window.width ist. So etwas wie:

var testEl = $("#vw-test");

testEl.css({
  width: "100vw"
});

if (testEl.width() == window.innerWidth) {
   // Supported
} else {
   // Not Supported
};

Hier ist dieser Test auf CodePen, aber beachten Sie, dass er nur in der Vollbildansicht funktioniert, da die Berechnung sonst aufgrund von iFrame-Problemen fehlerhaft sein kann.

Funktionalität mit FitText.js nachahmen

Diese Idee, die Gesamtbreite eines Headers mit der Breite seines Elternelements zu verknüpfen, ist genau das, was FitText.js tut. Nur tut es das durch ausgefeiltes JavaScript und Mathematik und spans und so weiter. Theoretisch könnten Sie den Test ausführen und Modernizr.load verwenden, um FitText.js zu laden, wenn keine Unterstützung erkannt wird.

Weitere Informationen

• David Storey: Responsive viewport units