Mit einem konsequenten Typografie-Konzept und klaren visuellen Hierarchien wird sichergestellt, dass die Elemente der Benutzeroberfläche klar und deutlich erkennbar sind und Nutzende sich gut zurechtfinden. Dafür sollten immer die definierten Textstile genutzt werden, die Größe, Schnitt und Abstände festlegen.

In der gesamten GeFa-Applikation wird die lizenzfreie Schrift Roboto in den Schriftschnitten Regular, Medium und Bold verwendet.

Nutzende haben die Möglichkeit in den Benutzerbezogenen Einstellungen von den GeFa-Standarddefinitionen für Zeilen-, Zeichen-, Wort- und Absatzabstand abzuweichen. Mit den nachfolgenden Auswahlmöglichkeiten können die Abstände so eingestellt werden, dass die WCAG-Mindestanforderungen (siehe WCAG 2.1 Understanding Docs: Text Spacing (Level AA)) erfüllt werden:

Zeilenabstand

• Standard
• Vergrößert (mind. 1,5-fache Schriftgröße)

Zeichenabstand

• Standard
• Leicht vergrößert (0,025-fache Schriftgröße)
• Vergrößert (0,05-fache Schriftgröße)
• Stark vergrößert (0,08-fache Schriftgröße)
• Extra stark vergrößert (0,12-fache Schriftgröße)

Wortabstand

• Standard
• Leicht vergrößert (0,03-fache Schriftgröße)
• Vergrößert (0,06-fache Schriftgröße)
• Stark vergrößert (0,09-fache Schriftgröße)
• Extra stark vergrößert (0,16-fache Schriftgröße)

Absatzabstand (Abstand zwischen Textabsätzen)

• Standard (0,875-fache Schriftgröße)
• Vergrößert (2-fache Schriftgröße)

Standardmäßig sind alle Fließtexte, Einheiten, Werte, sowie Texte in Listen, Tabellen und Eingabefeldern linksbündig ausgerichtet und im Flattersatz gesetzt. Werte, welche mit Semikolon getrennt werden, sind auch linksbündig ausgerichtet.

Inhalte mit numerischen Werten in Tabellen/Listen werden rechts und an Kommastellen ausgerichtet. Numerische Werte sind Werte, mit denen statistische und arithmetische Berechnungen möglich sind. Alle anderen, aus Ziffern zusammengesetzte Werte, wie z.B. Zeitstempel (bestehend aus Datum und Uhrzeit), Raumnummern, durch Semikolon getrennnte Werte o.ä., sind linksbündig ausgerichtet.

In Seitentiteln, Buttonbeschriftungen sowie Inhalten von Ausklapplisten aller Typen (Pop-Up-Menüs, Selects, Comboboxen etc.) sollte der erste Buchstabe jedes Eintrags immer groß geschrieben werden.

Sobald Texte nicht mehr einzeilig im vorgesehenen Bereich darstellbar sind, brechen sie in der Regel um. (In Ausnahmen wird mit “...” abgekürzt. Dies ist, falls vorgesehen, am jeweiligen Element definiert, beipsielsweise bei Headerleiste, in einzeiligen Eingabefeldern oder der Pfadnavigation.)  
Im Regelfall finden Umbrüche nach dem ganzen Wort statt, also dort, wo Leerzeichen im Text vorkommen (keine Silbentrennung).

Enthalten Texte jedoch besonders lange Wörter, so muss ein Buchstabenumbruch (Umbruch unabhängig von Leerzeichen auch mitten im Wort) stattfinden. So wird sichergestellt, dass Wörter nicht abgeschnitten oder von anderen Elementen überlagert sind bzw. aus dem sichtbaren Bereich hinauslaufen und dann nicht mehr lesbar sind. Der Buchstabenumbruch findet allerdings nur bei den Wörtern statt, die über die darstellbare Breite hinausgehen. Bei allen anderen Wörtern wird weiterhin nur nach dem Wort umgebrochen (siehe Beispiele unten).

Beispiele für lange Wörter im Justizkontext:

• Anschlussrechtsbeschwerdegegner/in (34 Z.)
• Unternehmensvertragsbeteiligte/r (32 Z.)
• Kassenanordnungsbearbeitungsstand (33 Z.)

Technische Machbarkeit zu prüfen:  
Umbrüche im Wort sollten möglichst immer nach Sprechsilben erfolgen, um die Verständlichkeit der Wörter weiterhin zu unterstützen. (Siehe auch: Duden Definition).

Bei der Darstellung von Einheiten ist darauf zu achten, dass diese von Screenreadern richtig ausgegeben werden. 

