7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Web Typography

El futuro de la tipografía web: Fuentes CSS Nivel 4

Scroll to top
Read Time: 10 mins

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Las fuentes web ayudaron a dar vida a los diseños, ayudándonos a evitar los valores predeterminados del sistema tan ampliamente utilizados durante los primeros días del diseño web. Con tantas opciones disponibles hoy en día, tenemos un montón de trucos bajo la manga con el fin de servir y aplicar estilo a las fuentes personalizadas. El nivel 4 del módulo de las fuentes CSS describe opciones más intrigantes que te encantarán, incluyendo algunas emocionantes propiedades como font-min/max-size. Este artículo no va a descubrir hasta la última migaja del nivel 4, pero resaltará las partes más interesantes que aún están en pañales. ¡La aventura comienza ahora!

El status quo

Actualmente estamos entre dos niveles de especificaciones. Por un lado tenemos el nivel 3; una especificación que ha estado en "Recomendación candidata" desde octubre de 2013. De cara al futuro tenemos el nivel 4; una especificación que ha permanecido en el estado "Working Draft" (Borrador de trabajo) desde julio de 2017. Si necesitas un recordatorio sobre el orden de las etapas de las especificaciones de W3C, tomemos un momento para revisarlas:

  1. Borrador de trabajo (WD): Publicado para su examen por la comunidad, incluidos los Miembros del W3C, el público y otras organizaciones técnicas. No representa un consenso del Grupo de Trabajo ni implica ninguna aprobación por parte de W3C.
  2. Recomendación candidata (CR): Ampliamente revisada y lista para su aplicación. No implica el respaldo de W3C. Le indica a la comunidad en general que es hora de llevar a cabo una revisión final.
  3. Recomendación propuesta (BP): Un informe técnico maduro enviado al Comité Asesor del W3C para su aprobación definitiva.
  4. Recomendación W3C (REC): Recibe el respaldo de los Miembros del W3C y del Director. Recomienda una amplia implementación de las directrices de la especificación.

Ahora que entendemos las etapas de especificación vamos a sumergirnos en las tripas del nivel 4 y sacar a la luz algunas de las nuevas características conocidas y documentadas pertenecientes a este módulo.

Módulo de fuentes Nivel 4

Partes del nivel 3 que se estandarizarán serán trasladadas al nivel 4, pero el nivel 4 también incluirá sus propias adiciones únicas. Secciones como Variaciones de fuentes, Controles de representación de fuentes, Compatibilidad con fuentes de color, Propiedades básicas de fuente y Recursos de fuente contendrán nuevos elementos que muchos desarrolladores encontrarán útiles.

Propiedades básicas de las fuentes

El tipo de fuente concreta representada viene determinado por la familia de fuentes (font-face) y otras propiedades de la fuente que se aplican a un elemento determinado, como font-weight y font-style, por ejemplo. Esta estructura permite que la configuración varíe independientemente entre una y otra y en lo que abarcan las Propiedades básicas de la fuente. Entonces, ¿qué está planeado para este grupo?

📌 font-min-size y font-max-size

 

De todo lo descrito en el nivel 4, estas dos propiedades son mis favoritas porque ambas permitirán que el tamaño de fuente (font-size) de un elemento quede "restringido" entre los valores proporcionados. Esta es sin duda una noticia supe rimpresionante para los fans del diseño responsivo. Los valores pueden ser un tamaño absoluto, un tamaño relativo o un porcentaje de longitud.

No hay ninguna documentación en este momento que cite cómo el evento de cambio de tamaño del navegador desencadena cualquiera de las propiedades, y si pretendes experimentar con esta función usando el indicador de características de la plataforma web experimental en Chrome no vas a tener suerte.

Recursos de fuente

La mayoría de los elementos descritos en esta sección ayudan a controlar aspectos relacionados con la obtención, referencia y visualización de la familia de fuentes de tu elección.

📌 font-display

 

Esta propiedad determina cómo se muestra una fuente, en función de si y cuándo se haya descargado y esté preparada para su uso por parte del explorador. También está diseñada para su uso dentro de la declaración @font-face o @font-feature-values.

  • auto: la directiva de visualización de fuentes está definida por el agente de usuario (es decir, el explorador) a menos que se defina explícitamente dentro de CSS.
  • block: proporciona al tipo de fuente un breve período de bloqueo (se recomiendan 3 s. en la mayoría de los casos) y un período de intercambio infinito.
  • swap: da al tipo de fuente un período de bloqueo de 0 s. y un período de intercambio infinito.
  • fallback: proporciona al tipo de fuente un período de bloqueo extremadamente pequeño (se recomiendan 100 ms. o menos en la mayoría de los casos) y un período de intercambio corto (se recomienda 3 s. en la mayoría de los casos).
  • optional: proporciona al tipo de fuente un período de bloqueo extremadamente pequeño (se recomiendan 100 ms. o menos en la mayoría de los casos) y un período de intercambio de 0 s.

Para cualquier persona que preste mucha atención al rendimiento de las fuentes web y que esté ocupado a diario debatiendose con el Flash de texto sin estilo (FOUT) o el Flash de texto invisible (FOIT), esta propiedad le dejará extremadamente satisfecho.

📌 @font-feature-values

 

Cuando se omite font-display en una regla @font-face, el agente de usuario utiliza el valor de visualización de fuentes (font-display) establecido a través de @font-feature-values para la familia de fuentes (font-family) relevante si se ha establecido uno, de lo contrario se establece de forma predeterminada font-display: auto. Consulta la explicación anterior con respecto a los valores de visualización de fuentes.

