En realidad, el tipo de letra de San Francisco se envía como una fuente variable

Apple dio a conocer una versión ampliada de su fuente del sistema San Francisco en WWDC 2022. Luego, el mes pasado, Jim Nielsen se concentró en las variaciones de la fuente, explicando cómo la fuente proporciona un espectro de variaciones basado en el anchura y peso. Es una lectura notable si no la has revisado.

Con todas estas excelentes opciones nuevas, es posible que se sienta tentado a usarlas en un diseño web. chris era comiéndose con los ojos los conjuntos ampliados también en su blog personal y reflexionó:

Pero no está claro cómo podríamos aprovechar las variedades condensadas, comprimidas y expandidas en CSS, o si hay un plan para permitir eso. Supongo que eventualmente podemos echar un vistazo a Apple.com y ver cómo lo hacen si comienzan a usarlos allí.

¿No tiene mucho sentido construirlo como una fuente variable y enviar todo el kit y el kaboodle de esa manera?

Resulta que sí. Tiene perfecto sentido. Chris sigue en un nueva publicación:

Pero justo ayer me encontré al azar con el hecho de que la fuente San Francisco incorporada (en los dispositivos Apple que la tienen incorporada) ya es variable (!!). Mira, yo estaba retozando con Roboto Flex, y tuvo system-ui como la fuente alternativa, y me di cuenta de que durante el FOUT, el font-variation-settings Estaba usando tuvo un efecto en la fuente alternativa, que se representa como San Francisco en mi Mac. Lo cual... a menos que sea tonto... significa que San Francisco es una fuente variable.

Entonces, ¿en cuanto a usarlo? Chris tiene una demostración, por supuesto:

Hay algunas trampas en todo esto, las más importantes son las alternativas para dispositivos que no son de Apple. Después de todo, esa demostración simplemente está llamando system-ui para la familia de fuentes: no le dice al navegador que descargue un archivo de fuente ni nada, y quién sabe si Apple alguna vez enviará un archivo de fuente variable que podamos servir como una fuente web personalizada real.

¿La otra cosa interesante? Chris investigó un poco y contó 35 diseños incluidos en esa fuente del sistema. Vamos lee el resto de la publicación para verlos a todos (y para obtener una buena dosis de cris-ismos, ¡sé que los extraño!).

Enlace directo →