Sonderzeichen, die keine Satzzeichen sind, werden in der Regel richtig ausgegeben. Satzzeichen hingegen werden meist nicht mit ausgelesen, da diese in Fließtexten den Lesefluss stören würden.

Hinweis: Dies hängt auch von den individuellen Einstellungen der Screenreadernutzenden ab, so dass keine allgemein gültige Aussage getroffen werden kann.

Abkürzungen wie Beispielsweise “min” für Minuten oder “EUR” für Euro sind wenn möglich zu vermeiden, da diese ggf. nicht korrekt und verständlich ausgegeben werden.

In Eingabefeldern ist die Einheit jeweils nach dem Feldlabel zu nennen. Beispiele: 

• Stundensatz in €
• Arbeitskraftanteile in %

(siehe Eingabefeld: Verhalten eines einzeiligen Eingabefeldes mit Einheit).

Einheiten mit numerischem Wert werden in Tabellen immer rechtsbündig und an den Kommastellen ausgerichtet. Werte gelten immer dann als numerisch, wenn statische oder arithmetische Berechnungen damit möglich sind. Werden Werte jedoch aufgezählt und mit einem Semikolon getrennt, so werden diese linksbündig ausgerichtet.

Anführungszeichen werden verwendet, um auf der Oberfläche Systemtexte von Variablen unterscheidbar zu machen. Dabei werden immer doppelte statt einfache Anführungszeichen verwendet. Es wird die deutsche Schreibweise angewendet (unten zu Beginn, oben am Ende). 

Beispiele: 

• Modaldialog-Titel bei Sicherheitsabfragen:
• • „[Bezeichnung Verteilung]” entfernen?
• Filtercontainer-Überschrift:
• • Filter „Fachbereich”
• Formulartitel:
• • Kommunikationsart „Sonstige”
• Seitentitel: 
• • Zugriffsberechtigungen „Almendrales, Enrico”
• Spliview-Titel: 
• • Besetzung „Fachbereich Zivilsachen”

Werden mehrere Einzelwerte z. B. in einem Auswahlfeld oder einer Tabellenzeile gelistet, so sind die Einzelwerte mit Semikolon voneinander zu trennen.
(Details siehe auch “Mehrzeiliges Eingabefeld” oder Tabelle: Zellen mit mehreren Attributen)

Wertbereiche in Texten oder Labeln werden in folgendem Format dargestellt:

“[Von-Wert] – [Bis-Wert]”.

Falls die Werte zusätzlich eine Einheit besitzen, wird diese im Regelfall sowohl an den Von- als auch den Bis-Wert angehängt.

Beispiel:

• 15:00 Uhr – 15:30 Uhr
• 01.01.2024 – 31.12.2024
• 15 % – 50 %
• 1,00 – 5,00

Bei sehr langer Einheit (ab 4 Zeichen) ist es auch zulässig, die Einheit nur beim zweiten Wert zu nennen.

Beispiel:

• Kinder 7 – 16 Jahre

Die Erfassung von Von-Bis-Werten findet via Wertebereichsfelder statt.

Bei Währungen sollten die entsprechenden Sonderzeichen verwendet werden. 

Beispiele für die Währungen Euro, Dollar und Türkische Lire:

• Gut funktioniert: €, $, ₺
• Zu vermeiden: EUR; USD; TRY
• In Fließtexten kann auch die ausgeschriebene Form verwendet werden.

Geldbeträge werden standardmäßig im Format 1.000,00 angezeigt mit zwei Nachkommastellen. 
Abweichende Anzahl von Nachkommastellen ist möglich und sollte in diesem Fall in Userstories erwähnt werden.

Mögliche Umformatierungen in dieses Format werden nicht während der Nutzereingabe, sondern erst nach Verlassen des Feldes durchgeführt. (siehe Eingabefeld: Verhalten eines einzeiligen Eingabefeldes mit Einheit)

IBANs werden einheitlich in folgendem Format mit Leerzeichen nach jeder vierten Stelle angezeigt: DE12 3456 7890 1234 56

Mögliche Umformatierungen in dieses Format werden nicht während der Nutzereingabe, sondern erst nach Verlassen eines IBAN-Eingabefeldes durchgeführt (siehe Eingabefeld: Verhalten bei Eingabe einer IBAN).

Ein Datum wird einheitlich im Format TT.MM.JJJJ dargestellt. 

Falls die Angabe von genauem Tag oder Tag/Monat fachlich nicht relevant ist, sind auch folgende Formate zugelassen:

• MM.JJJJ 
• JJJJ

Falls unterschiedliche Formate (z. B. mit/ohne Tag) in einer Tabelle/Liste gemischt angezeigt werden, sind die Daten rechtsbündig auszurichten.

