Uni-Logo
Sektionen
Sie sind hier: Startseite Web Style Guide Typografie
Artikelaktionen

Web Style Guide

Typografie

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

 

 

Benutzerspezifische Werkzeuge