Inhaltsbereich Navigation Navigation Fußzeile

Typografie

Verwendung

Als Hausschriftarten des Zolls und der Bundesregierung wird die BundesSans und BundesSerif genutzt. Dies ermöglicht eine konsistente Gestaltung der Angebote des Zolls über alle Medienarten hinweg und gewährleistet einen modernen und zeitgemäßen Auftritt mit seriöser Anmutung.

Die BundesSans ist die Standard-Schriftart, die BundesSerif wird lediglich in bestimmten Inhalten wie z. B. Abschnitts-Überschriften eingesetzt, in der Regel jedoch nicht in den Komponenten.

Schrift Permalink für den Abschnitt.

Zoll 2,54BundesSans
Zoll 2,54BundesSerif

Die BundesSans gehört zu den sogenannten Humanistischen Serifenlosen und entspricht den Empfehlungen des Blinden- und Sehbehinderten-Verbandes zur Leserlichkkeit von Schrift. Auch in der DIN 1450 werden Humanistische Antiquas mit Serifen wie die BundesSerif und Groteske ohne Serifen wie die BundesSans als besonders gut leserlich bezeichnet.

  • Die BundesSans wird für sämtliche Komponenten, Fließtexte, Bildunterschriften, für funktionale Inhalte wie Beschriftungen und Eingaben in Formularen, Hinweise und Dialoge, für Navigationen und für Menüs verwendet.
  • Die BundesSerif wird sehr verhalten eingesetzt, ihre Verwendung beschränkt sich auf Überschriften zur Gruppierung größerer logischer Sinneinheiten außerhalb von Komponenten.

Auch wenn die Schrift über weitaus mehr Schnitte verfügt, so beschränken wir uns auf die Verwendung von Normalschnitt und Fett sowie deren Kursive, letztere wiederum ausschließlich zur Hervorhebung in sehr kurzen Textpassagen.

Die in der Schrift hinterlegten Mediævalziffern und Ligaturen dürfen nur in Überschriften oder Fließtexten verwendet werden, keinesfalls zur Darstellung von Daten in tabellarischen Ansichten oder ähnlichen Komponenten, wo es weniger auf die Ästhetik, sondern auf die schnelle Erfassbarkeit ankommt.

Als sehr gut ausgebaute Schriften bieten die BundesSans und die BundesSerif auch den Vorteil, dass bereits „neuere“ Glyphen wie zum Beispiel das Versal-ẞ enthalten sind.

GROẞSTADT in BundesSerif, HAUPTSTRAẞE in BundesSans.

Ersatzschriften

Zusätzliche Fallback-Schriften ergänzen die Hausschrift, falls diese aus technischen Gründen wie z. B. veralteten Browsern nicht verwendet werden kann. Ersatzschriftarten sind aufgrund der vergleichbaren Metriken:

Windows sowie MacOS / iOS
Calibri, sans-serif
Android
Roboto, sans-serif
(Darstellung abhängig von installierten Schriften)

Auf die Verwendung von gestalterisch mit der BundesSans vergleichbaren Schriften wie z. B. der Verdana als weitere Fallbacks wird bewusst verzichtet, da diese bei gleichem Schriftgrad deutlich „wuchtiger“ erscheinen und aufgrund ihrer höheren Mittellänge (x-height) eigene Grundlinienraster und Zeilenabstände benötigen würden.

Zudem gibt es mit der BundesSansWeb Schriftpakete, die für die Lesbarkeit am Bildschirm sehr gut geeignet und für die Verwendung im Web optimiert sind. Links hierzu finden Sie im Abschnitt Ressourcen.

Dicktengleiche Schriften wie die Courier sind zur Darstellung von tabellarischen Daten in Web-basierten Masken nicht erlaubt. Ausnahmen hiervon kann es in PDF-Dokumenten geben.

Font-Formate

In digitalen Anwendungen muss darauf geachtet werden, dass bildschirmoptimierte Schrift-Dateien (Webfonts) und keine DTP- oder Office-Schriftdateien eingesetzt werden.

Aufgrund der 100%igen Unterstützung moderner Webfont-Formate in den aktuellen Browsern wird auf veraltete Formate wie TrueType (TTF) verzichtet. Stattdessen wird, auch aus Performance-Gründen, woff2 an aktuelle Browser ausgeliefert.

Auf die Festlegung von älteren Webfont-Formaten für unbekannte Browser wird bewusst verzichtet, da solche Browser generell auf weniger performanten älteren Rechnern verwendet werden und dies somit nur die Darstellung der Anwendung unnötig verzögern würde; diese erhalten Systemschriften als Fallback.