Bei Eingabe eines Datums in einem Datumseingabefeld sind auch andere Formate und die Eingabe über Formeln möglich. Nach Verlassen des Feldes wird immer die Umformatierung in oben genanntes Format durchgeführt.  
(Zu erlaubten Eingabeformaten und möglicher Formeleingabe siehe Eingabefeld, Datum)

Zeitangaben wie Stunden, Minuten oder Sekunden sollten ausgeschrieben werden. 

Zu vermeiden sind folgende abgekürzte Formen: sek; min; h

Uhrzeiten sind in folgendem Format zu schreiben: HH:MM Uhr.  
Beispiele: 09:30 Uhr oder 12:59 Uhr

Zeit Von - bis Angaben sind in folgendem Format zu machen HH:MM Uhr – HH:MM Uhr. 
Beispiel: 09:00 Uhr – 12:45 Uhr

Wenn der Platz ausreicht, sollten die Wochentage ausgeschrieben werden. 

Bei Platzmangel können folgende Abkürzungen verwendet werden: Mo; Di; Mi; Do; Fr; Sa; So. 

Die Wochentage innerhalb eines Inhaltsabschnitts müssen einheitlich dargestellt werden (entweder alle abgekürzt oder alle ausgeschrieben).

Namen sind einheitlich folgendermaßen darzustellen:  
“<Nachname>, <Titel> <Vorname> <Namensvorsatz>”

Der Titel wird in der Regel über ein optionales Freitextfeld erfasst, so dass keine Kurz-/Langschreibweisen vorliegen. Nutzende können sowohl “Prof.” als auch “Professor” eingeben und die gewählte Schreibweise wird 1 zu 1 übernommen. 

Beispiele: 

• Yilmaz, Karim
• Müller-Lüdenscheid, Henrik Paul
• Reis, Doktor Renata 
• Schmidt, Prof. Maria

Um den Schutz personenbezogener Daten zu gewährleisten, müssen Namen von Beteiligten im Browsertitel mit Initialen abgekürzt werden. Die Abkürzung setzt sich aus der abgekürzten Personenart und den Initialen des ersten Nach- und des ersten Vornamens zusammen. Titel, Namensvor- und Namenszusätze werden in der Abkürzung nicht berücksichtigt. Zwischen der abgekürzten Personenart und des Namens befindet sich ein Leerzeichen. 

Natürliche Person wird mit NP abgekürzt. 

Beispiele: 

• Yilmaz, Karim -> NP YM 
• Müller-Lüdenscheidt, Henrik Paul -> NP MH 
• Schmidt, Prof. Maria -> NP SM 
• Graf von Hinckelstein, Dr. Theo -> NP HT 

Namen von juristischen Personen werden ebenfalls im Browsertitel abgekürzt. Die Abkürzung setzt sich aus der abgekürzten Personenart und des ersten Buchstabens der Bezeichnung zusammen. Zwischen der abgekürzten Personenart und der Bezeichnung befindet sich ein Leerzeichen. 

Juristische Person wird mit JP abgekürzt.
Rechtsanwalt/Kanzlei wird mit RA/K abgekürzt. 

Beispiele: 

• Erdmann Betonstein GmbH -> JP E 
• Freshfields Bruckhaus Deringer Rechtsanwälte Steuerberater PartGmB -> RA/K F 
• Freie und Hansestadt Hamburg, vertreten durch die Behörde für.. -> JP F 
• HUK-Coburg Haftpflicht-Unterstützungs-Kasse... -> JP H 

Bei Personen mit dem Status Auskunftssperre, wird nur das Wort “Person” im Browsertitel verwendet.

Bei Telefonnummern (sowohl Festnetz, als auch Mobiltelefon) werden keinerlei Umformatierungen vorgenommen. Zu nutzen ist ein normales einzeiliges Eingabefeld und es wird auch bei Verlassen des Feldes die von Nutzern eingegebene Formatierung beibehalten (z. B. Leerzeichensetzung oder Vorwahlen mit +49).

Anschriften sind einheitlich folgendermaßen darzustellen:  
"<Land> , <PLZ> <Ort>, <Straße> <Hausnummer>”

Zu definieren: Anschriften im Ausland.

Bei URLs werden keinerlei Umformatierungen vorgenommen. Zu nutzen ist ein normales einzeiliges Eingabefeld und es wird auch bei Verlassen des Feldes die von Nutzern eingegebene Formatierung beibehalten. 

Bei E-Mail Adressen werden keinerlei Umformatierungen vorgenommen. Zu nutzen ist ein normales einzeiliges Eingabefeld und es wird auch bei Verlassen des Feldes die von Nutzern eingegebene Formatierung beibehalten. 

Beispiele:

• mailto:fabio@email.com
• fabio@mail.de

