Flüssige Typografie

Direkt zum Code, hier ist eine funktionierende Implementierung

html {
  font-size: 16px;
}
@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  }
}
@media screen and (min-width: 1000px) {
  html {
    font-size: 22px;
  }
}

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

Das würde font-size von einem Minimum von 16px (bei einem 320px Viewport) auf ein Maximum von 22px (bei einem 1000px Viewport) skalieren. Hier ist ein Demo davon, aber als Sass @mixin (was wir später behandeln werden).

Siehe den Pen Basisbeispiel für fließende Typografie mit Sass von Chris Coyier (@chriscoyier) auf CodePen.

Sass wurde nur verwendet, um die Ausgabe etwas einfacher zu generieren, und die Tatsache, dass ein wenig Mathematik involviert ist. Schauen wir uns das mal an.

Mithilfe von Viewport-Einheiten und calc() können wir die Schriftgröße (und andere Eigenschaften) basierend auf der Bildschirmgröße anpassen. Anstatt also immer die gleiche Größe zu haben oder bei Media Queries von einer Größe zur nächsten zu springen, kann die Größe fließend sein.

Hier ist die Mathematik, Mike Riethmuller sei Dank

body {
  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

Der Grund, warum diese Mathematik etwas kompliziert ist, ist, dass wir versuchen zu vermeiden, dass die Schrift jemals kleiner als unser Minimum oder größer als unser Maximum wird, was mit Viewport-Einheiten sehr einfach ist.

Wenn wir zum Beispiel wollen, dass unsere Schriftgröße in einem Bereich liegt, in dem 14px die Mindestgröße bei der kleinsten Viewport-Breite von 300px ist und 26px die Maximalgröße bei der größten Viewport-Breite von 1600px ist, dann sieht unsere Gleichung so aus

body {
  font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

Siehe den Pen JEVevK von CSS-Tricks (@css-tricks) auf CodePen.

Um diese Mindest- und Höchstgrößen festzulegen, hilft die Verwendung dieser Mathematik innerhalb von Media Queries. Hier ist etwas Sass, das hilft...

In Sass

Sie könnten ein (ziemlich robustes) Mixin erstellen, wie dieses

@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}

@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
  $u1: unit($min-vw);
  $u2: unit($max-vw);
  $u3: unit($min-font-size);
  $u4: unit($max-font-size);

  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
    & {
      font-size: $min-font-size;
      @media screen and (min-width: $min-vw) {
        font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
      }
      @media screen and (min-width: $max-vw) {
        font-size: $max-font-size;
      }
    }
  }
}

Was Sie so verwenden

$min_width: 320px;
$max_width: 1200px;
$min_font: 16px;
$max_font: 24px;

html {
  @include fluid-type($min_width, $max_width, $min_font, $max_font);
}

Hier ist ein weiteres von Mikes Beispielen, um den fließenden Rhythmus genau richtig hinzubekommen

Erweiterung der Idee auf Überschriften mit modularer Skalierung

Modulare Skalierung, was bedeutet, dass je mehr Platz zur Verfügung steht, desto dramatischer ist der Größenunterschied. Vielleicht ist bei der größten Viewport-Breite jeder Header der Hierarchie 1,4x größer als der nächste, aber bei der kleinsten nur 1,05x.

Siehe Ansicht

"Fluid Type" i̶n̶s̶p̶i̶r̶i̶e̶r̶t̶ von @MikeRiethmuller gestohlen, jetzt live auf @CodePen Blogs. Inklusive "Fluid Modular Scale!" pic.twitter.com/0yJk8Iq8fR

— Chris Coyier (@chriscoyier) 27. Oktober 2016

Mit unserem Sass-Mixin sieht das so aus

$mod_1: 1.2; // mobile
$mod_2: 1.5; // desktop

h1 {  
  font-size: $mod_1*$mod_1*$mod_1*$mod_1 *1rem; 
  @include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font);
}
h2 {  
  font-size: $mod_1*$mod_1*$mod_1 *1rem; 
  @include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font);
}
h3 { 
  font-size: $mod_1*$mod_1 *1rem;
  @include fluid-type($min_width, $max_width, $mod_1*$mod_1 *$min_font, $mod_2*$mod_2 *$min_font);
}

Weitere Lektüre

• Flexible Typografie mit CSS-Locks von Tim Brown
• Das Gleichgewicht finden: Responsive Display Text von Richard Rutter
• Beispiele für fließende Typografie von Mike Riethmuller