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.
html { -webkit-text-size-adjust: auto; }
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!
Ich finde es gut, dass ihr jetzt auch mal über sowas schreibt :D
Weil bei mir war es bisher immer so, dass die Schriftanpassung alles vermasselt hat und mich unzufrieden stimmte :D
Hallo Chrissy,
es freut mich, dass dir das Artikelthema gefällt :-) Du hast Recht, an der Schriftgröße und den Styles kann man ganz schön feilen und mir kommt es auch so vor, als gäbe es immer noch etwas zu tun ;-)
Viele Grüße,
Ellen
Danke für diesen aufklärenden Artikel! Bis jetzt trug ich noch veraltetes Halbwissen zu diesem Thema mit mir herum. Ich hatte immer noch irgendwie im Hinterkopf, dass em als Maßeinheit der beste bzw. sicherste Weg sei. Jetzt seh ich das klarer :)
Hallo Björn,
danke für dein positives Feedback. Ich selbst finde das Thema Schriftgrößen-Einheit auch recht kompliziert und war mir lange Zeit nicht sicher, welche Einheit denn nun am sinnvollsten ist. Inzwischen arbeite ich eigentlich sehr gerne mit em. Bei den Tablet-PC bzw Smartphone-Layouts des Elmastudio-Blogs probieren wir gerade noch etwas herum, welche Einstellungen am besten funktionieren :-)
Viele Grüße,
Ellen
Danke Ellen,
Ja, das Thema mit den Schriftgrößen ist wirklich wichtig. Ich habe da schon die unerwartetesten Ergebnisse gesehen. Ich werde Deinen Artikel als Anlass nehmen, meine Seiten darauf umzustellen. Dank der Style.css sollte es nicht so viel Zeit in Anspruch nehmen.
Danke
Oliver
Hallo Oliver,
vielen Dank für dein Feedback, es freut mich, dass du den Artikel hilfreich findest :-) Ja, ich finde auch, dass das Thema super wichtig ist. Leider gibt es meines Wissens sehr wenig aktuelle Infos / Artikel zu den Schrifteinheiten. Daher war ich besonders froh, eine so konkrete Angabe von Ethan Marcotte (der ja das Thema Responsive Webdesign sehr unterstützt bzw. vorantreibt) gefunden zu haben :-)
Viele Grüße,
Ellen
Irgendwie ist bei mir immer noch das px drin. Da ich mein Blog bald mit Media Queries umbauen will und somit eine optimierte iPad und iPhone Version anbieten will sollte ich mir dann wohl bald mal »em« angewöhnen…
Hallo Dennis,
mir ging das selbst ganz genauso. Ich glaube wenn man es gewohnt ist, Layouts und Designs in einem Grafikprogramm zu erstellen, hat man die Pixel einfach intus und ein umdenken ist schwer :-) Dabei ist die Definition der Schriftgrößen mit em eigentlich gar nicht so anders, wenn man sich einmal an die Arbeit gemacht hat ;-)
Viele Grüße,
Ellen
Hallo Ellen!
Dein Artikel gefällt mir seht gut!
Vielleicht interessiert es dich, aber es gibt ein tolles Online-Tool zum Umrechnen von Pixel in EM:
Einfach die Webseite EmChart - Ford Interactive besuchen und dort die Demo anklicken:
View the EmChart Demo
lg Franz
Hallo Franz,
vielen Dank für dein positives Feedback zum Artikel. Wow, die EmChart ist ja echt klasse uns super praktisch, da muss man ja gar nicht mehr rechnen! Vielen Dank für diesen Tipp, das Tool werde ich bestimmt noch öfters nutzen :-)
Viele Grüße,
Ellen
Hallo Ellen,
der Artikel gefällt mir sehr gut, dazu gibt es echt wenig Infos. Das mit dem Vererben hast du sehr gut beschrieben.
Da ich mich sehr mit Barrierefreiheit im Internet beschäftige, verwende ich bei der Webseitenerstellung seit 5 Jahren em als Schriftgröße, ich bin das längst gewohnt.
Der EM-Umrechner, den Franz hier vorstellt, ist auch für mich spannend. Danke für den Tipp! Das hilft mir bei den Designs meiner Grafiker, wo alles in Pixel angegeben ist.
Viele Grüße
Heike
Hallo Heike,
vielen Dank für dein Feedback, es freut mich, dass dir der Artikel gefällt :-) Ja, den EM-Rechner habe ich mir auch gleich heruntergeladen und auch das Online-Tool finde ich recht praktisch. Nachdem ich mir anfang ehrlich gesagt auch mit den EMs etwas schwer getan habe, komme ich inzwischen auch super zurecht :-)
Viele Grüße,
Ellen
Hallo Ellen!
Ich finde es gut, dass mal jemand darüber bloggt. Bisher habe ich einfach nur px genutzt, aber es ist etwas umständlich, wenn man dann für andere Bildschirmgrößen umdesignen muss. Werde aber in Zukunft auch nur em oder Prozent nutzen ;)
Hallo Philipp,
vielen Dank für deinen Kommentar Es freut mich, dass dir der Beitrag gefällt. Ja, ich finde auch, dass es recht wenige informative und aktuelle Quellen zum Thema gibt. Und ich war mir auch lange nicht so sicher, was denn nun eigentlich am sinnvollsten ist :-)
Viele Grüße,
Ellen
Hallo Ellen,
danke für den hilfreichen Artikel, werde gleich drauf verlinken, denn ich stand letzte Woche auch wieder vor der Frage em oder px. Mir ist gerade bei vielen Website aus Amerika seit einigen Monaten aufgefallen, dass es da so gemacht wird, wie Du das beschreibst, also Schrift auf 100% setzen und dann em verwenden, aber irgendwie konnte ich mich nie wirklich von der guten Pixel Einheit trennen. ;-)
Hallo Sebastian,
vielen Dank für dein Feedback, es freut mich, dass du den Beitrag zum Thema px oder em auch hilfreich findest :-) Ja, ich denke, das stimmt. Ganz besonders ist es mir bei den Webseiten mit Responsive Layout aufgefallen, allerdings gibt es auch hier einige, die mit Pixel als Einheit umgesetzt sind.
Viele Grüße,
Ellen
Hab das Thema vor mir her geschoben und wie wahrscheinlich die meisten mit px gearbeitet. Aber irgendwann fällt’s einem als Mobile-Device-Fan zu schwer in den Spiegel zu schauen.
Bei der nächsten Umsetzung.. versprochen ;)
Endlich hat sich diese Frage nun auch für mich geklärt. Immer wieder habe ich mich gefragt ob ich nun px em oder % verwende, manchmal ein mix aus allem :( Danke für diesen Artikel :)
Hallo Ellen,
ein toller Artikel zu einem echt guten Thema (wie ich finde) !
Vielleicht bin ich beim Lesen nur zu unaufmerksam gewesen, aber warum genau sollte es jetzt »em« sein und nicht »%« ?
Das es kein »px« sein sollte find ich gut erklärt (benutze es selbst auch nichtmehr). Ich allerdings habe mir angewöhnt »%« zu verwenden. Gibt es da deiner Meinung irgendwelche Vor- /Nachteile der beiden Einheiten?
Ich kenne nämlich noch keinen, da die beiden für mich ziemlich identisch sind; jedenfalls wenn es um die Angabe der Schriftgröße geht :)
Grüße,
Timo
Gerade bei der Browser-Darstellung ist es wichtig sich mit der richtigen Schrift zu beschäftigen. Die ersten 10 Sekunden entscheiden darüber, ob ein User auf der Webseite bleibt, oder sie wieder verlässt.
Das schönste Webdesign nützt nichts, wenn der Inhalt mühsam zu lesen ist.
Das Thema Schrift und Schriftgestaltung insgesamt kommt in den derzeitigen Webbetrachtungen (leider) viel zu kurz. Das muss man nicht einmal bis zu den Schriftgrößen herunterbrechen. Woran das liegt, weiss ich auch nicht.
Ich bin der Meinung, dass es stichhaltige Argumente für absolute und relative Schriftgrößenangaben gleichermaßen gibt. Es kommt immer auf den Einsatzzweck und die Verwendung an.
Als Kartograph und der generall der alten Bleisatz-Typographie verhaftet, hänge ich natürlich den absoluten (was ist im Web schon absolut, auch die absoluten Variablen haben dort keinen Fixpunkt) Größen und somit den Pixeln an.
Persönlich finde ich es auch eine Unmöglichkeit, dass der User mittels Browsereinstellungen die Darstellung abändern kann ;-)
Kann der User nicht einsehen, dass sich die Designer bei bestimmten Größen und Aufteilungen nicht auch etwas gedacht haben?:P
Aber insgesamt ist festzuhalten, dass ich in diesem Blogbereich immer mehr lesenswerte Artikel finde. Und *pling* - gebookmarked.
Hallo Ellen,
Dein Artikel hat mich neugierig gemacht, wie ich eigentlich auf meiner Website die Schriften eingestellt habe. Wird am Wochenende direkt von mir gesichtet und gegebenenfalls geändert.
Vor allem die Vererbung von Eltern auf Kindelement wird von vielen unterschätzt.
Das hast Du aber so gut beschrieben, dass es leicht zu verstehen ist.
Herzliche Grüße
Klaus
Hi,
es gibt noch einen Online-EM-Calculator, den ich super gerne nutze weil man sich nicht in Tabellen immer wieder die Werte raussuchen muss, sondern direkt seine Struktur erzeugen kann und so die errechneten Werte bekommt:
http://riddle.pl/emcalc/
Ansonsten: Ja, EM ist eigentlich »Pflicht« ;)
Aber man muss dabei schon umdenken wg. Vererbung der Werte, da ist das Arbeiten mit PX robuster - aber auch unflexibler.
Und nebenbei rendert der IE auch Text mit EM-Angaben genauer als mit PX, man umschifft damit also auch IE-Probleme :D
Hallo Ellen,
danke für diesen Beitrag - es lohnt sich, immer wieder mal hier vorbei zu schauen.
Du schreibst in Deinem Kommentar vom 20.3.2011:
»Es freut mich, dass dir der Beitrag gefällt. Ja, ich finde auch, dass es recht wenige informative und aktuelle Quellen zum Thema gibt.»
Ich bin dieser Tage auf folgenden interessanten Artikel vom 25. Juni 2010 gestoßen:
http://praegnanz.de/essays/die-sache-mit-dem-schriftgrad
Noch ein Hinweis am Rande:
Nicht nur die Schriftgröße, auch die Werte anderer CSS-Eigenschaften können in em angegeben werden.
Die Werte für CSS-Eigenschaften in em z. B. für width oder margin, beziehen sich auf die berechnete Schriftgröße des jeweiligen Elements.
Das kann man sich sehr schön im Firefox mit dem Firebug ansehen.
In Auswertung des Artikels http://praegnatz.de/.… und nachdem ich den Artikel von Ellen sowie die Kommentare gelesen habe, komme ich zu der Schlußfolgerung:
Es gibt keine »beste« Methode!
Zunehmend sollten flexible Schriftgrößen in EM oder Prozent zum Einsatz kommen, aber auch Pixelschriften sind erlaubt und werden nicht mehr vehement verteufelt.
Pingback: Responsive Webdesign mit CSS3 Media Queries | Wirsing Maracuja
Pingback: Schriften: Pixel, em oder Prozent – Welche Einheit ist für Schriftgrößen in CSS am besten geeignet? | Elmastudio - Grundlagen Integrierte Kommunikation