Typografie

Die Typografie spielt eine entscheidende Rolle im Octolink-Design und trägt wesentlich zur Markenidentität bei. Um ein konsistentes und ansprechendes Erscheinungsbild zu gewährleisten, werden zwei Hauptschriften verwendet.

Fonts

Mona Sans ist die markante Primärfont von Octolink und wird für Headlines eingesetzt. Sie verleiht dem Design Charakter und sorgt für hohe Wiedererkennbarkeit.

Download Open Sans bei Google Fonts

Open Sans ist die Sekundärfont und geeignet für Fließtexte, Menüs, Beschriftungen und UI-Elemente. Sie sorgt für gute Lesbarkeit und eine klare Struktur in allen Anwendungen.

Download Mona Sans bei Github

Schriftschnitte

Ausschließlich der Schnitt Semibold wird verwendet. Dieser Schnitt verleiht den Headlines die nötige Präsenz und hebt sie deutlich hervor.

Bold: Für starke Akzente, Buttons und wichtige UI-Elemente, die besondere Aufmerksamkeit erfordern.

Semibold: Für Zwischenüberschriften, Hervorhebungen und Elemente, die sich vom regulären Text abheben sollen.

Regular: Für Fließtexte und allgemeine Textelemente, die eine neutrale und gut lesbare Darstellung erfordern.

Schriftgrößen GUIs

Bezeichnung	BP1	BP2	BP3	BP4	Einsatz
display	- vw	- vw	- vw	- vw	Eyecatcher-Schriftgröße, die die H1 ersetzt, wenn eingesetzt. Verwendet auf Hero Pages und Einstiegsseiten als dominantes, aufmerksamkeitsstarkes Element. Sollte immer der größte Text auf der Seite sein
h1	46px 56lh	41px 50lh	37px 46lh	34px 40lh	Standard-Überschriften für klare Hierarchien in Texten und Strukturen.
h2	39px 52lh	35px 44lh	31px 38lh	28px 24lh	Standard-Überschriften für klare Hierarchien in Texten und Strukturen.
h3	33px 40lh	30px 36lh	26px 34lh	23px 30lh	Standard-Überschriften für klare Hierarchien in Texten und Strukturen.
h4	24px 35lh	21px 24lh	19px 14lh	18px 24lh	Standard-Überschriften für klare Hierarchien in Texten und Strukturen.
Subtitle Big	33px 49lh	30px 42lh	26px 36lh	23px 32lh	Zur Differenzierung und Hervorhebung von Untertiteln und Zwischenüberschriften in verschiedenen Größen.
Subtitle Medium	28px 42lh	25px 36lh	22px 32lh	19px 28lh	Zur Differenzierung und Hervorhebung von Untertiteln und Zwischenüberschriften in verschiedenen Größen.
Subtitle Small	24px 36lh	21px 28lh	19px 26lh	17px 24lh	Zur Differenzierung und Hervorhebung von Untertiteln und Zwischenüberschriften in verschiedenen Größen.
Copy Long Big Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor.	18px 27lh	16px 25lh	14px 22lh	14px 22lh	Ideal für Einleitungssätze, die als prägnante Einstiegstexte fungieren.
Copy Long Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor.	14px 24lh	13px 21lh	12px 19lh	12px 19lh	Für Fließtexte, die informativ und leicht lesbar sind.
Copy Long Bold Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor.	14px 24lh	13px 21lh	12px 19lh	12px 19lh	Für Fließtexte, die informativ und leicht lesbar sind.
Copy Short Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor.	14px 19lh	13px 18lh	12px 16lh	12px 16lh	Verwendet für Menüpunkte und kurze Texte, die keinen großen Zeilenabstand benötigen.
Copy Short Bold Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor.	14px 19lh	13px 18lh	12px 16lh	12px 16lh	Verwendet für Menüpunkte und kurze Texte, die keinen großen Zeilenabstand benötigen.
Overline Bold Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor.	14px 19lh	13px 18lh	12px 16lh	12px 16lh	Platziert über Headlines oder Subtitles als thematischer Einstieg oder zur Benennung von Kapiteln.
Smallprint Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor.	12px 13lh	12px 13lh	12px 13lh	12px 13lh	Für Kleingedrucktes wie Datenschutzhinweise oder rechtliche Texte.
Smallprint Semibold Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor.	12px 13lh	12px 13lh	12px 13lh	12px 13lh	Für Kleingedrucktes wie Datenschutzhinweise oder rechtliche Texte.