Inter: Gestaltung und SVG-Export
Dieser Leitfaden bewertet Inter ueber die Live-Vorschau hinaus. Er behandelt Form, Abstaende, Bildschirm-Integration und Risiken in der Fertigung, damit der Pfad im naechsten Arbeitsschritt wirklich nutzbar ist.
Kontext und passende Projekte
Inter wurde fuer Computeroberflaechen entworfen. Hohe x-Hoehe, effiziente Abstaende und klare Satzzeichen zeigen diesen Zweck. Als SVG-Schrift ist sie stark, wenn Text Teil eines Produktassets statt einer dekorativen Illustration wird. Dashboard-Labels, UI-Diagramme, Launch-Grafiken und kompakte Technologie-Wortmarken koennen dieselbe Sprache teilen. Der Pfadexport beseitigt zudem Unsicherheit beim Font-Loading in Screenshots, mailsicheren Assets und Komponentenbibliotheken.
Worauf du in den Buchstaben achten solltest
Inter wirkt ruhig, weil kein einzelner Buchstabe Aufmerksamkeit fordert, besitzt aber genug Detail fuer dichte Information. Die hohe Minuskel laesst kleine Labels groesser erscheinen als ihre nominelle Schriftgroesse. Mit fetten Schnitten und engem Zeilenabstand kann daraus eine zu schwere Textur werden. Pruefe deshalb Satzzeichen, Ziffern und gemischte Schreibweise statt nur eines Beispielworts. Versionsnummern und Einheiten entscheiden oft, ob ein Produktasset wirklich sauber ausgerichtet wirkt.
Empfohlene Startwerte fuer Inter
Die Werte sind praktische Ausgangspunkte, keine universellen Presets. Pruefe sie mit echtem Text, Endgroesse, Material und Zielsoftware.
- Label-Gewicht
- 500
- Display-Gewicht
- 700
- Laufweite
- -0.01em to 0
- Kurvengenauigkeit
- Mittel
- Mindest-Startwert
- 12 px / 3 mm
Gewicht und Laufweite
Fuer die meisten UI-Labels ist 500 passend, fuer kompakte Hinweise oder Technologiemarken 700. Gemischte Schreibweise benoetigt normalerweise keine positive Laufweite; leicht negatives Tracking kann gross funktionieren, muss aber paarweise geprueft werden. Kerning bleibt aktiv. Wirkt ein Label zu dicht, vergroessere die echte Ausgabe oder kuerze den Text, bevor du 800 oder 900 waehlt. Die variable Achse hilft bei der Suche, exportiert wird danach die fest gewaehlte Geometrie.
Web-, React- und Bildschirm-Workflow
Inter passt besonders gut in React- und Designsystem-Assets. Exportiere mit enger viewBox, ersetze fill durch currentColor und steuere responsive Groessen per CSS. Pfadtext kann nicht ausgewaehlt, uebersetzt oder semantisch gelesen werden; ein aria-label oder benachbarter HTML-Text bleibt erforderlich. Bei Animationen ist die Bewegung des gesamten Worts meist ruhiger und guenstiger als die Trennung jedes Zeichens. Pruefe das Asset auf 1x- und 2x-Displays auf optisch unruhige Grundlinien.
Laser, CNC, Folie und Gravur
Obwohl Inter fuer Screens gebaut wurde, lassen sich mittlere und fette Schnitte gut gravieren oder schneiden. Nutze 700, vermeide winzige Ausgaben und pruefe kantige Verbindungen sowie geschlossene Punzen unter Beruecksichtigung des Schnittspalts. Fuer Geraetelabels und moderne Leitsysteme passt sie gut, ist aber nicht automatisch schablonensicher. Freistehende Buchstaben brauchen geplante Stege oder separat montierte Innenformen. Bei feiner Gravur bewahrt 500 oft mehr Detail als 800.
Wann Inter passt – und wann nicht
Roboto wirkt vertrauter und mechanischer, Open Sans breiter und freundlicher, Montserrat deutlich displayorientierter. Inter ist richtig, wenn die SVG zu einem digitalen Produktsystem gehoert und mit Interface-Typografie uebereinstimmen muss. Fuer historische, luxurioese, verspielte oder handwerkliche Aufgaben fehlt absichtlich Charakter. Da Inter sehr verbreitet ist, sollte eine echte Wortmarke ihre Eigenstaendigkeit ueber Abstaende, Komposition oder ein individuelles Symbol verdienen.
Inter Preflight vor dem Download
Pruefe das reale Label samt Zahlen und Satzzeichen in 500 und 700. Kontrolliere die Grundlinie in echter Komponentenbreite und erhalte ausserhalb der Pfade eine semantische Benennung. currentColor wird nur bei gewollter Theme-Vererbung genutzt. Fuer Fertigung werden Punzen und Verbindungen physisch gemessen. Wortlaut, Fontgewicht und viewBox-Masse bleiben bei der Komponente dokumentiert, damit spaetere Aenderungen nicht mit Raten beginnen.