{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "gemischte-schnitte-zeile", "name": "Gemischte Schnitte in einer Zeile (Grotesk + Kursiv-Serif)", "name_en": "Mixed type styles within one headline", "kurz": "Ein Wort in Kursiv-Serif mitten im Grotesk-Satz: die leise Stimme einer Seite, sauber auf x-Höhe und Laufweite angeglichen.", "kategorie": "Typo-Techniken", "kategorie_slug": "typo-techniken", "kategorie_nr": 15, "bau_chat": "C1", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "belegt", "website_belege": 2, "stimmung": [ "editorial", "luxuriös", "laut" ], "stimmung_roh": [ "editorial", "elegant", "kontrastreich" ], "technik": [ "css" ], "technik_gruppen": [ "css" ], "leistungskosten": "niedrig", "steckbrief": { "beschreibung": "Eine Headline in Grotesk, in der ein oder zwei Wörter in einer Kursiv-Serif stehen. Verwandte Formen: drei Schnitte zeilenweise gestapelt (Serif, Grotesk, Serif-Kursiv) oder nur der Anfangsbuchstabe im Hausschnitt.", "warum_es_wirkt": "Der Schnittwechsel betont, ohne lauter zu werden. Die Kursive klingt wie eine Stimme im sachlichen Satz und gibt der Seite Persönlichkeit, während Größe und Gewicht ruhig bleiben.", "wann_einsetzen": "Intro-Sätze auf Portfolio- und Beraterseiten, Editorial-Headlines, Fallstudien-Titel, Notizen- und Journal-Übersichten.", "wann_nicht": "Mehr als zwei kursive Wörter pro Headline, Fließtext-Betonungen, UI-Beschriftungen, Marken mit nur einer Schrift. Nicht mit einer Kursiven, deren x-Höhe stark abweicht, ohne sie anzugleichen.", "varianten": [ "Im Satz: ein bis zwei Wörter in Kursiv-Serif (Emil Kowalski, Paco Coursey)", "Gestapelt: je Zeile ein Schnitt, line-height 0.83, letter-spacing -0.05em (Instrument)", "Initiale im Hausschnitt: nur der erste Buchstabe in der Serif, mit Laufweitenkorrektur je Buchstabe (Every)" ], "umsetzung": "Das Wort als mit eigener Schrift auszeichnen: font-family Serif, font-style italic, font-optical-sizing auto. Laufweite auf 0 zurücksetzen, weil die enge Headline-Laufweite die Kursive zusammendrückt. Größe angleichen: entweder pauschal 1.05em oder exakt mit font-size-adjust: ex-height . Den Wert misst man im Browser mit einer Sonde width: 10ex. Für Initialen dasselbe mit cap-height. Für gestapelte Zeilen alle Schnitte gleich groß setzen und nur Laufweite und Zeilenabstand gemeinsam führen.", "mobil": "Funktioniert unverändert, weil die Mischung im Satz liegt. Gestapelte Zeilen mit clamp() verkleinern; Einzüge in em mitskalieren lassen.", "reduzierte_bewegung": "Nicht relevant, das Muster selbst bewegt sich nicht. Ein gestaffeltes Einblenden der Zeilen entfällt bei reduzierter Bewegung.", "barrierefreiheit": " nur verwenden, wenn die Betonung auch inhaltlich gemeint ist, sonst . Wörter nicht auf mehrere Elemente zerlegen. Die Kursive muss in der Größe gut lesbar bleiben; Kontrast wie beim übrigen Text." }, "messwerte": { "easing": "", "dauer_ms": "", "stagger_ms": "", "distanz": "letter-spacing −.05em; line-height .83 (Instrument)", "sonstiges": "Serif / kondensierte Grotesk / Serif-Kursiv in einer Headline", "herkunft": "beobachtet", "quelle": "https://www.instrument.com/" }, "kurve": { "bezier": [ 0.165, 0.84, 0.44, 1.0 ], "css": "cubic-bezier(0.165, 0.84, 0.44, 1)", "name": "eigene Kurve", "dauer_ms": 120 }, "gesehen_bei": [ { "seite": "Instrument", "url": "https://www.instrument.com/", "auszeichnung": "", "beobachtung": "Live geprüft (Inline-CSS + HTML): Purpose-Headline 'Shape / A better / Future.' in drei Schnitten – .title1 var(--text-serif) 27.95vw, .title2 var(--text-sans) mit font-variation-settings 'wdth' 0, .title3 var(--text-serif-italic) (Instrument Serif Italic), je letter-spacing −.05em, line-height ≈ .83.", "art": "website" }, { "seite": "Every", "url": "https://every.to/", "auszeichnung": "", "beobachtung": "Live geprüft (HTML + CSS): Artikel-Headlines mischen in der Zeile einen Initial-Buchstaben im Hausschnitt – Week; .hand {text-transform:uppercase; font-family: Every, Signifier, …, serif}, buchstabenweise Laufweitenkorrektur (.hand-A −4 %, .hand-F −8 %).", "art": "website" } ], "tutorials": [], "kombinierbar_mit": [ "editorial-magazin-layout", "schrift-hero-viewportbreit" ], "urls": { "detail": "https://cecodesign.de/lab/fundus/typo-techniken/gemischte-schnitte-zeile/", "meta": "https://cecodesign.de/lab/fundus/typo-techniken/gemischte-schnitte-zeile/meta.json", "demo": "https://cecodesign.de/lab/fundus/typo-techniken/gemischte-schnitte-zeile/demo" }, "herkunft": { "quelldateien": [ "schriften.json", "r3-belege-b.json" ], "pruefnotizen": [ "r3-belege-b.json (Runde 3, 31.10.2026): Instrument mischt zeilenweise (gestapelt), Every innerhalb der Zeile (Initial); klassisches 'ein kursives Serif-Wort in Grotesk-Zeile' auf den geprüften Seiten nicht gefunden." ], "prioritaet_hinweis": "vorläufig gesetzt (Rohdaten ohne Priorität)" }, "bau": { "status": "fertig", "kurz": "Ein Wort in Kursiv-Serif mitten im Grotesk-Satz: die leise Stimme einer Seite, sauber auf x-Höhe und Laufweite angeglichen.", "demo": true, "abhaengigkeiten": [], "werte": { "grundschnitt": "Host Grotesk 500, clamp(1.75rem, 1rem + 2.6vw, 2.75rem), line-height 1.22, letter-spacing -0.02em, max-width 25ch", "kursive": "Newsreader Italic 400, font-optical-sizing auto, 1 bis 2 Wörter pro Headline", "angleichung_ohne": "font-size 1em, letter-spacing geerbt (-0.02em)", "angleichung_rezept": "font-size 1.05em, letter-spacing 0", "angleichung_exakt": "font-size-adjust: ex-height 0.496 (x-Höhe der Host Grotesk), letter-spacing 0", "x_hoehe_gemessen": "Host Grotesk 0.496, Newsreader Italic 0.426 (per 10ex-Sonde im Browser); bei 44 px liegt die Kursive mit 1.05em noch 2.1 px unter der Grotesk", "versalhoehe_gemessen": "Host Grotesk 0.700, Newsreader 0.669; Initiale mit 1.05em trifft die Versalhöhe auf 0.1 px", "gestapelt": "Newsreader 400 / Host Grotesk 500 / Newsreader Italic 400, je Zeile ein Schnitt, clamp(3.5rem, 1rem + 9vw, 9rem), line-height 0.83, letter-spacing -0.05em, Einzug Zeile 2 0.52em, Zeile 3 0.16em", "initiale": "Newsreader 400 versal im Grotesk-Titel (Host Grotesk 500, clamp(1.5rem, 1rem + 1.9vw, 2.375rem), line-height 1.15, letter-spacing -0.025em); margin-right je Buchstabe: F -0.08em, W -0.03em, L -0.02em", "easing": "cubic-bezier(0.165, 0.84, 0.44, 1)", "dauer_ms": "120 (Hover, Farbe), 240 (Größenwechsel der Kursiven), 480 (Einblenden)", "stagger_ms": "80 je Zeile", "distanz": "translateY 0.3em beim Einblenden", "farben": "#fcfcfc Grund, #0b0b09 Text, #646464 Sekundär, #e8e8e8 Linien, #2f5bea Fokus und Link-Hover" }, "ausloeser": "klick", "touch": "Kein Hover nötig: Variante, Angleichung und Hilfslinien per Tippen. Unter 760 px steht die Legende der Hilfslinien als Zeile über der Headline, Abweichung in px direkt daneben.", "reduziert": "Kein gestaffeltes Einblenden und kein Größenübergang; Zustände wechseln sofort, Hilfslinien und Messwerte bleiben.", "korrekturen": { "name": "Gemischte Schnitte in einer Zeile (Grotesk + Kursiv-Serif)", "beschreibung": "Eine Headline in Grotesk, in der ein oder zwei Wörter in einer Kursiv-Serif stehen. Verwandte Formen: drei Schnitte zeilenweise gestapelt (Serif, Grotesk, Serif-Kursiv) oder nur der Anfangsbuchstabe im Hausschnitt.", "warum_es_wirkt": "Der Schnittwechsel betont, ohne lauter zu werden. Die Kursive klingt wie eine Stimme im sachlichen Satz und gibt der Seite Persönlichkeit, während Größe und Gewicht ruhig bleiben.", "wann_einsetzen": "Intro-Sätze auf Portfolio- und Beraterseiten, Editorial-Headlines, Fallstudien-Titel, Notizen- und Journal-Übersichten.", "wann_nicht": "Mehr als zwei kursive Wörter pro Headline, Fließtext-Betonungen, UI-Beschriftungen, Marken mit nur einer Schrift. Nicht mit einer Kursiven, deren x-Höhe stark abweicht, ohne sie anzugleichen.", "varianten": [ "Im Satz: ein bis zwei Wörter in Kursiv-Serif (Emil Kowalski, Paco Coursey)", "Gestapelt: je Zeile ein Schnitt, line-height 0.83, letter-spacing -0.05em (Instrument)", "Initiale im Hausschnitt: nur der erste Buchstabe in der Serif, mit Laufweitenkorrektur je Buchstabe (Every)" ], "umsetzung": "Das Wort als mit eigener Schrift auszeichnen: font-family Serif, font-style italic, font-optical-sizing auto. Laufweite auf 0 zurücksetzen, weil die enge Headline-Laufweite die Kursive zusammendrückt. Größe angleichen: entweder pauschal 1.05em oder exakt mit font-size-adjust: ex-height . Den Wert misst man im Browser mit einer Sonde width: 10ex. Für Initialen dasselbe mit cap-height. Für gestapelte Zeilen alle Schnitte gleich groß setzen und nur Laufweite und Zeilenabstand gemeinsam führen.", "mobil": "Funktioniert unverändert, weil die Mischung im Satz liegt. Gestapelte Zeilen mit clamp() verkleinern; Einzüge in em mitskalieren lassen.", "reduzierte_bewegung": "Nicht relevant, das Muster selbst bewegt sich nicht. Ein gestaffeltes Einblenden der Zeilen entfällt bei reduzierter Bewegung.", "barrierefreiheit": " nur verwenden, wenn die Betonung auch inhaltlich gemeint ist, sonst . Wörter nicht auf mehrere Elemente zerlegen. Die Kursive muss in der Größe gut lesbar bleiben; Kontrast wie beim übrigen Text." }, "geprueft": "01.11.2026", "notiz": "Welt: Rezept freelancer-stille-visitenkarte, Visitenkarte der erfundenen Interaction-Designerin Marlene Ostertag aus Augsburg (Host Grotesk, Newsreader, Graustufen, ein Blau). Drei Varianten (Im Satz, Gestapelt, Initiale) und drei Stufen der Angleichung (ohne, 1.05em, font-size-adjust) mit live gemessenen Hilfslinien für x-Höhe bzw. Versalhöhe und Abweichung in px. Befund: Newsreader Italic hat eine deutlich kleinere x-Höhe als Host Grotesk, 1.05em reicht im Satz nicht, für die Initiale passt es genau. Die Satzgröße ist für die Demo größer als im Rezept (dort 1.25 bis 1.5rem). Referenzen: paco.me, emilkowal.ski, instrument.com, every.to, olivierlarose.com. AD-Review 01.11.2026: Note 4. Zugang 02.11.2026: Werte-Raster minmax(min(310px, 100%), 1fr) (vorher 328 px breit bei 320), Kontrastmodus-Rahmen für Knöpfe." } }