Fuente rusa de San Francisco. ¿Cómo se ve la fuente de San Francisco?

San Francisco es una fuente de Apple que se presentó por primera vez a su audiencia a finales de 2014. Hasta ese momento, la empresa utilizaba la fuente "", que Apple creía que había debilidades debido a la mala legibilidad del texto pequeño.

Ahora toda la línea de productos Apple se mantiene firme con confianza propia fuente“San Francisco”, que puedes descargar gratis en este artículo. La familia “San Francisco” se divide en dos subfamilias, estas son “Texto” y “Display”. La diferencia es la mayor distancia entre letras en la primera opción. Esta característica le da a la subfamilia una mejor legibilidad con tamaños de fuente pequeños, y es este tipo el que se utiliza en los dispositivos pequeños de la compañía, como el iWatch.

Sin duda, existe soporte para el alfabeto cirílico (idioma ruso), así como para el inglés.

Descargar fuente gratuita "San Francisco"

El archivo, que podéis descargar al final del artículo, contiene 21 estilos (casi la mitad para cada subfamilia) en tres formatos diferentes.

Subfamilia " Texto" - Este: Atrevido, Negrita cursiva, Pesado, Cursiva pesada, Itálico, Luz, Cursiva ligera, Medio, Cursiva media, Regular, Seminegrita Y Cursiva seminegrita.

A su vez, la subfamilia " Mostrar" - estos son los estilos: Negro, Atrevido, Pesado, Luz, Medio, Regular, Seminegrita, Delgado Y Ultraligero.

tenga en cuenta que la fuente tiene licencia de Apple, lo que significa que tienes derecho a usarla en desarrollo software a productos Apple, así como en capturas de pantalla de productos similares.

Recuerda esto y ¡buena suerte con tus esfuerzos creativos!

Apple ha utilizado el conjunto de fuentes Helvetica como fuente del sistema para iOS desde el lanzamiento del primer iPhone. También reemplazaron a Lucida Grande en Mac OS X a partir de la versión 10.10 Yosemite. Entonces, ¿por qué Apple ha decidido deshacerse de la fuente más querida del mundo?

iOS 9 ahora está oficialmente disponible para todos, y una nueva familia de fuentes llamada San Francisco ha reemplazado sutilmente a Helvetica Neue.

Helvetica (izquierda) y San Francisco (derecha)

En ese momento ya se utilizaban en el Apple Watch. Ahora San Francisco se ha convertido en una fuente estándar única para todos los productos de plataforma: Apple Watch, iPhone, iPad y Mac.

Apple ha utilizado la familia Helvetica como fuente del sistema para iOS desde el lanzamiento del primer iPhone. También reemplazaron a Lucida Grande en Mac OS X a partir de la versión 10.10 Yosemite. Entonces, ¿por qué Apple ha decidido deshacerse de la fuente más querida del mundo?

Los tamaños pequeños son el punto débil de Helvetica

“Helvetica apesta” del blog de Erik Spiekermann.

Puede verificar la baja legibilidad de Helvetica de la siguiente manera. Escribe texto pequeño y difumízalo. Algunos de sus fragmentos estarán “mezclados” de modo que resulte difícil distinguir su contenido. Dicen que Apple desarrolló la familia San Francisco precisamente para hacer más legibles los textos pequeños del Apple Watch.

Sin embargo, la resolución de los dispositivos inteligentes modernos supera la resolución edición impresa, y los textos en el iPhone no siempre son tan pequeños como en el Apple Watch. ¿Por qué entonces Apple hizo un reemplazo no sólo en el Apple Watch, sino también en iOS y Mac OS X?

San Francisco - diverso

Para iOS/Mac se utiliza una familia de fuentes llamada "SF", mientras que el Apple Watch utiliza "SF Compact". Puedes ver la diferencia en letras redondeadas como 'o' y 'e'. Líneas verticales en SF Compact se hacen más planos que en SF.

Esta diferencia hace que el texto escrito con SF Compact tenga más espacio entre caracteres, lo que da como resultado un texto más legible cuando se lee en dispositivos pequeños como el Apple Watch.

Además de esto, cada una de las familias se divide en dos subfamilias más: “Texto” y “Display”. Apple llama a esto "Tamaños ópticos". La subfamilia Texto está diseñada para textos de tamaño pequeño, mientras que la subfamilia Display está diseñada para textos de gran tamaño.

Familia de fuentes San Francisco

