Welche Maßeinheiten für Webelemente und Schriften?

Hallo zusammen,

um meine Webseitenaktualisierung möglichst fehlerfrei, für verschiedene Endgeräte nutzbar und barrierefrei hin zu bekommen, bin ich grade auf der Suche nach geeigneten Maßeinheiten für DIVs, Abstände und Schrift. Welche Erfahrungen habt ihr so mit Maßeinheiten gemacht?

Ich hab schon einiges gelesen, aber das hat mich eher verwirrt als mir weiter geholfen:

  • Schriftgrößen am Besten in EM oder gegebenenfalls Prozent angeben. Absolut geht auch, aber nicht mit dem Internet Explorer.
  • Größen von DIVs und Abständen am besten in Prozent oder doch besser in Pixeln

Feste Angaben wie Pixel sind soweit ich weiß problematisch für verschiedene Bildschirmauflösungen, gebe ich meine DIVs aber in Prozent an, zerlegt sich mein Layout bei der Nutzung der Zoomfunktion im Firefox.

Bitte helft mir, das “maßlose Chaos” in meinem Kopf zu beseitigen :-).

Also Angabe in absoluten Größen, die vom internationalen Standard Meter abgeleitet sind
(mm, cm, inch, pc, pt) können sich aktuell noch für Druckversionen eignen.
Früher konnten das auch noch heute ältere Versionen von Geckos (Firefox etc) am Monitor
umsetzen, aufgrund von Änderungen/Konfusionen in CSS2.1 werden solche Maßeinheiten heute
leider fast durchgehend falsch interpretiert, wenn es um eine Darstellung auf dem Monitor geht,
teilweise ist davon bei einigen Programmen auch die Druckausgabe betroffen.
In der Praxis kann man die also weitgehend komplett vergessen, weil durch CSS 2.1 für
(X)HTML unbrauchbar gemacht.

Die Einheit px eignet sich eigentlich nur für Pixelgraphik, wenn ein Bild also 500 Pixel breit ist,
kann man das auch gut in der Einheit px notieren.

em oder ex eignen sich gut für Container, die (unter anderem) Text enthalten, sofern man dafür
eine Breite explizit festlegen will. Natürlich kann man damit auch gut die Größe etwa von
Überschriften relativ zum Text angeben.
Für die Textgröße eignen sich ansonsten auch Angaben wie larger, smaller, xx-small, x-small,
small, medium, large, x-large, xx-large.
Der Vorteil solcher Angaben für die Textgröße besteht darin, daß das Darstellungsprogramm
die Größe von 1em oder medium aus seinen Voreinstellungen entnehmen kann, also was der
Nutzer als gut lesbar ansieht.
Da sich em oder ex auf den mittleren Platzbedarf eines Buchstabens bezieht, kann man damit
als Autor ungefähr abschätzen, ob die verwendeten Wörter in einen Container reinpassen.
Der Haken dabei ist, daß mal abgesehen von monospace-Schriftarten je nach Buchstabe
unterschiedlich viel Platz benötigt wird. Normalerweise wird also deutlich weniger als 1em pro
Buchstabe benötigt, wieviel hängt von der verwendeten Schriftart ab. Die Anzahl der
gewünschten Buchstaben für eine Breite eines Containers mit em zu wählen, ist also nur eine
sichere Abschätzung nach oben, der Text wird weniger Platz benötigen. Wenn man genauer
schätzen will, muß man sich leider eine typische Ausgabe ansehen.
Ein formaler Ausweg wäre hier, eine eigene Schriftart anzubieten, von der man die
Buchstabengrößen genau kennt. Zwar haben die meisten Darstellungsprogramme da wohl
inzwischen ein neues Format Web Open Font Format (WOFF) implementiert, was aber nichts
daran ändert, daß man die Lizenz für die Veröffentlichung der Schriftartendatei haben müßte,
kann also mühsam bis teuer werden - ältere Programme kennen das Format auch nicht,
bleibt einem also nicht erspart, für diese dann ohnehin plausibel zu schätzen.
Zum Glück braucht man aber Breiten von Containern meist nicht anzugeben.
Ausnahmen können sich ergeben, wenn man etwa ein Menü neben dem Haupttext
positionieren will, da muß man dann anhand des Menüinhaltes abschätzen, ob sowas wie
etwa 12em bis 15em für das Menü reicht - meist kann man das so einrichten, dann bleibt
bei den üblichen Größen von Darstellungsbereichen daneben noch deutlich mehr Platz für
den eigentlichen Inhalt.

Prozentangabe bei der Schriftgröße funktioniert ähnlich wie bei em.
Bei Containern muß man gucken, ob man dafür eine sinnvolle Anwendung findet -
etwa 50% zu 50%, wenn man zwei Texte nebeneinander anordnen will? Sowas sollte
klappen. Bereiche deutlich unter 30% könnten irgendwann zu schmal für größere Mengen
Text werden - sowas muß man sich wirklich bei verschieden große Darstellungsbereichen
ansehen (!) - ist also etwas kniffliger.
Das liegt daran, daß es Inhalte wie Pixelgraphik oder lange Wörter geben kann, die die
aktuelle Breite überschreiten können, das kann dann ein Layout zerlegen.
Gut bei Bildern kann man die Maximalgröße in Prozent festlegen, um dies zu vermeiden,
bei langen Wörtern kann man Trennhilfen angeben.

Prozentangaben bei Bildern (SVG-Dateien) etwa können natürlich sehr sinnvoll und hilfreich sein.

Jedenfalls haben die Darstellungsprogramme alle eine sinnvolle Voreinstellung für
Schriftgrößen in (X)HTML, auch für Überschriften. Es besteht also erstmal keine Dringlichkeit,
dazu überhaupt Angaben zu machen.
Breiten von Containern braucht man auch nur, wenn man Inhalte, besonders Texte
nebeneinander anordnen will. Mal abgesehen von oben genanntem Menübeispiel erfordert
das allerdings etwas Fingerspitzengefühl, wenn es sich um größere Textpassagen handelt -
muß man fast immer vorsichtig mit unterschiedlich großen Darstellungsbereichen testen , was
sich für den jeweiligen Inhalt eignet.

Somit hängt es also vom Inhalt und der Absicht ab, was man am besten verwendet.
Schriftgröße - erstmal nicht dringlich. Im Bedarfsfalle em, ex oder Prozent.
Pixelgraphik - in px.
Vektorgraphik SVG - je nach Inhalt und Absicht Prozent, em, ex oder px.
Containerbreiten - em, ex oder Prozent für Textinhalt, aber nur, falls unbedingt nötig.

Wenn man vorsichtig vorgeht und sich nicht durch unnötige Angaben selbst ein Bein stellt,
kann man es eigentlich ganz gut vermeiden, daß sich ein Layout bei deutlich unterschiedlich
großen Darstellungsbereichen oder Schriftgrößen zerlegt.
(X)HTML eignet sich allerdings nur schlecht für ein Litfaßsäulen-Design, wo also alles
pixelgenau einer einer bestimmten Stelle stehen soll. Solange dem Darstellungsprogramm
immer genug Optionen eingeräumt werden, den Inhalt selbst passend anzuordnen, machen
unterschiedliche Schrftgrößen und Darstellungsbereiche eigentlich keine großen Probleme.