Schriftgröße: Pixel in em umrechnen
Im Online-Magazin A List Apart ist ein neuer Beitrag über Schriftgrößen in CSS erschienen.
Richard Rutter kommt in seinem Artikel unter anderem zu dem Schluss, dass die meisten aktuellen Browser von einer voreingestellten Textgröße von 16px ausgehen:
How to Size Text in CSS
Umrechnen von px in em
Eine Umrechnung von Pixelangaben in korrespondierende em-Werte ist auf der Basis einer definierten Ausgangsgröße sehr leicht möglich.
Rutter erwähnt in seinem Artikel nur die umgekehrte Rechnung, also em in Pixel. Vermutlich werden viele Webdesigner bei der Auszeichnung von Schriften aber eher von Pixelwerten ausgehen, zumindest gedanklich - sind diese doch der Maßstab grafischer Layoutvorlagen aus Photoshop & Co.
Ein Beispiel:
Der Fließtext unserer Vorlage ist 12px groß und wir möchten die Schrift in unserer HTML-Umsetzung in em-Angaben auszeichnen.
Die Voreinstellung des Browsers ist eine Schriftgröße von 16px.
Teilen wir nun die angestrebten 12px durch diese Ausgangsgröße, erhalten wir den passenden em-Wert:
12px / 16px = 0.75em
Achtung: Vererbung
Da Schriftgrößen in CSS vererbt werden und es sich bei em um eine relative Einheit handelt, sollte beim Layouten die Vererbung nicht vergessen werden. Bei verschachtelten Elementen kann diese nämlich ganz schön Kopfschmerzen bereiten.
Links zum Thema Schriftgrößen in CSS:
ALA: How to Size Text in CSS
Max Design: Relative font sizes and inheritance.
Weitere Beiträge, die dich interessieren könnten:
Kommentare
Noch keine Kommentare.
Kommentieren