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