Roboto Flex

Prueba Roboto Flex

Pesos y estilos

• 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 es una fuente variable: la descarga contiene toda la gama de pesos en un solo archivo, y los pesos con nombre de arriba son posiciones dentro de esa gama. No hay un archivo cursivo aparte: los estilos inclinados se ajustan con el eje Inclinación.

Sobre Roboto Flex

Roboto Flex es una sans serif que toma el diseño de Roboto y lo amplía en una fuente variable con 13 ejes. Cinco son los habituales: peso de 100 a 1000, ancho de 25 a 151, tamaño óptico de 8 a 144, grado de -200 a 150 e inclinación de 0 a -10. Los otros ocho son ejes paramétricos que controlan detalles como el grosor del trazo (XOPQ, YOPQ), el ancho de las contraformas (XTRA) y las alturas de las mayúsculas, las minúsculas, los ascendentes, los descendentes y las cifras. Según las notas oficiales, Google encargó a Font Bureau rehacer Roboto pensando en las pantallas grandes, y el cirílico y el griego se desarrollaron con especialistas en cada escritura. Todo se entrega en un único archivo recto de 896 glifos que cubre los juegos de caracteres latino, cirílico, griego y vietnamita. Los créditos incluyen a Font Bureau y a David Berlow entre siete nombres. Roboto Flex se publica bajo la SIL Open Font License 1.1.

Dónde funciona Roboto Flex

Diseños adaptables

Un ancho de 25 a 151 permite que un encabezado se estreche en el teléfono y se ensanche en una pantalla grande sin cambiar de fuente.

Texto en modo oscuro

El eje de grado, de -200 a 150, aligera o engrosa los trazos para un fondo oscuro o claro sin cambiar de fuente.

Tipografía muy grande y muy pequeña

El tamaño óptico de 8 a 144 adapta el dibujo a notas al pie en un extremo y a títulos del tamaño de una pared en el otro.

Titulares web expresivos

El peso llega a 1000 y el ancho a 151, un rango que permite ajustes display extremos o animados desde un solo archivo.

Ajuste tipográfico fino

Los ejes paramétricos como XTRA e YTLC regulan las contraformas y la altura de las minúsculas, por ejemplo para igualar el texto justificado.

Glifos

Idiomas admitidos

La familia contiene las letras básicas con las que se escriben estos idiomas:

• Inglés
• Francés
• Alemán
• Español
• Portugués
• Italiano
• Neerlandés
• Sueco
• Noruego
• Danés
• Finés
• Islandés
• Catalán
• Turco
• Polaco
• Checo
• Eslovaco
• Húngaro
• Rumano
• Croata
• Esloveno
• Lituano
• Letón
• Estonio
• Vietnamita
• Ruso
• Ucraniano
• Búlgaro
• griego

Sistemas de escritura con glifos en la familia, además del latino: cirílico, griego. Se indican como sistemas de escritura, no como garantía para cada idioma que los usa.

Juegos de caracteres encontrados en los archivos: cyrillic, cyrillic-ext, greek, latin, latin-ext, vietnamese. La lista de idiomas comprueba que la fuente tenga las letras necesarias; no garantiza la calidad tipográfica en cada idioma.

Licencia

Fuentes que combinan con Roboto Flex

Las sugerencias salen de reglas sencillas sobre los datos: una clasificación que contraste y pesos suficientes para el texto corrido. Son un punto de partida, no un veredicto.

Usar Roboto Flex en la web

Descarga la familia, aloja los archivos en tu propio sitio y decláralos en CSS. No enlaces a los archivos de trendhub.net: los archivos de vista previa son subconjuntos y sus direcciones cambian.

@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;
}

O cárgala desde el origen oficial. Google Fonts ofrece Roboto Flex con este código:

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

Lo que debes saber

Un solo archivo, sin cursiva aparte

El texto inclinado se obtiene con el eje de inclinación, que va de 0 a -10, y no con un segundo archivo.

Veinte instancias con nombre

La fuente nombra diez pesos, de Thin 100 a ExtraBlack 1000, cada uno con una instancia inclinada tipo cursiva; los anchos y el resto de los ajustes se alcanzan mediante los ejes.

Los ejes paramétricos usan etiquetas en mayúsculas

XOPQ, YOPQ, XTRA, YTUC, YTLC, YTAS, YTDE y YTFI se definen con font-variation-settings.

El peso supera 900

El eje de peso termina en 1000, más allá del Black 900 habitual.

Preguntas frecuentes

Colecciones con Roboto Flex

• Fuentes variables con eje de tamaño óptico

  Familias variables que se redibujan según el tamaño en que se componen: más robustas y abiertas en tamaños pequeños, más finas y ajustadas en tamaños grandes.

• Fuentes variables con ejes poco habituales

  Fuentes variables experimentales y expresivas con ejes personalizados: suavidad, rebote, informalidad, transformación, rotación, grado y más.

Fuentes similares

Otras familias de la misma clasificación, ordenadas por etiquetas de uso en común. Todas las fuentes sans serif