Schriftarten

• Als Standard für alle Elemente kommt eine serifenlose Schrift zum Einsatz
  (je nach Rechnereinstellung: Arial, FreeSans oder eine serifenlose Alternativschrift)
• Für Header und Hauptüberschriften (H1) wird eine serifenbehaftete Schrift verwendet
  (je nach Rechnereinstellung:"Times New Roman", Freeserif oder eine serifenbehaftete Alternativschrift)
• Für vorformatierte Texte (z.B. Code-Beispiele oder Eingabebefehle) wird eine nichtproportionale Schriftart verwendet
  (je nach Rechnereinstellung: Monaco, "Courier New", Courier, monospace)

Schriftgrößen

• Alle Schriftgrößen werden durch Prozentangaben relativ zur Standardschriftgröße des Browsers festgelegt.
• Als Ausgangsbasis, an der sich weitere Elemente orientieren, wird über den Body-Tag die Schriftgröße auf 69% der Standardschriftgröße des Browsers reduziert (100% entspricht bei modernen Browsern 16px bzw. 12pt, 69% in etwa 11px bzw. 8pt).
• Die genauen Prozentangaben können den CSS-Definitionen entnommen werden (siehe unten).

Schriftfarbe

• Als Standardschriftfarbe wird ein dunkelgrauer Farbton eingesetzt (#363534, Pantone Black 7).
• Weitere Farbangaben zu untergeordneten Elemente und zur Linkauszeichnung finden Sie in der Rubrik "Farbwelt Web"

Abstände

• Die Zeilenhöhe für Texte beträgt das 1,2-fache des Standardzeilenabstandes.
• Der untere Abstand eines Absatzes beträgt das 0,75-fache des Standardzeilenabstandes.
• Bei Überschriften beträgt der oberer Abstand das 0,25-fache und der untere Abstand das 0,75-fache des Standardzeilenabstandes.

Beispiele

HTML-Überschrift <H1>

HTML-Überschrift <H2>

HTML-Überschrift <H3>

HTML-Überschrift <H4>

HTML-Überschrift <H5>

HTML-Überschrift <H6>

HTML-Tag <p>

HTML-Tag <a>

HTML-Tag <pre>

CSS-Klasse .discreet

CSS-Definitionen

body {color: #363534; font: 69% Arial,FreeSans,sans-serif;}

h1 {font-size: 160%;}
h2 {font-size: 130%;}
h3 {font-size: 130%;}
h4 {font-size: 100%;}
h5 {font-size: 100%;}
h6 {font-size: 90%;}

h1 {font-family: "Times New Roman",FreeSerif,serif;}
h2, h3, h4, h5, h6 {font-family: Arial,FreeSans,sans-serif;}

h1, h2 {border-bottom: 1px solid #c9cac8;}

h4, h6 {font-weight: bold;}

h1, h2, h3, h4, h5 {color: #363534;}
h6 {color: #747678;}

h1, h2, h3, h4, h5, h6 {margin: 0.75em 0 0.25em;}

p {line-height: 1.2em; margin: 0 0 0.75em;}

a {color: #2a6ebb; text-decoration: none;} 
a:active {color: #6f9ad3;}
a:hover {text-decoration: underline;}
a:visited {color: #2a6ebb;}

pre {
    font-family: Monaco, "Courier New", Courier, monospace;
    padding: 1em;
    border: 1px solid #c9cac8;
    color: #363534;
    overflow: auto;
}

.discreet {color: #747678; font-size: 90%;}

Weitere Beispiele: Überschriften im Textfluss

• Beispiel 1: Überschriften im Textfluss » einblenden» ausblenden

• Beispiel 2: Aufeinanderfolgende Überschriften » einblenden» ausblenden