Responsive Fonts mit LESS

CSS-Preprocessing ist in eine spannende Erfindung im Bereich der Webentwicklung. Das Wesentliche Merkmal für mich war, mit variablen Maßen, Farben und Schriftgrößen arbeiten zu können, um sie dynamisch über Theme-Einstellungen zu steuern. Mit nur wenigen Codezeilen habe ich beispielsweise ein semantisches GRID unter Kontrolle. Ich ändere einen Wert über die Theme-Einstellungen, und um den Rest kümmert sich LESS.

LESS kann keine solchen Loops. Aber LESS kann Mixins, und damit funktioniert es auch:

Markup

<h1 class="responsive">Responsive H1</h1>
<h2 class="responsive">Responsive H2, 50 % von H1</h2>

LESS

@responsive: 75;
/* Standardstile */
h1.responsive {font-size:@responsive * 1px;line-height:100%;}
h2.responsive {font-size:round(@responsive / 2px);line-height:100%;}

@mwidth:1024; /* ab dieser Breite wird mit Mediaqueries eingegriffen (abwärts) */
@phonewidth: 600; /* bei dieser Breite endet die Skalierung, und enden die Mediaqueries */

@max:@mwidth;
@divisor: @mwidth / @responsive; /* Verhältnis zwischen Fensterbreite und Schriftgröße */
@step: 20; /* Abstand zwischen den Auflösungen in denen ein neues Mediaquery angelegt wird; je größer die Zahl, umso weniger Mediaqueries */

.pseudoX (@max) when (@max > @phonewidth) {

    @responsivesize = round(@max / @divisor);

    @media only screen and (max-width: @max * 1px) {
	h1.responsive {font-size:@responsivesize * 1px;}
	h2.responsive {font-size:round(@responsivesize / 2px);}
    }

    .pseudoX(@max - @step);

}

// erster "Aufruf" mit dem höchsten Wert
.pseudoX(@max);

Das CSS-Ergebnis

Wenn man viele Responsive-Font-Stufen haben will, braucht es viele Mediaqueries, und dann sieht das CSS aus wie nachfolgend. Abstände von mehr als 20 führten durch das Runden zu identischen Schriftgrößen in aufeinanderfolgenden Mediaqueries, daher machte bei den verwendeten Dimensionen eine feinere Abstufung (@step weniger als 20) keinen Sinn.

h1.responsive {
    font-size: 85px;
    line-height:100%;
}
h2.responsive {
    font-size: 43px;
    line-height:100%;
}
@media only screen and (max-width: 1024px) {
  h1.responsive {
    font-size: 85px;
  }
  h2.responsive {
    font-size: 43px;
  }
}
@media only screen and (max-width: 1004px) {
  h1.responsive {
    font-size: 83px;
  }
  h2.responsive {
    font-size: 42px;
  }
}
.
.
.
@media only screen and (max-width: 644px) {
  h1.responsive {
    font-size: 53px;
  }
  h2.responsive {
    font-size: 27px;
  }
}
@media only screen and (max-width: 624px) {
  h1.responsive {
    font-size: 52px;
  }
  h2.responsive {
    font-size: 26px;
  }
}

Alternativ macht das jQuery-Plugin Fittext Webfonts responsive.

Ergänzung vom 29.05.2018: mit z.B. font-size:calc(14px + 0.5vw) unter Verwendung von Viewport Units für den Bereich dazwischen lässt sich eine flexible Anpassung der Schriftgröße heute mit einfacheren Mitteln und reinem CSS erreichen. calc() und Viewport Units werden heute von so gut wie allen Browsern unterstützt. Ab einer bestimmten Größe ist es mithin sinnvoll, einen festen Wert für die gewünschte min-width festzulegen.