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:
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:
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