Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Das Basisstylesheet

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Das Basisstylesheet

Eine (X)HTML-Seite ohne jede CSS-Information ist nichts weiter als unformatierter Text. Jeder Browser gibt einer Webseite allerdings CSS-Grundregeln mit auf den Weg. So sind zum Beispiel Schriftart und -größe, sowie Abstände vordefiniert. Mit einfachen Methoden kann man diese Grundformatierungen zurückzusetzen, um die Kontrolle über die Eigenschaften zu behalten.

Die Idee

Mit einem Basisstylesheet setzen wir die browsereigenen Formatierungen ausser Kraft und steuern ein paar neue Basisformatierungen bei, auf die sich alle folgenden Elemente beziehen werden. Je nach bevorzugter Arbeitsweise kann man diese Formatierungen am Anfang eines Stylesheets unterbringen, oder man bindet diese als eigene Stylesheet-Datei vor den anderen ein. Wichtig ist nur, daß die Regeln des Basisstylesheets vor allen anderen Styles geladen werden.

Der erste Schritt

In unserem Basisstylesheet definieren wir zunächst eine einheitliche Schriftart und -grö0e. Zudem legen wir Schrift- und Hintergrundfarbe fest. Diese Regeln sind nicht in Beton gegossen, sie können immer für Einzelfälle neu definiert werden — Der praktische Nutzen von CSS. Konkret sieht das so aus:

body {
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 62.5%;
background-color: #fff;
color: #000;
}

An diesem Vorschlag dürfte nur eine Eigenschaft ungewöhnlich sein: die Schriftgröße. Es handelt sich hierbei um einen Vorschlag, der sich in der Praxis bewährt hat. Er wirkt erst so richtig zusammen mit der Regel aus Schritt Zwei. Werfen wir also daher später einen Blick auf die Schriftfrage.

Der zweite Schritt

Nun sorgen wir dafür, daß alle Elemente die gleiche Schriftgröße bei normalem Schriftschnitt erhalten und setzen vom Browser vordefinierte Aussen- und Innenabstände auf Null:

* {
margin: 0;
padding: 0;
font-size: 1em;
font-weight: normal;
}

Der Stern als Universalselektor weist die Eigenschaften allen Elementen zu. Mit diesem Schritt haben wir die grundlegenden Formatierungen vorgenommen. Die Farben und die Schriftart sind selbstverständlich nur Vorschläge, deren Werte individuell angepaßt werden können.

Schriftgröße

Fast alle Browser setzen als Standardschriftgröße 16 Pixel fest, wobei die einzelnen Überschriftarten auch durch unterschiedliche Schriftgrößen und Fettung hervorgehoben werden. Zudem legen alle Browser die Standardschriftgrößen der einzelnen Elemente unterschiedlich fest. Setzen wir im body eine Standardschriftgröße, werden sich dann alle anderen Elemente darauf beziehen. Als Größeneinheit nehmen wir in keinem Fall Pixel (px), denn sonst skaliert der Internet Explorer die Schriften nicht, was der Webseite ihre Flexibilität nimmt. Durch unterschiedliche Fehler in den Browsern haben sich ein paar wenige Vorgehensweisen durchgesetzt, die sich in der Definition der Basisschriftgröße im body unterscheiden.

Der hier vorgestellte Ansatz bewirkt, dass die Basisschriftgröße auf 10 Pixel gesetzt wird, denn das sind 62,5% von den 16 Pixeln der Standardgröße. Diese wird durch 1em bestätigt und auf alle Elemente vererbt. Im Folgenden können wir nun mit em und % so vorgehen, als würden wir in Pixeln gestalten. 1.2em bzw. 120% sind dann 12 Pixel, 2.3em bzw. 230% sind 23 Pixel. Diese Vorgehensweise ist bequem und leicht nachvollziebhbar.

Eine andere Möglichkeit ist, im body 100.01% als Basisschriftgröße zuzuweisen. Der krumme Wert ist Fehlern in Opera und Safari geschuldet. Niemals sollte allerdings em als Einheit im body-Tag genutzt werden. Hierbei würde sich der IE daneben benehmen.

Den eigenen Weg finden

Dieses Basisstylesheet ist natürlich nur eine Empfehlung. Da es sich in der Praxis aber mehrfach bewährt hat, kann es so falsch nicht sein. Merke: Einmal definiert, sollte an diesem Stylesheet nichts mehr geändert und schon gar nicht gestrichen werden. Da die Schriftgrößen neu definiert werden, darf deshalb auf keinen Fall die Definition im Basisstylesheet fehlen. Jeder sollte den für sich optimalen Weg suchen.

