KS Webdesign - Der Blog

Schriftgröße und line-height

18. August 2009 von Klaus

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äßt sich im IE (unter Standardeinstellungen) auch vergrößern.

Kategorien:: XHTML/CSS
Tags:: Internet Explorer, line-height, Schriftgröße, Zeilenabstand
Kommentare:: Kommentare verfolgen oder Kommentar abgeben

7 Kommentare und 10 Trackbacks/Pingbacks

von David – Mittwoch, 19. August 2009 um 00:30

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.
von Hubspe – Mittwoch, 19. August 2009 um 07:47

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.
von Crizzo – Mittwoch, 19. August 2009 um 10:16

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
von David – Mittwoch, 19. August 2009 um 11:10

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
von Hubspe – Mittwoch, 19. August 2009 um 11:39

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.
von der zauberer – Freitag, 20. November 2009 um 02:45

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.
von Hubspe – Freitag, 20. November 2009 um 07:21

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
Pingback CSS – Ordnung 1 | KS Webdesign der Blog – Freitag, 28. August 2009 um 09:06

[...] Für body werden Schrift,- und Hintergrundfarbe festgelegt. Außerdem Schriftgröße, Zeilenabstand und einige Schriftarten. Weitere Infos dazu findest du in diesem Artikel. [...]
Pingback lp-webdesign.de, Wie gef – Mittwoch, 23. September 2009 um 06:57

[...] [...]
Pingback rechte spalte wird im ie 6 verschoben - XHTMLforum – Samstag, 03. Oktober 2009 um 09:56

[...] [...]
Pingback background repeat in der css - XHTMLforum – Freitag, 06. November 2009 um 06:25

[...] [...]
Pingback Anonymous – Samstag, 07. November 2009 um 17:21

[...] [...]
Pingback horizontale Navigation mit rollover Bild - XHTMLforum – Freitag, 27. November 2009 um 07:00

[...] den IE 6 in den Quirksmodus. Deine Site ist auch ohne diese Zeile valide. Deine Site hat die 12px-Seuche. Ansonsten zu Navis allgemein bietet die CSS-FAQ ne Menge wissenswertes. __________________ [...]
Pingback Eure Kritik ist erw – Donnerstag, 24. Dezember 2009 um 10:02

[...] [...]
Pingback Website zu Zeta Producer - XHTMLforum – Donnerstag, 14. Januar 2010 um 12:05

[...] [...]
Pingback Gleichm – Freitag, 15. Januar 2010 um 17:09

[...] [...]
Pingback Behinderte mit einbeziehen 1 – Dienstag, 29. Juni 2010 um 13:23

[...] diesem Artikel habe ich das schon einmal [...]