Schriftgröße und line-height

Wie oft findet man auf vielen Websites so oder so ähnlich diese Angabe:

  • body {
  • font-size:12px;
  • line-height:16px;
  • }

Die erste Schriftgröße ist in Pixel definiert und für line-height wird eine Maßeinheit angegeben.

Wenn die erste Schriftgröße in der CSS-Datei in Pixel definiert worden ist, läßt sich die Schrift im Internet Explorer unter Standardeinstellungen nicht vergrößern. Außerdem ist line-height nur ein Faktor und Faktoren sind ohne Masseinheit.

Die erste Schriftgröße so anzugeben:

  • body {
  • font-size:1em;
  • }

ist auch keine gute Idee, da beim IE 6/IE 7 dann der em font-resizing Bug auftreten kann.

Der sicherste Weg ist dieser:

  • body {
  • font-size:100%;
  • line-height:1.5;
  • }

Die erste Schriftgröße in Prozent angeben.

Danach kann problemlos em als Masseinheit für Schriftgrößen hergenommen werden und der Text lässt sich im IE (unter Standardeinstellungen) auch vergrößern.

Generell sollte auf Pixel als Maßeinheit für die Schriftgröße immer verzichtet werden!

Kategorie: XHTML/CSS
Schlagworte: , , , .

Nach oben

19 Antworten auf Schriftgröße und line-height

  1. So und nicht anders! Ich verstehe hier so manch’ gestandenen Webdesigner nicht, warum man so an der Einheit px für Schriften hängt. Argumentiert wird dann mit dem inzwischen zum Standard gewordenen Seitenzoom in modernen Browsern und “px ist auch ein relatives Maß”. Ja, relativ zu den Eigenschaften des Anzeigegerätes, aber nicht zu eingestellten Schriftgröße. Wenn ich durchs Web surfe, will ich nicht erst bei jeder Seite zoomen müssen, bis die Schrift für mich angenehm zu lesen ist. Und die beste Möglichkeit, dem Leser diese Freiheit zu lassen, ist em.

  2. Hubspe sagt am

    Ich verstehe hier so manch’ gestandenen Webdesigner nicht, warum man so an der Einheit px für Schriften hängt.

    Wenn man sie darauf aufmerksam macht erntet man i.d.R. höfliche bis flapsige Ignoranz.
    Besonders übel ist die Gruppe der Ü50. :mrgreen:

  3. Du hättest noch schreiben können, welche Einstellung im IE vorgenommen werden müssen, dass er doch Pixelgrößen bei den Schriftarten ändern kann.

    Man könnte auch 100.01% schreiben, um damit noch einen Bug eines Uralt-Opera zu umgehen, aber dessen Marktanteil kann man im Promillebereich suchen.

    Gruß
    Crizzo

  4. Wieso uralt Opera? Das geht doch auf darstellungsfehler des IE zurück, wenn man SelfHTML glauben schenkt:
    http://de.selfhtml.org/css/layouts/mehrspaltige.htm

  5. Hubspe sagt am

    von Crizzo: Du hättest noch schreiben können, welche Einstellung im IE vorgenommen werden müssen, dass er doch Pixelgrößen bei den Schriftarten ändern kann.

    Ja, aber ich wollte es möglichst einfach halten. Kunden arbeiten i.d.R. bei den Browsern immer nur mit den Standardeinstellungen.

    von David: Wieso “uralt Opera”? Das geht doch auf darstellungsfehler des IE zurück, wenn man SelfHTML glauben schenkt:

    Ich glaub da war was mit Uralt-Operas und IE. Was im Einzelnen genau weiss ich grad nicht.

  6. Pingback: CSS – Ordnung 1 | KS Webdesign der Blog

  7. Pingback: lp-webdesign.de, Wie gef

  8. Pingback: rechte spalte wird im ie 6 verschoben - XHTMLforum

  9. Pingback: background repeat in der css - XHTMLforum

  10. Pingback: Anonymous

  11. Hallo, danke für den Tipp, kann ich die anderen Größen dann auch in Prozent angeben oder muss das em sein? bzw. dort wo ich von 100% ausgehe muss ich ja dann keine Größe mehr angeben oder?

    Danke und Grüße V.

  12. Hubspe sagt am

    Hi Victor,

    danke für den Tipp

    bitte, gerne. :-)

    kann ich die anderen Größen dann auch in Prozent angeben oder muss das em sein?

    Prozent ist kein Problem.
    Ist auch eine Geschmacksfrage was man lieber nimmt em oder Prozent.

    Wenn du oben in deiner CSS 100% angegeben hast, mußt du weiter unten nur die Änderungen für bestimmte Container festhalten.

    Viele nehmen auch 80% oder so etwas als erste Schriftgröße, weil ihnen 100% zu groß erscheint.

    Gruß
    Klaus

  13. Pingback: horizontale Navigation mit rollover Bild - XHTMLforum

  14. Pingback: Eure Kritik ist erw

  15. Pingback: Website zu Zeta Producer - XHTMLforum

  16. Pingback: Gleichm

  17. Pingback: Behinderte mit einbeziehen 1

  18. Pingback: Firmen-Website: Meinungen zum Layout/Design - Seite 3 - XHTMLforum

  19. Oh danke für die Info, ich habe es nach etwas rätseln und ausprobieren dann auch verstanden. Habe es als unerfahrener immer mit % umgesetzt.
    Merci

Sprich und fürchte dich nicht!

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Bitte maskiert < mit &lt; und > mit &gt; sonst verschwinden sie im Nirgendwo!