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 | Compactación alta. |
font-stretch | normal | Compactación normal (Por defecto). |
font-stretch | semi-expanded | expanded | extra-expanded | ultra-expanded | 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.
La propiedad font-synthesis
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 | El navegador debe «inventar» pesos inexistentes. |
font-synthesis-style | auto | none | El navegador debe «inventar» estilos oblique inexistentes. |
font-synthesis-small-caps | auto | none | El navegador debe «inventar» estilos versalitas inexistentes. |
font-synthesis | weight style small-caps | Propiedad de atajo. Indica 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;
}