Weiterführende Links

Kommentare

makcie
am 10.12.2005 - 09:54

Basis-Stylesheet - eine gute Sache. Danke für diesen Beitrag.
Das Problem der Schriftgröße - ein unendliches Thema.
Der wichtigste Aspekt: Die Lesbarkeit.

Jakob Nielsen hat auch in diesem Jahr die 10 häufigsten Wegdesign-Fehler aufgelistet:
http://www.useit.com/alertbox/designmistakes.html (en)
http://www.usability.ch/Alertbox/20051003.htm (de)
Platz 1 in seiner Liste: Probleme mit der Lesbarkeit. Etwa zwei Drittel der Besucher beschwerten sich über kleine oder fixierte Schriftgrößen, etwa ein Drittel über ungenügenden Kontrast zwischen Text und Hintergrund.

Ob als Basisschriftgröße im body 62.5% oder 100.01% festgesetzt werden - das muss jeder Webautor selbst entscheiden. Mit den 62,5% = 10px = 1em habe ich im vorigen Jahr endlich gelernt, Schriftgrößen in em zu berechnen. Diese Rechnung stimmt jedoch nur, wenn der User die "Werkeinstellung" der modernen Browser = 16px nicht verändert hat. Jetzt tendiere ich jedoch zu den 100.01%, damit wird die vom User eingestellte Defaul-Schriftgröße respektiert.

Um den Weihnachtskalender der Webkrauts
besser lesen zu können, habe ich die Default-Einstellung im Mozilla auf 24px erhöht. 62,5% davon sind 15px. In diesem Fall sind 15px = 1em. Wenn ich die Default-Einstellung bei 16px belasse, dann vergrößere ich regelmäßig die Schrift auf 150% und damit auch auf 24px. Wenn 1em = 10 px sind, dann sind 150% = 15px.
Das ist mir eher zu klein und die Textfarbe ist oft zu blaß - meine Augen sind halt nicht mehr das, was sie mal waren. Hinzu kommt: Iich habe einen 19'' Flachbildschirm mit der optimalen Bildschirmauflösung 1280x1024 bei 96dpi, und je höher die Bildschirmauflösung, desto kleiner bekanntlich die Schriftgröße.

Zum Schluss noch ein Link:
http://www.mediaevent.de/article.php/20041123124655910#comments
Ulrike Häßler plaudert kompetent und recht amüsant über Schriftgrößen

Ich bin jeden Tag gespannt auf den neuen Beitrag im Adventskalender der Webkrauts.
Und auf die zusätzlichen Links.
Ein Dankeschön an alle Mitwirkenden.

PS: Ich bin kein Profi und meine erste und bisher einzige Website ist eher eine "Jugendsünde" bzw. eine "Alters-Torheit".
Im nächsten Jahr stelle ich sie auf CSS-Layout um, versprochen.

Permanenter Link

Martin Labuschin
am 10.12.2005 - 14:13

"Mit einem Basisstylesheet setzen wir die browsereigenen Formatierungen ausser Kraft"

Du fängst aber noch nicht alle standard-eigenschaften ab...

text-decoartion hast du wohl vergessen. denn die browser setzten auch unterstrichen oder durchgestrichen ein. border ist auch meist eine voreinstellung von browsern, oder nicht?

der artikel ist aber sonst sehr gut!

MfG Martin

Permanenter Link

Alexander Brock
am 10.12.2005 - 14:26

Alle Elemente haben zu jedem Zeitpunkt alle CSS-Eigenschaften.

Permanenter Link

Martin Labuschin
am 10.12.2005 - 18:26

oder meinst du die eigenschaften, die bei jedem browser anders sind?

Permanenter Link

Harald Kampen
am 10.12.2005 - 19:05

Sicherlich gibt es da verschiedene Ansätze. Um alle Standardeigenschaften fehlt noch einiges, aber das macht auch nicht unbedingt Sinn.

Damit die Schrift auch in Formularen verwendet wird, würde ich die Schriftart in die allgemeinen Angaben unter dem Universalselektor setzen. font-weight: normal; würde ich weglassen. Das muss aber je nach Bedarf eingerichtet werden.

Wenn verlinkte Bilder keinen Rahmen haben sollen, bietet sich img {border-width: 0;} als Ergänzung an. Wer häufiger Tabellen verwendet, kann td, th {vertical-align: top} setzen.

Permanenter Link

Alexander D.
am 11.12.2005 - 01:11

"Fast alle Browser setzen als Schrift-Standardgröße 16 Pixel fest" - welche Browser sind denn bekannt die nicht 16px vordefinieren?

