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