Zilla Slab

Zilla Slab ausprobieren

Strichstärken und Schnitte

• Light 300Zilla Slab Light Light Italic
• Regular 400Zilla Slab Regular Kursiv
• Medium 500Zilla Slab Medium Medium Italic
• SemiBold 600Zilla Slab SemiBold SemiBold Italic
• Bold 700Zilla Slab Bold Bold Italic

Über Zilla Slab

Zilla Slab ist eine Slab-Serif-Familie, die als zentrale Schrift von Mozilla entstand und dort die Wortmarke, Headlines und weitere Gestaltungsarbeiten setzt. Typotheque hat sie auf Grundlage einer früheren Slab Serif der Foundry gezeichnet, und Mozilla leitet das Projekt; der Copyright-Vermerk nennt The Mozilla Foundation. Die Buchstaben haben flache, rechteckige Serifen, Striche von fast gleicher Dicke und runde, glatte Bäuche, dazu ein zweistöckiges a. Im Schriftmuster reichen mehrere Ziffern, darunter 3, 4, 5, 7 und 9, unter die Grundlinie. Die Familie hat fünf Strichstärken, Light 300, Regular 400, Medium 500, SemiBold 600 und Bold 700, und zu jeder gehört eine Kursive, die die offiziellen Hinweise als echte Kursive beschreiben. Das ergibt 10 Schnitte, geliefert als statische Dateien. Die Fonts enthalten 976 Glyphen in den Zeichensätzen Lateinisch und Lateinisch erweitert und stehen unter der SIL Open Font License 1.1.

Wofür sich Zilla Slab eignet

Headlines und Wortmarken

Mozilla setzt seine eigene Wortmarke und seine Headlines in Zilla Slab; SemiBold und Bold geben den flachen Serifen genug Masse für große Titel.

Artikel und lange Seiten

Regular mit der zugehörigen Kursive übernimmt Fließtext und Hervorhebungen, und die fast gleichmäßige Strichdicke hält die Buchstaben in Lesegrößen stabil.

Hierarchie innerhalb einer Familie

Fünf Strichstärken zwischen 300 und 700 trennen Titel, Zwischenüberschriften, Fließtext und Bildunterschriften, ohne eine zweite Schrift einzuführen.

Zitate und Bildunterschriften in Kursiv

Jede der fünf Strichstärken hat eine eigens gezeichnete Kursive, sodass sich ein Zitat in Light Italic oder Bold Italic setzen lässt und nicht nur in der normalen Strichstärke.

Websites in mehreren europäischen Sprachen

Der Zeichensatz Lateinisch erweitert enthält neben den Buchstaben für Englisch, Französisch und Deutsch auch die für Türkisch, Polnisch, Tschechisch, Ungarisch und Rumänisch.

Glyphen

Sprachunterstützung

Die Familie enthält die Grundbuchstaben, mit denen diese Sprachen geschrieben werden:

• Englisch
• Französisch
• Deutsch
• Spanisch
• Portugiesisch
• Italienisch
• Niederländisch
• Schwedisch
• Norwegisch
• Dänisch
• Finnisch
• Isländisch
• Katalanisch
• Türkisch
• Polnisch
• Tschechisch
• Slowakisch
• Ungarisch
• Rumänisch
• Kroatisch
• Slowenisch
• Litauisch
• Lettisch
• Estnisch

In den Dateien gefundene Zeichensätze: latin, latin-ext. Die Sprachliste prüft, ob die nötigen Buchstaben im Font vorhanden sind. Über die typografische Qualität in der jeweiligen Sprache sagt sie nichts.

Lizenz

Fonts, die zu Zilla Slab passen

Die Vorschläge folgen einfachen Regeln aus den Datensätzen: eine kontrastierende Klassifikation und genug Strichstärken für Fließtext. Sie sind ein Ausgangspunkt, kein Urteil.

Zilla Slab im Web verwenden

Lade die Familie herunter, lege die Dateien auf deinen eigenen Server und binde sie per CSS ein. Bitte verlinke nicht auf die Dateien bei trendhub.net: Die Vorschaudateien hier sind Subsets, und ihre Adressen ändern sich.

@font-face {
  font-family: "Zilla Slab";
  src: url("/assets/fonts/ZillaSlab-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zilla Slab";
  src: url("/assets/fonts/ZillaSlab-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Zilla Slab";
  src: url("/assets/fonts/ZillaSlab-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Zilla Slab";
  src: url("/assets/fonts/ZillaSlab-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
/* …and 6 more files in the package, declared the same way */

body {
  font-family: "Zilla Slab", serif;
}

Oder du lädst die Familie von der offiziellen Quelle. Google Fonts liefert Zilla Slab mit diesem Markup aus:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">

Gut zu wissen

Statische Dateien, keine variable Version

Das Paket enthält 10 einzelne TTF-Dateien, eine pro Schnitt. Zilla Slab hat keine variablen Achsen, daher lassen sich nur die fünf benannten Strichstärken einstellen.

Der Bereich reicht von 300 bis 700

Light ist der leichteste Schnitt und Bold der schwerste; dünner als 300 oder fetter als 700 gibt es in der Familie nichts.

Ziffern reichen unter die Linie

Im Schriftmuster haben die Standardziffern nicht alle dieselbe Höhe: Ziffern wie 3, 4, 5, 7 und 9 reichen unter die Grundlinie.

Gestalter und Rechteinhaber sind verschieden

Die Namenstabelle des Fonts nennt Typotheque als Gestalter und Hersteller, während das Copyright bei The Mozilla Foundation liegt.

Häufige Fragen

Sammlungen mit Zilla Slab

• Fonts mit Unterstützung für Türkisch

  Familien mit offener Lizenz, die jeden Buchstaben des türkischen Alphabets enthalten, auch das i mit und ohne Punkt, in Text-, Display- und Schreibschrift-Stilen.

Ähnliche Fonts

Weitere Familien derselben Klassifikation, sortiert nach gemeinsamen Einsatzbereichen. Alle Fonts: slab serif