Zalando Sans

Zalando Sans ausprobieren

Strichstärken und Schnitte

• ExtraLight 200Zalando Sans ExtraLight ExtraLight Italic
• Light 300Zalando Sans Light Light Italic
• Regular 400Zalando Sans Regular Kursiv
• Medium 500Zalando Sans Medium Medium Italic
• SemiBold 600Zalando Sans SemiBold SemiBold Italic
• Bold 700Zalando Sans Bold Bold Italic
• ExtraBold 800Zalando Sans ExtraBold ExtraBold Italic
• Black 900Zalando Sans Black Black Italic

Zalando Sans ist ein Variable Font: Der Download enthält den gesamten Stärkenbereich in je einer Datei pro Schnitt. Die oben genannten Strichstärken sind Positionen in diesem Bereich.

Über Zalando Sans

Zalando Sans ist eine serifenlose Familie im Stil einer schlichten Grotesk. Das Schriftmuster zeigt gleichmäßige Striche, ein doppelstöckiges a, ein einstöckiges g, gerade abgeschnittene Strichenden bei c, e und s sowie gerade, schräg gestellte Anführungszeichen; nichts ist verziert. Das Besondere ist technischer Natur: Zwei Variable-Font-Dateien, aufrecht und Italic, enthalten jeweils eine Weight-Achse von 200 bis 900 und eine Width-Achse von 75 bis 125. So lässt sich die Familie schmaler oder breiter als die Standardbreite setzen, ohne den Font zu wechseln. Acht Strichstärken sind benannt, von ExtraLight bis Black, jeweils mit Italic, insgesamt 16 Schnitte. Die 606 Glyphen decken Lateinisch, Lateinisch erweitert und Vietnamesisch ab. Der Katalog nennt Jakob Ekelund, KH Type und Zalando, die Namenstabelle des Fonts dagegen Kurppa Hosk, KH Type und Jakob Ekelund. Veröffentlicht ist die Schrift unter der SIL Open Font License 1.1.

Wofür sich Zalando Sans eignet

Oberflächen mit wenig Platz

Wird die Width-Achse Richtung 75 gezogen, passen längere Beschriftungen in Buttons, Tabs und Tabellenköpfe, ohne dass die Schrift kleiner werden muss.

Überschriften, die sich dem Layout anpassen

Die Width-Achse reicht bis 125, sodass sich dieselbe Überschrift im Desktop-Layout verbreitern und auf dem Smartphone verschmälern lässt.

Längere Texte

Regular 400 mit Italic trägt Absätze und Hervorhebungen; Medium und SemiBold liefern Zwischenüberschriften, ohne dass eine zweite Familie nötig ist.

Markenauftritte

Acht Strichstärken von ExtraLight bis Black, alle mit Italic, decken vom Kleingedruckten bis zur Kampagnen-Headline alles ab.

Produkte auf Vietnamesisch

Das Subset für Vietnamesisch ist sowohl in der aufrechten als auch in der Italic-Datei enthalten.

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
• Vietnamesisch

In den Dateien gefundene Zeichensätze: latin, latin-ext, vietnamese. 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 Zalando Sans 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.

Zalando Sans 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: "Zalando Sans";
  src: url("/assets/fonts/ZalandoSans-Italic-VariableFont_wdth%2Cwght.ttf") format("truetype");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Zalando Sans";
  src: url("/assets/fonts/ZalandoSans-VariableFont_wdth%2Cwght.ttf") format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Zalando Sans", sans-serif;
}

Oder du lädst die Familie von der offiziellen Quelle. Google Fonts liefert Zalando Sans 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=Zalando+Sans:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">

Gut zu wissen

Zwei Achsen in zwei Dateien

Eine Variable-Font-Datei enthält die aufrechten Schnitte, eine die Italic. Beide haben Weight (200–900) und Width (75–125); die Standardbreite ist 100.

Kein Thin

Die leichteste Strichstärke ist ExtraLight 200. Die Achse reicht nicht bis 100.

Nur Variable Fonts

Das Paket enthält die beiden Variable Fonts. Statische Instanzen gibt es bei der offiziellen Quelle.

Reserved Font Name

Der Lizenzvermerk reserviert den Namen Zalando für die Originalfonts.

Häufige Fragen

Sammlungen mit Zalando Sans

• Grotesk-Schriften (Sans Serif)

  Grotesk- und Neo-Grotesk-Familien: schlichte, robuste, leicht unregelmäßige Arbeitstiere für Branding, redaktionelles Design und Interfaces.

• Variable Fonts mit Breitenachse

  Variable Familien, bei denen sich neben der Strichstärke auch die Buchstabenbreite einstellen lässt, von leichtem Verschmälern zum Einpassen von Text bis zu einem vollen Bereich von schmal bis breit.

Ähnliche Fonts

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