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 ~~~~~~~~~~ .. code-block:: html font-family: 'M PLUS 1p', sans-serif; Mono ~~~~ .. code-block:: html 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: .. table:: 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: .. table:: 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, | Regular | Light | | Marginalien | | | +-----------------+--------------------------+--------------------------+ 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, :abbr:`z.B. (zum Beispiel)` das »PyViz-Tutorial«. * Für Fachbegriffe wird bei Mouseover ein Tooltip mit dem Beginn der Kurzbeschreibung angezeigt. * Namen werden nur mit ®, ™ :abbr:`o.ä. (oder ähnlich)` 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, :abbr:`z.B. (zum Beispiel)` * *Red* für Fehler * *Orange* für Warnungen * *Blue* fir Informationen * *Green* für Bestätigungen