Ich bin hier leider auf Windows Browser beschränkt und zumindest die sind mit der "Regel" konform.

Permanenter Link

Michel
am 14.12.2005 - 17:17

Man hätte noch ein wenig mehr drauf hinweisen sollen, UNBEDINGT eine Hintergrundfarbe zu definieren, weil nicht jeder Besucher weiß als Hintergrundfarbe hat.

Permanenter Link

Sven Drieling
am 16.12.2005 - 03:30

Hallo,

die Schriftgröße für den Fließtext zu ändern ist IMHO etwas, was man nicht machen sollte, da in der guten Welt die Webbrowser so konfiguriert sind, dass die eingestellte Schriftgröße die für den Benutzer ideale Größe zum Lesen von Webseiten darstellt.

Opera und Firefox bieten zum Glück die Möglichkeit eine kleinste erlaubte Schirftgröße einzustellen mit der sich jene Browser über die Vorgaben im Stylesheet hinwegsetzen, so kann ich diesen Adventskalender auch schön zurückgelehnt lesen.

Zum Anpassen der "Schriftgröße" könnte man auch die Zoom-Funktion nehmen. Aber die vergrößert auch Grafiken und sorgt schnell dafür, dass Seiten dann horizontal gescrollt werden müsste.

tschuess
[|8:)

Permanenter Link

Peter Müller
am 26.12.2005 - 13:08

@Harald
> Wenn verlinkte Bilder keinen Rahmen haben sollen,
> bietet sich img {border-width: 0;} als Ergänzung an.

So werden alle Rahmen von allen Bildern auf 0 gesetzt.

Um nur verlinkte Bilder zu selektieren wäre der verschachtelte Selektor a img {...} besser.

Permanenter Link

marcel
am 29.12.2005 - 01:07

müsste es nicht

body * {
margin: 0;
padding: 0; font-size: 1em;
font-weight: normal;
}

heißen? weil nur ein stern * würde body ja mit einschließen, und somit würden die 62.5% durch 1em überschrieben werden und beziehen sich dann womöglich auf die voreinstellung des browsers ...

Permanenter Link

Jens Grochtdreis
am 30.12.2005 - 13:52

@Alexander: Du hast Recht, ich habe schwammig formuliert. Was ich meinte wurde aber klar, oder? Ich hätte auch von "Normalisierung" der Eigenschaften sprechen können.

@Martin: Ich will auch gar nicht alle Standardeigenschaften abfangen. Ich will nur die Eigenschaften abfangen, die den meisten Ärger machen. Das sind eindeutig die oben angeführten. Und eine "text-decoration" unter einem Link ist eine sinnvolle Standardformatierung.

@Harald: Die Anregung mit der Schriftart ist korrekt. Deine anderen Anregungen sind auch gut. So kann man sein eigenes Basis-Stylesheet ausbauen. Allerdings würde ich trotzdem immer die Schriftarten auf normal zurücksetzen. so weiß ich auf alle Fälle, welche Überschriften fett sind und welche nicht.

@Alexander: Ich kenne auch nur Browser mit dieser Regel, meine mich aber an einen Artikel zu erinnern, der ein paar exotische Browser auflistete, bei denen die 16px-Regel nicht galt. Sie gilt ja auch dann nicht, wenn jemand "Grosse Schriftart" in Windows ausgewählt hat. Es ist halt alles relativ.

@Michel: "Man" oder ich? Hast recht. ist mit Deinem Kommentar geschehen.

@Sven: Du träumst. Wahrscheinlich hast Du noch nie in der realen Welt eine Webseite für jemand anderen mit jemand anderem zusammen erstellt. Da ist schnell die Anforderung, die Schrift solle 12 Pixel groß sein. BTW: Ich lese lieber eine Seite mit 11 Pixel Schrift, als mit 16 Pixel Schrift. Das ist meine Vorliebe.
Vor allem aber: warum gibt es eine Eigenschaft für Schrfitgröße, wenn ich sie aus falsch verstandenem Purismus nicht nutze? Wer sagt Dir, daß die 16 Pixel optimal sind? Ich finde sie zu groß. Und wer hat die 16 Pixel gesetzt? Die Browserhersteller. Aus welchem Grund auch immer.

@Marcel: Probiere es doch mal aus. Dann wirst Du feststellen, daß Deine Vermutung nicht stimmt. Merke: Durch die 1em werden die 62.5% bestätigt und weitervererbt. Durch body wird die Schriftgröße nur auf Absätze direkt weitervererbt, aber nicht auf Überschriften. Durch den Universalselektor wird die Schriftgröße auch auf Überschriften vererbt.

Permanenter Link

Die Kommentare sind geschlossen.