Police russe de San Francisco. À quoi ressemble la police San Francisco ?

San Francisco est une police d'Apple qui a été présentée pour la première fois à son public fin 2014. Jusqu'à cette époque, la société utilisait la police "", qui, selon Apple, avait faiblesses en raison d'une mauvaise lisibilité des petits textes.

Désormais, toute la gamme de produits Apple tient bon propre police« San Francisco », que vous pouvez télécharger gratuitement sous cet article. La famille « San Francisco » est divisée en deux sous-familles, à savoir « Texte » et « Affichage ». La différence réside dans la plus grande distance entre les lettres dans la première option. Cette caractéristique confère à la sous-famille une meilleure lisibilité des polices de petite taille, et c'est ce type qui est utilisé sur les petits appareils de l'entreprise tels que l'iWatch.

La prise en charge de l'alphabet cyrillique (langue russe), ainsi que de l'anglais, est sans aucun doute présente.

Télécharger la police gratuite "San Francisco"

L'archive, que vous pouvez télécharger à la fin de l'article, contient 21 styles (près de la moitié pour chaque sous-famille) dans trois formats différents.

Sous-famille " Texte" - Ce: Audacieux, Gras italique, Lourd, Italique épais, Italique, Lumière, Italique clair, Moyen, Italique moyen, Régulier, Semi-gras Et Semi-gras italique.

À son tour, la sous-famille " Afficher" - voici les styles : Noir, Audacieux, Lourd, Lumière, Moyen, Régulier, Semi-gras, Mince Et Ultraléger.

Veuillez noter que la police est sous licence Apple, ce qui signifie que vous avez le droit de l'utiliser dans le développement logiciel aux produits Apple, ainsi que sur des captures d'écran de produits similaires.

N'oubliez pas cela et bonne chance dans vos efforts créatifs !

Apple utilise le jeu de polices Helvetica comme police système pour iOS depuis la sortie du premier iPhone. Ils ont également remplacé Lucida Grande sous Mac OS X à partir de la version 10.10 Yosemite. Alors pourquoi Apple a-t-il décidé de se débarrasser de la police la plus appréciée au monde ?

iOS 9 est désormais officiellement disponible pour tous et une nouvelle famille de polices appelée San Francisco a subtilement remplacé Helvetica Neue.

Helvetica (à gauche) et San Francisco (à droite)

À ce stade, ils étaient déjà utilisés dans l’Apple Watch. San Francisco est désormais devenue une police standard unique pour toutes les plateformes de produits : Apple Watch, iPhone, iPad et Mac.

Apple utilise la famille Helvetica comme police système pour iOS depuis la sortie du premier iPhone. Ils ont également remplacé Lucida Grande sous Mac OS X à partir de la version 10.10 Yosemite. Alors pourquoi Apple a-t-il décidé de se débarrasser de la police la plus appréciée au monde ?

Les petites tailles sont le point faible d'Helvetica

« Helvetica est nul » sur le blog d'Erik Spiekermann.

Vous pouvez vérifier la faible lisibilité d'Helvetica comme suit. Tapez un petit texte et floutez-le. Certains de ses fragments seront « mélangés » de sorte qu’il deviendra difficile d’en distinguer le contenu. Ils disent qu'Apple a développé la famille San Francisco précisément pour rendre les petits textes sur l'Apple Watch plus lisibles.

Cependant, la résolution des appareils intelligents modernes dépasse la résolution édition imprimée, et les textes sur l'iPhone ne sont pas toujours aussi petits que sur l'Apple Watch. Pourquoi alors Apple a-t-il effectué un remplacement non seulement sur l'Apple Watch, mais également sur iOS et Mac OS X ?

San Francisco - diversifié

Une famille de polices appelée « SF » est utilisée pour iOS/Mac, tandis que l'Apple Watch utilise « SF Compact ». Vous pouvez voir la différence dans les lettres arrondies telles que « o » et « e ». Lignes verticales dans SF Compact, ils sont plus plats que dans SF.

Cette différence fait que le texte saisi avec SF Compact comporte plus d'espace entre les caractères, ce qui donne un texte plus lisible lorsqu'il est lu sur de petits appareils tels que l'Apple Watch.

De plus, chacune des familles est divisée en deux sous-familles supplémentaires : « Texte » et « Affichage ». Apple appelle cela « Tailles optiques ». La sous-famille Text est conçue pour les textes de petite taille, tandis que la sous-famille Display est destinée aux textes de grande taille.

Famille de police San Francisco

