🅰️ Logo-Werkstatt

Über „📂 Schriftdateien wählen …“ oder per Ziehen & Ablegen auf das gestrichelte Feld lädst du .ttf, .otf, .ttc, .woff und .woff2. „🖥️ Systemschriften …“ holt zunächst nur die Namen der installierten Schriften (nur Chromium/Edge, fragt um Erlaubnis) in eine eingeklappte Liste — geladen wird eine Systemschrift erst, wenn du sie dort anklickst oder unten im Schrift-Menü auswählst. Es wird nie etwas aus dem Netz geladen — gut geeignet sind heruntergeladene Google-Fonts-Familien (SIL Open Font License: Logos aus den Konturen sind ausdrücklich erlaubt). Du kannst beliebig viele Schriften gleichzeitig laden und je Wort wechseln; die Liste unter dem Ladefeld zeigt zu jeder Schrift, was sie mitbringt: Kerning-Quelle, Ligaturen, Kontextformen, Anker (mark/mkmk/curs), variable Achsen.

Schrift im Menü wählen, Text in „Buchstaben / Wort“ tippen, Schriftgröße (in Dokumenteinheiten) und Sperrung (zusätzlicher Abstand zwischen den Buchstaben, auch negativ) einstellen. Die Schalter steuern die Schriftformung:

• Kerning — die Paarabstände der Schrift (AV, To, …), samt Kontext-Kerning.
• Ligaturen — fi, fl, ffi …; eine Ligatur wird ein Objekt.
• Kontextformen (calt) — Formvarianten je nach Nachbarbuchstaben (typisch bei Schreibschriften).
• Stilalternativen (salt/swsh) — Zier- und Alternativformen, falls die Schrift welche hat.
• Akzente ankern (mark/mkmk) — Kombinationszeichen (z. B. x + ́) docken an den Ankerpunkten der Schrift an, auch gestapelt.
• Kursiv-Anschluss (curs) — verbundene Schreibschriften docken Glyph an Glyph an.

Bei variablen Schriften erscheint das Achsen-Feld: Regler (z. B. wght/wdth) oder benannte Instanzen wählen — die Lage wirkt beim Einsetzen, und über „Auf gewählte Buchstaben anwenden“ auch nachträglich. Andere Schriftsysteme: Arabisch und Hebräisch werden erkannt und von rechts nach links gesetzt (Arabisch mit korrekten Verbindungsformen und Lam-Alef), Devanagari mit Matra-Umstellung. „Konturen einsetzen“ erzeugt je Buchstaben ein eigenes Objekt; „Als ein Objekt einsetzen“ fasst das ganze Wort zu einem Pfad zusammen (praktisch zum Skalieren/Färben am Stück).

Mit dem Werkzeug ➤ Auswahl (V): klicken = auswählen, ziehen = verschieben, Eckgriff = skalieren, Umschalt+Klick = zur Auswahl hinzufügen, Pfeiltasten = 1 Einheit (mit Umschalt 10), Entf = löschen, Esc = Auswahl aufheben. Exakte Werte stehen unter „2 · Objekte“ in X/Y/Größe %. ▭ Rechteck (R) und ◯ Ellipse (E) ziehst du direkt auf der Bühne auf. Zoom über −/+/Einpassen oder Strg+Mausrad. Die Stapelreihenfolge regeln ▲ nach vorn / ▼ nach hinten, ⧉ verdoppeln kopiert die Auswahl.

