# 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. El formato de fuente variable permite que cualquier propiedad de un diseño se convierta en un eje. Cinco están registrados y son comunes: peso, ancho, inclinación, cursiva y tamaño óptico. Más allá de esos, un diseñador puede inventar un eje para lo que la tipografía pueda variar de forma significativa y darle una etiqueta de cuatro letras en mayúsculas. Esa libertad ha producido en los últimos años tipografías muy ingeniosas. Los ejes personalizados se reparten en unos pocos grupos. Los paramétricos controlan una característica medible, como el grosor de los trazos finos o la altura de las minúsculas, y son herramientas para el ajuste tipográfico fino. El grado cambia lo pesado que parece el texto sin modificar su ancho, de modo que las líneas no se reajustan, lo que resulta útil en el modo oscuro. Los expresivos cambian la personalidad de las letras: esquinas más suaves, un temblor informal, un rebote a lo largo de la línea de base, remates parecidos a serifas. Y algunos ejes son puro concepto, y atan la forma de las letras a datos o las giran en el espacio. En CSS, todo eje personalizado se fija con font-variation-settings, usando su etiqueta y un número. Como son continuos, los ejes pueden animarse o vincularse al desplazamiento y a la entrada del usuario. Las notas siguientes nombran los ejes propios de cada fuente tal como constan. How these were chosen: Familias variables cuyas fichas listan al menos un eje personalizado además de los registrados de peso, ancho, inclinación, cursiva y tamaño óptico. ## Fonts (16) - [Recursive](https://trendhub.net/es/fonts/recursive.markdown) (Sans Serif, 16 estilos · variable, OFL): Five axes in one file: proportional to monospace, linear to casual, upright to cursive. - [Fraunces](https://trendhub.net/es/fonts/fraunces.markdown) (Serif, 18 estilos · variable, OFL): Ejes Softness y Wonky junto con peso y tamaño óptico. - [Roboto Flex](https://trendhub.net/es/fonts/roboto-flex.markdown) (Sans Serif, 20 estilos · variable, OFL): 13 ejes, incluidos controles paramétricos para el grosor de los trazos y la altura de las letras. - [Google Sans Flex](https://trendhub.net/es/fonts/google-sans-flex.markdown) (Sans Serif, 18 estilos · variable, OFL): Seis ejes: peso, ancho, tamaño óptico, grado, redondez e inclinación. - [Commissioner](https://trendhub.net/es/fonts/commissioner.markdown) (Sans Serif, 18 estilos · variable, OFL): Flare and Volume axes grow serif-like endings on a humanist sans. - [Geologica](https://trendhub.net/es/fonts/geologica.markdown) (Sans Serif, 18 estilos · variable, OFL): Cursive and Sharpness axes beside weight and slant. - [Shantell Sans](https://trendhub.net/es/fonts/shantell-sans.markdown) (Manuscritas, 12 estilos · variable, OFL): Bounce, Informality and Spacing axes on a marker-style handwriting font. - [Nunito Sans](https://trendhub.net/es/fonts/nunito-sans.markdown) (Sans Serif, 16 estilos · variable, OFL): Un eje de altura de minúscula junto a peso, ancho y tamaño óptico. - [Science Gothic](https://trendhub.net/es/fonts/science-gothic.markdown) (Sans Serif, 18 estilos · variable, OFL): A custom contrast axis thins the horizontal strokes, beside weight, width and slant. - [Signika](https://trendhub.net/es/fonts/signika.markdown) (Sans Serif, 5 estilos · variable, OFL): A Grade axis, from -30 to 0, slightly thins the strokes for light-on-dark text, beside weight. - [Kumbh Sans](https://trendhub.net/es/fonts/kumbh-sans.markdown) (Sans Serif, 9 estilos · variable, OFL): A parametric axis changes the thickness of the thin strokes alone, beside weight. - [Akshar](https://trendhub.net/es/fonts/akshar.markdown) (Sans Serif, 5 estilos · variable, OFL): Weight and contrast axes in a condensed sans for Latin and Devanagari. - [AR One Sans](https://trendhub.net/es/fonts/ar-one-sans.markdown) (Sans Serif, 4 estilos · variable, OFL): A resolution axis for augmented reality displays that keeps letter widths, so text does not reflow, beside weight. - [Honk](https://trendhub.net/es/fonts/honk.markdown) (Display, 1 estilo · variable, OFL): Morph shifts the blocky letter shapes and Shadow Length extends a shadow behind them; there is no weight axis. - [Kablammo](https://trendhub.net/es/fonts/kablammo.markdown) (Display, 1 estilo · variable, OFL): A Morph axis makes its doodle-covered capitals shift and dance. - [Tilt Neon](https://trendhub.net/es/fonts/tilt-neon.markdown) (Display, 1 estilo · variable, OFL): Two axes rotate its neon-tube letters up to 45 degrees in X and Y. ## FAQs ### ¿Cómo uso un eje personalizado en CSS? Escribe font-variation-settings con la etiqueta del eje entre comillas y un valor, por ejemplo "SOFT" 100. Las etiquetas personalizadas distinguen entre mayúsculas y minúsculas y se escriben en mayúsculas. ### ¿Se pueden animar los ejes de las fuentes variables? Sí. Los valores de los ejes pueden hacer transiciones o animarse en CSS y controlarse con JavaScript, ya que son números continuos. ### ¿Para qué sirve un eje de grado? Hace que el texto parezca más ligero o más pesado sin cambiar el ancho de las letras, así que la maqueta no se desplaza. Los diseñadores lo usan para compensar los fondos oscuros o pantallas distintas. ## Related collections - [Fuentes variables con eje de anchura](https://trendhub.net/es/fonts/for/variable-fonts-with-a-width-axis.markdown) - [Fuentes variables con eje de tamaño óptico](https://trendhub.net/es/fonts/for/variable-fonts-with-optical-size.markdown) - [Fuentes display futuristas para títulos y logotipos de ciencia ficción](https://trendhub.net/es/fonts/for/futuristic-display-fonts.markdown) - [Fuentes pixel y arcade](https://trendhub.net/es/fonts/for/pixel-and-arcade-fonts.markdown) - [Fuentes manuscritas para notas, citas y toques personales](https://trendhub.net/es/fonts/for/handwriting-fonts.markdown) - [Familias tipográficas con nueve pesos y cursivas](https://trendhub.net/es/fonts/for/font-families-with-nine-weights.markdown) --- Source: https://trendhub.net/es/fonts/for/variable-fonts-with-unusual-axes (trendhub)