optimale Schriftgröße auf allen Displays

Was hat Font-Size mit Html5 und CSS3 zu tun?

Die Schriftgröße ist fester Bestandteil der Darstellung von HTML ausgezeichneten Dokumenten ( = Webseiten ) und ist eine grundlegende CSS Eigenschaft. Sie kann in px, em, rem, pt und % angegeben werden - genau wie das Grafiker in ihren DTP Programmen tun.

Leider hat das eine mit dem anderen weniger gemein als man erwartet und ist Quell wiederholter Probleme zwischen Grafiker / Designer und Webentwickler.

Grundlagen der Darstellung

dpi - Druckauflösung

Druckauflösung
A5 360 dpi
bis A3 300 dpi
bis A1 150 dpi
A0 100 dpi
ab 4m² 38 dpi

Die Auflösung eines Druck Dokuments wird in dpi ( dots per inch | Druckpunkte pro 2.54 cm ) angegeben. Diese wird vom Grafiker für das Zielformat festgelegt und orientiert sich am normalen Betrachtungsabstand. Der Betrachter soll den Druck als scharf wahrnehmen und die einzelnen Punkte nicht sehen können. Da man eine Postkarte normalerweise in der Hand hält, von einem Fassadenbanner jedoch mehrere Meter entfernt ist, können folgende Druckauflösungen als Richtwert gelten:

ppi - Displayauflösung

Bezugsgröße der Displayauflösung ppi ( pixel per inch ) ist das Pixel ( Picture-Element ). Jedes Pixel besteht aus drei Subpixeln in den Farben Rot | Grün | Blau ( rgb ). Die Anzahl der Pixel pro Fläche ( Pixeldichte ) ist je nach Monitortyp sehr unterschiedlich, Stichworte: HD und Retina.
Somit ist es für den Webentwickler nicht möglich, die tatsächliche Größe von Schriften und Layoutelementen auf jedem Ausgabegerät absolut und einheitlich festzulegen.

Font-Size Best-Practice für konsistente Ergebnisse auf verschiedenen Platformen

Als Referenzwert wird die Angabe im <html> gesetzt:
font-size: 100.01%   (Manche alte Browser "runden" 100% zu 99%)
Dies entspricht bei modernen Browsern mit Standardeinstellungen 16px.

Warum nicht font-size: 62.5% ?

Um bequem den Pixelwert ohne Rechnen setzen zu können, wird oft empfohlen mit body {font-size:62.5%;} zu arbeiten. Bei diesem Referenzwert entsprechen 10px tatsächlich 1rem, 16px = 1.6rem usw.
Trotzdem ist diese Vorgehensweise nicht zu empfehlen!
Moderne Browser setzen ihre eigenen Mindest-Schriftgrößen. Alle weitere Schriftgrößen werden dann auf dieser Basis berechnet, bei relativen Angaben fällt das Ergebnis somit sehr unterschiedlich aus!

Beispiel font-size Kaskade:

<div style="font-size:2em;">
  <div style="font-size:2em;">
    <div style="font-size:2em;">
      <p>Wie groß bin ich?</p>
   </div></div></div>

Im Folgenden werden Schriftgrößen relativ zur Basisgröße gesetzt. Als relative Einheit ist rem besser geeignet als % oder em und schützt vor unangenehmen Überraschungen. em und % berechnen die Schriftgröße als Kaskade der Größenangaben aller Elternelemente. 

für <body style="font-size:100%;"> ergibt sich <p> = 16px * 2 * 2 * 2 = 128px!

Hier ein Live-Beispiel!
Fügen Sie umschließende Div's hinzu und beobachten, wie sich die Schriftgröße entwickelt!

 

Der Text

 

Tags: css3

Kommentar schreiben


Sicherheitscode
Aktualisieren

Quick Menu

FacebookTwitterDiggGoogle BookmarksTechnoratiLinkedin