Unsere Typografie im Print Texthierarchien
Warum sind Texthierarchien wichtig? Worauf sollte allgemein bei digitalen Medien geachtet werden?
Farbpalette & Designelemente Typografie Print
Brandguide
Übersicht
Diese unterschiedlichen Elemente können für Gestaltungen im analogen Bereich verwendet werden.
Diese unterschiedlichen Elemente können für Gestaltungen im analogen Bereich verwendet werden.
Verhältnisse
Ausgehend von der Fließtextgröße wird das Verhältnis zu den anderen Textelementen bestimmt.
Ausgehend von der Fließtextgröße wird das Verhältnis zu den anderen Textelementen bestimmt.
1
Titel
font-size: 30
line-height: 40
letter-spacing: 30
font-weight: Demi Condensed
font-family: Franklin Gothic FS
text-transform: uppercase
proportion: copy x 3
color: white
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;2
Titel Subline
font-size: 10
line-height: 15
letter-spacing: 0
font-weight: Regular
font-family: IBM Plex Mono
text-transform: none
proportion: copy x 1
color: black
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;3
Kapitel / Einführung (Riege-Bundle)
font-size: 10
line-height: single line
letter-spacing: 0
font-weight: Regular
font-family: IBM Plex Mono
text-transform: none
proportion: copy x 1
color: black
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;4
Headline (Riege-Bundle)
font-size: 42 pt
line-height: 37 pt
letter-spacing: 0
font-weight: Book
font-family: Franklin Gothic FS
text-transform: none
proportion: copy x 4
color: olive
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;5
Subline 1 (Riege-Bundle)
font-size: 15 pt
line-height: 15 pt
letter-spacing: 75
font-weight: Medium Condensed
font-family: Franklin Gothic FS
text-transform: uppercase
proportion: copy x 1,5
color: safrany
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;6
Subline 2
font-size: 10 pt
line-height: 15 pt
letter-spacing: 50
font-weight: Medium
font-family: Franklin Gothic FS
text-transform: uppercase
proportion: copy x 1
color: gras
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;7
Copy
font-size: 10 pt
line-height: 15 pt
letter-spacing: 0
font-weight: Book
font-family: Franklin Gothic FS
text-transform: none
proportion: copy x 1
color: black
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;8
Subline 3
font-size: 10 pt
line-height: 15 pt
letter-spacing: 0
font-weight: Medium
font-family: Franklin Gothic FS
text-transform: none
proportion: copy x 1
color: black
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;9
Cite
font-size: 10 pt
line-height: 15 pt
letter-spacing: 0
font-weight: Book italic
font-family: Franklin Gothic FS
text-transform: none
proportion: copy x 1
tab: 11 mm
color: moss grey
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;10
Tabs
8 mm from the type area
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;11
Source directory
font-size: 5,5 pt
line-height: 7,5 pt
letter-spacing: 25
font-weight: Light
font-family: IBM Plex Mono
text-transform: none
proportion: copy / 1,8
color: black
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;12
Sidebar
font-size: 8 pt
line-height: single line
letter-spacing: 50
font-weight: Medium
font-family: IBM Plex Mono
text-transform: uppercase
proportion: copy / 1,25
color: pebble grey
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;13
Page number
font-size: 10 pt
line-height: single line
letter-spacing: 0
font-weight: Regular
font-family: IBM Plex Mono
text-transform: uppercase
proportion: copy x 1
color: black
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;Riege-Bundle
Eine markante typografische Darstellung ist das „Riege-Bundle“, das aus einer Einführung, einer Headline und eine Subline besteht. Diese Dreiergruppe sollte wenn möglich bei neuen Kapiteln verwendet werden, um die Wiedererkennbarkeit zu unterstützen.
Unsere Typografie im Print Schaubilder
Welche Informationen sind hier wichtig? Wann werden Schaubilder eingesetzt? Worauf muss beim Einsatz geachtet werden?
1
Headline
font-size: 6,5 pt
line-height: 7,5 pt
letter-spacing: 0
font-weight: Heavy
font-family: Franklin Gothic FS
text-transform: none
proportion: copy / 1,5
color: rose marine
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;2
Copy
font-size: 6,5 pt
line-height: 7,5 pt
letter-spacing: 0
font-weight: Book
font-family: Franklin Gothic FS
text-transform: none
proportion: copy / 1,5
color: rose marine
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;Unsere Typografie im Print Auszeichnungen
Kurzer Einführungstext?
1
Sorted list
font-size: 10 pt
line-height: 15 pt
letter-spacing: 0
font-weight: Semibold
font-family: IBM Plex Mono
text-transform: none
proportion: copy x 1
tab: 8 mm
color: safrany
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;2
Unsorted list: squares 1. level
font-size: 10 pt
line-height: 15 pt
letter-spacing: 0
font-weight: Regular
font-family: Windings
text-transform: none
proportion: copy x 1
tab: 8 mm
color: safrany
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;3
Unsorted list: squares 2. level
font-size: 8 pt
line-height: 15 pt
letter-spacing: 0
font-weight: Regular
font-family: Windings
text-transform: none
proportion: copy / 1,25
tab: 11 mm and 17 mm
color: safrany
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;4
Unsorted list: arrows
font-size: 21 pt
line-height: 15 pt
letter-spacing: 0
font-weight: Regular
font-family: IBM Plex Mono
text-transform: none
proportion: copy x 2
tab: 8 mm
color: safrany
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;5
Highlights: Eigenname und wichtige Begriffe
font-size: 10 pt
line-height: 15 pt
letter-spacing: 0
font-weight: Medium
font-family: Franklin Gothic FS
text-transform: none
proportion: copy x 1
color: black
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;6
Unsorted list: cite
font-size: 8 pt
line-height: 15 pt
letter-spacing: 0
font-weight: Regular
font-family: Windings
text-transform: none
proportion: copy / 1,25
tab: 11 mm and 17 mm
color: moss grey
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;7
Hightlights: Überbegriffe
font-size: 10 pt
line-height: 15 pt
letter-spacing: 0
font-weight: Medium
font-family: Franklin Gothic FS
text-transform: none
proportion: copy x 1
color: safrany
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;8
Links
font-size: 8 pt
line-height: 15 pt
letter-spacing: 25
font-weight: Regular
font-family: IBM Plex Mono
text-transform: none
proportion: copy / 1,25
color: safrany
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);
line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);
font-weight: 400;
font-family: "Franklin Gothic FS", Impact, sans-serif;
text-transform: none;