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.
Small print, big type
En la tipografía de metal cada cuerpo se tallaba por separado, y los grabadores de punzones ajustaban el diseño sobre la marcha. Los tamaños pequeños se hacían más anchos y robustos, con un espaciado más suelto, para que resistieran en la página; los grandes se refinaban, con filetes más finos y un ajuste más cerrado. Las fuentes digitales lo perdieron cuando un único contorno empezó a escalarse a todos los tamaños. El eje de tamaño óptico, con la etiqueta opsz, lo devuelve.
En una fuente con este eje, el valor corresponde normalmente al tamaño en puntos. Con un valor bajo, las letras tienen una altura de x mayor, trazos finos más gruesos y más espacio entre ellas. Con un valor alto, el contraste se acentúa y los detalles se vuelven delicados. En la práctica, una misma familia puede servir de tipografía de texto y de tipografía display, y un pie de foto sigue siendo legible sin verse pesado.
Los navegadores aplican el eje automáticamente: font-optical-sizing está en auto de forma predeterminada, de modo que una fuente con el eje se adapta al tamaño de letra sin código adicional. También puedes fijarlo a mano para usar a propósito el diseño display en tamaño pequeño o el diseño de texto en tamaño grande. Los rangos difieren mucho entre familias, desde un ajuste de solo unos pocos puntos para texto hasta un intervalo de más de mil, y las notas indican cada uno según consta.
-
Inter
El tamaño óptico de 14 a 32 ajusta una sans de pantalla para etiquetas pequeñas y titulares más grandes, junto con nueve pesos con cursivas.
-
DM Sans
Tamaño óptico de 9 a 40 en una sans geométrica de bajo contraste.
-
Merriweather
Una serif de texto cuyo tamaño óptico va de 18 a 144, con ejes de peso y ancho.
-
Bricolage Grotesque
Tamaño óptico de 12 a 96, con trampas de tinta exageradas en el extremo pequeño, junto a peso y ancho.
-
Nunito Sans
Un rango óptico para tamaños pequeños, de 6 a 12, entre cuatro ejes con peso, ancho y altura de minúscula.
-
Source Serif 4
Tamaño óptico de 8 a 60 en una serif de transición, con ocho pesos y cursivas.
-
Newsreader
Un eje de tamaño óptico de 6 a 72, con pesos de 200 a 800.
-
Literata
A reading serif with optical size from 7 to 72, eight weights and italics.
-
Playfair
The widest optical range here, 5 to 1200, in a serif that also varies in weight and width.
-
Fraunces
Tamaño óptico de 9 a 144 junto a los ejes de peso, Softness y Wonky.
-
Bodoni Moda
Una serif de alto contraste cuyo tamaño óptico va de 6 a 96.
-
Roboto Serif
Optical size from 8 to 144 among four axes, with weight, width and grade, and 18 named styles.
-
Roboto Flex
El tamaño óptico de 8 a 144 es uno de los 13 ejes de un solo archivo.
-
Pathway Extreme
Optical size from 8 to 144 in a grotesque sans, beside weight and width axes.
-
TikTok Sans
Optical size from 12 to 36 with weight, width and slant, four axes in a single file.
-
Hedvig Letters Serif
A single-weight brand serif whose only axis is optical size, from 12 to 24.
Las muestras cargan un subconjunto latino básico de cada familia. Todas las familias de esta página tienen licencia abierta; su página indica las condiciones y ofrece los archivos originales.
Preguntas sobre fuentes variables con eje de tamaño óptico
¿Qué cambia el tamaño óptico en una fuente?
El contraste de los trazos, el espaciado, la altura de x y los detalles finos. Los tamaños ópticos pequeños son más robustos y abiertos; los grandes son más afilados y están más ajustados.
¿Necesito escribir CSS para usar el tamaño óptico?
Normalmente no. Los navegadores ajustan el eje al tamaño de la fuente de forma automática. Para anularlo, escribe font-variation-settings: "opsz" seguido de un valor dentro del rango de la fuente.
¿Es mejor un eje de tamaño óptico o fuentes de texto y display separadas?
Logran lo mismo. El eje es más cómodo, cubre los tamaños intermedios y solo necesita un archivo.