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)
Ansprechpartner/in
Corporate Design & Online-Design: Pressestellee-mail query [2]
e-mail query [3]
aterial/corporate_designdesign_guidelines/online_style_
guide/design/bildsprache_bildformate/parameter/en/font6
/maxhilfe/
parameter/en/font6/maxhilfe/id/4404/?no_cache=1&ask
_mail=YrmlgAAO1O4nyei%2FrCIvxu%2F%2FJbjYH9d1lmGdl6wBtYk
u0DWd%2F3Ilwg%3D%3D&ask_name=Corporate%20Design%20&
amp;%20Online-Design%3A%20Pressestelle=
parameter/en/font6/maxhilfe/id/4404/?no_cache=1&ask
_mail=YrmlgAAPCzJxphQnWXncgZpTmw2JMzTTk%2B7xqoHEZ24RlG6
9FbE%2FMA%3D%3D&ask_name=Technik%3A%20ZE%20Campusma
nagement
Zusatzinformationen / Extras
Quick Access:
Auxiliary Functions
- Font size:
