Page Content
There is no English translation for this web page.
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.
| 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.
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)
Ansprechpartner: Monika Mustermann
(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)