Die niedrigere x-Höhe, die verlängerten vertikalen Proportionen, die offenen Formen und die sorgfältig abgestimmten Abstände geben Zutat eine Stimme, die präzise bleibt, ohne steril zu wirken. In kleinen Größen bleibt sie klar, in großen entwickelt sie eine eigenständige Präsenz. Genau das macht sie als Zutat brauchbar: Sie trägt Identitäten, Interfaces und redaktionelle Layouts, ohne sie zu übernehmen.
Interface ready · Version 0.6
Zutat Font
Zutat heißt genau das: ein Bestandteil, nicht das fertige Gericht. Sie ist der Teil, den du hinzufügst, damit alles andere durchdacht wirkt. Gemacht für Identitäten, Interfaces und redaktionelle Systeme.
Bewege den Zeiger, um die Form zu studieren.
02 / Voice
Nicht das ganze Gericht.
Aber die Zutat, die es entscheidet.
Zutat ist aus Geist hervorgegangen und schaut auf dem Weg zu DM Sans, Inter und SF Pro. Übernommen wurde die Nüchternheit dieser Schriften, nicht ihre Neutralität: engere Unterschneidungen, ein tieferes Auge und ein etwas längerer vertikaler Auslauf geben Zutat eine eigene Kontur, ohne dass sie in einem Interface je nach Schrift ruft.
Offen
Großzügige Punzen und schlichte Formen halten die Schrift lesbar, auch wenn ein Interface dicht wird.
Ruhig
Ein gleichmäßiger Rhythmus und zurückgenommene Details geben komplexen Informationen einen verlässlichen Ton.
Genau
Aufeinander abgestimmte Abstände und eine feste vertikale Metrik halten Tabellen, Zahlen und Labels in einer Linie.
03 / Type tester
Make it yours.
Adjust the available family weights, size, slant, tracking, and alignment.
Style
Alignment
Zurücksetzen
04 / Anatomy
Every point has a reason.
Inspect true vector outlines against the cap height, x-height, baseline, and descender.
05 / Specimens
A typeface in context.
Original Zutat Font posters, shown as part of the family rather than decoration.
06 / Use it
Four weights. One ingredient.
RegularAa400
MediumAa500
SemiBoldAa600
BoldAa700
Install
npm i zutat-font// app/layout.tsx
import { ZutatSans } from "zutat-font/font/sans";
export default function RootLayout({ children }) {
return (
<html className={ZutatSans.variable}>
<body>{children}</body>
</html>
);
}
/* styles */
font-family: var(--font-zutat), sans-serif;License & origin
Zutat Font ist eine eigene Schrift, inspiriert von DM Sans, Inter, SF Pro, der OpenAI-Schrift und Geist. Sie wird unter der SIL Open Font License 1.1 veröffentlicht.
Read the OFL 1.1 license ↗