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

Schriftgrößen in vw – Bilder mit Texten proportional skalieren

Textinhalte die optisch in oder vor einem Bild positioniert werden sollen, stellen in einem flexiblen Layout eine große Herausforderung dar. Das Problem besteht darin, dass Bilder meist proportional skaliert werden, wohingegen Texte einfach nur an anderer Stelle umbrechen. Dadurch entsteht ein schwer steuerbares Ungleichgewicht.

Individuelle Breakpoints für jedes Bild sind zwar technisch möglich, in der Praxis jedoch meist nicht realistisch. Auch wäre es denkbar, den Text direkt mit in die Grafik zu speichern, doch aus Gründen der Suchmaschinenoptimierung, Barrierefreiheit, Editierbarkeit und Übersetzbarkeit ist eine solche Lösung ebenfalls inakzeptabel.

Texte mit Hilfe der Einheit vw proportional skalieren

Die Einheit vw (Viewport Width) ermöglicht es Elemente anhand der Breite oder der Höhe (vh = Viewport Height) des Viewports zu gestalten. Wenn man die Schriftgröße in vw angibt, skaliert der Text automatisch größer und kleiner, wenn der Viewport sich verbreitert.

h1 {
  font-size: 7vw; 
} 

p {
   font-size: 4vw; 
}

Doch nicht nur Texte können in vw definiert werden, auch Abmessungen mit padding, Umrahmungen mit border und die meisten anderen Eigenschaften lassen sich mit diesem Trick wunderbar flexibel gestalten.

Beispiel: Bild, Text und Button proportional skalieren

Das folgende Beispiel zeigt die praktische Anwendung.

Beispiel anschauen

Folgender Code wird benötigt um das Beispiel herzustellen:

<div>
 <img src="bild.jpg" alt="">
 <div class="textcontainer">
 <h1>Headline</h1>
 <p>Lorem ipsum dolor <br>sit amet, consectetur  <br>adipisicing elit.</p>
 <a href="#">Button</a>
 </div>
</div>
div {
   position: relative; 
}

img {
   width: 100%;
   height: auto;
} 

.textcontainer {
   color: white;
   font-family: arial, sans-serif;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 5vw;
} 

h1 {
   font-size: 7vw;
} 

p {
   font-size: 4vw; 
} 

a {
   font-size: 4vw;
   color: white;
   text-decoration: none;
   padding: .5em 1em;
   border: .1em solid #DA9C07;
   display: inline-block;
   margin-top: 2vw;
}

Browser Support

Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.