Comme mentionné ci-dessus, dans les polices sans empattement (ou sans empattements) telles que Helvetica, deux lettres adjacentes se « mélangent » et des lettres telles que « a », « e », « s » deviennent très ami similaire les uns sur les autres avec des textes de petite taille.

Comparaison des retraits entre caractères dans les polices des sous-familles Display et Text

Comparaison des polices des sous-familles Display et Text à l'aide de l'exemple d'un seul caractère

La sous-famille Text, cependant, est conçue de telle manière que les retraits entre les caractères qu'elle contient sont augmentés par rapport aux caractères de la sous-famille Display, et les espaces entre eux sont élargis pour améliorer la lisibilité avec des textes de petite taille.

San Francisco est dynamique

Les concepteurs et les ingénieurs n'ont pas à se soucier du choix option appropriée de la famille. Nous ajoutons simplement la police système au UILabel, par exemple. Le système déterminera lui-même le casque dont vous avez besoin.

Cependant, ce qui est vraiment impressionnant dans les polices San Francisco, c'est la façon dont elles affichent les deux-points. Habituellement, dans d'autres polices, nous le voyons juste au-dessus de la ligne du bas, donc dans les cas où il est situé entre des chiffres, les deux points ne sont pas centrés verticalement. Cependant, dans la famille de polices San Francisco, cet alignement se produit automatiquement.

Aligner automatiquement le côlon verticalement au centre

San Francisco nous est venue de l'ère numérique

Helvetica, qu'ils ont remplacé, a été créée en Suisse en 1957, alors qu'il n'existait pas encore d'appareils numériques. Elle est cependant encore utilisée par de nombreuses entreprises comme police d'entreprise et continuera sans aucun doute à être utilisée à l'avenir comme une bonne police classique.

San Francisco, au contraire, est une police moderne. Sa police change de manière dynamique, selon le contexte. On peut la qualifier d’une sorte de « police native » de l’ère numérique.

Maintenant, peut-être pour la première fois depuis le tout premier Macintosh, il est logique de s'intéresser à l'utilisation des polices système pour l'interface. Ils constituent une alternative amusante et fraîche à la typographie Web - et ils ne nécessitent pas d'hébergement sur votre serveur ou celui d'un tiers. Comment puis-je utiliser les polices système sur un site Web et quels problèmes peuvent survenir ?

DANS dernières années De nombreuses polices système intéressantes pour l'interface sont apparues. Google publié Robot(et continue de développer cette police avec des mises à jour régulières), Apple a publié San Francisco et le designer Eric Spiekerman a créé la police Fira Sans pour Mozilla. Et ce n'est pas tout, n'oubliez pas Microsoft. Ce sont eux qui ont lancé cette tendance en publiant Téléphone Windows avec le langage de conception de Metro fortement lié à la typographie en général et à la police Segoe en particulier.

Il n'est pas surprenant que l'idée d'utiliser ces polices sur le Web gagne en popularité. Peut-être souhaitez-vous souligner la différence entre le contenu et l'interface utilisateur, peut-être souhaitez-vous que votre site ressemble à une application, ou souhaitez-vous simplement utiliser belles polices sans aucun délai.

Mais leur utilisation n’est pas aussi simple qu’on le souhaiterait. Le support CSS de ces polices est un peu psychédélique.

Remarque : la « police d'interface système » est une police utilisée pour restituer l'interface du système d'exploitation - elle ne doit pas être confondue avec les polices système, c'est-à-dire les polices installées sur le système de l'utilisateur.

Deux approches

Sur à l'heure actuelle Il existe deux manières d’utiliser la police de l’interface système en typographie.

Première façon

Cela consiste à utiliser une courte déclaration CSS « ​​magique » :

Police : menu ;

Deuxième façon

La deuxième façon consiste à lister les noms de toutes les polices :

Il présente également des inconvénients :

Autres options

Vous trouverez peut-être intéressant de combiner les deux approches ci-dessus pour obtenir meilleur résultat. Hélas, ce n'est pas facile car les propriétés font et font-family s'excluent mutuellement - l'une écrase toujours l'autre. Il est possible d’obtenir quelque chose en manipulant les requêtes multimédias, mais cette méthode est un hack.

Vous pouvez également essayer d'envoyer différentes significations CSS depuis le serveur en fonction de l'agent utilisateur, ou faites de même en utilisant JavaScript (par exemple, envoyez uniquement font-family : "Fira Sans", sans-serif ; pour Firefox OS). Mais cette option est lourde, difficile à prendre en charge et, surtout, elle ne résout pas tous les problèmes.

Que faire maintenant ?

Medium utilise actuellement la deuxième méthode :

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

