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:
| 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;
}
El soporte de estas propiedades es bueno actualmente.
