Propiedades avanzadas

En CSS existen múltiples propiedades relacionadas con las tipografías. Las que veremos en esta sección se trata de algunas propiedades específicas para controlar la forma en la que se ven o aparecen las tipografías en la página.

Compactación de la tipografía

Con la propiedad font-stretch 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):

También se puede especificar el tamaño, 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» para así poderla aplicar.

Ajuste de tamaño

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:

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 está en fase experimental:

Modo de aparición

La propiedad font-display nos brinda un mecanismo muy interesante para determinar como queremos que se comporte la tipografía al cargar la página. Cuando cargamos una página con una tipografía que no se encuentra instalada, el navegador debe descargar la tipografía y activarla, tarea que no ocurre instantáneamente, ya que depende de nuestra conexión, del tamaño de la fuente y del sistema utilizado.

En el instante anterior a descargar la tipografía pueden ocurrir varias cosas:

• FOIT (Flash of Invisible Text): El texto permanece oculto (invisible) al usuario hasta que la tipografía deseada se ha descargado y puede visualizarse.
• FOUT (Flash of Unstyled Text): El texto permanece sin estilo (con otra tipografía diferente) hasta que la tipografía deseada se ha descargado y puede visualizarse.

Dependiendo del valor de la propiedad font-display podemos modificar dicho comportamiento:

Veamos que ocurre con cada uno de los valores indicados (si la tipografía no está descargada):

• auto: El valor por defecto de la propiedad. El navegador decide que comportamiento aplicar, que suele ser FOIT. Cómo desventaja, en algunos navegadores o situaciones, el tiempo de FOIT puede llegar a ser considerablemente alto.

• block: El navegador mantiene el texto invisible (FOIT) un corto periodo de tiempo, cambiando a modo swap desde que la tipografía deseada está cargada. Se aconseja usar especialmente en pequeños fragmentos de texto como titulares.

• swap: El navegador muestra inmediatamente el texto con la siguiente tipografía de la lista font-family durante un cortísimo periodo de tiempo, mostrando la tipografía deseada desde que está cargada. Se aconseja usar especialmente en pequeños fragmentos de texto como titulares.

• fallback: El navegador muestra el texto con la siguiente tipografía de la lista font-family durante un cortísimo periodo de tiempo, mostrando la tipografía deseada desde que está cargada. La diferencia respecto al modo anterior es que si pasa demasiado tiempo sin que la tipografía se cargue, se utiliza de forma definitiva la alternativa que se estaba usando. Apropiada para usar en fragmentos largos de texto.

• optional: El navegador considera opcional el uso de la tipografía deseada si tarda demasiado o cree que hay algún problema en la descarga, utilizando la siguiente tipografía de la lista font-family.