Como se mencionó anteriormente, en las fuentes sans serif (o sans serif) como Helvetica, dos letras adyacentes se "mezclan" y letras como 'a', 'e', ​​'s' se vuelven muy amigo similar uno sobre el otro con tamaños de texto pequeños.

Comparación de sangrías entre caracteres en fuentes de las subfamilias Display y Text

Comparación de fuentes de las subfamilias Display y Text usando el ejemplo de un solo carácter

La subfamilia Texto, sin embargo, está diseñada de tal manera que las sangrías entre los caracteres aumentan en comparación con los caracteres de la subfamilia Pantalla, y los espacios en ellos se amplían para mejorar la legibilidad con tamaños de texto pequeños.

San Francisco es dinámico

Los diseñadores e ingenieros no tienen que preocuparse por elegir opción adecuada de la familia. Simplemente agregamos la fuente del sistema a UILabel, por ejemplo. El propio sistema determinará qué auriculares necesita.

Sin embargo, lo realmente impresionante de las fuentes de San Francisco es cómo muestran los dos puntos. Normalmente en otras fuentes lo vemos justo encima de la línea inferior, por lo que en los casos en los que se sitúa entre números, los dos puntos no están centrados verticalmente. Sin embargo, en las fuentes San Francisco, esta alineación se produce automáticamente.

Alinear automáticamente los dos puntos verticalmente al centro

San Francisco llegó a nosotros desde la era digital

Helvetica, a la que reemplazaron, fue creada en Suiza en 1957, cuando aún no existían los dispositivos digitales. Sin embargo, muchas empresas todavía la utilizan como fuente corporativa y, sin duda, seguirá utilizándose en el futuro como una buena fuente clásica.

San Francisco, por el contrario, es una fuente moderna. Su tipografía cambia dinámicamente, según el contexto. Se le puede llamar una especie de "fuente nativa" de la era digital.

Ahora, quizás por primera vez desde el primer Macintosh, tiene sentido interesarse en el uso de fuentes del sistema para la interfaz. Son una alternativa divertida y fresca a la tipografía web y no requieren alojamiento en su servidor ni en el de un tercero. ¿Cómo puedo utilizar fuentes del sistema en un sitio web y qué problemas pueden surgir aquí?

EN últimos años Han aparecido muchas fuentes de sistema interesantes para la interfaz. Google lanzado roboto(y continúa desarrollando esta fuente con actualizaciones periódicas), Apple lanzó San Francisco y el diseñador Eric Spiekerman creó la fuente Fira Sans para Mozilla. Y eso no es todo, no te olvides de Microsoft. Ellos fueron quienes iniciaron esta tendencia lanzando Teléfono Windows con el lenguaje de diseño de Metro fuertemente ligado a la tipografía en general y a la fuente Segoe en particular.

No sorprende que la idea de utilizar estas fuentes en la web esté ganando popularidad. Tal vez quieras enfatizar la diferencia entre contenido e interfaz de usuario, tal vez quieras que tu sitio parezca una aplicación, o simplemente quieras usar hermosas fuentes sin demora alguna.

Pero su uso no es tan sencillo como nos gustaría. La compatibilidad con CSS para estas fuentes es un poco psicodélica.

Nota: la “fuente de la interfaz del sistema” es una fuente que se utiliza para representar la interfaz del sistema operativo; no debe confundirse con las fuentes del sistema, es decir, las fuentes instaladas en el sistema del usuario.

Dos enfoques

En en este momento Hay dos formas de utilizar la fuente de la interfaz del sistema en tipografía.

primera manera

Consiste en utilizar una breve declaración CSS “mágica”:

Fuente: menú;

Segunda manera

La segunda forma es enumerar los nombres de todas las fuentes:

También tiene desventajas:

Otras opciones

Puede que le resulte interesante combinar los dos enfoques anteriores para lograr mejor resultado. Lamentablemente, esto no es fácil porque las propiedades de fuente y familia de fuentes son mutuamente excluyentes: una siempre sobrescribe a la otra. Es posible que se pueda lograr algo manipulando las consultas de medios, pero este método es un truco.

También puedes intentar enviar diferentes significados CSS del servidor dependiendo del agente de usuario, o hacer lo mismo usando JavaScript (por ejemplo, enviar solo font-family: "Fira Sans", sans-serif; para Firefox OS). Pero esta opción es engorrosa, difícil de mantener y, lo más importante, no resuelve todos los problemas.

¿Qué hacer ahora?

Medium utiliza actualmente el segundo método:

