Schriftgrössen in EM, Pixel, Prozent oder Punkten?

psd zu html | codingpeople - webdesign trifft html - 20% Rabatt für alle Neukunden

Schriftgrößen in CSS Dateien zu definieren und dabei die Skalierbarkeit des Schriftgrades in seinen 5 Möglichkeiten auch für den IE zu gewährleisten, ist ein häufig auftretendes Problem und wird selbst in Foren von Entwicklern immer wieder diskutiert. Um Webseiten nicht nur für Gecko-Engine betriebene Browser anzupassen, sollten skalierbare Schriftgrößen definiert werden, dass heißt sie verzichten auf die Definition von Schriftgrößen in Pixel. Allzu häufig wird immer noch auf Pixel und manchmal sogar auf Point für die Definition einer Schriftgröße zurückgegriffen. Wer jetzt denk, ooch nee, kenne ich doch schon alles. Super! Denn der Beitrag ist er für die Webdesigner / Webentwickler geeignet, die eben immer noch auf eine Anwendung der Schriftgröße zurückgreifen, die es dem Internet Explorer nicht ermöglicht diese zu vergrößern oder gegebenenfalls zu verkleinern.

CSS-Design - Das Buch

Die Einheit em wird Typographen und versierten Webentwicklern ein Begriff sein, denn em entspricht dem typografischen Begriff Geviert ( eine einfach Erläuterung dazu gibt es hier oder hier bei Wikipedia ) und ist die elementeigene Schrifthöhe einer Schriftart. Das heißt, bei einer Schrifthöhe von 12 Punkten beträgt 1 em - 12 Punkte. Anders herum ausgedrückt ist 1 em = die Browserstandardschriftgröße.

1Point ist einzweiundsiebzigstel eines Zoll (1/72 Zoll = Inch). Auf Apple-Rechnern mit Mac Betriebssystemen mit 72 ppi ( points per inch ) Auflösung, würde ein Point exakt einen Bildpunkt (Pixel) ergeben, auf einem Windows-Rechner 1.3 Pixel. Microsoft hatte sich nämlich für 96-120 ppi entschieden, was dafür sorgte das unter Windows die meisten Schriftdefinitionen noch lesbar waren, aber auf dem Mac zu einem Sehtest mutierten. Mittlerweile verwenden auch die aktuellen Mac Browser 96 ppi als Berechnungsbasis. Nach der Schaffung einer Grundlage für beide Plattformen, liegt es nun an den Entwicklern diese korrekt für die User umzusetzen.

Schriftgrößenunterschiede im Internet Explorer

Der ein oder andere wird jetzt vielleicht denken, warum nimmt der nicht 100% für die Schriftgrößen ein und fertig ist. Das machen einem die Browser und ihrer Bugs leider einen strich durch die Rechnung. Für den Internet Explorer würde diese Angabe im body mit font-size: 100% sogar ausreichen. Opera 6 hingegen stellt den Text immens klein dar, da dem Browser beim Kalkulieren der Schriftgröße ein Fehler unterläuft und ist nicht mehr lesbar. 101% bringt leider absolut dasselbe Ergebnis ( der Safari bspw. stellt die Schriften dann überproportional groß dar ), da dieser Wert von den abgerundet und das Ergebnis bereits kennen, können wir uns diese Alternative auch sparen. Eine Variante die sich daher durchgesetzt hat und nahezu alle Browsertests bestanden hat, die die das die Schriftgröße im body der CSS Datei auf 100.01% gesetzt. Für sehbehinderte Menschen stellen nicht skalierbare Schriftgrößen eine der grössten Barrieren im Internet dar, diese kann mit der eben beschriebenen Alternative umgangen werden.

