Navigation und Service

Schriften für Mobile Anwendung

Für die Online-Medien der Bundesregierung wurden weboptimierte Varianten beider Schriften entwickelt (siehe Basiselemente/Schriften). Diese werden von vielen Browsern in neueren Versionen unterstützt. Die BundesSerif Web und die BundesSans Web stehen jeweils in folgenden Schriftschnitten zur Verfügung:

  • Regular

  • Bold

  • Bold Italic

  • Italic

Die BundesSerif Web wird vor allem für Überschriften eingesetzt. Die BundesSans Web wird insbesondere für Fließtext und Bildunterschriften sowie als Tabellenschrift verwendet.

schriften_Serif_Sans


Ersatzschriften

Stand Juni 2018: Um die Ladezeiten bei der mobilen Nutzung kurz zu halten, können mobile Seiten auf die Systemschriften der jeweiligen Endgeräte zugreifen. Das Laden eigener Fonts wird nicht von allen Browsern unterstützt.
Für Browser, die die Anzeige von Webfonts nicht unterstützen, müssen folgende Ersatzschriften angegeben werden:

entspricht BundesSerif entspricht BundesSans
Die Abbildung zeigt die Schrift CambriaDie Abbildung zeigt die Schrift Calibri
Die Abbildung zeigt die Schrift GeorgiaDie Abbildung zeigt die Schrift Verdana

Schriftgrößen

Artikel
Element
Schriftschnitt
Schriftgröße
Schriftfarbe
H1
Georgia
24 px
#435050
H2
Georgia
18 px
#435050
H3
Georgia
17 px
#890D48
Datum
Arial Regular
12 px
#435050
Dachzeile
Arial Regular Versalien
11 px
#890D48
Abstract
Arial Bold
15 px
#435050
Fließtext
Arial Regular
15 px
#435050
Links
Arial Regular
15 px
#890D48
Bildunterschrift
Arial Regular
15 px
#435050
Quellenangabe
Arial Regular
12 px
#435050
Übersichtsseiten
Element
Schriftschnitt
Schriftgröße
Schriftfarbe
H1
Georgia
20 px
#ffffff
H2
Georgia
20 px
#ffffff
H3
Georgia
17 px
#435050
Bühne
Element
Schriftschnitt
Schriftgröße
Dachzeile
Arial Regular Versalien
14 px
#ffffff
Teasertext
Georgia
18 px
#ffffff
Bild-/Text - Teaser
Element
Schriftschnitt
Schriftgröße
Schriftfarbe
Dachzeile
Arial Regular Versalien
12 px
#890D48
Teasertext
Georgia
17 px
#435050
Buttonbeschriftung
Arial Regular Versalien
14 px
#ffffff
Beschriftung Karussell, groß
Arial Regular Versalien
15 px
#004E7F
Beschriftung Karussell, klein
Georgia
15 px
#435050
Navigation
Element
Schriftschnitt
Schriftgröße
Schriftfarbe
Ebene 1
Georgia
14 px
#333333
Ebene 1 aktiv
Georgia
14 px
#004F7F
Ebene 2
Arial Regular
13 px
#333333
Ebene 2 aktiv
Arial Regular
13 px
#004F7F
Ebene 3 Headline
Georgia
20 px
#ffffff
Ebene 3 Menüpunkt
Arial Regular
15 px
#ffffff
Footer
Element
Schriftschnitt
Schriftgröße
Schriftfarbe
Meta-Navigation
Arial Regular Versalien
13 px
#ffffff
Sprachauswahl
Arial Regular
14 px
#004D7F
Sprache
Arial Bold
14 px
#004D7F
Link
Arial Regular
13 px
#ffffff
Serviceleiste
Element
Schriftschnitt
Schriftgröße
Schriftfarbe
Iconbeschriftung
Arial Regular Versalien
13 px
#004D7F
Sitemap
Element
Schriftschnitt
Schriftgröße
Schriftfarbe
Rubrik
Georgia
20 px
 
Headline
Georgia
28 px
 
Ebene 1
Georgia
18 px
 
Ebene 2
Georgia
18 px
 

Unter den oben genannten Voraussetzungen gelten folgende Einsatzmöglichkeiten für BundesSans und BundesSerif:

Artikel
Element
Schriftschnitt
Schriftgröße
Schriftfarbe
H1
BundesSerif Web24 px
#435050
H2
BundesSerif Web18 px
#435050
H3
BundesSerif Web17 px
#890D48
Datum
BundesSans Web Regular
12 px
#435050
Dachzeile
BundesSans Web Regular Versalien
11 px
#890D48
Abstract
BundesSans Web Bold
15 px
#435050
Fließtext
BundesSans Web Regular
15 px
#435050
Links
BundesSans Web Regular
15 px
#890D48
Bildunterschrift
BundesSans Web Regular
15 px
#435050
Quellenangabe
BundesSans Web Regular
12 px
#435050
Übersichtsseiten
Element
Schriftschnitt
Schriftgröße
Schriftfarbe
H1
BundesSerif Web20 px
#ffffff
H2
BundesSerif Web20 px
#ffffff
H3
BundesSerif Web17 px
#435050
Bühne
Element
Schriftschnitt
Schriftgröße
Dachzeile
BundesSans Web Regular Versalien
14 px
#ffffff
Teasertext
BundesSerif Web18 px
#ffffff
Bild-/Text - Teaser
Element
Schriftschnitt
Schriftgröße
Schriftfarbe
Dachzeile
BundesSans Web Regular Versalien
12 px
#890D48
Teasertext
BundesSerif Web17 px
#435050
Buttonbeschriftung
BundesSans Web Regular Versalien
14 px
#ffffff
Beschriftung Karussell, groß
BundesSans Web Regular Versalien
15 px
#004E7F
Beschriftung Karussell, klein
BundesSerif Web15 px
#435050
Navigation
Element
Schriftschnitt
Schriftgröße
Schriftfarbe
Ebene 1
BundesSerif Web14 px
#333333
Ebene 1 aktiv
BundesSerif Web14 px
#004F7F
Ebene 2
BundesSans Web Regular
13 px
#333333
Ebene 2 aktiv
BundesSans Web Regular
13 px
#004F7F
Ebene 3 Headline
BundesSerif Web20 px
#ffffff
Ebene 3 Menüpunkt
BundesSans Web Regular
15 px
#ffffff
Footer
Element
Schriftschnitt
Schriftgröße
Schriftfarbe
Meta-Navigation
BundesSans Web Regular Versalien
13 px
#ffffff
Sprachauswahl
BundesSans Web Regular
14 px
#004D7F
Sprache
BundesSans Web Bold
14 px
#004D7F
Link
BundesSans Web Regular
13 px
#ffffff
Serviceleiste
Element
Schriftschnitt
Schriftgröße
Schriftfarbe
Iconbeschriftung
BundesSans Web
Regular Versalien
13 px
#004D7F
Sitemap
Element
Schriftschnitt
Schriftgröße
Schriftfarbe
Rubrik
BundesSerif Web20 px
 
Headline
BundesSerif Web28 px
 
Ebene 1
BundesSerif Web18 px
 
Ebene 2
BundesSerif Web18 px