Cree una capa de texto y aplique una fuente variable desde el panel Carácter.
Última actualización el
17 jun. 2026
Obtenga más información sobre cómo trabajar con ejes de fuentes variables en After Effects, incluido cómo acceder a ellos, añadirlos como animadores de texto, usar selectores y más.
En esta página, encontrará lo siguiente:
Antes de empezar:
- Para instalar una fuente variable, busque archivos con extensiones como .ttf, .otf o .woff2. Muchas Adobe Fonts incluyen versiones variables (marcadas como “Variable”), y puede usar el filtro Tecnología de fuente para localizarlas rápidamente. También puede encontrar fuentes variables gratuitas a través de recursos como Google Fonts y otros repositorios de código abierto.
- Revise las prácticas recomendadas para diseñar con ejes de fuente variable, configurar animaciones de texto de manera eficiente y optimizar el flujo de trabajo de animación.
-
Al abrir el menú desplegable Fuente, puede usar el icono Mostrar fuentes variables para filtrar la lista y mostrar solo las fuentes que exponen ejes variables.
Usa el filtro Mostrar fuentes variables en el menú Fuente para mostrar solo fuentes variables.
Usa el filtro Mostrar fuentes variables en el menú Fuente para mostrar solo fuentes variables. -
Selecciona la Capa de texto, luego en el panel Propiedades bajo la sección Texto, selecciona el icono Fuente Variable para abrir un elemento emergente que muestra todos los ejes disponibles para la fuente actual.
Use el icono de Fuente variable para mostrar todos los ejes disponibles para la fuente seleccionada.
Use el icono de Fuente variable para mostrar todos los ejes disponibles para la fuente seleccionada. -
El elemento emergente mostrará lo siguiente para que ajuste el valor usando el control de desplazamiento:
- Nombre del eje: nombre descriptivo. Por ejemplo, Peso y Anchura.
- Valor actual: el valor actual del eje.
Ajuste el valor del eje usando el control de desplazamiento para trabajar con el grosor, la anchura u otras propiedades variables de la fuente.
Ajuste el valor del eje usando el control de desplazamiento para trabajar con el grosor, la anchura u otras propiedades variables de la fuente. Si tiene texto seleccionado (en modo de edición de texto), los ejes muestran valores para los caracteres seleccionados, y si no hay nada seleccionado, los ejes muestran valores para el primer carácter. Los valores mixtos en la selección mostrarán el rango o indicarán la variación
-
Arrastre hacia la izquierda o hacia la derecha sobre los números de los valores para ajustarlos y obtener una vista previa de los cambios al instante en el panel Composición. Alternativamente, puede seleccionar el valor para acceder al modo de escritura, escribir el número deseado y pulsar Intro para aplicarlo.
Cada eje tiene un valor mínimo y máximo definido por la fuente, y el desplazamiento o la escritura están limitados a rangos válidos. Puede pasar el puntero por encima del texto dinámico para ver el rango.
Al pasar el puntero por encima del texto dinámico se muestran los valores mínimo y máximo definidos por la fuente.
Al pasar el puntero por encima del texto dinámico se muestran los valores mínimo y máximo definidos por la fuente. -
Obtenga una vista previa de los cambios que se reflejan de inmediato en el panel Composición. Cuando los cambios de anchura o espaciado alteran el diseño, el texto se ajusta automáticamente.
Si desea hacer más pesada la primera letra de una palabra, crear variaciones de peso dentro de una sola palabra o diseñar ligaduras personalizadas o combinaciones de caracteres, las fuentes variables le permiten hacerlo.
-
Haga doble clic en la capa de texto para acceder al modo de edición de texto.
-
Seleccione los caracteres específicos que desea modificar y abra el elemento emergente Fuente variable en el panel Propiedades seleccionando el icono .
Use el icono de Fuente variable para mostrar todos los ejes disponibles para la fuente seleccionada.
Use el icono de Fuente variable para mostrar todos los ejes disponibles para la fuente seleccionada. -
Ajuste los valores del eje para que se apliquen solo a los caracteres seleccionados.
NotaSi no selecciona un carácter específico, los valores se aplicarán solo al primer carácter.
Los animadores de texto le permiten animar valores de eje a lo largo del tiempo y aplicarlos a rangos de caracteres específicos usando selectores. Hay múltiples formas de añadir animadores de eje.
- Uso del menú Capa de texto mientras edita texto
- Uso de Añadir animador en la línea de tiempo
- Uso del panel Propiedades
Uso del menú Capa de texto mientras edita texto
-
Haga doble clic en la Capa de texto para acceder al modo de edición.
-
Seleccione y resalte los caracteres para los que desea crear una animación. Si no selecciona ninguno, se aplicará a todos los caracteres.
-
Haga clic con el botón derecho en el texto resaltado en el panel Composición, luego seleccione Animar texto > Ejes de fuente variable > [Nombre del eje].
Resalte el texto en el panel Composición y use el menú Animar texto para ver los ejes de fuente variable disponibles.
Resalte el texto en el panel Composición y use el menú Animar texto para ver los ejes de fuente variable disponibles. -
Se crea un nuevo animador de texto con la Propiedad del eje seleccionado.
Uso de Añadir animador en la cronología
-
Seleccione la capa de texto del panel Línea de tiempo, expanda para mostrar el botón Animar.
-
Seleccione el botón Animar , elija Ejes de fuente variable > [Nombre del eje].
La opción Ejes de fuente variable debajo de Animar permite animar las propiedades de la fuente, como el grosor o la anchura.
La opción Ejes de fuente variable debajo de Animar permite animar las propiedades de la fuente, como el grosor o la anchura. -
Se crea automáticamente un nuevo animador con selector de rango.
Uso del panel Propiedades
-
Seleccione la capa de texto en el panel Línea de tiempo y vaya hasta el panel Propiedades.
-
Vaya a la sección Animación de texto y seleccione Añadir animador > Ejes de fuente variable > [Nombre del eje].
El botón Añadir animador está seleccionado en el panel Propiedades para aplicar controles de animación a las propiedades del texto.
El botón Añadir animador está seleccionado en el panel Propiedades para aplicar controles de animación a las propiedades del texto. -
Se añade un nuevo animador con selector de rango.
Cuando se añade un nuevo animador, After Effects crea un nuevo grupo Animador de texto que incluye la propiedad Eje de fuente y Selector de rango, con el valor inicial establecido en el valor del eje actual de los caracteres seleccionados.
Cuando añade un animador de eje de fuente variable, After Effects crea la siguiente jerarquía:
Fotogramas clave de valores de eje
-
Mueva el indicador de la hora actual (CTI) hasta la hora deseada en el panel Línea de tiempo.
-
Seleccione el icono cronómetro junto a la Propiedad del eje para crear el primer fotograma clave en el Valor actual.
-
Mueva el CTI al nuevo tiempo y use el desplazamiento o la entrada manual para cambiar el Valor del eje para crear un nuevo fotograma clave.
Añada fotogramas clave para la Propiedad Grosor del eje de fuente de la Capa de texto para animar cambios de grosor a lo largo del tiempo.
Añada fotogramas clave para la Propiedad Grosor del eje de fuente de la Capa de texto para animar cambios de grosor a lo largo del tiempo.
Ejemplos de animación
Pruebe estos ejemplos si está trabajando con ejes individuales:
|
Ejemplo |
Cambios de tiempo y valor |
Resultado |
|---|---|---|
|
Transición de grosor suave |
|
El texto se vuelve gradualmente más grueso |
|
Efecto de compresión de anchura |
|
El texto se comprime y luego vuelve |
|
Animación con inclinación o cursiva |
|
El texto se inclina hacia el estilo cursiva |
Puede añadir múltiples animadores de ejes a la misma capa de texto añadiendo el primer eje, como Grosor, luego el segundo eje, como Anchura, y el tercer eje, como Inclinación, y estableciendo los fotogramas clave de cada uno de manera independiente o conjunta. Pruebe los siguientes ejemplos para combinar múltiples ejes:
|
Ejemplo |
Cambios de tiempo y valor |
Resultado |
|---|---|---|
|
Animación de logotipo dinámico |
Animador 1: grosor del eje de fuente
Animador 2: anchura del eje de fuente
|
El texto se vuelve grueso y ancho simultáneamente |
La propiedad Espaciado de fuente variable controla cómo After Effects ajusta el espaciado entre caracteres cuando anima los ejes de fuente, como grosor o anchura.
Cuando anima los ajustes de la fuente, como grosor o anchura, las letras pueden volverse más anchas o más estrechas. After Effects puede ajustar automáticamente el espaciado entre letras para mantener un aspecto ordenado; esta configuración le permite elegir cuándo y cómo se aplican esos ajustes de espaciado.
-
Expanda el grupo de Propiedad Texto de su capa de texto.
-
Añada un eje de fuente variable para animar.
-
En la sección Más opciones, use el menú desplegable Espaciado de fuente variable para seleccionar entre las siguientes opciones:
- Adaptable: Aplica compensación de espacio entre caracteres por carácter cuando sea apropiado para mantener el espaciado natural a medida que cambien los ejes de la fuente.
- Por carácter: Siempre aplica compensación de seguimiento por carácter.
- Predeterminado: Desactiva completamente la compensación de seguimiento por carácter. Los caracteres mantienen su espaciado original a pesar de los cambios en el eje de la fuente. Útil para efectos creativos donde desea que los cambios naturales de ancho de la fuente afecten el diseño general del texto.
Los selectores controlan cuáles son los caracteres a los que afecta un animador y cuánto. Los animadores de eje de fuente variable funcionan con todos los tipos de selector.
Selector de rango (predeterminado)
El Selector de rango define un rango continuo de caracteres para animar. Estas son algunas de las propiedades clave:
|
Propiedad |
Descripción |
Valores |
|---|---|---|
|
Inicio y Fin |
Define qué caracteres se ven afectados |
0% – 100% (o basado en Índice/unidades)
|
|
Desplazamiento |
Desplaza el rango a lo largo del texto y al animarlo crea efectos “móviles” |
Valores: -∞ a +∞ |
|
Cantidad |
Controla la intensidad del efecto |
0% – 100%
|
Estos son algunos ejemplos que puede probar:
|
Ejemplo |
Configuración del eje de fuente |
selector de rango |
Fotogramas clave |
Resultado |
|---|---|---|---|---|
|
Efecto barrido de grosor |
Grosor: 900 (Negro) |
|
Final con fotogramas clave del 0% al 100% |
El grosor en negrita “pinta” el texto de izquierda a derecha |
|
Onda de anchura móvil |
Ancho: 150% (Expandido) |
|
Desplazamiento animado a lo largo del tiempo |
La anchura expandida se desplaza por el texto |
Forma y suavizado
|
Propiedad |
Opciones |
Descripción |
|---|---|---|
|
Forma |
Cuadrado |
Borde duro entre caracteres afectados y no afectados |
|
Forma |
Pendiente hacia arriba |
Incremento gradual hacia el rango |
|
Forma |
Disminución gradual |
Reducción gradual fuera del rango |
|
Forma |
Triángulo |
Entrada y salida gradual |
|
Forma |
Circular |
Curva de campana suave |
|
Forma |
Suavizado |
Transiciones muy graduales |
|
Suavizado |
Suavizado alto |
Transiciones muy graduales |
|
Suavizado |
Suavizado bajo |
Transiciones más marcadas |
Aquí tienes un ejemplo que puedes probar:
|
Ejemplo |
Configuración del eje de fuente |
selector de rango |
Configuración adicional |
Resultado |
|---|---|---|---|---|
|
Degradado de peso suavizado |
Grosor del eje de fuente: 900 |
|
|
El texto comienza en negrita y se aclara gradualmente hasta el peso base |
Selector de ondulación
Aplica variaciones aleatorias a los valores del eje por carácter. Estas son algunas de las propiedades clave:
|
Propiedad |
Descripción |
Resultados |
|---|---|---|
|
Cantidad máx. y cantidad mín. |
Variación máxima y mínima respecto al valor base |
Crea fluctuación aleatoria por carácter |
|
Ondulaciones/segundos |
Qué tan rápido cambian los valores aleatorios |
Más alto significa un movimiento más frenético |
|
Correlación |
Qué tan relacionados están los caracteres vecinos |
|
|
Fase temporal |
Crea aleatoriamente un desfase temporal por carácter |
Añade variación en el tiempo |
Estos son algunos ejemplos que puede probar:
|
Ejemplo |
Configuración del eje de fuente |
Configuración del selector de ondulación |
Configuración adicional |
Resultado |
|---|---|---|---|---|
|
Efecto del grosor irregular |
Peso: 400 (Normal) |
|
|
El peso de cada carácter fluctúa aleatoriamente de forma independiente |
|
Anchura de respiro |
Ancho: 100% (Normal) |
|
El texto se expande/contrae suavemente en ondas |
Selector de expresión
Permite un control preciso y matemático sobre qué caracteres se ven afectados mediante expresiones JavaScript. Cantidad es la propiedad clave:
- La expresión devuelve un valor que controla la intensidad del efecto por carácter
- Puede acceder al índice de caracteres, posición, tiempo y otros más
Estos son algunos ejemplos que puede probar:
|
Ejemplo |
Expresión (Cantidad) |
Eje del animador |
Resultado |
|---|---|---|---|
|
Peso basado en la posición del carácter |
// En la Propiedad Cantidad del selector de expresión: linear(textIndex, 1, textTotal, 0, 100) |
|
Degradado lineal con el primer carácter más claro y el último carácter más en negrita |
|
Inclinación oscilante |
// En la Propiedad Cantidad del selector de expresión: Math.sin(time * 3 + textIndex * 0.5) * 50 + 50 |
|
Las ondas de inclinación se desplazan a través del texto en un patrón sinusoidal |
A continuación se muestran algunas de las variables de expresión más habituales, junto con muchas otras disponibles en After Effects:
- textIndex - Índice del carácter actual (basado en 1)
- textTotal - Número total de caracteres
- time - hora de composición actual
Puede añadir múltiples selectores a un solo animador para efectos complejos.
-
Expanda el animador en el panel Cronología.
-
Seleccione el menú desplegable Añadir ubicado junto al nombre del animador.
-
Seleccione el tipo de selector entre las siguientes opciones disponibles:
- Selector de rango
- Selector de ondulación
- Selector de expresión
Se añade un nuevo selector y se combina con los selectores existentes. Los ajustes a los valores de Cantidad se multiplican entre sí. Por ejemplo, un Selector de rango al 50 % multiplicado por un Selector de ondulación al 80 % produce un efecto final del 40 %, lo que permite transiciones suaves entre las capas con variaciones aleatorias.
Aquí tiene un ejemplo que puede probar para lograr una onda suave con variación, que combina un Selector de rango y un Selector de ondulación para crear un efecto de onda negrita con una variación aleatoria sutil.
|
Componente |
Ajustes |
|---|---|
|
Animación 1 |
|
|
Selector de gama 1 |
|
|
Selector de ondulación 1 |
|
crear efectos diferentes en rangos de caracteres diferentes. Aquí hay dos ejemplos:
|
Ejemplo |
Configuración del animador |
Configuración del selector |
|---|---|---|
|
Primera letra negrita, resto normal |
Peso del eje de fuente: 900 (Negro) |
Selector de rango:
|
|
Peso alternado |
Animador 1 (caracteres impares):
Animador 2 (caracteres pares):
|
Dos selectores de expresión que controlan caracteres impares/pares |
Use expresiones para vincular valores de eje a otras propiedades de animación. Aquí tiene dos ejemplos que puede considerar:
1. Grosor basado en la posición crea cambios de grosor del texto basados en la posición vertical de la capa.
// En la Propiedad Peso del eje de fuente: linear(transform.position[1], 0, thisComp.height, 300, 900)
2. Anchura responde al audio crea reacciones de la anchura del grosor de texto a la amplitud de audio.
// En la Propiedad Ancho del eje de fuente: audioLevel = thisComp.layer("Audio Layer").audio.audioLevels; linear(audioLevel[0], -48, 0, 75, 150)
Cuando una capa de texto contiene múltiples fuentes (formato mixto). En Animadores de texto:
- El animador aplica cambios de eje por carácter basándose en la fuente de cada carácter
- Si la fuente de un carácter no tiene el eje, ese carácter no se ve afectado
- Los selectores de rango siguen teniendo como objetivo rangos de caracteres, pero el efecto varía según la fuente
Este es un ejemplo sencillo:
- Texto: "Hello" (fuentes mixtas)
- "He" usa VariableFont A (tiene eje Weight)
- "llo" usa VariableFont B (sin eje Weight)
- Animador: grosor del eje de fuente: 900
- Resultado: "He" se vuelve negrita, "llo" sin cambios
