Typographie

Typographie kann dabei helfen, Texte zu organisieren und Personen durch eine Seite zu führen. Dabei wird der geiegnete Schriftstil durch den Bereich im Layout bestimmt.

Schrift

Das Cusy-Design-System verwendet die Open-Source-Schrift M+ 2c. Sie kann aus dem M+ Fonts-Repository heruntergeladen werden.

Sans-serif

font-family: 'M PLUS 1p', sans-serif;

Mono

font-family: 'M PLUS 1nm', monospace;

Skalierung

Die Cusy Schriftskala basiert auf einerseits auf dem Goldenen Schnitt, andererseits auf der Verdoppelung, um die Texte hierarchisch zu strukturieren:

Cusy Schriftskala

rem

px

0.625

10

0.813

13

1

16

1.313

21

1.625

26

Gewichte

Die Schriftgröße wird im Cusy Design System für die hierarchische Gliederung der Texte verwendet. Eine fettere Schrift innerhalb eines Textes betont jedoch diesen Textabschnitt.

Die Wirkung der Schriftstärke unterscheidet sich jedoch zwischen dem Cusy-Dark-Theme und dem Cusy-Light-Theme:

Schriftstärke in Abhängigkeit von Textabschnitt, Dark- und Light-Theme

Format

Cusy-Dark-Theme

Cusy-Light-Theme

Überschrift

Bold

Medium

Unterüberschrift

Bold

Medium

Zusammenfassung

Regular

Light

Textkörper

Regular

Light

Fußnoten, Marginalien

Regular

Light

Kursiv

Es gibt keine Kursive. Dabei werden die Titel von Werken, Fachbegriffe und Namen unterschiedlich kenntlich gemacht:

  • Titel von Werken werden in Anführungszeichen gesetzt, z.B. das »PyViz-Tutorial«.

  • Für Fachbegriffe wird bei Mouseover ein Tooltip mit dem Beginn der Kurzbeschreibung angezeigt.

  • Namen werden nur mit ®, ™ o.ä. ausgezeichnet, sofern zutreffend.

Textfarbe

Überschriften werden in der Cusy-Hausfarbe Purple rgba(132, 14, 255, 1) gestaltet.

Text soll neutral erscheinen, also * White* im Cusy-Dark-Theme und Black im Cusy-Light-Theme.

Links erhalten die Farbe Blue.

Syntax-Hervorhebungen in Quellcode erfolgen mit Highlight.js plugin for Vue.js und unterscheiden zwischen Cusy-Dark-Theme und Cusy-Light-Theme.

Weitere Farben dürfen nur verwendet werden, sofern sie bedeutend sind, z.B.

  • Red für Fehler

  • Orange für Warnungen

  • Blue fir Informationen

  • Green für Bestätigungen