Farbe und Typografie bestimmen und einsetzen

Du verstehst, wie Farben entstehen und warum ein Blau auf dem Bildschirm (RGB) anders aussieht als im Druck (CMYK). Du nutzt Farbkontraste und Farbwirkung gezielt, legst Farbpaletten mit Hex-, RGB-, CMYK- und Pantone-Werten an und prüfst Kontraste auf Barrierefreiheit. In der Typografie kennst du Schriftklassen, wählst Schriften passend zu Inhalt und Zielgruppe und setzt Text mit korrektem Schriftgrad, Zeilenabstand und Zeilenlänge. Am Ende kannst du für ein Produkt eine Farb- und Schriftwelt festlegen und begründen.

Das sind die Fähigkeiten, die am Ende des Moduls sitzen sollten. Jedes Ziel mit einem Beispiel aus dem Lehrbetrieb.

1. 1

   Farbmodelle und Farbräume für Bildschirm und Druck richtig anwenden

   Kompetenz A

   Du weisst, dass Bildschirme additiv mit Licht (RGB) und Druckmaschinen subtraktiv mit Farbe (CMYK) arbeiten. Du wählst den passenden Farbraum und kennst die Grenzen: Leuchtende RGB-Farben lassen sich nicht immer drucken.

   Situation

   Ein Startup hat sein Logo in einem knalligen Neongrün (#39FF14) nur für das Web definiert. Jetzt sollen Visitenkarten und ein Messestand gedruckt werden.

   Deine Aufgabe

   Erkläre das Problem und schlage eine Lösung für den Druck vor.

   Gutes Ergebnis

   Das Neongrün liegt ausserhalb des CMYK-Farbraums und würde im Offsetdruck stumpf erscheinen. Vorschlag: CMYK-Annäherung C 55 M 0 Y 100 K 0 für Standarddrucke und ein Pantone-Sonderfarbton (z.B. Pantone 802 C) für Visitenkarten und den Stand. Alle Werte werden in einem Farbblatt dokumentiert.

   RGB (additiv)CMYK (subtraktiv)Hex-CodeFarbraum / GamutSonderfarbe (Pantone, HKS)Farbprofil (sRGB, PSO Coated v3)
2. 2

   Farbwirkung und Farbkontraste gezielt einsetzen

   Kompetenz B

   Du kennst die Wirkung von Farben und ihre kulturelle Bedeutung und setzt Kontraste wie Hell-Dunkel, Kalt-Warm, Komplementär- oder Qualitätskontrast gezielt ein, um Aufmerksamkeit zu lenken.

   Situation

   Ein Bio-Hofladen möchte ein Plakat für den Spargelverkauf. Der erste Entwurf in Grün auf Grün geht auf der Strasse unter.

   Deine Aufgabe

   Überarbeite die Farbgebung mit einem gezielten Kontrast.

   Gutes Ergebnis

   Hintergrund in gedämpftem Salbeigrün, der Spargel und das Wort 'Frisch' in warmem Orange als Komplementärkontrast. Der Preis in Dunkelgrün mit starkem Hell-Dunkel-Kontrast. Das Plakat wirkt natürlich, der Blick fällt aber zuerst auf Produkt und Preis.

   Farbkreis nach IttenKomplementärkontrastHell-Dunkel-KontrastKalt-Warm-KontrastQualitätskontrastFarbassoziation
3. 3

   Eine Farbpalette für ein Corporate Design erstellen und dokumentieren

   Kompetenz C

   Du entwickelst eine Palette mit Primär-, Sekundär- und Akzentfarben sowie Neutraltönen. Jede Farbe dokumentierst du mit allen Werten und prüfst Text-Kontraste nach WCAG.

   Situation

   Eine Physiotherapiepraxis in Winterthur möchte für Website und Drucksachen eine einheitliche Farbwelt, die ruhig, vertrauensvoll und modern wirkt.

   Deine Aufgabe

   Erstelle eine Palette mit fünf Farben und dokumentiere sie.

   Gutes Ergebnis

   Primär Petrol (#1F6F78), Sekundär Sand (#E8DCC8), Akzent Koralle (#E86F51), Dunkel (#1E2A2E) für Text, Hell (#F7F5F1) für Flächen. Jede Farbe mit Hex, RGB, CMYK und nächstem Pantone-Wert. Kontrastprüfung: Dunkel auf Hell ca. 13.5:1, Weiss auf Petrol ca. 5.8:1, beide erfüllen WCAG AA für Fliesstext (mind. 4.5:1).

   Primär- / Sekundär- / AkzentfarbeNeutraltöne60-30-10-RegelWCAG-Kontrast 4.5:1Farbblatt / Styleguide
4. 4

   Schriften nach Klassifikation, Zweck und Wirkung auswählen

   Kompetenz D

   Du unterscheidest Schriftklassen wie Antiqua, Grotesk, Serifenbetonte und Schreibschriften und kennst ihre Wirkung. Du kombinierst höchstens zwei Schriftfamilien und prüfst Lizenz, Schriftschnitte und Sprachunterstützung.

   Situation

   Ein traditionsreicher Weinbaubetrieb im Lavaux möchte eine neue Weinkarte und Website, die edel, aber nicht altmodisch wirken.

   Deine Aufgabe

   Wähle eine Schriftkombination und begründe sie.

   Gutes Ergebnis

   Titel in einer klassizistischen Antiqua (z.B. Playfair Display) für Eleganz, Fliesstext und Preise in einer humanistischen Grotesk (z.B. Source Sans 3) für gute Lesbarkeit auf Papier und Bildschirm. Beide sind unter der Open Font License frei nutzbar, unterstützen Französisch mit allen Akzenten und haben genug Schnitte (Regular, Italic, Semibold, Bold).

   SchriftklassifikationAntiqua / Grotesk / EgyptienneSchriftfamilie / SchriftschnittSchriftmischungSchriftlizenz
5. 5

   Text gut lesbar setzen: Schriftgrad, Zeilenabstand, Zeilenlänge

   Kompetenz E

   Du wählst Schriftgrad, Zeilenabstand, Zeilenlänge, Laufweite und Satzart passend zum Medium. Du kennst typische Werte für Print und Bildschirm und erkennst, warum ein Text schwer lesbar ist.

   Situation

   Die Gemeindeverwaltung beklagt, dass ihr Informationsblatt im A4-Format kaum gelesen wird. Der Text ist in 9 pt über die volle Breite von 18 cm im Blocksatz gesetzt.

   Deine Aufgabe

   Analysiere die Probleme und setze den Text neu.

   Gutes Ergebnis

   Probleme: Zeilen mit über 110 Zeichen, zu kleiner Schriftgrad für ältere Leserinnen, Löcher im Blocksatz. Neu: zwei Spalten, 11 pt auf 15 pt Zeilenabstand, ca. 60 Zeichen pro Zeile, linksbündiger Flattersatz mit Silbentrennung, Zwischentitel in 14 pt Semibold.

   Schriftgrad (pt)Zeilenabstand und DurchschussZeilenlänge (45 bis 75 Zeichen)Satzart (Flattersatz, Blocksatz)Laufweite / KerningHierarchie
6. 6

   Mikrotypografische Regeln für die Schweiz korrekt anwenden

   Kompetenz F

   Du setzt Anführungszeichen, Apostrophe, Striche, Leerzeichen und Zahlen nach Schweizer Gepflogenheit. Diese Details machen den Unterschied zwischen einem laienhaften und einem professionellen Text.

   Situation

   In einer Broschüre stehen Zeilen wie "Preis: CHF 1'250.-", "Öffnungszeiten 8-17 Uhr" und gerade Anführungszeichen.

   Deine Aufgabe

   Korrigiere die Mikrotypografie nach Schweizer Regeln.

   Gutes Ergebnis

   Schweizer Anführungszeichen « » statt gerader Zeichen, Zahlen mit typografischem Apostroph oder schmalem Leerzeichen als Tausendertrennzeichen (CHF 1’250.00), Streckenangaben und Zeiträume mit Halbgeviertstrich statt Bindestrich, geschütztes Leerzeichen zwischen CHF und Betrag, damit es nicht umbricht.

   Guillemets « »typografischer ApostrophHalbgeviertstrich / Bindestrichgeschütztes LeerzeichenLigaturenVersalien / Kapitälchen

Die Kompetenzmatrix zerlegt das Modul in Themenstränge und drei Stufen. Für den Kompetenznachweis solltest du überall mindestens Stufe 2 erreichen. Dein Stand bleibt in diesem Browser gespeichert und färbt Lernweg und Übungen ein.

Amélie ist im 1. Lehrjahr als Mediamatikerin bei der Werbeagentur Fürst & Partner in Schaffhausen mit 12 Mitarbeitenden. Die neue Boulderhalle Munot eröffnet im Herbst und hat bisher nur ein Logo in leuchtendem Pink, das jemand für Instagram gestaltet hat. Amélie soll mit ihrer Berufsbildnerin eine Farb- und Schriftwelt für Website, Flyer, Kursprogramm und Beschriftung festlegen.

1. Kapitel 1

   Pink, das sich nicht drucken lässt

   Das Logo ist nur als #FF2D95 definiert. Als Amélie die Farbe in Illustrator nach CMYK umwandelt, wird sie deutlich stumpfer, und Photoshop zeigt die Farbumfang-Warnung an. Sie erklärt der Hallenleitung, warum leuchtendes Bildschirm-Pink im Vierfarbdruck nicht erreichbar ist. Für Visitenkarten und Schilder schlägt sie eine Pantone-Sonderfarbe vor, für den günstigen Flyer im Digitaldruck einen möglichst nahen CMYK-Aufbau.

   Ziel 1

2. Kapitel 2

   Grau auf Grau an der Kletterwand

   Der erste Plakatentwurf der Halle zeigt dunkelgrauen Text auf mittelgrauem Beton mit einem kleinen pinken Logo. Amélie hängt einen Ausdruck an die Wand und schaut aus fünf Metern: Nichts springt ins Auge. Sie testet drei Varianten und entscheidet sich für ein dunkles Petrol als Grundfläche, auf dem Pink als Komplementär- und Hell-Dunkel-Kontrast leuchtet. Die Hallenleitung findet, das Plakat wirke endlich nach Bewegung und Energie.

   Ziel 2

3. Kapitel 3

   Fünf Farben mit allen Werten

   Amélie baut eine Palette aus Pink als Primärfarbe, Petrol als Sekundärfarbe, Gelb als Akzent für Kursangebote und zwei Grautönen. Jede Farbe dokumentiert sie mit Hex, RGB, CMYK und Pantone. Im WebAIM Contrast Checker fällt weisser Text auf Pink mit rund 3.5:1 für normale Schriftgrössen durch. Sie ergänzt deshalb ein dunkleres Pink für Buttons und Links, das 4.6:1 erreicht, und hält die Regel im Styleguide fest.

   Ziel 3

4. Kapitel 4

   Graffiti oder Grotesk?

   Der Hallenleiter möchte überall eine Graffiti-Schrift, die er im Internet gefunden hat. Amélie setzt damit einen Titel und einen Absatz Kursbeschreibung: Der Titel wirkt stark, der Absatz ist kaum lesbar. Zudem erlaubt die Lizenz der Schrift keine kommerzielle Nutzung. Sie schlägt eine kräftige, lizenzierte Display-Schrift für Titel und eine gut lesbare Grotesk mit vielen Schnitten für alle Texte vor und zeigt beides am Beispiel des Kursprogramms.

   Ziel 4

5. Kapitel 5

   Das Kursprogramm, das niemand las

   Das bisherige Kursprogramm war in 9 pt im Blocksatz über 18 cm Breite gesetzt. Amélie stellt auf zwei Spalten mit rund 60 Zeichen pro Zeile, 10.5 pt Schrift, 14 pt Zeilenabstand und linksbündigen Satz um. Danach geht sie mit ihrer Checkliste durch den Text: Gerade Anführungszeichen werden zu Guillemets, Bindestriche in Zeitangaben zu korrekten Bis-Strichen, und zwischen Zahl und Einheit kommt ein geschütztes Leerzeichen. Die Hallenleitung bemerkt die Details nicht bewusst, findet das Programm aber 'viel ruhiger'.

   Ziel 5Ziel 6

1. 1

   Farbe sehen und verstehen

   ca. 3 Std.

   Du lernst die Grundlagen von Farbmodellen und warum Farbe auf Bildschirm und Papier unterschiedlich aussieht.

   • Dieselbe Farbe in Illustrator als RGB und CMYK anlegen und die Werte vergleichen
   • Eine Datei ausdrucken und Farben mit dem Bildschirm und einem Pantone-Fächer vergleichen
   • Die Farbumfang-Warnung in Photoshop bei leuchtenden Farben ausprobieren

   Trainiert Kompetenz A1A2

   Lernziel1

2. 2

   Farbkontraste und Farbwirkung

   ca. 3 Std.

   Du trainierst dein Auge für Kontraste und lernst, Farben bewusst einzusetzen.

   • Für jeden der sieben Farbkontraste nach Itten ein Beispiel aus der Werbung suchen
   • Ein Plakat in drei Farbvarianten gestalten und die Wirkung vergleichen
   • Farbassoziationen in verschiedenen Branchen (Bank, Bio, Sport, Medizin) sammeln

   Trainiert Kompetenz B1B2

   Lernziel2

3. 3

   Farbpaletten entwickeln

   ca. 3 Std.

   Du baust eine vollständige, dokumentierte Palette für ein Unternehmen.

   • Mit Adobe Color aus einem Foto eine Palette ableiten
   • Alle Farben mit Hex, RGB, CMYK und Pantone dokumentieren
   • Textkontraste mit dem WebAIM Contrast Checker prüfen und anpassen

   Trainiert Kompetenz C1C2

   Lernziel3

4. 4

   Schriften erkennen und auswählen

   ca. 4 Std.

   Du lernst Schriften zu unterscheiden und gezielt zu kombinieren.

   • Je zwei Beispiele pro Schriftklasse aus Zeitungen, Verpackungen und Websites sammeln
   • Ein Wort in zehn Schriften setzen und die Wirkung beschreiben
   • Drei Schriftpaare für unterschiedliche Kunden zusammenstellen und begründen

   Trainiert Kompetenz D1D2

   Lernziel4

5. 5

   Lesbarer Satz und Mikrotypografie

   ca. 4 Std.

   Du setzt Texte so, dass sie gern gelesen werden, und achtest auf die Details.

   • Einen Text in InDesign mit verschiedenen Schriftgraden, Zeilenabständen und Spaltenbreiten setzen und ausdrucken
   • Eine Checkliste für Schweizer Mikrotypografie erstellen
   • Einen fehlerhaften Text korrigieren: Anführungszeichen, Striche, Zahlen, Leerzeichen

   Trainiert Kompetenz E1E2F1F2

   Lernziel56

6. 6

   Farb- und Schriftkonzept für einen Kunden

   ca. 3 Std.

   Du verbindest alles zu einem Konzept, wie es im Kompetenznachweis verlangt wird.

   • Für ein fiktives KMU Farbpalette und Schriftkombination festlegen
   • Ein einseitiges Styleguide-Blatt mit Farben, Schriften und Anwendungsbeispielen gestalten
   • Das Konzept in 5 Minuten präsentieren und begründen

   Trainiert Kompetenz B3C3D3E3

   Lernziel3245

RGB

Additives Farbmodell aus Rot, Grün und Blau für Bildschirme.

CMYK

Subtraktives Farbmodell aus Cyan, Magenta, Yellow und Schwarz (Key) für den Druck.

Pantone

Weltweit verbreitetes System von Sonderfarben mit festen Farbnummern.

Farbraum (Gamut)

Menge aller Farben, die ein Gerät oder Verfahren darstellen kann.

Schriftgrad

Grösse einer Schrift, meist in typografischen Punkten (pt) angegeben.

Zeilenabstand

Abstand von Grundlinie zu Grundlinie zweier Textzeilen.

Laufweite

Gleichmässiger Abstand zwischen allen Buchstaben eines Textes.

Kerning

Anpassung des Abstands zwischen zwei bestimmten Buchstaben, z.B. bei 'Te' oder 'AV'.

Guillemets

In der Schweiz übliche Anführungszeichen in Form von Doppelwinkeln « ».

Flattersatz

Satzart, bei der die Zeilen auf einer Seite bündig und auf der anderen unterschiedlich lang sind.

Passende Module