2016/11/11

Responsive Typography — Modular Scale und Fluid Type

Man kennt es, ein neues Projekt steht an und man macht sich allerlei Gedanken dazu. Was ist die Steigerung des ganzen? Richtig, man macht sich Gedanken zu allen Projekten die in Zukunft anstehen werden ohne diese zu diesem Zeitpunkt überhaupt zu kennen. Andy und ich saßen letztens auf Arbeit ( @fredmansky ) mehrfach zusammen um uns über das Thema Schriften in Web Projekten auszutauschen

Wie geht man im Konzept & Design an das Thema heran und wie kann man das ganze dann auch sauber in die Entwicklung überführen. Schnell ist der Begriff Modular Scale gefallen.

Modular Scale

Modular scale is the application of historically/culturally pleasing ratios to type and layout. For example, we can take a base value (like 14px) and scale it upwards and downwards in steps of 1.618 (the golden ratio), or some other ratio such as a musical interval. — Wincent

Selbst hatte ich es auch schon in die Boilerplate integriert aber letztendlich auch nicht so konsequent eingesetzt wie man es vielleicht hätte machen können. Wer mehr zu Modular Scale lesen will dann bei A List Apart: More Meaningful Typography. Modular Scale war dann schlussendlich nicht nur schnell gefallen sondern auch mehr oder minder in Stein gemeisselt.

Ein paar Tage später kam das Thema dann noch mal auf.

Wir hatten zwar entschieden wie wir die Größen in einem Projekt festlegen aber ein weiterer spannender Punkt war das Verhalten im Responsive Kontext. Ein paar Ansätze:

1. Base Font Size für Breakpoints anpassen

Der erste Ansatz war, dass man pro Breakpoint (den man für nötig hält) die Base Font Size einfach so verändert das sich alle Schriftgrößen anpassen. Klingt theoretisch vielleicht gar nicht so schlecht. Doch können wir die Base Font Size wirklich so sehr anpassen das sich das merklich auf alle anderen multiplizierten Größen auswirkt? Und macht uns der Ansatz generell glücklich?

Fazit: Nö!

2. Modular Scale für Breakpoints anders zuweisen

Ansatz zwei geht eine ähnliche Richtung aber hier verändern wir nicht zwingend die Base Font Size (was natürlich dennoch möglich wäre) sondern wir gehen den Weg, dass wir die Scales neu zuweisen. Wenn wir annehmen, dass unsere Base Font Size == Modular Scale 0 (MS0) entspricht und wir die Headlines H1, H2 und H3 brauchen im Projekt würden wir hier jetzt folgende Scales als default zuweisen: H1 == MS3, H2 == MS2 und H3 == MS1 und sagen wir ab einer Viewport Größe >=1024px weisen wir die MS-Werte neu zu und alle Headlines gehen eine Nummer größer: H1 == MS4, H2 == MS3 und H3 == MS2. Ganz einfach oder? Nur zerstören wir da natürlich das Verhältnis zur Base Font Size. Die würden wir jetzt nicht immer zwingend so sehen, dass sie mit angepasst werden muss da wir sonst mit der Base recht groß werden. Guter Ansatz aber…

Fazit: Nö!

3. Modular Scale in Verbindung mit Fluid Type

Buzzword + Buzzword = superawesome! OK, langsam! Was ist dieses Fluid Type überhaupt? Ich versuche mich mal an einer Erklärung: Im Grunde ist es recht einfach. Man benutzt die CSS calc Funktion in Verbindung mit Viewports Units. Klingt super oder. Hier noch mal etwas besser vielleicht:

It is possible to have precise control over responsive typography. Using calc() and viewport units you can create fluid type that scales perfectly between specific pixel values, within a specific viewport range.

Heist im Grunde nichts anderes als das wir vier Werte haben:

(minFS): Minimale Font Size
(maxFS): Maximale Font Size
(minVP): Untere Viewport Grenze
(maxVP): Obere Viewport Grenze

Wenn man jetzt z.B. minFS = 15px, maxFS = 21px, minVP = 320px und maxVP = 1280px hat heißt das nichts anderes als das man bei <=320px die Font Size 15px hat und bei >=1280px die Font Size 21px. Dazwischen wird die Font Size Stufenlos berechnet. Das kann man schön testen indem man seinen Browser groß und klein zieht. Klingt super!

Fazit: That’s the way to go!

Klingt ja alles ganz gut. Nur jetzt haben wir ein Problem. Sketch, Photoshop oder dein Lieblings Layout Programm braucht natürlich einen fixen Wert. Der Anwendungsfall ist ja recht klassisch. Man erstellt ein Design und macht davon dann oft zwei bis drei Größen (320px, 960px, 1440px). Nur wie bekomm ich jetzt meine richtigen Font Sizes für 960px? Problem erkannt, Problem verbannt, wir haben da mal etwas vorbereitet.

Fredmansky Modular Scale Playground

See the Pen Modular Scale by fredmansky (@fredmansky) on CodePen.

