Roboto Flex

Roboto Flex uitproberen

Gewichten en stijlen

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

Roboto Flex is een variabel font: de download bevat het hele gewichtsbereik in één bestand, en de benoemde gewichten hierboven zijn posities binnen dat bereik. Er is geen apart cursief bestand: schuine stijlen stel je in met de as Helling.

Over Roboto Flex

Roboto Flex is een sans serif die het ontwerp van Roboto uitbreidt tot een variabel font met 13 assen. Vijf daarvan zijn de bekende: gewicht van 100 tot 1000, breedte van 25 tot 151, optische grootte van 8 tot 144, grade van -200 tot 150 en helling van 0 tot -10. De andere acht zijn parametrische assen die details bepalen, zoals lijndikte (XOPQ, YOPQ), breedte van de binnenruimtes (XTRA) en de hoogtes van hoofdletters, onderkast, stokken, staarten en cijfers. Volgens de officiële toelichting gaf Google Font Bureau opdracht Roboto opnieuw uit te werken met grote schermen in gedachten, en zijn Cyrillisch en Grieks ontwikkeld met schriftspecialisten. Alles zit in één rechtopstaand bestand van 896 glyphs, met Latijnse, Cyrillische, Griekse en Vietnamese sets. Onder de vermelde makers staan Font Bureau en David Berlow, samen zeven namen. Roboto Flex verschijnt onder de SIL Open Font License 1.1.

Waar Roboto Flex goed werkt

Responsieve lay-outs

Met een breedte van 25 tot 151 wordt een kop smaller op een telefoon en breder op een groot scherm, zonder van font te wisselen.

Tekst in donkere modus

De grade-as, van -200 tot 150, maakt lijnen lichter of zwaarder voor een donkere of lichte achtergrond, terwijl het font hetzelfde blijft.

Heel grote en heel kleine tekst

Een optische grootte van 8 tot 144 past de tekening aan: voor voetnoten aan de ene kant en muurgrote titels aan de andere.

Expressieve webkoppen

Het gewicht reikt tot 1000 en de breedte tot 151, een bereik voor geanimeerde of extreme displayinstellingen uit één bestand.

Fijne typografische afstemming

Parametrische assen zoals XTRA en YTLC passen binnenruimtes en de hoogte van de onderkast aan, bijvoorbeeld om gerechtvaardigde tekst gelijkmatiger te maken.

Glyphs

Taalondersteuning

De familie bevat de basisletters waarmee deze talen worden geschreven:

• Engels
• Frans
• Duits
• Spaans
• Portugees
• Italiaans
• Nederlands
• Zweeds
• Noors
• Deens
• Fins
• IJslands
• Catalaans
• Turks
• Pools
• Tsjechisch
• Slowaaks
• Hongaars
• Roemeens
• Kroatisch
• Sloveens
• Litouws
• Lets
• Estisch
• Vietnamees
• Russisch
• Oekraïens
• Bulgaars
• Grieks

Schriftsystemen naast het Latijnse waarvoor de familie glyphs heeft: Cyrillisch, Grieks. Dit zijn schriften, geen belofte voor elke taal die erin wordt geschreven.

Tekensets in de bestanden: cyrillic, cyrillic-ext, greek, latin, latin-ext, vietnamese. De talenlijst is een controle of de benodigde letters in het font zitten, geen belofte over de typografische kwaliteit in elke taal.

Licentie

Fonts die passen bij Roboto Flex

De suggesties volgen uit eenvoudige regels op de gegevens: een contrasterende classificatie en genoeg gewichten voor lopende tekst. Ze zijn een vertrekpunt, geen oordeel.

Roboto Flex op het web gebruiken

Download de familie, zet de bestanden op je eigen site en declareer ze in CSS. Link niet naar de bestanden op trendhub.net: de voorbeeldbestanden hier zijn subsets en hun adressen veranderen.

@font-face {
  font-family: "Roboto Flex";
  src: url("/assets/fonts/RobotoFlex-VariableFont_GRAD%2CXOPQ%2CXTRA%2CYOPQ%2CYTAS%2CYTDE%2CYTFI%2CYTLC%2CYTUC%2Copsz%2Cslnt%2Cwdth%2Cwght.ttf") format("truetype");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

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

Of laad het vanaf de officiële bron. Google Fonts levert Roboto Flex met deze code:

<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+Flex:wght@100..1000&display=swap" rel="stylesheet">

Goed om te weten

Eén bestand, geen apart cursief

Hellende tekst komt van de helling-as, die loopt van 0 tot -10, niet van een tweede bestand.

Twintig benoemde instanties

Het font benoemt tien gewichten, van Thin 100 tot ExtraBlack 1000, elk met een hellende cursieve instantie; breedtes en de andere instellingen bereik je via de assen.

Parametrische assen gebruiken hoofdlettertags

XOPQ, YOPQ, XTRA, YTUC, YTLC, YTAS, YTDE en YTFI stel je in met font-variation-settings.

Gewicht gaat voorbij 900

De gewichtsas eindigt bij 1000, voorbij het gebruikelijke Black 900.

Veelgestelde vragen

Vergelijkbare fonts

Andere families in dezelfde classificatie, gesorteerd op gedeelde gebruikstags. Alle fonts in de stijl sans serif