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.
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. |