Wenn man nun statt dessen in den Universal-Selektor font-size: 1em eintragen sollte, wird bei einer Verkleinerung im Internet Explorer die Schrift wieder unlesbar ( siehe Grafik oben ). Falls kleinere Werte als 100,01% im body definiert werden, wird die Vererbung von Styles bei Schriftgrößen von beispielsweise 70% oder 0.7em sich daran orientieren. Diese relativen Größen- und Breitenangaben in em oder % setzen allerdings ein flexibles Gesamtlayout und damit einen Verzicht von Layouts die durch den Einsatz von Tabellen zustande kommen. Das heißt, das beispielsweise eine Navigation nicht pixelgenau mit padding und margin definiert werden sollte, wenn die Schrift dann mittels em definiert wird. Dann wird die Schrift bei Vergrößerungen über die Grafiken oder ihre vorher bestimmte Position hinauslaufen. Die Positionierung des Textes innerhalb eines Navigationspunktes kann auch mittels der Zeilenhöhe ( siehe Grafik unten ) definiert werden, so kann der Abstand nach oben und unten gleichermaßen angegeben werden.

Schriftdefinition durch Shorthandproperties

Das heißt das gesamte Layout, sollte skalierbar umgesetzt werden. Sicherlich lässt sich jetzt darüber diskutieren bis zu welchem Prozentsatz eine Vergrößerung oder Verkleinerung gewährleistet werden sollte. Aus Gesprächen und Erfahrungen mit Usern die darauf angewiesen sind Schriftgrößen mittels Browser zu verändern, setze ich eine 4-fache Vergrößerung oder 2-fache Verkleinerung ein. Einfach mal bspw. mit Firefox oder Flock STRG + Scrollrad der Maus testen. Wer andere Erfahrungen hat, kann dies mir gerne mitteilen ( einfach unten kommentieren ).

Fazit: Die Schriftgröße mittels Pixel zu definieren, ist eine der größten und leider die mit häufigsten auftretende Webdesign- und Accessibilitysünde, da User des IE die Schriftgröße nicht variieren können. Die Verwendung von Points als Einheit für die Schriftart ist zwar in der Minderheit, ist aber trotzdem absolut falsch ( abgesehen vom Einsatz bei Druckversionen ), da diese Einheit für den Einsatz in den Printmedien gedacht ist. Der Einsatz von Prozenten und em in Kombination ist für relative Schriften ideal und kann mit einigen Berücksichtigungen für alle Browser auf sämtlichen Plattformen zu optimalen Darstellungen führen. Weil die Vererbung auf dem berechneten Werten basiert, erben auch die Schriftgrößen untergeordneter Elemente die von übergeordneten. Also immer schön vorsichtig beim definieren von Schriftgrößen. Ich hoffe dem ein oder anderen, hiermit einen Anstoß gegeben zu haben, um über die korrekte Verwendung von Schriften im Web im Zusammenhang mit Webstandards nachzudenken oder besser, es selbst zu testen.