Objekt auswählen, dann ✒️ Knoten (N): Jeder Punkt der Kontur wird greifbar. Knoten ziehen, Griffe formen die Kurve; ◇ Ecke lässt die Griffe unabhängig, ○ Glatt spiegelt sie. Segment danach schaltet das Stück hinter dem gewählten Knoten um: — Linie, ∿ Kurve (kubische Bézier) oder ☡ Klothoide (Euler-Spirale — die Krümmung wächst linear, der harmonischste Übergang; die Richtung kommt aus den Griffen). ＋ einfügen setzt einen Knoten in die Segmentmitte (auch per Doppelklick auf die Kontur), 🗑 löscht den gewählten. Der Krümmungskamm zeichnet die Krümmung als Kamm an die Kontur: Sprünge im Kamm = sichtbare Knicke im Licht — für Logos lohnt ein stetiger Kamm. ✓ Fertig führt zurück zur Auswahl.

Unter „2 · Objekte“: Füllung als Farbe oder Verlauf (linear/radial) — Stopps in der Liste anlegen, Lage und Richtung des Verlaufs an den Griffen direkt auf der Bühne ziehen; interpoliert wird wahrnehmungsuniform in OKLab. Linie mit eigener Farbe und Breite (die Breite bleibt beim Skalieren in Dokumenteinheiten stabil). Der OKLCH-Wähler (Helligkeit, Chroma, Farbton) wirkt wahlweise auf Füllung, Linie oder den gewählten Verlaufsstopp — gleiche L-Werte wirken gleich hell, gut für stimmige Paletten.

Mehrere Objekte auswählen, dann: ∪ Vereinigen verschmilzt alles zu einer Form, − Abziehen stanzt das oberste Objekt aus den übrigen (wie in Inkscape: unten minus oben), ∩ Schneiden behält nur die gemeinsame Fläche. ⭘ Kontur → Fläche verwandelt die Linie eines Objekts in eine füllbare Fläche (runde Gelenke und Kappen) — so werden aus Linienzügen stanzbare Formen. Muster vervielfältigt die Auswahl als Raster (Spalten × Zeilen, Abstände) oder im Kreis (Anzahl, Mittelpunkt, wahlweise mitdrehen). Die Ausrichten-Knöpfe setzen Kanten bündig bzw. zentrieren — ein Objekt richtet sich am Dokument aus, mehrere an der Auswahl; ⇶ verteilt ab drei Objekten gleichmäßig.

Unter „3 · Dokument“ stellst du Breite/Höhe und die Einheit ein — bei mm exportiert das SVG maßhaltig (druckfertig); „Auf Inhalt zuschneiden“ passt das Dokument mit Rand an die Objekte an, eine Hintergrundfläche ist zuschaltbar. Unter „4 · Export“: SVG speichern (Buchstaben sind Pfade — die Datei braucht die Schrift nicht), SVG-Code kopieren für direktes Einbetten, PNG speichern in wählbarer Breite — die Kleinstprobe (16 px) verrät, ob das Logo als Favicon funktioniert. Das Projekt-JSON ist die Arbeitsdatei (behält Herkunft, Achslagen, Knoten und Klothoiden-Parameter) — zum Weiterarbeiten immer zusätzlich zum SVG sichern. SVG importieren holt fremde Vektorgrafiken als bearbeitbare Objekte herein. Benannte Stände liegen im Browser (localStorage) und lassen sich jederzeit zurückholen.

1. Schrift laden (z. B. eine Variable von Google Fonts) und das Wort mit 160–240 px einsetzen.
2. Achslage (Gewicht/Breite) abstimmen, Kerning/Ligaturen anlassen, Sperrung fein justieren.
3. Einen Buchstaben im Knotenmodus individualisieren — etwa eine Ecke runden (Klothoide!) oder eine Punze öffnen; der Krümmungskamm prüft die Übergänge.
4. Signet dazu: Rechteck/Ellipse aufziehen, mit − Abziehen anschneiden oder per Muster im Kreis anordnen; mit dem Wort bündig ausrichten.
5. Farben über den OKLCH-Wähler, ggf. ein dezenter Verlauf.
6. Gestaltungs-Checkliste (Karte 5) durchgehen, PNG-Kleinstprobe machen.
7. Projekt-JSON sichern, SVG (mm für Druck) und PNG exportieren.