Propiedad CSS font-kerning
La propiedad CSS font-kerning controla la información de interletraje de la fuente. Aprende sobre sus valores y prueba ejemplos.
La propiedad CSS font-kerning controla si el navegador utiliza la información de interletraje almacenada en una fuente.
El interletraje (kerning) es el ajuste del espacio entre pares específicos de caracteres para que el texto se vea equilibrado visualmente. Sin interletraje, cada glifo conserva su espacio lateral predeterminado, lo que puede dejar huecos incómodos después de letras como A, V, T o W. Los diseñadores tipográficos incluyen en la fuente una tabla de pares de interletraje (por ejemplo, AV, To, We) que indica al motor de renderizado que acerque esas letras entre sí. font-kerning decide si dicha tabla se aplica.
El interletraje trata exclusivamente del espacio entre glifos. No lo confundas con letter-spacing, que añade una cantidad fija de tracking a todos los caracteres independientemente del par.
Cuándo usarlo
En la mayoría de las páginas nunca necesitarás modificar font-kerning: los navegadores modernos habilitan el interletraje de forma predeterminada en el texto del cuerpo. Lo utilizarás en dos situaciones:
- Forzar el interletraje en texto pequeño. Algunos navegadores desactivan el interletraje por debajo de cierto tamaño por motivos de rendimiento. Establecer
font-kerning: normalhace que se aplique a todos los tamaños, lo cual es útil para tipografía refinada como encabezados o citas destacadas. - Desactivar el interletraje con
font-kerning: none. Esto es ocasionalmente necesario en maquetaciones monoespaciadas, datos tabulares, o cuando mides el ancho del texto tú mismo y deseas avances predecibles sin interletraje.
Si la fuente no tiene tabla de interletraje, la propiedad no tiene ningún efecto visible.
| Valor inicial | auto |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Herencia | Sí. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.fontKerning = "none"; |
Sintaxis
Sintaxis de la propiedad CSS font-kerning
font-kerning: auto | normal | none;Comparando interletraje activado y desactivado
Los pares AV, WA y To muestran el interletraje con mayor claridad. En el ejemplo siguiente, el primer bloque fuerza el interletraje activado y el segundo lo desactiva, para que puedas ver cómo crecen los huecos:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
font-family: serif;
font-size: 60px;
}
div.kerned {
font-kerning: normal;
}
div.unkerned {
font-kerning: none;
}
</style>
</head>
<body>
<h2>font-kerning property example</h2>
<div class="kerned">AVATAR WAVE To</div>
<div class="unkerned">AVATAR WAVE To</div>
</body>
</html>La diferencia es más notable a tamaños grandes y en fuentes serif, que suelen tener tablas de interletraje más completas.
Valores
font-kerning acepta una de tres palabras clave:
| Valor | Descripción |
|---|---|
auto | Permite al navegador decidir si aplica el interletraje. Este es el valor predeterminado. Los navegadores normalmente lo habilitan, pero pueden desactivarlo a tamaños muy pequeños. |
normal | Aplica siempre la información de interletraje de la fuente. |
none | Desactiva el interletraje; los glifos conservan su espaciado predeterminado. |
Propiedades relacionadas
font-kerning forma parte de los controles tipográficos OpenType en CSS. Estas propiedades funcionan bien junto a ella:
letter-spacing— añade o elimina espacio uniforme entre todas las letras.font-feature-settings— acceso de bajo nivel a las características OpenType (kernes la característica quefont-kerningexpone con un nombre más amigable).font-familyyfont-variant— elige y perfecciona la tipografía.
Comportamiento predeterminado del navegador
Como el valor inicial es auto, dejar la propiedad sin definir está bien para la mayoría del texto: el interletraje seguirá aplicándose. Establécela de forma explícita solo cuando necesites garantizar un comportamiento concreto en todos los navegadores, como font-kerning: normal en encabezados de gran tamaño.