Billomat - Rechnungen Online versenden

  1. Ralf Schmid
    08 Dez 2005, 13:01

    Im Prinzip Zustimmung. Der Forderung, partout »flüssige« Layouts zu machen, halte ich indes für problematisch, zumindest in dieser Unbedingtheit. Bislang habe ich selten flüssige Layouts gesehen, die es auch gestalterisch noch gebracht hätten.

    Was die variablen Schriftgrößen anbelangt, ziehe ich eine Mischform vor: Gute Browser bekommen eine fixe Basisgröße und alles andere leitet sich proportional daraus ab, für den Explorer gibts die Grundgröße als Prozentwert (ca. 80%). Mit dieser Variante ist das Gros der Besucher gut bedient, und man behält noch halbwegs die Kontrolle über das Layout. Wer es gerne größer mag, der vergößert sich das Ganze eben.

    BTW und ohne jede Häme: Klicke ich beim Firefox 1.5 zweimal auf »vergrößern« rutscht die Überschrift Ihres Beitrags unter den Kopf und wird von ihm verdeckt.


  2. Alexander
    08 Dez 2005, 13:02

    hmm dabei steh ich auf px, hmm...


  3. Webstandard-Team
    08 Dez 2005, 13:10

    @Ralf Die Überschrift die dort erscheint, ist der Text der Titelgrafik, der erscheint wenn Grafiken ausgeschaltet werden, danke für den Tip. Wird ein wenig verkleinert ;o)


  4. Ralf Schmid
    08 Dez 2005, 14:42

    Grafik ausgeschaltet? Würde ich nie tun. Ich liebe Grafik.


  5. Webstandard-Team
    08 Dez 2005, 14:51

    @Ralf - ImageReplacement - Der Text ( dafür vorhanden, damit der Titel angezeigt wird, wenn Images ausgeblendet werden ) versteckt sich hinter der Grafik, wenn dieser also vergrössert wird, kommt er natürlich hinter der Grafik hervor. Das du Grafik liebst sind man an deiner Seite ;O)


  6. Ralf Schmid
    08 Dez 2005, 17:13

    Ah, okay, jetzt habe ich es kapiert ...


  7. Webstandard-Team
    09 Dez 2005, 11:29

    @Jörg - Es geht nicht darum ob jemand Images ausschaltet, sondern das bspw. Screenreader oder Texteditoren auch eine Überschrift (in dem Fall h1) haben oder nicht. Nicht jeder ist "sehend" unterwegs im Netz.


  8. Tim Wölfle 09 Dez 2005, 21:34

    Schöner Artikel, und auch sonst ein schönes und informatives Weblog!

    Aber es gibt ein paar Dinge, die ich nicht verstehe: Warum benutzt ihr z.B. für die Tabelle "Schriftgrössendefinition" eine Grafik? Wo das doch mal wirklich eine Tabelle ist. Und hat es einen Grund, dass ihr eure Grafiken auf den flickr Server legt, auf welchem sie so kryptische Dateinamen haben?


  9. Martin 10 Dez 2005, 13:15

    "da User des IE die Schriftgröße nicht variieren können"

    ja, das ist echt schade. nur leider ist die sache nicht annähernd so einfach wie hier dargestellt. ich habe mich anfangs selbst viel zu schnell von em/ und % begeistern lassen, bis ich mich dann mal selbst näher mit beschäftigt habe, statt der masse weiterhin hinterterzulaufen. also ich kann nur jedem leser raten sich selbst mit dem thema zu beschäftigen und nicht alles glauben, was so geschrieben wird.

    also nicht falsch verstehen. ich denke 1em und 100% ist die einzig wahre schriftgröße. und dennoch ziehe ich 12-14px vor. warum? nochmal nachdenken bitte und selbst an die eigene nase fassen. ;)


  10. Sascha 10 Dez 2005, 18:08

    Guter Artikel mit dessem Thema sich wohl jeder auseinandersetzen muss. Doch eine "Grund"-Einheit hab ich in dem Artikel vermisst (oder nicht gesehen): Keywords! Das Keyword "small" im body-Element global vergeben, und dann für die einzelnen Bereiche die Grössen mittels Prozente vergeben.

    Einziger Nachteil bei den Keywords: Bei den 5er Win/IE's wird small zu gross dargestellt. Lösung; für diese wunderbaren Browserversionen das Keyword x-small vergeben. So sind alle zufrieden.


  11. Tim Wölfle 11 Dez 2005, 15:43

    Was mir gerade auch noch auffällt: In eurer Schriftgrößendefinitions-Tabelle benutzt ihr die CSS-Eigenschaft "font-color". Diese existiert aber garnicht, sondern heißt schlicht "color".


  12. Der Rote Hund
    11 Dez 2005, 16:27

    Wichtiges Thema! Aber den Artikel solltest Du nochmal von Tipp- und Grammatikfehlern befreien, bitte (nicht böse gemeint). Ausserdem hätte ich ein, zwei Bemerkungen:

    »Für sehbehinderte Menschen stellen nicht skalierbare Schriftgrössen eine der grössten Barrieren im Internet dar«

    Die eigentliche Barriere für sehbehinderte Menschen ist dann ja wohl der Explorer/Win, der Pixelschrift im Gegensatz zu allen anderen nicht skalieren kann. Im Opera (z.B.) kann man nicht nur die Schrift skalieren, sondern das gesamte Layout seinen Bedürfnissen anpassen. Viel zu wenig Menschen wissen, wie schlecht der Explorer ist, weil wir immer Rücksicht auf die Uninformierten nehmen. (»Wieso, der Explorer funktioniert doch …?!«)

    Ausserdem bin ich gegen zuviel Rückwärtskompatibilität. In Opera 6 teste ich nichts mehr. Opera-User neigen zum zügigen updaten. Und Netscape 4 wird per @import von der Gestaltung verschont. Ich denke, wer mit so alten Möhren unterwegs ist, muss eben mit »Inhalt pur« vorlieb nehmen, wie auch die Benutzer von Screenreadern etc. Einzige Ausnahme: der Explorer 5/Mac, weil der für MacOS 9 und älter immer noch der Beste ist.

    »1Point ist einzweiundsiebzigstel eines Zoll (1/72 Zoll = Inch).«
    Das ist, soweit ich weiss, ein PostScript-Point. Wie schon jemand weiter oben erwähnt, ist die Sache nicht so einfach. Schriftgrößenangaben in Point sind übrigens im Stylesheet für Print z.B. total angebracht und nicht »absolut falsch«.


  13. Apple
    14 Jan 2006, 19:52

    Sehr schöner Artikel.

    Ich kann mir nicht vorstellen, dass man im IE7 die Pixel-Schriftgröße nicht verändern können wird.
    Wenn der IE7 veröffentlicht wurde, sollte man das Thema Schriftgröße in Pixel noch einmal bewerten.


  14. WindowsKiller
    15 Jan 2006, 16:56

    Hi,

    Also ich sehe die Sache von einer anderen Seite: Gerade weil der IE nicht fähig ist, die Pixel-Angaben für eine Skalierung umzurechnen (x px * 1.00 für 100%, x px * 1.25 für 125%, mehr ist das ja nicht), sollte man nicht auf em umsteigen. Damit toleriert man ja sonst die Macken des IE's, und Microsoft wird den Teufel tun, diese Macken zu beheben. Es wird sich erst was ändern, wenn die IE-Benutzer direkt von den Macken betroffen sind. Sehe ich zumindest so, und deshalb verwende ich auch Pixel-Angaben (und nebenbei eh Mozilla ;-)


  15. Webstandard-Team
    16 Jan 2006, 08:03

    @WindowsKiller: Wenn ich dich richtig verstehe machst du den Content für dich selbst, richtig? Korrigiere mich aber, Webseiten ( Webseiten zur Darstellung der Persönlichkeit denen es egal ist wer wie wo auf Ihre Seite zugreift, mal außen vor ) sollten immer für alle User nutzbar udn skalierbar sein ( und dazugehören nunmal mehr als 3/4 aller Internetnutzer die den IE nutzen ). Ein Kunde dem du sagen würdest, das du den IE nicht berücksichtigst (warum auch immer), würde er die längste Zeit dein Kunde gewesen sein, denn er kann es sich nicht erlauben nur für eine "Minderheit" eine Präsentation/Applikation anzubieten.


  16. WindowsKiller
    16 Jan 2006, 14:20

    Nein, ich mache meine Webseiten nicht nur für mich. Aber darum geht es auch nicht. Es ist ja nicht so, dass die Seiten so überhaupt nicht mit dem IE nutzbar sind. Ich finde es nur lächerlich, jede Macke des IE's durch eine Menge Aufwand zu umgehen und dadurch den Benutzern vorzugaukeln, wie gut der IE doch scheinbar ist. Warum benutzen denn immer noch so viele Leute den IE? Genau, weil sie meist von seinen Fehlern nichts mitbekommen und somit gar keinen Grund haben, sich nach was besserem umzusehen. Das sollte man meiner Meinung nach nicht unterstützen.

    Im übrigen sind die Zeiten vorbei, in denen über 3/4 mit dem IE unterwegs sind. Laut den Statistiken meiner Seiten nutzen 47% einen Browser auf Gecko-Basis, nur 45% den IE.


  17. Webstandard-Team
    16 Jan 2006, 18:15

    Es geht doch nicht darum was der IE nicht macht oder kann, sondern ob man inder Lage ist dem User einer Seite das Optimum an Usability und Accessibility zukommen zu lassen. Der Grossteil nutzt den IE nicht deshalb noch, weil sie es nicht wissen das er Fehler "produziert", sondern da er eng mit einem bekannten Betriebssystem verknüpft ist und nicht alle User wissen wie man Software installiert, um dann einen anderen nutzen zu können. Ob man es lächerlich findet oder nicht, ändert nichts daran den IE ebenso zu optimieren. Ein Auto soll ja auch auf sämtlichen Strassenbelägen gut fahren können und nicht nur auf den die neu sind und sicher sind, oder? Der Anteil der IE User bei mir ist übrigens wesentlich geringer als bei dir, trotzdem werden sie berücksichtigt. Der Gesamtmarkt der Browser spricht allerdings immer noch eine andere Sprache.


  18. Perun
    27 Jan 2006, 10:08

    @ Webstandard-Team,
    ich mache mir schon seit langem Gedanken zum Thema skalierbare Schriften und setze schon seit längerer Zeit em als Einheit ein ... nur sehr oft wird als Argument gegen Pixel als Maßeinheit der IE und seine Nutzer gebracht.

    Aber jemand, ich spekuliere mal einfach, der nur den IE kennt und nicthmal weiß das es Alternativen gibt, der wird, behaupte ich mal frech, auch nicht die Funktion (Schriftgröße im Browser ändern) kennen.


  19. FritzeMeier 29 Mär 2006, 09:44

    Hallo, Perun!

    Der von Dir bespekulierte Nutzer müßte aber dann schon sehr unfähig sein, denn der IE verfügt über den Menüpunkt "Ansicht -> Schriftgrad", wo sich fünf Stufen der Schriftgröße (sehr klein...sehr groß) auswählen lassen. Diese Funktion ist auch per Symbolleiste erreichbar zu machen (solcherlei Symbolleistenumbastelmöglichkeit ist übrigens eine Flexibilität, die ich am Firefox noch sehr vermisse!), so daß man mit jeweils einer einzigen Mausaktion oder einer (zugegeben etwas unbeholfen anmutenden) Tastenfolge (z.B. ALT+A - i - s für "Sehr groß") im IE sehr wohl die Schriftgröße anpassen kann...

    ...sofern es denn die Gestaltung der Seiten zuläßt. Verwerflich in diesem Zusammenhang ist m.E. übrigens in starkem Maße auch das Verhalten etlicher Softwarehersteller, die ihren HTML- und/oder CSS-erzeugenden Werkzeugen px als Standard-Einheit verpassen und so ebenfalls für weitere Verbreitung (und [Nicht-Nur]-Von-Unwissenden-Für-Standard-Gehalten-Werden) dieser Unsitte sorgen!

    Grüße!


  20. html Purist
    14 Apr 2006, 18:26

    Hallo, ich mache konservative WebSites in html mit sehr, sehr wenig css. In letzter Zeit habe ich mir angewoehnt, die Schriftgroesse gar nicht mehr zu definieren, oder nur im Navigationsbereich etwas zu verkleinern. Den Rest ueberlasse ich den Browsern und den Einstellungen der Besucher. Der jeweilige Browser nimmt dann schon die Schriftgroesse, die fuer ihn richtig ist. Das Design muss diesem Prinzip dann freilich Rechnung tragen.

    Frueher habe ich gedacht, je mehr man definiert, desto aehnlicher sieht die Seite in den verschiedenen Browsern aus. Von dieser Illusion habe ich mich verabschiedet. Den Kampf gegen die Browser gewinnt man sowieso nicht, also lasse ich sie eben machen ...


  21. Chaindog 17 Mär 2008, 05:24

    Ich stimme der Grundidee durchaus zu und gerade unter dem Schlagwort "Barrierefreies Webdesign" ist dies ein Thema an dem man wohl kaum vorbei kommt. Jedoch wird man meiner Meinung nach derzeit immer noch einen Kompromiss zwischen der Umsetzung dieser Idee und dem Layout der Website eingehen müssen.
    Eins dürfte klar sein, es jedem Browser, jedem System und damit jedem User recht zu machen liegt noch in weiter Ferne. Das immer noch nicht alle Browser CSS2 komplett unterstützen ist das wohl nur ein Beispiel am Rande.
    Ich denke es ist eine Aufgabe der Webentwickler dies weiter voran zu treiben, eben indem sie nicht immer und immer wieder versuchen eine Website 2 - 3 Browser Versionen rückwärtskompatibel zu machen sondern die positiven Neuentwicklungen in aktuellen Browsern nutzen, die negativen links liegen lassen und dadurch den Entwicklern zeigen was am Markt gefordert wird. Schließlich gilt auch hier letztendlich das Gesetz von Angebot und Nachfrage. Sicher kann man auf Grafik und all die kleinen Gimmicks verzichten und eine Website dadurch weitestgehend kompatibel gestalten - aber warum?
    Aber ist es nicht gerade das was Webdesign ausmacht? Was das WWW für den User aufregend und interessant macht? Was den Spaß an der Arbeit ausmacht indem man immer wieder etwas neues gestaltet?
    Das Ziel des Ganzen ist klar - ein barrierefreies, grafisch ansprechendes WWW.
    Der Weg dahin ist das wo man sich als Webdesigner heute befindet - und wie heisst es so schön: "per aspera ad astra"....


  22. Roland 10 Jun 2008, 16:51

    Warum sagt: http://xhtmlforum.de/33302-wieviel-pixel-sind-ein-em.html ?

    Also, diese Liste hier gilt *nur* auf Windows-Systemen, wo die Standardgröße der Schrift nicht verstellt wurde:

    10px = 0.6em
    12px = 0.76em
    14px = 0.9em
    16px = 1.0em


  23. Grandswiss 06 Jul 2009, 01:10

    Angaben in "px" beziehen sich auf die HW des Anzeigegerätes; bei einem hochauflösenden Bildschirm z.B. à la Vaio P mit 220 PPI sind "10px" schier unlesbar. Schon dies ist ein Grund auf etwas Skalierbares wie "em" umzusteigen. Übrigens nicht nur für Fonts. Auch "padding" lassen sich in "em" angeben, um skalierbare Abstände zu erhalten.


  24. thilda 11 Sep 2009, 11:39

    Ist es denn nicht eine Möglichkeit NUR für den IE eine Erstangabe in Prozent vorzunehmen oder sollte man das dann doch lieber allg. für alle machen.

    Um auf Grandswiss einzugehen...
    Wird denn der Browser automatisch umgestellt nur weil ich einen Monitor anschließe und dann die Auflösung hochschraube? Eigentlich bleibt er doch immer brav bei seiner Einstellung ausser der User macht es dann irgendwann mal selber... vielleicht.

    Habe mich damit leider noch nie beschäftigen können da ich mit einer "relativ" kleinen Auflösung fahre... und 14px sind einfach toll


  25. sign.ag 01 Feb 2010, 10:05

    Ich find es unglaublich was es alles für schriftarten gibt, dazu die größen, formen und farben. wer braucht das eigentlich alles?


Artikel kommentieren





XHTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""> <abbr title=""> <b> <cite> <code> <em> <i> <strike> <strong>


authimage