Zum Inhalt springen
moviefriends Brand

04 · Typografie

Big Shoulders trifft Instrument Sans

Schmale, kräftige Versalien wie auf einer Kinoleuchttafel für Überschriften und Zahlen – eine ruhige, gut lesbare Grotesk für alles andere. Beide Schriften sind selbst gehostet und stehen unter der SIL Open Font License.

Die zwei Schriften

Aa

Big Shoulders

600 · 700 · 800. Überschriften in Versalien, große Zahlen („92 / 100“), Preise und die Wortmarke (klein). Fallback: Arial Narrow, Roboto Condensed.

Dein Film. Deine Freunde.

Aa

Instrument Sans

400 · 500 · 600 · 700. Fließtext, Navigation, Buttons, Formulare und der Zusatz neben der Wortmarke. Fallback: Segoe UI, system-ui.

Erzähl einfach drauflos – Leo macht daraus ein Drehbuch.

Textstile

Zusammengesetzte Stile aus typography.* – als CSS-Kurzform für font: und in SwiftUI als MFTypography.
  • typography.wordmark

    Big Shoulders 800 · 30px · 1 · 0.01em

    moviefriends

  • typography.wordmark-suffix

    Instrument Sans 600 · 15px · 1 · 0.14em

    HQ

  • typography.display

    Big Shoulders 800 · 72px · 0.95 · 0.01em

    Operation Grand Cru

  • typography.heading

    Big Shoulders 700 · 34px · 1.1 · 0.03em

    Euer Studio

  • typography.title

    Big Shoulders 700 · 20px · 1.1 · 0.03em

    Kapitel 3 · Der Keller

  • typography.eyebrow

    Instrument Sans 700 · 12px · 1.1 · 0.14em

    02 · Läuft

  • typography.body

    Instrument Sans 400 · 16px · 1.5 · 0em

    Leo fasst zusammen, was ihr euch wünscht, und schlägt drei Filmideen vor.

  • typography.body-web

    Instrument Sans 400 · 17px · 1.6 · 0em

    Ihr legt zusammen. Ihr dreht zusammen. Und am Ende staunen alle.

  • typography.ui

    Instrument Sans 500 · 14px · 1.5 · 0em

    4 Filmrollen · 12 Kommentare

  • typography.button

    Instrument Sans 700 · 16px · 1 · 0em

    Budget freigeben & loslegen

Schriftgrößen

Skala aus font.size.*; in Tailwind mit Präfix: text-mf-ui, text-mf-3xl …
Schriftgrößen
TokenGrößeTailwindVerwendung
font.size.2xs11pxtext-mf-2xsWinzige Labels (Zeitstrahl)
font.size.xs12pxtext-mf-xsVersal-Labels (Eyebrow), Badges
font.size.sm13pxtext-mf-smKleingedrucktes, Chips
font.size.ui14pxtext-mf-uiHäufigste UI-Größe (Meta, Chips, Tabs)
font.size.md15pxtext-mf-mdNavigation
font.size.base16pxtext-mf-baseGrundschrift App
font.size.body-web17pxtext-mf-body-webGrundschrift Website
font.size.lg18pxtext-mf-lgHervorgehobener Text
font.size.lead-web19pxtext-mf-lead-webLead-Absatz Website
font.size.xl20pxtext-mf-xlBig Shoulders 700: Karten-/Phasentitel
font.size.2xl28pxtext-mf-2xlBig Shoulders 800: Panel-Titel
font.size.3xl34pxtext-mf-3xlBig Shoulders 700: Abschnittstitel (H2)
font.size.4xl40pxtext-mf-4xlBig Shoulders 800: Seitentitel mobil
font.size.5xl56pxtext-mf-5xlBig Shoulders 800: große Headline
font.size.6xl72pxtext-mf-6xlBig Shoulders 800: Seiten-Headline (H1, A1)
font.size.logo-header30pxtext-mf-logo-headerWortmarke in der Kopfzeile
font.size.logo-board150pxtext-mf-logo-boardWortmarke auf dem Logo-Board (A7)

Regeln

  • Richtig: Überschriften in Big Shoulders, Versalien, Zeilenhöhe 0,95, text-wrap: balance.
  • Richtig: Grundschrift 16 px in der App (Zeilenhöhe 1,5), 17 px auf der Website (1,6).
  • Richtig: Versal-Labels 12 px, Instrument Sans 700, Laufweite 0,14 em („02 · LÄUFT“).
  • Richtig: Zahlen in Tabellen und Preisen mit tabular-nums.
  • Falsch: Fließtext in Big Shoulders oder in Versalien.
  • Falsch: Text kleiner als 12 px.
  • Falsch: Die Wortmarke in Versalien – sie bleibt immer klein.
  • Falsch: Schriften von Google Fonts nachladen (DSGVO) – immer selbst hosten.