Typografie

Die Typography API ermöglicht die Verwaltung von Schriftarten, Schriftgrößen und Typografie-Skalen.

Endpunkte

Schriftarten

Methode	Endpunkt	Beschreibung
`GET`	`/api/v1/design-system/fonts`	Alle Schriftarten auflisten
`POST`	`/api/v1/design-system/fonts`	Neue Schriftart erstellen
`GET`	`/api/v1/design-system/fonts/{id}`	Einzelne Schriftart abrufen
`PUT`	`/api/v1/design-system/fonts/{id}`	Schriftart aktualisieren
`DELETE`	`/api/v1/design-system/fonts/{id}`	Schriftart löschen

Schriftfamilien

Methode	Endpunkt	Beschreibung
`GET`	`/api/v1/design-system/font-families`	Alle Schriftfamilien auflisten

Typografie-Skalen

Methode	Endpunkt	Beschreibung
`GET`	`/api/v1/design-system/typography-scales`	Alle Skalen auflisten
`POST`	`/api/v1/design-system/typography-scales`	Neue Skala erstellen
`GET`	`/api/v1/design-system/typography-scales/{id}`	Einzelne Skala abrufen
`PUT`	`/api/v1/design-system/typography-scales/{id}`	Skala aktualisieren
`DELETE`	`/api/v1/design-system/typography-scales/{id}`	Skala löschen

Das Font-Objekt

{
  "id": "font_abc123",
  "organizationId": "org_xyz789",
  "name": "Inter",
  "family": "Inter, system-ui, sans-serif",
  "category": "sans-serif",
  "source": "google",
  "weights": [400, 500, 600, 700],
  "styles": ["normal", "italic"],
  "usage": {
    "heading": true,
    "body": true,
    "code": false
  },
  "cssImport": "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');",
  "createdAt": "2026-01-10T08:00:00Z"
}

Attribute

Attribut	Typ	Beschreibung
`id`	string	Eindeutige Font-ID
`name`	string	Schriftname
`family`	string	CSS font-family Stack
`category`	string	`sans-serif`, `serif`, `monospace`, `display`
`source`	string	`google`, `adobe`, `custom`, `system`
`weights`	array	Verfügbare Schriftstärken
`styles`	array	Verfügbare Stile
`usage`	object	Verwendungszweck
`cssImport`	string	CSS-Import Statement

Das TypographyScale-Objekt

{
  "id": "typo_abc123",
  "organizationId": "org_xyz789",
  "name": "default",
  "baseSize": 16,
  "scaleRatio": 1.25,
  "sizes": {
    "xs": { "size": 12, "lineHeight": 1.5, "letterSpacing": 0 },
    "sm": { "size": 14, "lineHeight": 1.5, "letterSpacing": 0 },
    "base": { "size": 16, "lineHeight": 1.5, "letterSpacing": 0 },
    "lg": { "size": 18, "lineHeight": 1.5, "letterSpacing": -0.01 },
    "xl": { "size": 20, "lineHeight": 1.4, "letterSpacing": -0.01 },
    "2xl": { "size": 24, "lineHeight": 1.35, "letterSpacing": -0.02 },
    "3xl": { "size": 30, "lineHeight": 1.3, "letterSpacing": -0.02 },
    "4xl": { "size": 36, "lineHeight": 1.25, "letterSpacing": -0.03 },
    "5xl": { "size": 48, "lineHeight": 1.2, "letterSpacing": -0.03 }
  },
  "headingFont": "font_abc123",
  "bodyFont": "font_abc123",
  "codeFont": "font_mono456"
}

Schriftart erstellen

POST /api/v1/design-system/fonts

Google Fonts

{
  "organizationId": "org_xyz789",
  "name": "Poppins",
  "source": "google",
  "weights": [400, 500, 600, 700],
  "styles": ["normal"],
  "usage": {
    "heading": true,
    "body": false
  }
}

Custom Font

{
  "organizationId": "org_xyz789",
  "name": "MyBrandFont",
  "source": "custom",
  "family": "'MyBrandFont', sans-serif",
  "files": [
    {
      "weight": 400,
      "style": "normal",
      "url": "https://cdn.example.com/fonts/mybrand-regular.woff2"
    },
    {
      "weight": 700,
      "style": "normal",
      "url": "https://cdn.example.com/fonts/mybrand-bold.woff2"
    }
  ]
}

Typografie-Skala erstellen

POST /api/v1/design-system/typography-scales

Request-Body

{
  "organizationId": "org_xyz789",
  "name": "compact",
  "baseSize": 14,
  "scaleRatio": 1.2,
  "generateSizes": true,
  "headingFont": "font_abc123",
  "bodyFont": "font_def456"
}

Skalen-Verhältnisse

Name	Verhältnis	Beschreibung
Minor Second	1.067	Sehr subtil
Major Second	1.125	Subtil
Minor Third	1.2	Kompakt
Major Third	1.25	Standard
Perfect Fourth	1.333	Größere Abstufung
Augmented Fourth	1.414	Auffällig
Perfect Fifth	1.5	Sehr auffällig
Golden Ratio	1.618	Dramatisch

CSS-Export

:root {
  /* Font Families */
  --font-heading: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-code: 'JetBrains Mono', monospace;
  
  /* Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  
  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
}

Verfügbare System-Fonts

{
  "success": true,
  "data": [
    { "name": "System UI", "family": "system-ui, sans-serif" },
    { "name": "Arial", "family": "Arial, sans-serif" },
    { "name": "Georgia", "family": "Georgia, serif" },
    { "name": "Times New Roman", "family": "'Times New Roman', serif" },
    { "name": "Courier New", "family": "'Courier New', monospace" }
  ]
}

Fehler

Code	Beschreibung
`400`	Ungültige Schriftkonfiguration
`401`	Nicht authentifiziert
`403`	Keine Berechtigung
`404`	Schriftart/Skala nicht gefunden

Nächste Schritte

Abstände – Spacing konfigurieren
Effekte – Animationen und Effekte