typoScale AéM 1.0

André Morre Mediendesign

referring blog article: andre-morre.de/typoscale

Automatic CSS Font Size Scaling System

Continuous typography scaling system calculation under abandonment of @media queries.This system is based on the "100% Responsive Typography System using a Modular Scale" by Ricardo Zea: LINK. This system uses greater font size leverage for more progressive font design. The modification / extension is also for better usability with full page designs on high resolution screens (2.560 px and more). It uses the css clamp() calculation to restrict the minimum and maximum values of all font sizes.


H1 Ich bin eine Überschrift

H2 Ich bin eine Überschrift

H3 Ich bin eine Überschrift

H4 Ich bin eine Überschrift

H5 Ich bin eine Überschrift
H6 Ich bin eine Überschrift

Und zum Schluss kommt noch ein kurzer Fließtext.

In case you don't know: This is German! ;)


Comparing the H2: a) as above · b) without clamp() · c) 1.9em only

H2 Ich bin eine Überschrift

H2b ohne Ober- und Untergrenze

H2c ohne Grenzen, ohne Hebelwirkung


H2 Ich bin eine Überschrift

H3 Ich bin eine Überschrift

Blindetext erweitert das Bewegen von Häusern oder umgekehrt dreht es Ihr Einverständnis in kein Drahtende von weniger Prominenten, aber gemeinsam in deren höhenverstellbarer Antwort.

Wir verwahren einem Blindtext weniger gestärktes Gebäude mit Blumenerde, sofern die komprimierte Veranstaltung sich des Kreuzbands oder auch nur der vielen winzigen Kollektionen bemüht. Dies alles hat eine Beweislast mit Blindtext.

H3 Ich bin eine Überschrift

H4 Ich bin eine Überschrift

Blindtext-Konsistenz und Integrität sind mit unter die gefragten Inselbewohner einer lang anhaltenden Veränderung in der gesamten Bilderwelt. Hieraus erfolgt sowohl zwangsläufig eine inkonsistente Veränderung, als auch eine großangelegte Transportmaschine. Wir sind die langgesteckten, aber insbesondere auf Quadratmeter bedachten, deren Ergebnisse sich in den vielen Details zeigen.

H6 Ich bin eine Überschrift

H3 Ich bin eine Überschrift

Blindtext-Konsistenz und Integrität sind mit unter die gefragten Inselbewohner einer lang anhaltenden Veränderung in der gesamten Bilderwelt. Hieraus erfolgt sowohl zwangsläufig eine inkonsistente Veränderung, als auch eine großangelegte Transportmaschine. Wir sind die langgesteckten, aber insbesondere auf Quadratmeter bedachten, deren Ergebnisse sich in den vielen Details zeigen.

H4 Ich bin eine Überschrift

H2 Ich bin eine Überschrift

Blindtext-Konsistenz und Integrität sind mit unter die gefragten Inselbewohner einer lang anhaltenden Veränderung in der gesamten Bilderwelt. Hieraus erfolgt sowohl zwangsläufig eine inkonsistente Veränderung, als auch eine großangelegte Transportmaschine. Wir sind die langgesteckten, aber insbesondere auf Quadratmeter bedachten, deren Ergebnisse sich in den vielen Details zeigen.

H5 Ich bin eine Überschrift

H2 Ich bin eine Überschrift

Blindtext-Konsistenz und Integrität sind mit unter die gefragten Inselbewohner einer lang anhaltenden Veränderung in der gesamten Bilderwelt. Hieraus erfolgt sowohl zwangsläufig eine inkonsistente Veränderung, als auch eine großangelegte Transportmaschine. Wir sind die langgesteckten, aber insbesondere auf Quadratmeter bedachten, deren Ergebnisse sich in den vielen Details zeigen.

H6 Ich bin eine Überschrift

H3 Ich bin eine Überschrift

Blindtext-Konsistenz und Integrität sind mit unter die gefragten Inselbewohner einer lang anhaltenden Veränderung in der gesamten Bilderwelt. Hieraus erfolgt sowohl zwangsläufig eine inkonsistente Veränderung, als auch eine großangelegte Transportmaschine. Wir sind die langgesteckten, aber insbesondere auf Quadratmeter bedachten, deren Ergebnisse sich in den vielen Details zeigen.

H3: font-weight 300

H3: font-weight 400

H3: font-weight 500

H3: font-weight 600

H3: font-weight 700

H3: font-weight 800