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