Elektronische Verarbeitung von Namen und Datenaustausch in Europa

Verpflichtend für den behördlichen Datenaustausch: EU-Bürgerinnen und -Bürger haben bei der Kommunikation mit Behörden das Recht auf die korrekte Schreibung ihres Namens in ihrer Landessprache. Im Zuge der Standardisierung und Einhaltung der von der EU empfohlenen Normen DIN 91379 sowie ISO/IEC 10646 für die elektronische Verarbeitung und den Austausch von Daten müssen die in Anwendungen verwendeten Schriftarten überprüft und eventuell angepasst werden.

Viele Schriftarten sind hierfür nicht geeignet. Bei der letzten Erweiterung der Web- und Office-Versionen der BundesSans bzw. BundesSerif gemäß DIN 91379 String Latin wurden die fehlenden Zeichen ergänzt. In den Anwendungen müssen andere Schriftarten durch die BundesSans Web in der jeweils aktuellen Version ersetzt werden, Stand Oktober 2024 ist dies die Version 3.014.

Nach oben

Silbentrennung und Textumbrüche Permalink für den Abschnitt.

Durch die behördentypischen Substantivierungen und Komposita ergibt sich fast schon zwangsläufig die Notwendigkeit zur automatischen Silbentrennung, um ein harmonischeres Schriftbild zu erreichen bzw. zu stark flatternden Satz zu verhindern.

body {
  hyphens: auto;
}

caniuse.com CSS Hyphenation

Selbst mit Silbentrennung kann es aber zu unausgewogenen Darstellungen kommen, da diese lediglich die Trennungsregeln ohne Blick auf das Aussehen anwendet. Um dieses besser steuern zu können gibt es die CSS-Eigenschaft text-wrap, und hier insbesondere die Werte balance oder pretty.

Die Verwendung dieser Eigenschaft wird allen Anwendern empfohlen, die Auswahl des passenden Wertes und auf welche Elemente es angewendet wird und auf welche nicht ist aber eine vom tatsächlichen Bedarf getriebene Einzelfall-Entscheidung.

h1, h2, h3, h4, h5, h6, p, li, dt, dd, th, td {
  // balance ist performanter, pretty ergibt ein ausgewogeneres Ergebnis
  text-wrap: pretty;
}

caniuse.com CSS text-wrap

2 Screenshots der DESY-Startseite auf mobilen Breakpoints, einer mit deutlich verbesserten Zeilenumbrüchen.
Claim des Design Systems links ohne text-wrap: pretty, rechts mit.
Nach oben

Überschriften Permalink für den Abschnitt.

Überschriften und vor allem Zwischenüberschriften sind ein wichtiges Mittel zur hierarchischen Strukturierung von Inhalten. Die Hauptüberschrift der Seiten bzw. Masken steht immer zu Beginn des main-Bereichs.

Die Vergabe der Überschriften-Hierarchien richtet sich dann nach dem individuellen Bedarf auf einer Seite oder Eingabemaske; konkretere Regeln können daher im Design System nicht vorgegeben werden, diese werden in der fachlichen Konzeption festgelegt. Ein Übermaß an Überschriften nur aus Gründen der Suchmaschinenoptimierung (SEO) ist nicht zulässig.

In Formularen können Überschriften zur Strukturierung und Abgrenzung größerer logischer Einheiten eingesetzt werden. Für kleinteiligere Beschriftungen von einzelnen Formularkomponenten empfiehlt sich allerdings eher die Verwendung von Fieldset und Legend.

Einen Sonderfall stellen verlinkte Überschriften dar. Sie vereinen die strukturierende Funktion von Überschriften mit den Interaktionsmöglichkeiten von Links, was zum Beispiel in einer Menge von Teaser-Kacheln eine unmittelbare Navigation über die Struktur ermöglicht. In diesem Fall müssen diese verlinkten Überschriften per Tabulator-Taste erreichbar sein und einen deutlichen Fokus-Indikator haben.

In redaktionellen Inhalten wie zum Beispiel Hilfeseiten können Zwischenüberschriften auch mit sogenannten Permalinks versehen werden. Diese bieten den Vorteil, dass damit einzelne Abschnitte längerer Texte direkt referenzierbar werden, z. B. für Lesezeichen oder den Versand per E-Mail. Ein Beispiel hierfür finden Sie an der vorangestellten Überschrift.