Il a été choisi car il contient moins gros problèmes. (La première méthode ne fonctionne pas sur appareils mobiles, avec des conséquences totalement inacceptables ; Il y a aussi des problèmes avec la deuxième méthode, mais ils sont moins nombreux et ils ne sont pas si critiques. Votre évaluation de ces méthodes peut être différente).

Nous pouvons améliorer cette technique grâce à des efforts conjoints. Vous trouverez ci-dessous un bloc avec du texte qui doit être affiché dans la police d'interface de votre système. Si cela ne fonctionne pas ou si vous avez des idées à ce sujet, laissez un commentaire.

Cela doit être rendu dans la police d’interface utilisateur de votre système. Le renard brun rapide saute par-dessus le chien paresseux. Ce texte doit être affiché dans la police de l'interface système.

Aperçu détaillé de la liste des polices

Actuellement, cette méthode présente les problèmes suivants :

• Jusqu'en décembre 2015 au moins, Firefox sur Mac OS X utilisera Neue Helvetica au lieu de San Francisco.
• Également sur Mac OS X, Neue Helvetica s'affiche à la place de Lucida Grande sur les versions antérieures à Yosemite.
• En moins populaire systèmes d'exploitation et configurations plus complexes bon choix la police correcte est encore plus difficile.

Si vous êtes intéressé par les détails, voyons à quoi devrait ressembler cette liste pour fonctionner correctement :

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

Le premier groupe contient des propriétés qui font référence aux polices de l'interface système. Ils sont assez fiables et il n’y a aucune chance que le navigateur les confonde avec d’autres :

• -apple-system couvre San Francisco dans Safari sur Mac OS X et iOS, ainsi que sur les anciennes versions de Mac OS X, Neue Helvetica et Lucida Grande. Cette valeur sélectionne automatiquement entre San Francisco Text et San Francisco Display en fonction de la taille de la police.
• BlinkMacSystemFont est l'équivalent de la valeur précédente et fonctionne dans Chrome sur Mac OS X.

Le groupe suivant met en évidence les polices d’interface système bien connues :

• Segoe UI couvre Windows et Windows Phone.
• Roboto est Android et le nouveau Chrome OS. Il est positionné après Segoe UI pour accueillir les développeurs Android fonctionnant sous Windows avec Roboto installé, afin que Roboto ne remplace pas Segoe UI.
• Oxygen est une police KDE, Ubuntu est bien sûr Ubuntu et Cantarell est GNOME. Trois polices pour Linux à la fois, mais étant donné l'abondance des kits de distribution, elles ne résolvent pas le problème.
• Police Fira Sans Firefox OS.
• Droïde Sans - vieux Versions Android.
• Notez que nous ne spécifions pas le nom de la police San Francisco. Sur iOS et Mac OS X, San Francisco apparaît comme une « police cachée » plutôt que comme une police publique.
• Et nous ne spécifions pas non plus San Francisco, en utilisant .SFNSText-Regular, le nom PostScript interne de San Francisco sur Mac OS X. Il ne fonctionne que sous Chrome et est moins flexible que BlinkMacSystemFont.

Dans le troisième groupe, nous avons des polices utilisées comme solutions de secours :

• Helvetica Neue est utilisé dans Mac OS X avant El Capitan. La police est répertoriée à la toute fin de la liste en raison de son utilisation répandue.
• sans-serif est la solution de secours traditionnelle à la police sans-serif par défaut.

L'évolution des polices d'interface système sous Windows est plus spectaculaire que sur Mac - de la police bitmap Windows 1.0 à espacement fixe en 1985 à la police haute résolution Interface utilisateur Segoe dans Windows 10. (version plus grande)

Avenir

Il y a encore quelque chose sur lequel travailler ici. Commençons par le fait que la technique ne fonctionne qu’avec la typographie occidentale. Vous rencontrerez également des problèmes si vous souhaitez aligner le remplissage ou la hauteur de ligne pour qu'ils correspondent à la police d'interface que vous utilisez. Dans ce cas, vous devrez utiliser une approche hybride ou détecter les polices après le rendu.

Mais les résultats obtenus sont quand même bons. Espérons que tout cela sera moins compliqué à l’avenir. Si cela vous intéresse également, veuillez en informer les fournisseurs de votre navigateur.

Les trois dernières versions de Mac OS X utilisent trois polices d'interface différentes : Lucida Grande sur Mac OS 10.9 (Mavericks) ; version spéciale de Neue Helvetica sur Mac OS 10.10 (Yosemite) ; version spéciale de San Francisco sur Mac OS 10.11 (El Capitan). Il est logique de supposer que San Francisco sera utilisé dans les futures versions. (