Mittlerweile gibt es bei der Umsetzung von Websites zwei “Hauptphilosophien” in Bezug darauf, welche Einheiten man bei den Schriften wählt: Pixel oder Em. Bei Pixel ist die Vorgehensweise einfach, man vergibt den entsprechenden Bereichen einen gewünschten Pixelwert, z. B. font-size: 14px;. Pixel ist auch eine relative Einheit und zwar in Bezug auf das Ausgabegerät des Betrachters. Je nach Monitor ist eine Schriftgröße von 14 Pixel kleiner oder größer.
Die Problematik rund um em
Die Einheit em richtet sich nach den Browsereinstellungen des Nutzers. In den allermeisten Browsern ist die Größe der Schrift mit 16 Pixel voreingestellt. Gibt man zum Beispiel für den Inhaltsbereich font-size: 1.5em; an dann ist die Schrift 24 Pixel groß. So weit, so gut. In Verbindung damit, dass man auch den Ausmaßen der einzelnen Bereiche der Website ebenfalls Breitenangaben in em spendiert hat, war man in der Lage sog. “zoomable Layouts” zu erstellen: änderte der Nutzer die Schrifteinstellungen so wurde auch die Website breiter bzw. schmaler.
Hat der Nutzer aus welchen Gründen auch immer, die Standardgröße der Schrift in den Browsereinstellungen erhöht oder kleiner gemacht, dem entsprechend anders schaute auch das Ergebnis auf der Website aus.
Weil das Rechnen mit der Basiszahl 16 nicht so komfortabel ist kam man dann irgendwann auf die Idee die Schriftgröße von body auf 10 Pixel zu setzen: body {font-size: 62.5%;}. Wollte ich jetzt in der Sidebar der Schrift eine Größe von 14 Pixel spendieren, dann gab man einfach #sidebar {font-size: 1.4em;} ein.
Dies ist eindeutig leichter zu merken als 0.875em bzw. .875em (Kurzschreibweise). Die 0, 875 bekommt man wenn man die 14 Pixel durch 16 Pixel teilt.
Der Haken an der ganzen Geschichte ist, dass die Angabe zur Schriftgröße an die Kindelemente vererbt wird. Bei Pixelangaben kein Problem, bei em schon. Hier ein Beispiel zur Verdeutlichung:
body {font-size: 62.5%;}
#sidebar {font-size: 1.4em;}
.kleiner {font-size: 1.2em;}Und hier die Preisfrage, was meinst du welche Schriftgröße haben die Listenpunkte im folgenden Code:
<div id="sidebar">
<ul class="kleiner">
<li></li>
</ul>
</div>[adrotate banner=”42″] Die richtige Antwort ist (fast) 17 Pixel: 62,5% x 1,4 x 1,2 = 16,8. Zu der Problematik der Vererbung gesellten sich Rundungsfehler in Browsern und (ich finde den Artikel leider nicht mehr) bei umfangreicheren Layouts war der Browser etwas länger beschäftigt um die Schriftgrößen auszurechnen, als dies bei reinen Pixelangaben der Fall gewesen wäre.
Aus der Summe der Probleme und der Tatsache, dass die meisten Browsern solide Zoomfunktionen eingebaut sind, sind viele Webworker dazu übergegangen wieder Pixel für die Schriftgrößen einzusetzen. Was jetzt mehr eingesetzt wird, darüber kann ich nichts sagen.
Jetzt habe ich so weit ausgeholt … worauf wollte ich eigentlich hinaus? 🙄 Ach ja, zu rem. 🙂
rem als das bessere em
Seit einiger Zeit gibt es allerdings eine zusätzliche relative Einheit (rem), die zumindest ein Teil der Problematik rund um em lösen kann. Wenn ich den Artikel von Johnathan Snook richtig verstanden habe, dann funktioniert rem wie em, nur das es sich nicht wie em auf das Eltern-Element sondern auf das Root-Element (body) bezieht.
Wenn man jetzt das letzte Beispiel modifiziert:
body {font-size: 62.5%;}
#sidebar {font-size: 1.4em;}
.kleiner {font-size: 1.2rem;}dann wäre bei den Listenpunkten:
<div id="sidebar">
<ul class="kleiner">
<li></li>
</ul>
</div>Die Schriftgröße nicht 16,8 Pixel sondern 12 Pixel.
Dank rem wäre zumindest die Vererbungsproblematik gelöst. Und dadurch das man sich direkt auf body bezieht und nicht die Angaben der vorhergehenden Elemente (teilweise über drei Stufen) miteinbezieht, sinkt auch die Gefahr der Rundungsfehler.
Einen Haken gibt es…
… und das ist der Browsersupport. Opera kennt rem noch nicht und der Internet Explorer bis einschl. Version 8 kennt diese Einheit auch nicht. Die anderen Browser können mit dieser Einheit umgehen. Will man rem einsetzen und dennoch kein Browser ausschließen, dann könnte man folgendermaßen vorgehen:
body {font-size: 62.5%;}
#sidebar {font-size: 14px; font-size: 1.4rem;}Ich für meinen Teil werde werde auch weiterhin bei Pixel bleiben. Alle relevanten Browser verfügen über einen gut funktionierenden Seitenzoom und alle diese Browser können Schriften skalieren, egal ob die Größe per Pixel oder Em bestimmt wurde.
Im Artikel befindet sich ein Partner-Link zu Amazon. Wenn du etwas darüber kaufst bekomme ich u. U. eine kleine Provision. Dir entstehen keine Extra-Kosten.
Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.
Was ich nicht ganz verstehe: Warum schreibt man
font-size: 62.5%und nichtfont-size: 10px?Mhh? Sollten das nicht 24px sein, oder versteh ich Deinen Satz falsch?
@mike,
ist korrigiert. 🙂
Deine Klasse
.kleinerist in dem Moment in dem duremverwendest aber auch nicht mehr halb so sinnvoll wie zuvor (abgesehen davon, dass sie eh.groesserhätte heißen sollen). Es mag Fälle geben, in denenremsinnvoll ist, aber der von dir beschriebene ist meines Erachtens keiner. Das Problem mitemist meines Erachtens, dass sich viele Leute einfach keine Gedanken darüber machen, wenn sie ihre CSS schreiben. Wer mitemauf Probleme stößt, der braucht keinremsondern solltepxnutzen. Da die Browser, die mitremzurecht kommen, auch ohne weiteres die ganze Seite zoomen können, ist damit also auch nichts verloren. Sinnvoll eingesetzt werden kannremmeines Erachtens nur von denjenigen, die auchemsinnvoll einsetzen können. Wenn das nun als Heilmittel für die Unfähigen gehyped wird, dann ruiniert es nur das Potential, dass inremsteckt.@Nico,
dieser Beispiel mag für dich nicht logisch sein, er stammt aus der Praxis. Ich betreue einige Seminare wo auch einige CSS-Anfänger dabei sind. Und wo viele Anfänger ins straucheln kommen sind der CSS-Reset und Schriftgrößen via em. Hierbei hat sich er Seminar-Teilnehmer gewundert warum die Listenpunkte größer waren als der Rest der Sidebar.
Moin,
darüber kann ich leider nur verständnislos den Kopf schütteln. 😕
Mit Pixel wird der Textzoom des IE außer Kraft gesetzt (auch beim IE9!)!!
Der Verweis auf einen existierenden Seitenzoom kann doch nicht wirklich dein Ernst sein.
Bei kleineren Bildschirmen muss man dann ruckzuck horizontal scrollen, außerdem erhöht sich die Zeilenlaufweite stante pede.
Persönlich gehöre ich wie unzählige Andere auch, die deshalb den Textzoom nach einem langen Arbeitstag zu schätzen wissen.
Die Problematik um em kann ich auch nicht nachvollziehen.
Es wird eine Grundschriftgröße (in %) für body definiert und darunter den Elemente Schriftgrößen in em zugewiesen.
Falls ich noch eine gesonderte Schriftgröße benötige wird sie an entsprechender Stelle definiert…und fertig.
Probleme mit der Vererbung treten nicht auf, weil ich in allen relevanten Browsern teste bevor ich veröffentliche.
Bei einem Layout lasse ich soviel Spiel, das ich möglichst in keiner Hinsicht Probleme bekomme.
Ich weiß auch: Das Web besteht nicht aus Papier und pixelgenaue Layouts sind immer noch ein Märchen.
Persönlich möchte ich meinen Besuchern allen möglichen Komfort bieten und dazu gehört selbstverständlich auch ein funktionierender Textzoom für IE-Besucher.
Persönlich habe ich das Gefühl, das die Sehnsucht nach einem möglichst pixelgenauen Layout manchmal größer ist, als die Usability für manche Besuchergruppen und dieselbe dadurch manchmal etwas aus dem Blickfeld gerät.
Sorry, ist nicht böse gemeint, aber das konnte ich nicht unwidersprochen so stehen lassen. 🙂
Gruß
Klaus
Hallo Klaus,
Nö, schaue dir bitte den ersten Screenshot im folgenden Artikel an: Schriftgröße in Pixeln.
Dieser Vorwurf war schon vor 5 Jahren ausgelutscht, weil in aller meisten Fall nicht wahr. Mit diesem Vorwurf versucht man immer wieder die Leute zu diskreditieren, die Pixel einsetzen. Es wird langsam Zeit für etwas neues.
Das liegt dann aber nicht an
em, sondern am mangelnden Verständnis. Dieses Problem löstremnicht, im Gegenteil, es wird dann an Stellen eingesetzt, an denen es keinen Sinn ergibt.Ich hab mich auch schon dabei erwischt, auf die schnelle alles in px machen zu wollen. Hab dem Faulheitsimpuls dann aber wiederstanden 😉
okay, ich hätte dabei schreiben sollen unter Standardeinstellungen. 😉
Wer aber bitteschön von der großen Masse der User außer uns Technophilen kann, bzw. stellt das da so ein das der IE auch Pixelschriften zoomen kann??
Von den normalen Usern (abends ein bißchen surfen, ein bißchen googeln, ein bißchen mailen,) die ich kenne, weiß das niemand, wenn man es ihm nicht sagt.
Diskreditieren will ich sicher niemand, warum auch?
Aber warum sollte ich ohne Not einer Usergruppe den manchmal notwendigen Komfort verweigern?
Etwas Neues ist das sicher auch nicht.
Da gibt es schon folgenden Artikel von Gerrit van Aaken zu, der viele Kollegen ziemlich fassungslos hinterlassen hat.
Man sollte auch bedenken, das die Pixel bei höherer Auflösung immer kleiner werden.
Naja, ich gebe mittlerweile seit zwei Jahren an der örtlichen VHS auch Kurse für CSS-Anfänger.
Das Anfänger beim CSS-Reset ins Straucheln kommen oder mit Schriftgröße via em Probleme haben konnte ich jetzt noch nicht feststellen.
Im Gegenteil, ich mach dann immer nen kurzen, praktischen Test via Pixel-IE-Textzoom und das leuchtet dann jedem sichtbar ein.
Besonders Ältere nehmen das wohlwollend zur Kenntnis. 😉
Hallo Klaus,
Wer aber bitteschön von der großen Masse der User außer uns Technophilen kann, bzw. stellt den Zoom im Browser so ein das er nur Text und nicht die ganze Seite (Standard) skaliert? 🙂
Du könntest die Vorführung um ganze 10 Sekunden erweitern und denen zeigen, wie sie die Standardeinstellungen von IE anpassen. Das wäre für deine älteren Teilnehmer doch viel nützlicher als die pro-contra Pixel-em Diskussion.
ja, so ganz unrecht hast du da auch wieder nicht. 🙂
Im FF muss das auch erst einstellen, soweit ich weiß. Beim Opera, Chrome geht es imho gar nicht (oder ich habs da einfach nicht gefunden).
Mein Komfortangebot richtet sich an eine kleine Minderheit. Die meisten IE-Nutzer kennen die Möglichkeit den Textzoom voreinzustellen wahrscheinlich nicht mal.
Deshalb ist die Diskussion hier, wie auch dein Artikel imho in gewisser Hinsicht akademischer Natur.
Ist ja nicht weiter schlimm, weil man dadurch andere Standpunkte/Blickwinkel kennenlernt, was allemal interessanter ist, als sich gegenseitig nur auf die Schulter zu klopfen. 🙂
[…] CSS3: Schriftgrößen mit rem angeben. […]
Immer wieder werde ich bei Testdurchläufen darum ‘gebeten’, mich um die Schriftvergrößerung zu kümmern und damit ’em’ zu nutzen.
Ich persönlich bleibe auch bei Pixelangaben aus den oben genannten Gründen. Wenn ich nicht gewährleisten kann, das ein Objekt nicht so dargestellt wird, wie ich es auf verschiedenen Browsern möchte, so ergibt es für mich dahingehend keinen Sinn.
Umständliche CSS-Angaben, nur damit jeder Browser angesprochen werden kann (mit seinen Macken), wird bei Validierungstests auch bemängelt oder gar als Fehler deklariert. Und Fehler stellen SEO-technisch doch ein Nachteil dar, oder?
Hinzukommt, das selbst CSS3, das ich anfangs verwendete, bei den W3C-Test als Fehler ausgeschrieben wird. Also keine runden Ecken und Schatten…
Es fehlen einfach einheitliche Standards! Ob bei der Nutzung von Schritgrößendarstellungen in den jeweiligen Browsern oder bei der nötigen kompletten Unterstützung von CSS3.
Ob sich das alles mit HTML5 ändern wird, bezweifele ich, aber ich hoffe, das ich bei meinem nächsten Redesign mit HTML5 und CSS3 variable Schriftgrößenangaben verwenden kann, ohne das es Fehler hagelt und im jeden Browser anders aussieht.
LG
Timm
[…] und Schriftgrößen auf relative Größen gesetzt und zwar auf rem … habe ich im Artikel CSS3: Schriftgrößen mit rem angeben beschrieben. Darüber hinaus kommen Media-Queries (z.B.@media screen and (min-width: 600px) zum […]