Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Der Betrachtungsabstand beim Lesen von Texten ändert sich erheblich, wenn man die Nutzung über Smartphones, Tablets, Notebooks und große Desktop-Monitore vergleicht. Je kleiner das Gerät, desto näher ist üblicherweise auch der Betrachtungsabstand. Die gewählte Schriftgröße muss diesen Betrachtungsabstand ausgleichen, was bedeutet, dass Schrift auf Smartphones kleiner sein sollte als auf großen Bildschirmen. Mit Hilfe der CSS calc()-Funktion lassen sich fließend skalierende Texte bzw. Schriftgrößen im Responsive Design realisieren.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

Alternative Lösungen für skalierende Schriftgrößen

Die gängigste Lösung zur Veränderung der Schriftgröße ist der weg über CSS Media Queries. Hierbei ändert sich die Schriftgröße jedoch stufenweise – was suboptimal sein kann.

Eine weitere gängige Methode ist die Verwendung der vw-Einheit zur Gestaltung von Schriftgrößen, die sich jedoch sehr schlecht steuern lässt, wenn der Inhalt nicht einspaltig ist.

Responsive Schriftgrößen mit CSS calc()

Mit Hilfe der CSS-Funktion calc() kann der Text automatisch zwischen einem minimalen und einem maximalen Wert skaliert werden.

Wenn ihr möchtet, dass der Text bei 320 Pixeln Viewport-Breite 16 Pixel groß ist und bei 1600 Pixeln Viewport-Breite 28 Pixel, dann ist folgende Formel notwenig:

body {
 font-size: calc(16px + (28 - 16) * ((100vw - 320px) / (1600 - 320)));
}

Beispiel anschauen

 

Erklärung der Formel

Die oben gezeigte calc()-Funktion basiert auf folgender Formel:

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

Eine detaillierte Erklärung der Formel findet ihr u.a. beim Smashing Magazine.

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 5 Kommentare

  1. Katrin
    schrieb am 02.12.2020 um 15:55 Uhr:

    Hallo,

    ich mache Webdesign nur als Hobby.
    Es ist faszinierend was mittlerweile alles mit CSS möglich ist. Nun sieht meine Seite auch auf dem Handy gut aus.

    Danke, dass Ihr es so erklärt, dass auch eine 60 jährige Hobby Webdesignerin es versteht.

    Prima, Ihr habt mir mal wieder sehr geholfen.

    Antworten
  2. Timo Ebner
    schrieb am 01.11.2020 um 17:05 Uhr:

    Geniale Formel! Kann auch für andere Elemente genutzt werden.

    Vielen Dank für die Veröffentlichung.

    Antworten
  3. Grafikdesign Wien
    schrieb am 05.10.2019 um 11:18 Uhr:

    Hallo

    Könntest du mal ein komplettes Media Queries Anleitung mit diesem Script Beispiel schreiben bzw. hier veröffentlichen ?

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 06.10.2019 um 11:57 Uhr:

      Das Beispiel funktioniert ohne Media Queries und ist komplett abgebildet. Du kannst hier alles in den DevTools nachschlagen.

      Antworten
  4. Webdesign Karlsruhe
    schrieb am 25.02.2019 um 22:42 Uhr:

    Man lernt nie aus. Bis heute hätte ich es Stufenweise umgesetzt. Gibt es eine Möglichkeit mittels CSS die Schriftgröße an die Breite des Containers anzupassen?

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: