Ich muss ganz ehrlich sagen, dass ich das Thema, welche Einheit für die Schriftgröße im CSS am besten geeignet ist, bisher immer ein wenig vernachlässigt hatte. Das liegt sicherlich daran, dass ich die Vorstellung von festen Größeneinheiten für ein Designlayout einfach nicht so leicht aus meinem Kopf bekommen habe. Erst durch die Auseinandersetzung mit dem Thema Responsive Webdesign (mehr Infos findest du z.B. in den Artikeln “Was können CSS3 Media Queries wirklich leisten?” und “Responsive Webdesign mit CSS3 Media Queries: So funktioniert’s”) habe ich mich intensiver mit den flexibleren Einheiten em und Prozent als Maßeinheit für Schriften beschäftigt.

Pixel, em oder Prozent?

Gerade bei der Arbeit eines mit CSS3 Media Queries optimierten, responsive Webdesigns sind meiner Ansicht nach em als Einheit für font-size am besten geeignet. Die Ansicht wird auch durch die Aussage von Ethan Marcotte in seiner Rede “A Dao of Flexibility” auf der Webkonferenz “An Event Apart” im letzten Jahr bestätigt.

“By default most browsers ship with 16pixels set as default font size. Set fonts to 100% in a default style sheet so that you can scale your content from this baseline.”Ethan Marcotte, A Dao of Flexibility.

Marcotte empfiehlt die Standardschriftgröße auf 100% zu setzen: body { font-size: 100%;}. Die meisten Browser nutzen die Schriftgröße von 16Pixel als Standardgröße. Weitere Inhalte kannst du dann von diesem Wert aus bestimmen. Für diese weiteren Werte empfiehlt Ethan Marcotte dann weiter:

Use ems for font sizing. To get the em size that you want instead of pixels, you divide the target size by the context font size. This will give you the new em value to use. Don’t worry about decimals, you can drop those right in.
Ethan Marcotte, A Dao of Flexibility.

Für ein möglichst flexibles Webdesign funktioniert laut Ethan Marcotte also die Einheit em für alle weiteren Schriftgrößen am besten.

Pixel in em umrechnen

Wenn du die geeignete Schriftgrößen z.B. für die Überschriften deines Layout bereits in einem Grafikprogramm definiert hast, kannst du den entsprechenden em-Wert entweder mit dem Taschenrechner (bei der Ausgangsgröße 21 Pixel rechnest du z.B. 21 ÷ 16 = 1.3125em) oder mit Hilfe eines Online-Tools (z.B. PxtoEM) berechnen.

Der Online-Rechner PxtoEM rundet nach der dritten Stelle hinter dem Komma.

Eine praktische Übersichtstabelle für die Pixel- und em-Umrechnung, ausgehend von 16 Pixel als Standardwert, findest du außerdem auf der Webseite von Jon Tangerine. Es werden alle em-Werte von 11 bis 30 Pixel aufgelistet.

Eine Umrechnung von Pixel zu em ist also gar nicht so schwierig, wie es sich zuerst anhört. Und die Maße in em zu definieren macht ein Webdesign meiner Ansicht nach sehr viel flexibler, da die Schriftgröße sich automatisch an die Grundeinstellungen des jeweiligen Browsers und Geräts anpasst.

Schriftgrößen im iPhone

Gerade bei Smartphones wie dem iPhone (bei einem kleinen Display mit sehr hoher Auflösung) kann es bei einer Schriftgrößen-Angabe in Pixel sein, dass eine Schrift auf dem iPhone viel zu klein angezeigt wird. Im iPhone ist die CSS3-Eigenschaft text-size-adjust standardmäßig auto.

[php]
html { -webkit-text-size-adjust: auto; }
[/php]

Das bedeutet, dass jede Webseite auf dem iPhone automatisch skaliert wird. (Möchtest du das automatische Skalieren vermeiden, kannst du die -webkit-text-size-adjust-Eigenschaft in deinem Stylesheet auf none setzen.)

Em und %-Werte werden weiter vererbt

Außerdem solltest du bei der Arbeit mit em oder Prozent-Werten noch beachten, dass die Werte eines Eltern-Elements auf die Kind-Elemente übertragen werden. Wenn du also die Schriftgröße eines Eltern-Elements mit 0.9em definiert hast, ist die Schriftgröße des Kind-Elements bei ebenfalls 0.9em verhältnismäßig kleiner (da das Kind-Element bei 1em ja bereits die 0.9em des Eltern-Elements als Wert nutzt).

Weitere Infos zum Thema Vererbung relativer Werte im CSS kannst du auch auf der Webseite little-boxes.de unter dem Punkt “Potenzielle Probleme bei der Vererbung relativer Werte” nachlesen.

Hast du weitere Erfahrungswerte und Tipps für die Arbeit mit Schriftgrößen im CSS? Über deine Meinung und weitere hilfreiche Tipps freue ich mich sehr!