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:

TailwindCSS: Fluid Type Plugin

Responsive Typography — Modular Scale und Fluid Type