El conjunto de reglas es perfecto para los casos en que una fuente sea servida a través de un tercero y no tengas control sobre las reglas de @font-face, pero todavía puedas establecer una directiva de visualización de fuentes (font-display) predeterminada para la familia de fuentes proporcionada (font-family). Esta es una buena noticia para aquellos sitios de construcción con acción de terceros sin parar.

 

Aunque sigue siendo algo nuevo y un poco vago, solo puedo asumirlo para controlar un comportamiento de visualización de una familia de fuentes determinada, el desarrollador debe utilizar la propiedad font-family dentro de este conjunto de reglas para dirigirse a la fuente deseada. Una vez más, esto es solo una suposición de mi parte y no algo fáctico en ningún sentido.

Variaciones de fuentes

Esta sección es 100% nueva y específica para el nivel 4. La mayoría de las características documentadas actualmente pertenecen al tamaño y la configuración de cada tipo de fuente.

📌 font-optical-setting

Esta propiedad se utiliza con el fin de mantener rasgos estilísticos y mejorar la legibilidad en diferentes tamaños ópticos. Con el tipo digital tenemos la capacidad de escalar una fuente a cualquier tamaño, pero esto no tiene en cuenta la apariencia de tipo en estos tamaños variables.

"El texto que se representa en diferentes tamaños a menudo se beneficia de representaciones visuales ligeramente diferentes. Por ejemplo, para ayudar a leer en tamaños de texto pequeños, los trazos a menudo son más gruesos con serifas más grandes. El texto más grande a menudo tiene una figura más delicada con más contraste entre los trazos más gruesos y los delgados." ~ Borrador de trabajo del nivel 4“
 
  • auto: el agente de usuario puede modificar la forma de los glifos en función del tamaño de la fuente (font-size) y de la densidad de píxeles de la pantalla. Para las fuentes OpenType y TrueType que utilizan variaciones de fuente, esto se hace a menudo mediante la variación de fuente opsz.
  • none: el agente de usuario no debe modificar la forma de glifos para el tamaño óptico.

📌 font-variation-settings

Esta propiedad proporciona un control de bajo nivel sobre las variaciones de fuentes OpenType o TrueType. Está pensado como una forma de proporcionar acceso a variaciones de fuente que no son ampliamente utilizadas, pero son necesarias para un caso de uso en particular.

  • normal: el texto se establece utilizando la configuración predeterminada.
  • <string><number>: al representar texto, la lista de nombres de eje OpenType se pasa al motor de diseño de texto para habilitar o deshabilitar las entidades de fuente. Cada ajuste es siempre una cadena (<string>) de 4 caracteres ASCII, seguida de una cifra (<number>) que indica el valor de eje. Si <string> tiene más o menos caracteres o contiene caracteres fuera del intervalo de puntos de código U+20 - U+7E, la propiedad al completo será inválida. <number> puede ser una cifra fraccional o negativa.
 

El valor de cadena utilizado en el código anterior se conoce como el nombre del eje de cuatro letras que describe la característica que deseas variar, junto con el valor de variación que normalmente va de 0 a 1, pero también pueden ser valores negativos cuando sea necesario. Las variaciones permitidas siempre dependerán del tipo de fuente elegido.

Soporte para las fuentes de color

Las fuentes de color son nuevas en el nivel 4 y permiten que los archivos de fuentes describan no solo los contornos que describen los bordes de los glifos, sino también los colores presentes dentro de los mismos. ¿Por qué querrías utilizar alguna de estas características? Te sugiero que leas este artículo de Grace Fussell para ponerte al día:

  • Fuentes
    ¿Qué son las fuentes de color?
    Grace Fussell

📌 font-palette

 

Muchos formatos de archivo de fuente de color permiten parametrizar los colores dentro de glifos. En estas fuentes, se hace referencia a los colores por índice al describir la geometría de cada glifo. Estos índices se resuelven dentro de una paleta activa actual utilizando una tabla de búsqueda presente dentro de la fuente. Sin embargo, muchas fuentes contienen varias paletas, cada una con un conjunto de colores complementarios elegidos por el diseñador de fuentes para proporcionar resultados visuales agradables. Los desarrolladores pueden definir una paleta mediante la regla @font-palette-values mencionada en la siguiente sección.

📌 @font-palette-values

 

Esto representa una paleta de colores utilizados en una fuente. Define una paleta de colores y asocia esa paleta de colores con una fuente específica. Esto permite a un autor web seleccionar colores arbitrarios para usar dentro de una fuente de color en lugar de limitarse a las paletas preexistentes dentro de los archivos de fuente

  • base-palette: este descriptor especifica una paleta en la fuente que la regla contenedora @font-palette-values utiliza como valor inicial. Si no hay claves presentes en la regla @font-palette-values, la regla @font-palette-values representa la paleta de la fuente con el mismo índice que el valor de este descriptor. Si las claves <integer> están presentes en la regla @font-palette-values, cada uno de esos descriptores reemplaza un solo color en la paleta de colores representada por este bloque @font-palette-values.

📌 font-presentation

 

Esta propiedad permite a los autores web seleccionar si la presentación emoji o la presentación de texto será utilizada para ciertos puntos de código emoji. Una gran victoria para los fanáticos de los emojis 😎

Conclusión

Sin duda hay un montón de nuevas características emocionantes a la vista para las fuentes web y te animo a empezar a experimentar con tus favoritas a medida que estén disponibles. Si tienes una característica concreta favorita del nivel 4 o incluso del nivel 3 háznoslo saber en los comentarios, incluyendo cualquier opinión que puedas tener con respecto a las características que hemos discutido.

También sugiero a los desarrolladores que examinen la especificación css-font-loading si les importa profundamente el rendimiento de carga. Puedes supervisar la compatibilidad, ya que la adopción es bastante decente entre los proveedores de navegadores. ¡Disfruta de la nueva era de las fuentes web y sé feliz codificando!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.