Familia de fuentes: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif ;

Fue elegido porque contiene menos grandes problemas. (El primer método no funciona en dispositivos móviles, con consecuencias completamente inaceptables; También hay problemas con el segundo método, pero hay menos y no son tan críticos. Su valoración de estos métodos puede ser diferente).

Podemos mejorar esta técnica mediante esfuerzos conjuntos. A continuación se muestra un bloque con texto que debe mostrarse en la fuente de la interfaz de su sistema. Si no funciona o tienes alguna idea al respecto, deja un comentario.

Esto debería representarse en la fuente de la interfaz de usuario de su sistema. El rápido zorro marrón salta sobre el perro perezoso. Este texto debe mostrarse en la fuente de la interfaz del sistema.

Descripción detallada de la lista de fuentes

Actualmente este método tiene los siguientes problemas:

• Al menos hasta diciembre de 2015, Firefox en Mac OS X utilizará Neue Helvetica en lugar de San Francisco.
• También en Mac OS X, se muestra Neue Helvetica en lugar de Lucida Grande en versiones anteriores a Yosemite.
• en menos popular sistemas operativos y configuraciones más complejas elección correcta La fuente correcta es aún más difícil.

Si está interesado en los detalles, veamos cómo debería verse esta lista para funcionar correctamente:

Familia de fuentes: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif ;

El primer grupo contiene propiedades que hacen referencia a fuentes de interfaz del sistema. Son bastante fiables y no hay posibilidad de que el navegador los confunda con otros:

• -apple-system cubre San Francisco en Safari en Mac OS X e iOS, y en versiones anteriores de Mac OS X Neue Helvetica y Lucida Grande. Este valor selecciona automáticamente entre Texto de San Francisco y Visualización de San Francisco según el tamaño de fuente.
• BlinkMacSystemFont es el equivalente al valor anterior y funciona en Chrome en Mac OS X.

El siguiente grupo destaca las fuentes de interfaz del sistema más conocidas:

• Segoe UI cubre Windows y Windows Phone.
• Roboto es Android y el nuevo Chrome OS. Está ubicado después de Segoe UI para adaptarse a los desarrolladores de Android que ejecutan Windows con Roboto instalado, de modo que Roboto no reemplace a Segoe UI.
• Oxygen es una fuente KDE, Ubuntu es, por supuesto, Ubuntu y Cantarell es GNOME. Tres fuentes para Linux a la vez, pero dada la abundancia de distribuciones, no resuelven el problema.
• Fuente Fira Sans Firefox OS.
• Droid Sans - viejo Versiones de Android.
• Tenga en cuenta que no especificamos el nombre de la fuente San Francisco. En iOS y Mac OS X, San Francisco aparece como una “fuente oculta” en lugar de una fuente pública.
• Y tampoco especificamos San Francisco usando .SFNSText-Regular, el nombre PostScript interno para San Francisco en Mac OS X. Sólo funciona en Chrome y es menos flexible que BlinkMacSystemFont.

En el tercer grupo tenemos fuentes utilizadas como alternativas:

• Helvetica Neue se utiliza en Mac OS X antes que El Capitan. La fuente aparece al final de la lista debido a su uso generalizado.
• sans-serif es la alternativa tradicional a la fuente sans-serif predeterminada.

La evolución de las fuentes de la interfaz del sistema en Windows es más espectacular que en Mac: desde la fuente de mapa de bits monoespaciada de Windows 1.0 en 1985 hasta la fuente resolución alta Segoe UI en Windows 10. (versión más grande)

Futuro

Todavía hay algo con lo que trabajar aquí. Empecemos por el hecho de que la técnica sólo funciona con tipografía occidental. También tendrás problemas si deseas alinear el relleno o la altura de la línea para que coincida con la fuente de la interfaz que estás usando, en cuyo caso tendrás que usar un enfoque híbrido o detectar las fuentes después de renderizar.

Pero aún así, los resultados obtenidos son buenos. Esperemos que todo esto sea menos complicado en el futuro. Si usted también está interesado en esto, infórmeselo a los proveedores de su navegador.

Las últimas tres versiones de Mac OS X utilizan tres fuentes de interfaz diferentes: Lucida Grande en Mac OS 10.9 (Mavericks); versión especial de Neue Helvetica en Mac OS 10.10 (Yosemite); Versión especial de San Francisco en Mac OS 10.11 (El Capitan). Es lógico suponer que en futuras versiones se utilizará San Francisco. (