Titillium Web

Titillium Web ausprobieren

Strichstärken und Schnitte

• ExtraLight 200Titillium Web ExtraLight ExtraLight Italic
• Light 300Titillium Web Light Light Italic
• Regular 400Titillium Web Regular Kursiv
• SemiBold 600Titillium Web SemiBold SemiBold Italic
• Bold 700Titillium Web Bold Bold Italic
• Black 900Titillium Web Black

Über Titillium Web

Titillium Web ist eine serifenlose Familie mit eckigen Rundungen: Die Punzen von b, d, o und p haben abgeflachte Seiten und enge Ecken, was Textzeilen einen technischen, konstruierten Rhythmus gibt. Die Striche sind gleichmäßig stark, und die Buchstaben sind leicht schmal. Die Schrift begann als Lehrprojekt im Kurs für Schriftgestaltung des Masterstudiengangs Campi Visivi für visuelles Design an der Accademia di Belle Arti di Urbino, wo jedes Jahr etwa zwölf Studierende die Arbeit weiterführten. Die offiziellen Credits nennen Luciano Perondi für Gestaltung und Leitung und Diego Giusti für den ersten Prototyp. Die Familie hat sechs Strichstärken, nämlich ExtraLight, Light, Regular, SemiBold, Bold und Black, geliefert als statische Dateien; Black hat keine Kursive, die anderen fünf schon. Jeder Font enthält 410 Glyphen für Lateinisch und Lateinisch erweitert, unter der SIL Open Font License 1.1.

Wofür sich Titillium Web eignet

Dashboards und Produktoberflächen

Die eckigen Buchstabenformen fügen sich in Kästen, Buttons und Rasterlinien ein, und Regular mit SemiBold ergibt zwei klare Ebenen für Beschriftungen.

Marken aus Technik und Ingenieurwesen

Die abgeflachten Rundungen tragen einen industriellen Ton in Überschriften in Bold oder Black.

Große, leichte Überschriften

ExtraLight 200 zeichnet dünne, gleichmäßige Linien, die in Display-Größen zusammenhalten.

Dokumentation und Artikel

Regular und Light gibt es mit Kursiven, sodass Hervorhebungen und Zitate nicht auf künstlich geneigte Schrift angewiesen sind.

Websites von Behörden und Institutionen

Sechs Strichstärken aus einer Familie decken Navigation, Fließtext und Titel für Websites in Sprachen mit lateinischer Schrift ab.

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 Titillium Web 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.

Titillium Web 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: "Titillium Web";
  src: url("/assets/fonts/TitilliumWeb-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  src: url("/assets/fonts/TitilliumWeb-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  src: url("/assets/fonts/TitilliumWeb-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  src: url("/assets/fonts/TitilliumWeb-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
/* …and 7 more files in the package, declared the same way */

body {
  font-family: "Titillium Web", sans-serif;
}

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

Gut zu wissen

Black hat keine Kursive

Das Paket enthält elf Fonts: sechs aufrechte Strichstärken und fünf Kursiven. Der Schnitt Black 900 gibt es nur aufrecht.

Weder Medium noch ExtraBold

Die Strichstärken sind 200, 300, 400, 600, 700 und 900; 500 und 800 gehören nicht zur Familie.

Statische Fonts

Titillium Web ist kein Variable Font. Jede Strichstärke ist eine eigene TTF-Datei.

Häufige Fragen

Sammlungen mit Titillium Web

• Eckige Sans-Serif-Fonts für Tech- und Spiele-Interfaces

  Sans-Serif-Familien mit eckigen Schultern und zwei oder mehr Strichstärken für HUDs, Dashboards, Esports-Grafiken und Branding mit Hardware-Anmutung.

• 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: sans serif