Roboto

Roboto ausprobieren

Strichstärken und Schnitte

• Thin 100Roboto Thin Thin Italic
• ExtraLight 200Roboto ExtraLight ExtraLight Italic
• Light 300Roboto Light Light Italic
• Regular 400Roboto Regular Kursiv
• Medium 500Roboto Medium Medium Italic
• SemiBold 600Roboto SemiBold SemiBold Italic
• Bold 700Roboto Bold Bold Italic
• ExtraBold 800Roboto ExtraBold ExtraBold Italic
• Black 900Roboto Black Black Italic

Roboto 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 Roboto

Roboto ist eine serifenlose Familie, die die offiziellen Angaben als zweiseitig beschreiben: ein mechanisches, weitgehend geometrisches Gerüst, verbunden mit freundlichen, offenen Rundungen. Die Buchstaben behalten ihre natürlichen Breiten, statt in einen starren Rhythmus gezwungen zu werden, was die Angaben mit dem Leserhythmus humanistischer und Serifenschriften verbinden. Im Schriftmuster sind die Striche gleichmäßig, das a ist zweistöckig, und das große R steht auf einem geraden diagonalen Bein. Seit Juli 2020 ist Roboto ein Variable Font mit zwei Achsen: Strichstärke von 100 bis 900 und Breite von 75 bis 100, wobei das schmale Ende der früheren Roboto Condensed entspricht. Neun benannte Stärken gibt es aufrecht und kursiv, zusammen 18 Schnitte. Die 1.326 Glyphen decken Latin, Kyrillisch, Griechisch und Vietnamesisch ab. Die Credits nennen Christian Robertson, ParaType und Font Bureau, die Lizenz ist die SIL Open Font License 1.1.

Wofür sich Roboto eignet

App- und Weboberflächen

Neun Stärken mit Kursiven decken jede Ebene einer Oberfläche ab, von Thin bei Display-Ziffern bis Bold bei Buttons.

Dichte Tabellen und Seitenleisten

Die Breitenachse verschmälert bis 75 und bringt mehr Zeichen in eine Spalte, ohne die Familie zu verlassen.

Fließtext

Die Buchstaben behalten ihre natürlichen Breiten, was laut den offiziellen Angaben in Absätzen für einen natürlicheren Leserhythmus sorgt.

Produkte in mehreren Schriftsystemen

Dank der Zeichensätze für Latin, Kyrillisch, Griechisch und Vietnamesisch kann eine Familie viele Sprachversionen bedienen.

Systeme mit Slab- und Mono-Begleitern

Die offiziellen Angaben führen Roboto Slab und Roboto Mono als Mitglieder derselben Superfamilie auf, für Überschriften und Code.

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
• Russisch
• Ukrainisch
• Bulgarisch
• Griechisch

Weitere Schriftsysteme neben dem lateinischen, für die die Familie Glyphen enthält: Kyrillisch, Griechisch. Genannt sind Schriftsysteme. Das ist keine Zusage für jede Sprache, die damit geschrieben wird.

In den Dateien gefundene Zeichensätze: cyrillic, cyrillic-ext, greek, 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 Roboto 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.

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

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

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

Gut zu wissen

Die Breitenachse reicht von 75 bis 100

Sie verschmälert den Entwurf in Richtung der früheren Roboto Condensed; breiter macht sie ihn nicht.

Zwei variable Dateien

Aufrecht und kursiv sind getrennte Dateien, jeweils mit beiden Achsen.

Häufige Fragen

Sammlungen mit Roboto

• Klare serifenlose Fonts für App-Oberflächen

  Serifenlose Schriftfamilien mit offener Lizenz, die in Buttons, Menüs, Tabellen und Einstellungsseiten gut lesbar bleiben und die Strichstärken mitbringen, die eine Oberfläche braucht.

• Fonts für Untertitel und Video-Beschriftungen

  Schlichte, robuste Sans-Serif-Familien für Untertitel und Beschriftungen, ausgewählt für klare Buchstaben in kleinen Größen und meist mit breiter Sprachabdeckung.

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

• Schriftsysteme mit zusammenpassenden serifenlosen, Serifen- und Monospace-Familien

  Familien, die für den gemeinsamen Einsatz entworfen wurden: eine serifenlose Schrift, eine Serifen- oder Slab-Schrift und oft eine Monospace-Schrift, die Proportionen, Strichstärken und Charakter teilen.

Ähnliche Fonts

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