Wie eure Marke auf die Website kommt

Farben und Schriften eurer Marke richtet das CANVAYO-Team bei der Einrichtung eurer Website für euch ein, nach eurem Corporate Design. Sie gelten dann überall auf der Website: für Buttons, Überschriften, Flächen, Links und Formulare.

Ändert sich später etwas an eurer Marke, zum Beispiel eine Hausfarbe oder die Schrift, schreibt uns. Wir stellen es für euch um.

Warum Farben und Schriften an einer Stelle liegen

  • Einmal ändern, überall sichtbar: Alle Bausteine holen sich ihre Farbe und Schrift aus denselben Einstellungen. Ändert sich die Hauptfarbe, ändert sie sich auf der ganzen Website.
  • Lesbar auf jeder Farbe: Auf farbigen Flächen wählt die Website die Schriftfarbe selbst, dunkel oder hell, je nachdem, was mehr Kontrast ergibt. Hover- und Flächentöne leitet sie aus eurer Farbe ab.
  • Sofort live: Eine Änderung gilt beim nächsten Aufruf der Seite. Es muss nichts neu gebaut werden.
  • Datenschutzfreundlich: Schriften aus der Auswahl lädt die Website von CANVAYO aus, nicht von Google. Adobe Fonts lädt sie erst, wenn Besucher im Cookie Banner zugestimmt haben.

Was wir für euch einstellen

  • Markenfarben: eine Hauptfarbe, zum Beispiel für Buttons und Flächen, und eine Akzentfarbe, jeweils mit einer helleren und einer dunkleren Variante.
  • Schriftfarben: für Überschriften, Fließtext und Links. Für Fließtext achten wir auf ein Kontrastverhältnis von mindestens 4,5 zu 1, mehr dazu im Allgemeinen Leitfaden zur Barrierefreiheit.
  • Aufmacher: die Hinterlegung von Text auf Bildern, damit er auf jedem Bild lesbar bleibt.
  • Meldungsfarben: für Erfolg, Hinweis, Warnung und Fehler, zum Beispiel in Formularen.
  • Schriften: eine Schrift für den Fließtext und eine für Überschriften, dazu je eine Ausweichschrift mit ähnlicher Breite. Sie erscheint, solange die Hausschrift noch lädt oder Besucher Adobe Fonts noch nicht zugestimmt haben.
  • Größen und Stärken: Grundgröße des Textes, Größen der Überschriften, Zeilenabstände und Schriftstärken. Fließtext setzen wir nicht kleiner als 16 Pixel.

Was wir dafür von euch brauchen

  • euer Corporate Design oder Styleguide, gern als PDF
  • die Farbwerte, am besten als Hex-Werte wie #13274C
  • die Namen eurer Schriften und, für eine eigene Hausschrift, eure Webfont-Lizenz

Eure Hausschrift

Nutzt eure Marke eine eigene Schrift, kommt sie auf einem dieser drei Wege auf die Website. Für jeden Weg braucht ihr eine Webfont-Lizenz für eure Website.

Adobe Fonts

  1. Legt bei Adobe Fonts ein Webprojekt mit euren Schriften an und kopiert dessen Projekt-ID.
  2. Als Canvayo Admin öffnet ihr „CANVAYO“ → „CANVAYO“, Reiter „Schriftarten“, Bereich „Adobe-Schriften“. Schaltet „Adobe Fonts aktivieren“ ein, tragt die Projekt-ID ein und speichert.
  3. Legt im Cookie Banner den voreingestellten Dienst für Adobe Fonts an, damit Besucher zustimmen können. Siehe Cookie Banner: Opt-in und Blocker.
  4. Gebt uns kurz Bescheid. Wir wählen die Schriften für Fließtext und Überschriften aus und legen die Ausweichschrift fest.

Reiter „Schriftarten“, Bereich „Adobe-Schriften“: Schalter „Adobe Fonts aktivieren“ auf „Ja“, daneben das Feld „Projekt ID“ mit einer Beispiel-ID und das Feld „Cache-Zeit“

Ihr könnt uns die Projekt-ID auch einfach schicken, dann richten wir alles ein. Fügt ihr dem Webprojekt später Schriften hinzu, stehen sie innerhalb eines Tages zur Auswahl.

Monotype und eigene Schriftdateien

Schriften von Monotype und eigene Schriftdateien binden wir auf Anfrage für euch ein. Schickt uns eure Lizenz und bei eigenen Dateien die Schrift für das Web, am besten im Format WOFF2 oder WOFF. Monotype verlangt zur Lizenz meist einen Zählcode auf der Website; den hinterlegen wir mit.

Habt ihr für eure Hausschrift keine Webfont-Lizenz, suchen wir aus der Auswahl eine Schrift mit ähnlichem Charakter.

Checkliste: Die neue Farbe oder Schrift ist nicht zu sehen

  • Noch der alte Stand? Ladet die Seite neu. Hilft das nicht, leert den Browser-Cache, siehe Cache löschen.
  • Besucher sehen eine andere Schrift? Sie haben Adobe Fonts im Cookie Banner nicht zugestimmt und sehen die Ausweichschrift. Das ist so gewollt.
  • Adobe-Schrift fehlt? Prüft unter „Schriftarten“, ob „Adobe Fonts aktivieren“ eingeschaltet und die Projekt-ID richtig ist. Neue Schriften im Webprojekt stehen innerhalb eines Tages zur Auswahl.
  • Nur eine Sprache hat die neue Farbe? Jede Sprachfassung hat ihre eigenen Einstellungen. Sagt uns, welche Sprachen ihr habt, dann stellen wir alle um.
  • Text auf einer Fläche schlecht lesbar? Schreibt uns, auf welcher Seite. Wir passen die Farbe an.

Kommt ihr nicht weiter, schreibt uns, welche Farbe oder Schrift ihr wo ändern wollt, gern mit einem Bildschirmfoto.