Data on support for the viewport-units feature across the major browsers from caniuse.com

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 13 Kommentare

  1. Thomas Schneider
    schrieb am 09.08.2018 um 08:53 Uhr:

    Hallo Jonas,

    mal eine Frage zu der Schrift-Größe font-size:4vw;
    Wie kann ich das Steuer, daß es eine maximale Schriftgöße gibt, die nicht überschritten wird?
    Wenn z.B. der Wrapper, in dem die Schrift liegt, eine maximale Ausdehugung von 1200px hat, aber der Bildschirm überdimensional breit ist, würde ja die Schrift auf Grund der vw-Angabe das Layout zerstören, da Wrapper maximal 1200px ist.
    Gibt es sowas wie
    font-size:4vw, aber font-size-max: 32px?

    VG Thomas

    Antworten
  2. Gregor
    schrieb am 04.11.2016 um 18:09 Uhr:

    Hi Jonas,

    vielen Dank für deinen tollen Artikel. Ich habe ihn mir mit Freude durchgelesen.

    Verfolge deinen Blog schon seit einer Weile. ;)

    Grüße
    Gregor

    Antworten
  3. Jurij Töpfer
    schrieb am 22.09.2016 um 16:10 Uhr:

    Hallo Jonas, vielen Dank für den Lösungsansatz! Ich habe mich bei einem vergangenen Projekt damit rumgeärgert die Proportion von Text und Bild anhand mehrerer Media Queries für alle Displaygrößen ideal abzustimmen. Dein Ansatz ist aber viel eleganter. Wird bei nächster Gelegenheit eingesetzt :)

    Antworten
  4. Chris
    schrieb am 28.05.2016 um 09:49 Uhr:

    Ein paar nette Ideen, aber speziell beim Skalieren über CSS ergibt sich dann die unschöne Lösung, dass bei kleineren viewports unnötig große Dateien geladen werden müssen.
    Habe mich selbst mit der Problematik responsive Design und „adaptive images“ beschäftigt.
    verschiedene Gedanken und Umsetzungen:
    http://php-homepage.com/css/responsive-design.php

    Antworten
    • Jonas Hellwig
      schrieb am 28.05.2016 um 10:53 Uhr:

      Hallo Chris, vielen Dank für deinen Kommentar. Die Skalierung hat nichts damit zu tun, welches Bild geladen wird. Selbstverständlich muss die Technik mit responsive Image-Lösungen kombiniert werden. Also entweder mit verschiedenen CSS Backgrounds, die mittels Media Query ausgetauscht werden, oder verschiedene HTML-Images, die serverseitig oder mittels srcset/sizes ausgetauscht werden. Das -Element ist in diesem Zusammenhang irrelevant, da das Motiv ja nicht verändert werden soll. Antworten

      • Chris
        schrieb am 28.05.2016 um 11:22 Uhr:

        Hallo, bist ja schnell beim Freischalten:-)
        die von dir erwähnten Lösungen sind mir bekannt und ich finde sie nur fürs Layout/Design und templates praktibabel,
        Mein nach wie vor großes Problem zur Thematik sind Content Seiten (davon betreiben wir einige), die pro Artikel 5-10 Bilder beinhalten,
        hierfür habe ich noch keine praktikable Lösung gefunden. (Joomla mit mehreren Autoren/Textern).
        Alle Plugins die auf den einschlägigen Joomla Seiten empfohlen werden, machen nur Skalierung über CSS. Ich habe nur eine gute Thumbnail Lösung (genieriert automatisch thumbnails in FIXER Größe), da brauchen die Content Manager nichts weiter machen.
        einziges Beispiel auf Deutsch momentan, den link nimm dann bitte raus
        http://einrichten.haus/stile-style/23-landhaus-stil
        Aber ich kann eben nur thumbnails in fixer Größe generieren lassen, hätte aber gern eine Lösung
        wie im vom mir vorher verlinkten Artikel „adaptive images“, die für die verschiedenen viewports verschiedene Bildgrößen generiert. Bin mit meiner Technik-Testseite (php-homepage.com) noch auf der Suche nach einer Lösung, die ich dann in die Joomla Seiten integrieren kann. Vielleicht hast du ja eine Idee?

  5. istqb
    schrieb am 10.05.2016 um 11:20 Uhr:

    Wer lange testet, schreibt gute Software, so zumindest der Dauerspruch meines PHP-Profs.Habe mich nun lange mit dem Testen von Bildskalierungen beschäftigt und war nie wirklich glücklich. Werde im letzten Anlauf Deine Anleitung durchgehen – hoffentlich mit Langzeitwirkung.

    Antworten
  6. Marco
    schrieb am 03.05.2016 um 10:29 Uhr:

    Hallo Jonas, danke für den Artikel. Hab dazu mal eine Frage: Gibts für Abstände oder Größen irgendeinen Umrechnungsfaktor oder wie kann man sich die tatsächlichen Größen, oder Ähnliches denn vorstellen? Also gibt es da einen festen Maßstab? Grüße

    Antworten
    • Jonas Hellwig
      schrieb am 03.05.2016 um 10:51 Uhr:

      Hallo Marco, es ist in der Tat sehr schwierig, da es ja von der Größe des Viewports und der gewünschten Ziel-Größe abhängt. Die für mich einfachste Herangehensweise ist die Gestaltung direkt im Browser mit Hilfe der Entwickler-Tools. Falls allerdings jemand einen eleganteren Weg kennt, freue ich mich sehr über eine entsprechende Info!

      Antworten
      • Christoph
        schrieb am 17.05.2016 um 14:16 Uhr:

        Hallo Marco & Jonas,

        die aktuell angezeigte Größe der Schrift lässt sich ganz einfach in px, em bzw. rem aus rechnen:

        Ausgangsdisplay: FullHD (1920×180) = 1920px = 100vw

        Rechnung:

        1920(px) : 100(vw) = 19,2(px) x 7(vw) = 134,4 Pixel (px sind statisch, dieser wert ist so nicht korrekt übertragbar) : 16(px) = 8,4(r)em.

  7. Tobias
    schrieb am 03.05.2016 um 09:16 Uhr:

    Sehr schön gedacht. Leider gehst Du nicht darauf ein, dass die „vw“ und „vh“ Größenwerte nicht in allen Browsern funktionieren. Gerade im responsiven Bereich ist hier also ein Fall-Back nötig um die Skalierbarkeit tatsächlich zu gewährleisten. Es ist aber so davon auszugehen, dass das Layout so nicht 1:1 bei Browserns ohne diese Unterstützung, gleichermaßen dargestellt wird.

    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 →