Da ganze ist Codetechnisch dann so aufgebaut.

Settings Font Sizes

      
        /*--------------------------------------------------
	#FONT SIZES
  --------------------------------------------------*/

$fontSize-min:          16px;
$fontSize-max:          21px;
$lineHeight-base:       1.5;
$lineHeight-base-px:    $fontSize-min * $lineHeight-base + 0px;



// Modular Scale Settings
$msWidth-min:           480px;
$msWidth-max:           1280px;
$msFactor:              1.2;



// Nothing to change here
$ms1:                   $msFactor;
$ms2:                   $msFactor * $msFactor;
$ms3:                   $msFactor * $msFactor * $msFactor;
$ms4:                   $msFactor * $msFactor * $msFactor * $msFactor;
$ms5:                   $msFactor * $msFactor * $msFactor * $msFactor * $msFactor;
$ms6:                   $msFactor * $msFactor * $msFactor * $msFactor * $msFactor * $msFactor;
$ms7:                   $msFactor * $msFactor * $msFactor * $msFactor * $msFactor * $msFactor * $msFactor;
$ms8:                   $msFactor * $msFactor * $msFactor * $msFactor * $msFactor * $msFactor * $msFactor * $msFactor;
$ms9:                   $msFactor * $msFactor * $msFactor * $msFactor * $msFactor * $msFactor * $msFactor * $msFactor * $msFactor;
$msFont-min:            $fontSize-min;
$msFont-max:            $fontSize-max;



// Font Map
$dh-fontsizes: (
  'ms-2':               12px,
  'ms-1':               15px,
  'ms0':                $fontSize-min,
  'ms1':                $fontSize-min * $ms1,
  'ms2':                $fontSize-min * $ms2,
  'ms3':                $fontSize-min * $ms3,
  'ms4':                $fontSize-min * $ms4,
  'ms5':                $fontSize-min * $ms5,
  'ms6':                $fontSize-min * $ms6,
  'ms7':                $fontSize-min * $ms7,
  'ms8':                $fontSize-min * $ms8,
  'ms9':                $fontSize-min * $ms9,
);

Fluid Type Mixin

      
        /* --------------------------------------------------
	#FLUID TYPE
	Responsive Type
	More Infos: http://madebymike.com.au/writing/fluid-type-calc-examples/
   -------------------------------------------------- */

@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {
  @each $property in $properties {
	#{$property}: $min-value;
  }

  @media screen and (min-width: $min-vw) {
	@each $property in $properties {
	  #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
	}
  }

  @media screen and (min-width: $max-vw) {
	@each $property in $properties {
	  #{$property}: $max-value;
	}
  }
}

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

// Shorthand Version
@mixin ft($args...) {
  @include fluid-type($args...);
}

Page Font Size

      
        /*--------------------------------------------------
	#PAGE
  --------------------------------------------------*/

html {
  @include fluid-type(font-size, $msWidth-min, $msWidth-max, $msFont-min, $msFont-max);
  line-height: $lineHeight-base;
}

Headlines Font Size

      
        /*--------------------------------------------------
	#HEADINGS
  --------------------------------------------------*/

h1,h2,h3,h4,h5,h6 {
  font-weight: 700;
  word-wrap: break-word;
  font-family: ff('headline');
  line-height: 1.2;
}

h1 {
  @include fluid-type(font-size, $msWidth-min, $msWidth-max, $msFont-min * $ms6, $msFont-max * $ms6);
}

h2 {
  @include fluid-type(font-size, $msWidth-min, $msWidth-max, $msFont-min * $ms5, $msFont-max * $ms5);
}

h3 {
  @include fluid-type(font-size, $msWidth-min, $msWidth-max, $msFont-min * $ms4, $msFont-max * $ms4);
}

h4 {
  @include fluid-type(font-size, $msWidth-min, $msWidth-max, $msFont-min * $ms3, $msFont-max * $ms3);
}

h5 {
  @include fluid-type(font-size, $msWidth-min, $msWidth-max, $msFont-min * $ms2, $msFont-max * $ms2);
}

h6 {
  @include fluid-type(font-size, $msWidth-min, $msWidth-max, $msFont-min * $ms1, $msFont-max * $ms1);
}

Was ist eure Meinung zu dem Ansatz vor allem die beiden Sachen zu kombinieren?

dh-Boilerplate

Development

comments powered by Disqus

Responsive Typography — Modular Scale und Fluid Type

Modular Scale

1. Base Font Size für Breakpoints anpassen

2. Modular Scale für Breakpoints anders zuweisen

3. Modular Scale in Verbindung mit Fluid Type

Fredmansky Modular Scale Playground

Da ganze ist Codetechnisch dann so aufgebaut.

Maybe interesting…

Hexgears X1 — Meine erste mechanische Tastatur

Sass Breakpoint Mixin

Remember the Milk richtig nutzen

OFFF 2013 in Barcelona

Web Apps für die ich zahle I — Strava

2010, das neue Jahr beginnt