Article

Exploring Google Sans Flex

A practical look at Google Sans Flex, the variable version of Google's brand typeface, with a playground for optical size, width, weight, grade, roundness, and slant.

Why Flex Matters

Google Sans Flex is interesting because it is not just a font family with a few fixed weights. It is a variable font: one font file can interpolate between many shapes. Google describes Flex as a typeface with granular control over six design axes, which means the same voice can become quieter, denser, rounder, wider, or more display-oriented without leaving the family.

That matters for interface design. A headline, a label, a badge, and a paragraph usually want different typographic behavior, but a product still benefits when they feel related. Variable axes give the designer a continuum instead of a small menu of disconnected styles.

The Axes

The current variable web font used in this article exposes these six axes. The registered axes use lowercase tags; custom axes use uppercase tags.

Optical size

opsz

Range 6-144

Adapts the drawing for caption-sized text, normal interface text, or large display typography.

Width

wdth

Range 25-151

Compresses or expands the letters while keeping the same underlying type family.

Weight

wght

Range 1-1000

Moves from extremely light strokes to heavy display weight.

Grade

GRAD

Range 0-100

Adds stroke strength without changing layout as aggressively as weight.

Roundness

ROND

Range 0-100

Softens terminals and corners, which shifts the voice from technical to friendlier.

Slant

slnt

Range -10-0

Leans the letters into an oblique style without switching to a separate italic file.

Motion Specimen

This interactive specimen is an ongoing effort to recreate the fluid motion choreography seen in official Google Sans Flex demonstrations. It uses live text to interpolate across multiple variable axes--including weight, width, and roundness--simultaneously.

Motion specimen

Oh,hi!I'mFlex

01234!

Abc

Playground

Change the sample text and move the sliders. The preview updates the same CSS font-variation-settings values that a production UI would use for a custom typographic tone.

Interactive specimen

Google Sans Flex Variable

Useful interfaces are quiet, responsive, and expressive without shouting.

Using The Settings

In CSS, the axis tags are passed through font-variation-settings. Weight, width, and slant also map to higher-level CSS properties, but keeping the full axis list together is useful when a small specimen or design token needs to preserve every adjustment explicitly.

font-family: "Google Sans Flex Variable", sans-serif;
font-optical-sizing: none;
font-variation-settings:
  "opsz" 18,
  "wdth" 100,
  "wght" 400,
  "GRAD" 0,
  "ROND" 0,
  "slnt" 0;

This site self-hosts the full variable face through Fontsource so the playground can move every axis. The global page text also uses the same variable family, while the component turns off automatic optical sizing so the opsz slider remains manual.

References

  1. Google Design, Making Google Sans Flex. design.google.
  2. Google Fonts, Google Sans Flex specimen. fonts.google.com.
  3. Google Fonts, animated Google Sans Flex specimen video. fonts.gstatic.com.
  4. Fontsource, Google Sans Flex Variable package. fontsource.org.

Artículo

Explorando Google Sans Flex

Una mirada práctica a Google Sans Flex, la versión variable de la tipografía de marca de Google, con un playground para tamaño óptico, ancho, peso, grado, redondez e inclinación.

Por qué Flex importa

Google Sans Flex es interesante porque no es simplemente una familia tipográfica con algunos pesos fijos. Es una fuente variable: un solo archivo puede interpolar entre muchas formas. Google describe Flex como una tipografía con control granular sobre seis ejes de diseño, lo que permite que la misma voz se vuelva más silenciosa, densa, redonda, ancha o display sin salir de la familia.

Eso importa para el diseño de interfaces. Un título, una etiqueta, una insignia y un párrafo suelen necesitar comportamientos tipográficos distintos, pero un producto se beneficia cuando todos se sienten relacionados. Los ejes variables le dan al diseñador un continuo en lugar de un menú pequeño de estilos desconectados.

Los ejes

La fuente web variable usada en este artículo expone estos seis ejes. Los ejes registrados usan tags en minúscula; los ejes personalizados usan tags en mayúscula.

Tamaño óptico

opsz

Rango 6-144

Adapta el dibujo para texto de caption, texto normal de interfaz o tipografía display de gran tamaño.

Ancho

wdth

Rango 25-151

Comprime o expande las letras manteniendo la misma familia tipográfica de base.

Peso

wght

Rango 1-1000

Se mueve desde trazos extremadamente livianos hasta un peso display pesado.

Grado

GRAD

Rango 0-100

Agrega fuerza al trazo sin cambiar el layout de forma tan agresiva como el peso.

Redondez

ROND

Rango 0-100

Suaviza terminales y esquinas, desplazando la voz desde técnica hacia más amigable.

Inclinación

slnt

Rango -10-0

Inclina las letras hacia un estilo oblicuo sin cambiar a un archivo italic separado.

Espécimen en movimiento

Este espécimen interactivo es un intento en curso de recrear la coreografía fluida que se ve en demostraciones oficiales de Google Sans Flex. Usa texto vivo para interpolar varios ejes variables a la vez--incluyendo peso, ancho y redondez.

Espécimen en movimiento

Oh,hi!I'mFlex

01234!

Abc

Playground

Cambiá el texto de muestra y mové los sliders. La vista previa actualiza los mismos valores CSS de font-variation-settings que una UI de producción usaría para definir un tono tipográfico propio.

Espécimen interactivo

Google Sans Flex Variable

Las interfaces útiles son silenciosas, responsivas y expresivas sin gritar.

Uso de los settings

En CSS, los tags de los ejes se pasan mediante font-variation-settings. Peso, ancho e inclinación también se mapean a propiedades CSS de más alto nivel, pero mantener la lista completa de ejes junta es útil cuando un espécimen pequeño o un token de diseño necesita preservar todos los ajustes explícitamente.

font-family: "Google Sans Flex Variable", sans-serif;
font-optical-sizing: none;
font-variation-settings:
  "opsz" 18,
  "wdth" 100,
  "wght" 400,
  "GRAD" 0,
  "ROND" 0,
  "slnt" 0;

Este sitio self-hostea la cara variable completa mediante Fontsource para que el playground pueda mover todos los ejes. El texto global de la página también usa la misma familia variable, mientras que el componente desactiva el optical sizing automático para que el slider opsz siga siendo manual.

Referencias

  1. Google Design, Making Google Sans Flex. design.google.
  2. Google Fonts, Google Sans Flex specimen. fonts.google.com.
  3. Google Fonts, animated Google Sans Flex specimen video. fonts.gstatic.com.
  4. Fontsource, Google Sans Flex Variable package. fontsource.org.