Ajustes en tipografías

Dentro de la familia principal font-* de propiedades CSS para tipografías, se encuentran algunas propiedades que, aunque no se suelen utilizar tanto, permiten ajustar ciertas características de las fuentes en nuestras páginas.

Vamos a echar un vistazo y ver como funcionan.

La propiedad `font-stretch`

Mediante esta propiedad podemos definir el grado de compactación o expansión de los carácteres de la tipografía, desde valores muy condensados (para ocupar menos espacio) a valores muy expandidos (para ocupar más espacio):

Propiedad	Valor	Nivel de compactación
`font-stretch`	`ultra-condensed` \| `extra-condensed` \| `condensed` \| `semi-condensed`	Indica compactación alta.
`font-stretch`	normal	Compactación normal. Valor por defecto.
`font-stretch`	`semi-expanded` \| `expanded` \| `extra-expanded` \| `ultra-expanded`	Indica expansión alta.
`font-stretch`		Indica un tamaño específico.

Como se puede ver en la última opción, se puede especificar el tamaño específico (por ejemplo en porcentajes). Recuerda que para que la propiedad font-stretch funcione correctamente, la tipografía seleccionada debe poseer una versión «condensada» o «expandida» en su diseño, para así poderla aplicar. De lo contrario, no se observarán resultados.

La propiedad `font-size-adjust`

Con la propiedad font-size-adjust podemos ajustar el tamaño de la tipografía indicando la diferencia de tamaño entre la x minúscula y la X mayúscula. Con esta característica, podemos conseguir reducir la proporción de tamaño entre mayúsculas y minúsculas de nuestros textos, si consideramos que no es adecuada:

La propiedad de ajuste de texto: font-size-adjust

Propiedad	Valor	Significado
`font-size-adjust`	none \|	Ajusta el aspecto de los carácteres. Es la diferencia de tamaño entre `x` y `X`.

Por defecto, el valor de esta propiedad es none, que establece el tamaño indicado por el diseñador de la tipografía. Ojo a la compatibilidad, ya que es una característica que aún no ha sido soportada ampliamente:

Ajustes de carácteres inexistentes

Muchas tipografías tienen incluidos pesos para renderizar estilos en negrita, oblique o versalitas, pero muchas otras tipografías no lo tienen. El navegador, por defecto, suele «inventar» o «sintetizar» estos estilos para que, aunque no estén diseñados, pueda renderizarlos en el navegador.

Sin embargo, en algunas ocasiones puede que no se vean adecuadamente. Con las siguientes propiedades se puede desactivar la creación de estas versiones sintetizadas:

Propiedad	Valor	Significado
`font-synthesis-weight`	auto \| `none`	Indica si el navegador debe «inventar» pesos inexistentes.
`font-synthesis-style`	auto \| `none`	Indica si el navegador debe «inventar» estilos oblique inexistentes.
`font-synthesis-small-caps`	auto \| `none`	Indica si el navegador debe «inventar» estilos versalitas inexistentes.
`font-synthesis`	`weight` `style` `small-caps`	Propiedad de atajo. Se indican los valores que se pueden «inventar».

Algunos ejemplos del uso de estas propiedades en fragmento de código CSS:

.text-container {
  /* Desactiva pesos, cursivas y activa versalitas */
  font-synthesis-weight: none;
  font-synthesis-style: none;
  font-synthesis-small-caps: auto;

  /* Activa pesos, cursivas y versalitas */
  font-synthesis: weight style small-caps;
}