Die Regeln gelten für den Einsatz von Schrägstrichen, wenn diese für ein “oder” stehen.

Fall 1: Steht nur jeweils ein Wort vor und nach dem Schrägstrich, werden keine Leerzeichen gesetzt:

• Bundesland/Bundesstaat 
• Amts-/Dienstbezeichnung 

Fall 2: Stehen vor oder nach dem Schrägstrich mehrere Wörter und sind diese als Sinneinheit zu verstehen, so wird auf jeder Seite ein Leerzeichen gesetzt:

• Name, Vorname / Bezeichnung
• SWIFT-Adresse / BIC

Zeitstempel mit Datum und Uhrzeit werden standardmäßig in diesem Format dargestellt: 
“TT.MM.JJJJ, SS:MM Uhr” 
Liegt der darzustellende Zeitpunkt jedoch weniger als 2 Tage zurück so werden stattdessen folgende Schreibweisen verwendet: 

Zeitangaben bis zu einer Stunde werden im Format “Vor [x] Minute(n)” angegeben. 

Beispiele:

• “Vor 0 Minuten” (bis 59 Sekunden)
• “Vor 1 Minute” (60-119 Sekunden)
• “Vor 2 Minuten” 
• “Vor 30 Minuten”
• “Vor 59 Minuten”

Bei Zeitstempeln, die über 60 Minuten in der Vergangenheit liegen, aber noch das aktuelle Tagesdatum tragen, werden im Format “Heute, SS:MM Uhr” angegeben. 

Beispiele:

• “Heute, 06:15 Uhr”
• “Heute, 15:21 Uhr”

Bei Zeitstempeln, die das gestrige Tagesdatum tragen, werden im Format “Gestern, SS:MM Uhr” angegeben. 

Beispiele:

• “Gestern, 11:29 Uhr”
• “Gestern, 16:04 Uhr”

Alle Zeitstempeln, die nicht das aktuelle oder gestrige Tagesdatum tragen, sondern weiter in der Vergangenheit liegen werden im Format “TT.MM.JJJJ, SS:MM Uhr” angegeben.

Beispiele:

• “15.03.2022, 12:02 Uhr”
• “09.11.2020, 09:24 Uhr”

Wenn es fachlich sinnvoll ist, auch den Wochentag anzugeben, kann dieser in ausgeschriebener oder ab

gekürzter Form vor dem Zeitstempel angegeben werden. Format: "Tag, TT.MM.JJJJ". Beispiele:

• “Montag, 13.03.2022”
• "Mo, 13.03.2022"

In allen Fällen, wo nicht das Standardformat “TT.MM.JJJJ, SS:MM Uhr” verwendet wird, erhält das Datum einen Tooltip, welcher diese Schreibweise anzeigt. Dieser ist über Mousehover erreichbar. Von Screenreadern wird der Tooltip nicht mit ausgegeben. 
(Details zu Verhalten und Bedienung siehe Tooltip)

Zeitstempel werden nur beim Neu-Laden der Seite aktualisiert. Eine Live-Änderung der Werte (beispielsweise von “Vor 1 Minute” auf “Vor 2 Minuten”) findet nicht statt. 

Offener Punkt: Möglich wäre es, sich diese relative statt absolute Zeitangaben über die Nutzereinstellungen an- bzw. auszuschalten.

Für sortierte Wertelisten wie bspw. die Inhalte von Tabellen, Listen oder Baumstrukturen oder die Inhalte von Ausklapplisten an Auswahlfeldern gelten folgende Standardsortierregeln (abweichendes Verhalten muss in User Stories definiert werden):

• Einträge ohne Zeitangaben werden alphanumerisch aufsteigend nach ISO 14651 /UCA case-insensitive sortiert. (mehr Informationen siehe Wikipedia Artikel: Unicode Collation Algorithm)
• Einträge mit Zeitangaben werden chronologisch absteigend sortiert (neue Einträge zuerst).
• Als sekundäres Sortierkriterium wird standardmäßig die verknüpfte Datenbank-ID in absteigender Sortierung verwendet, welche immer eindeutig ist (damit ist sekundär in der Regel nach dem Anlagezeitpunkt des Objekts sortiert: neuestes zuerst). Dieses sekundäre Sortierkriterium kommt nur dann zum Tragen, wenn zwei Objekte, für das Attribut nach dem sortiert wird, den gleichen Wert besitzen. In User Stories kann auch ein anderes zweites oder drittes Sortierkriterium definiert werden, die Datenbank-ID wird dann als letztes Sortierkriterium verwendet.

Bei Elementen mit Primär- und Sekundärinformation (z. B. in Ausklapplisten von Auswahlfeldern oder bei Listen bzw. Baumstrukturen) wird standardmäßig nach der primären Information sortiert.