direkt zum Inhalt springen

direkt zum Hauptnavigationsmenü

Sie sind hier

TU Berlin

Inhalt des Dokuments

Typografie, Ikonografie

Grundlagen

Die neue Internetpräsenz der TUB soll in allen Bereichen den Anforderungen an einen barrierefreien Zugang gerecht werden. Somit wird in der Gestaltung auf den Einsatz grafischer Schriften vollständig verzichtet. Einzige Ausnahme bildet die Bild-Wortmarke der TUB.

Um sehbehinderten Menschen die Möglichkeit zu geben, die Darstellung der Schriftgröße individuell in ihrem Browser einzustellen, sollen die Schriftformate nie in absoluten Einheiten in den Attributen und Style-Eigenschaften und nicht mit dem <FONT>-Tag in HTML, sondern mit der “font”-Property in den Stylesheets angegeben werden.

Die Angabe mehrerer alternativer Schriftarten im Quelltext (zum Beispiel Verdana, Helvetica, Arial, Sans Serif) erhöht die Wahrscheinlichkeit, dass eine der angegebenen Schriften auf dem System des Nutzers verfügbar ist.

Verwendete Schriftarten

Für die gesamte Internetpräsenz der TUB, einschließlich aller Fakultäts- und Fachgebietsseiten, sowie aller verwandten Internetauftritte gelten feste Regeln, die Art und Einsatz von Typografie bestimmen. Die beiden primär verwendeten Schriftarten sind Arial und Verdana. Die Arial wird ausschließlich für Headlines eingesetzt, die Verdana für alle weiteren Textinhalte.

Schriftentabelle

Folgende Schriftentabelle bietet eine Übersicht aller verwendeten Schriften:

Schriften
Einsatzgebiet
Definition
Schriften Allgemein, wenn keine spezifischen Angaben gemacht wurden
font-size: 11px;
color: #5B4B4B;
font-family: verdana, tahoma, arial, helvetica, sans-serif;
Elemente der ersten Navigationsebene
font-size: 12px;
color: #C50E1F;
font-family: verdana, tahoma, arial, helvetica, sans-serif;
Elemente der zweiten Navigationsebene
font-size: 12px;
color: #C50E1F;
font-family: verdana, tahoma, arial, helvetica, sans-serif;
Elemente der dritten Navigationsebene
font-size: 11px;
color: #C50E1F;
font-family: verdana, tahoma, arial, helvetica, sans-serif;
Unterüberschrift im Rubrikenkopf
font-size: 16px;
color: #787678;
font-family: verdana, tahoma, arial, helvetica, sans-serif;
Überschrift im Rubrikenkopf
font-size: 22px;
color: #000000;
font-family: verdana, tahoma, arial, helvetica, sans-serif;
Überschriften H1
font-size: 25px;
color: #000000;
font-family: verdana, tahoma, arial, helvetica, sans-serif;
Überschriften Teaser H2
font-size: 16px;
color: #C50E1F; (als Link)
font-family: verdana, tahoma, arial, helvetica, sans-serif;
Überschriften Listen H2
font-size: 16px;
color: #000000;
font-family: verdana, tahoma, arial, helvetica, sans-serif;
Überschriften Teaser Fakultäten
font-size: 14px;
color: #000000;
font-family: verdana, tahoma, arial, helvetica, sans-serif;
Bereichsüberschriften H3 und Überschrift der Kalenderliste H3
font-size: 16px;
color: #000000;
font-family: verdana, tahoma, arial, helvetica, sans-serif;
Überschrift H4 Login-Box
font-size: 11px;
color: #000000;
font-family: verdana, tahoma, arial, helvetica, sans-serif;
Links
font-size: 11px;
color: #C50E1F;
font-family: verdana, tahoma, arial, helvetica, sans-serif;
Liste Anchor-Navigation
font-size: 14px;
color: #C50E1F; (Links)
font-family: verdana, tahoma, arial, helvetica, sans-serif;
Seitenintro
font-size: 12px;
color: #5B4B4B;
font-family: verdana, tahoma, arial, helvetica, sans-serif;
Bildunterschriften
font-size: 10px;
color: #7D6666;
font-family: verdana, tahoma, arial, helvetica, sans-serif;
Input-Feld der Help-Box
font-size: 11px;
color: #000000;
font-family: verdana, tahoma, arial, helvetica, sans-serif;
Label der Help-Box
font-size: 11px;
color: #000000;
font-family: verdana, tahoma, arial, helvetica, sans-serif;
Input Feld des Newsletters
font-size: 11px;
color: #000000;
font-family: verdana, tahoma, arial, helvetica, sans-serif;
Absätze
font-size: 11px;
color: #5B4B4B;
font-family: verdana, tahoma, arial, helvetica, sans-serif;
Texteingabefelder
font-size: 14px;
color: #000000;
font-family: verdana, tahoma, arial, helvetica, sans-serif;
Buttons
font-size: 10px
color: #C50E1F;
font-family: verdana, tahoma, arial, helvetica, sans-serif;
Mit <code> ausgezeichnete Elemente (hauptsächlich im Styleguide)
font-size: 11px
color: abhängig von dem Element in dem es vorkommt
font-family: monospace;

Ikonografie

Eine in Gestaltung und Verwendung durchgängige Ikonografie hilft, Interaktionsprinzipien zu verdeutlichen.

Beispiele mit Erklärungen:

  Mehr zur TU Berlin
(Interner Link auf eine weitere Seite)
Sprungmarken Link
(Lange Inhaltsseiten können, über Sprungmarken zu den Zwischenüberschriften, zugänglich gemacht werden.)
Externer Link
(Link auf eine Seite einer anderen Website, die sich in einem neuen Fenster öffnet)
Informationen für Studierende und Gäste (PDF, 271 KB)
(Link, der den Download eines Dokumentes oder Bildes startet)

(Link, der ein E-Mail-Formular bzw. eine E-Mail-Funktionalität aufruft)
Seite drucken
(Link, der das Druckmenü des Browsers startet)
Seite empfehlen
(Link, der ein Weiterempfehlen-Formular aufruft)
Profi-Suche
(Link, der die Profi-Suche aufruft)
Detail-Ansicht
(Link, der eine größere Ansicht eines Bildes öffnet. Bei aktiviertem JavaScript in einem Popup-Fenster, anderenfalls in einem neuen Fenster)
  Zurück zur Übersicht
(Link zu einer übergeordneten Ebene oder zu einer vorhergehenden Seite)
Schrift verkleinern
(Button, der die Schrift der Webseite verkleinert)
Standardschriftgröße
(Button, der die Standardschriftgröße der Webseite wieder herstellt)
Schrift vergrößern
(Button, der die Schrift der Webseite vergrößert)
English
(Link mit Icon für den Sprachwechsel)
Deutsch
(Link mit Icon für den Sprachwechsel)
Hilfsfunktionen einblenden
(Box Hilfsfunktionen einblenden)
Hilfsfunktionen minimieren
(Box Hilfsfunktionen minimieren)

nächstes Kapitel:

Zusatzinformationen / Extras

Direktzugang

Schnellnavigation zur Seite über Nummerneingabe

Diese Seite verwendet Piwik für anonymisierte Webanalysen. Mehr Informationen und Opt-Out-Möglichkeiten unter Datenschutz.

Ansprechpartner/in

Corporate Design & Online-Design: Pressestelle

Technik: tubIT