Do’s and Dont’s

So:

  • Nachvollziehbare Hierarchie
    (Lücken sind zulässig)
  • Echte Überschriften-Elemente

So nicht:

  • Überschriften als Ersatz für Formularbeschriftungen wie label oder legend
  • Überschriften eine höhere Hierarchie-Ebene zuweisen als ihrem Rang in der Struktur entspricht
  • Überschriften rein optisch über die Textformatierung auszeichnen
Nach oben

Textelemente Permalink für den Abschnitt.

Alle Texte sind grundsätzlich in allen Elementen und Komponenten entsprechend der Lesegewohnheiten linksbündig ausgerichtet. Blocksatz oder zentrierte Fließtexte sind nicht vorgesehen.

Absätze

Abstände über wiederholte Zeilenschaltungen (z. B. <br>&nbsp;<br> statt …</p><p>…) sind nicht zulässig, sondern ergeben sich aus den im Style Sheet festgelegten Abständen von Text- und Inhaltselementen zueinander. Fließtexte und Listen in Fließtexten haben generell einen 1,5-fachen Zeilenabstand, Linklisten einen Zeilenabstand von 1,25.

Listen

  1. Sortierte Listen <ol> werden mit arabischen Zahlen dargestellt.
    1. Die Einrückungstiefe wurde bewusst so gewählt, dass bei sortierten Listen zweistellige Ordnungszahlen bis zu 99 dargestellt werden können.
  • Bei unsortierten Listen <ul> werden die Standard-Listenzeichen der Browser verwendet, die je nach Verschachtelungstiefe variieren (rund gefüllt, rund Outline etc.).
    • Die Einrückungstiefe richtet sich hierbei nach der Tiefe bei sortierten Listen, da diese oftmals gemischt auftreten.
Definitionslisten dl
Diese stellen eine Zuordnung von Begriffen mittels Wertepaaren dar. Sie bestehen aus einem zu definierenden Ausdruck (z. B. ein Fachbegriff = Definiendum) und dem zugehörigen Definiens, d. h. der Menge der definierenden Merkmale (auch mehrere möglich). Ausdrücke werden im Schriftschnitt Fett (700) hervorgehoben.
Definitionslisten dl
Diese stellen eine Zuordnung von Begriffen mittels Wertepaaren dar. Sie bestehen aus einem zu definierenden Ausdruck (z. B. ein Fachbegriff = Definiendum) und dem zugehörigen Definiens, d. h. der Menge der definierenden Merkmale (auch mehrere möglich). Ausdrücke werden im Schriftschnitt Fett (700) hervorgehoben.
Horizontale dl
Diese stellen auf größeren Breakpoints eine horizontale Zuordnung von Begriffen mittels Wertepaaren dar. Sie bestehen aus einem zu definierenden Ausdruck (z. B. ein Fachbegriff = Definiendum) und dem zugehörigen Definiens, d. h. der Menge der definierenden Merkmale (auch mehrere möglich). Ausdrücke werden im Schriftschnitt Fett (700) hervorgehoben.
Horizontale dl
Diese stellen auf größeren Breakpoints eine horizontale Zuordnung von Begriffen mittels Wertepaaren dar. Sie bestehen aus einem zu definierenden Ausdruck (z. B. ein Fachbegriff = Definiendum) und dem zugehörigen Definiens, d. h. der Menge der definierenden Merkmale (auch mehrere möglich). Ausdrücke werden im Schriftschnitt Fett (700) hervorgehoben.

Weitere Textauszeichnungen

Zur semantischen oder funktionalen Auszeichnung von Texten werden bestimmte Inline-Elemente verwendet. So bezeichnet das Element <em> eine einfache Hervorhebung, die kursiv dargestellt wird. <strong> bezeichnet eine starke Hervorhebung, die fett dargestellt wird. <sup> kennzeichnet hochgestellte Ziffern 1, die zum Beispiel in Kombination mit einem Link für Verweise auf Fußnoten verwendet werden. <small> wird gemäß der HTML5-Spezifikation für „Kleingedrucktes“ wie z. B. Fußnoten verwendet.

Do’s and Dont’s

So:

  • Semantisch korrekte Textauszeichnungen
  • HyperText Markup Language als solides Fundament

So nicht:

  • Zu hohe Zeilenlängen
  • Zu geringe Zeilenabstände
  • Rein visuelle Auszeichnungen
  • Absätze durch Folgen von Zeilenschaltungen <br> bilden