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

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.

How these were chosen: Familias variables cuyas fichas listan un eje de tamaño óptico (opsz) con un rango utilizable; los rangos y los ejes complementarios se citan tal como constan en las fichas.

## Fonts (16)

- [Inter](https://trendhub.net/es/fonts/inter.markdown) (Sans Serif, 18 estilos · variable, OFL): 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](https://trendhub.net/es/fonts/dm-sans.markdown) (Sans Serif, 18 estilos · variable, OFL): Tamaño óptico de 9 a 40 en una sans geométrica de bajo contraste.
- [Merriweather](https://trendhub.net/es/fonts/merriweather.markdown) (Serif, 14 estilos · variable, OFL): Una serif de texto cuyo tamaño óptico va de 18 a 144, con ejes de peso y ancho.
- [Bricolage Grotesque](https://trendhub.net/es/fonts/bricolage-grotesque.markdown) (Sans Serif, 7 estilos · variable, OFL): Tamaño óptico de 12 a 96, con trampas de tinta exageradas en el extremo pequeño, junto a peso y ancho.
- [Nunito Sans](https://trendhub.net/es/fonts/nunito-sans.markdown) (Sans Serif, 16 estilos · variable, OFL): 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](https://trendhub.net/es/fonts/source-serif-4.markdown) (Serif, 16 estilos · variable, OFL): Tamaño óptico de 8 a 60 en una serif de transición, con ocho pesos y cursivas.
- [Newsreader](https://trendhub.net/es/fonts/newsreader.markdown) (Serif, 14 estilos · variable, OFL): Un eje de tamaño óptico de 6 a 72, con pesos de 200 a 800.
- [Literata](https://trendhub.net/es/fonts/literata.markdown) (Serif, 16 estilos · variable, OFL): A reading serif with optical size from 7 to 72, eight weights and italics.
- [Playfair](https://trendhub.net/es/fonts/playfair.markdown) (Serif, 14 estilos · variable, OFL): The widest optical range here, 5 to 1200, in a serif that also varies in weight and width.
- [Fraunces](https://trendhub.net/es/fonts/fraunces.markdown) (Serif, 18 estilos · variable, OFL): Tamaño óptico de 9 a 144 junto a los ejes de peso, Softness y Wonky.
- [Bodoni Moda](https://trendhub.net/es/fonts/bodoni-moda.markdown) (Serif, 12 estilos · variable, OFL): Una serif de alto contraste cuyo tamaño óptico va de 6 a 96.
- [Roboto Serif](https://trendhub.net/es/fonts/roboto-serif.markdown) (Serif, 18 estilos · variable, OFL): Optical size from 8 to 144 among four axes, with weight, width and grade, and 18 named styles.
- [Roboto Flex](https://trendhub.net/es/fonts/roboto-flex.markdown) (Sans Serif, 20 estilos · variable, OFL): El tamaño óptico de 8 a 144 es uno de los 13 ejes de un solo archivo.
- [Pathway Extreme](https://trendhub.net/es/fonts/pathway-extreme.markdown) (Sans Serif, 18 estilos · variable, OFL): Optical size from 8 to 144 in a grotesque sans, beside weight and width axes.
- [TikTok Sans](https://trendhub.net/es/fonts/tiktok-sans.markdown) (Sans Serif, 14 estilos · variable, OFL): Optical size from 12 to 36 with weight, width and slant, four axes in a single file.
- [Hedvig Letters Serif](https://trendhub.net/es/fonts/hedvig-letters-serif.markdown) (Serif, 1 estilo · variable, OFL): A single-weight brand serif whose only axis is optical size, from 12 to 24.

## FAQs

### ¿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.

## Related collections

- [Fuentes variables con eje de anchura](https://trendhub.net/es/fonts/for/variable-fonts-with-a-width-axis.markdown)
- [Fuentes variables con ejes poco habituales](https://trendhub.net/es/fonts/for/variable-fonts-with-unusual-axes.markdown)
- [Fuentes serif para lecturas largas en pantalla](https://trendhub.net/es/fonts/for/serif-fonts-for-long-reading.markdown)
- [Fuentes Didone de alto contraste para moda y titulares editoriales](https://trendhub.net/es/fonts/for/high-contrast-didone-fonts.markdown)
- [Fuentes para periódicos y revistas](https://trendhub.net/es/fonts/for/newspaper-and-magazine-fonts.markdown)
- [Fuentes sans serif limpias para interfaces de apps](https://trendhub.net/es/fonts/for/app-interface-fonts.markdown)

---

Source: https://trendhub.net/es/fonts/for/variable-fonts-with-optical-size (trendhub)
