À quoi ressemble la police San Francisco ? Le secret de la nouvelle police San Francisco d'Apple

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, l'entreprise utilisait la police « » qui, selon Apple, présentait des faiblesses dues à une mauvaise lisibilité des petits textes.

Désormais, toute la gamme de produits Apple repose en toute confiance sur sa 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 lors du développement de logiciels pour des produits Apple, ainsi que dans des captures d'écran de produits similaires.

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

Apple se prépare à introduire une nouvelle version du système d'exploitation OS X – 10.11. Il convient de noter en particulier l'utilisation d'une nouvelle police système. N'attendons pas la présentation officielle, essayons-le dès maintenant.

La nouvelle est que OS X 10.11(et avec elle la version mobile d'iOS 9) recevra une nouvelle police système, ce qui amusera quelque peu les utilisateurs et découragera complètement les développeurs de logiciels pour la plateforme Mac. En effet, si Apple passe complètement à la police "San Francisco" les développeurs sont confrontés à un processus fastidieux de balisage de l'interface de leurs applications. Eh bien, apparemment, la « politique de constance » s'est transformée en une politique de « développements inutiles » et il y a deux options : soit vous et moi sommes sceptiques, soit Apple ne travaille vraiment pas sur ce que souhaite l'utilisateur.

Apple et les polices

L'histoire d'amour de l'entreprise avec les polices remonte à l'époque de sa création. Et Steve Jobs a montré son penchant pour la calligraphie lors du développement du logo. Ensuite, le fier nom de la marque Apple Computer a été écrit en caractères Motter Tektura, développé en 1975 par un designer autrichien Othmar Motter.

Le choix en faveur de Motter Tektura s'explique par son innovation et son « look technologique ». En 1984, l'ordinateur Macintosh est entré sur le marché et un événement aussi important a été accueilli par l'utilisation d'une toute nouvelle police (au sein de l'entreprise). Pomme Garamond. Original ITC Garamond a été créée en 1977 par Tony Stan. Sa particularité était un degré élevé de densité (environ 60 à 70 % par rapport aux polices traditionnelles).

C'est exactement ce qu'Apple a apprécié. Célèbre slogan de l'entreprise « Penser différemment » - « Penser différemment », comme un certain nombre de brochures publicitaires Apple, ont été exécutés en utilisant la police Apple Garamond. Jusqu'à la sortie Mac OS X 10.3 Apple Garamond a été fourni séparément dans le cadre d'un package de polices de conception.

En 2002, l'entreprise décide de changer de décor et choisit la famille Adobe Myriade. Deux designers y ont travaillé en même temps - Robert Slimbach Et Carole Twombly commandé par Adobe.

Toutes les informations textuelles accompagnant la sortie de produits tels que iPod Photo, iPod 5e génération, iPod Nano (1re-2e génération), conçu en utilisant notre propre modification de la police Myriade – Podium Sans(avec l’orthographe caractéristique des lettres « M » et « Y »).

Toutes les itérations du système d'exploitation Mac OS X, appelé plus tard OS X, (de 1999 à 2014) ont reçu la même police système de la part des développeurs - Lucida Grande. Avec la sortie de l'anniversaire OS X 10.10 Yosemite, la société a décidé de proposer aux utilisateurs une nouvelle police. Helvetica Nouvelle est entré avec confiance dans la vie d'un producteur de pavot. Malgré un certain nombre de similitudes, Helvetica Neue, selon les concepteurs d'Apple, est plus économique en termes de distribution sur une ligne horizontale.

La police Helvetica Neue a été développée au début de l'ère informatique par un typographe suisse. Max Miedinger en 1957 à Bâle (Suisse). La police s'appelait à l'origine Neau Haas Grotesk en l'honneur de l'ancienne imprimerie Haas'sche Schriftgiesserei. En 1960, il a été rebaptisé comme d'habitude Helvétique, qui se traduit littéralement par « Suisse ». Apple a choisi la police comme base pour la police système sous OS X Yosemite Helvetica Nouvelle, développé au début de 1983.

Mais avant que les yeux des utilisateurs n'aient eu le temps de s'habituer au « nouveau Suisse » en un an, les designers nous font découvrir le nouveau style de lettres. La nouvelle Apple Watch récemment introduite utilise une police de la famille San Francisco. Vous semble-t-il familier ? Tu as raison. C'est à San Francisco qui s'affiche sur l'agencement du nouveau MacBook 12 pouces.

Le problème de cette transition forcée de l’entreprise vers une nouvelle police réside non seulement dans la volonté de l’entreprise d’unifier l’interface de tous les systèmes d’exploitation créés pour différents types d’appareils Apple, mais aussi dans le choix d’une police universelle. Après tout, au cours de ses plus de 50 ans d'histoire, Helvetica a cessé d'être la police élégante, parfaite et rationnelle créée par les designers suisses.

Faiblesses d’Helvetica Neue:

• expansion du style de lettre de toute la famille;
• épaisseur de police modifiée ;
• algorithme imparfait pour arrondir l'espace intra-lettre ;
• Les adaptations constantes aux Linotypes (équipement d'impression) ont conduit au fait que la police est devenue « trop carrée ».

Les compromis forcés que les concepteurs ont faits au profit de la technologie ont transformé la police d'une œuvre d'art en un ensemble sans âme de lettres et de chiffres similaires présentant des caractéristiques similaires.

Finalement, Apple a décidé de revenir à ses racines et d'opter pour la police San Francisco, développée il y a plus de 30 ans et utilisée sur les premiers ordinateurs Macintosh. La police a été spécialement développée en interne par NeXT, l'un des designers les plus talentueux Suzanne Kara. La San Francisco originale est très différente de celle utilisée aujourd'hui dans l'Apple Watch.

La première police San Francisco d'Apple

San Francisco pour 2014 est une toute nouvelle famille de polices spécialement développée en interne pour les accessoires portables.

Les lettres correctement compactées restent lisibles et en même temps ne prennent pas trop de place sur la ligne horizontale. Lors de la création de la police, Apple a repensé les styles de toutes les lettres et a accordé une grande attention aux signes de ponctuation.

Ainsi, la nouvelle police San Francisco se prépare à asservir les plateformes OS X et iOS. Eh bien, voyons à quoi cela ressemblera ?

Remplacement de la police

Remplaçons donc la police standard Helvetica Neue par celle qu'Apple nous prépare dans la nouvelle version du système d'exploitation.

Après avoir chargé OS X Yosemite, la police système sera modifiée :

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 des publications imprimées, 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 ». Les lignes verticales du SF Compact sont plus plates que celles du 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 empattement) telles que Helvetica, deux lettres adjacentes "se mélangent" et des lettres telles que "a", "e", "s" deviennent très similaires les unes aux autres pour 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 de choisir la bonne option parmi 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. Toutefois, dans les 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.

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

La police San Francisco a déjà été utilisée dans l'Apple Watch et est déjà devenue la police standard pour les appareils Apple : Apple Watch, iPhone, iPad et Mac.

Apple Watch

Apple utilise Helvetica comme police système pour iOS depuis l'introduction du premier iPhone. Et sur Mac OS X, ils ont changé la police de Lucida Grande en Helvetica depuis la sortie de 10.10 Yosemite. Pourquoi Apple a-t-il décidé d’enterrer Helvetica, la police la plus célèbre et la plus appréciée au monde ?

Dans les petites formes, Helvetica est faible

Ils disent que Helvetica ne convient pas aux textes en petite taille de police. Lorsque la police système de Mac OS X Yosemite a été remplacée par Helvetica, de nombreux concepteurs ont déclaré qu'une telle police n'était pas du tout appropriée ici.

"Helvetica est nul" Erik Spiekermann

Lorsque vous tapez du texte dans une petite taille de points, la faible lisibilité d'Helvetica devient visible. Helvetica brouille ce texte. Certains textes sont mixtes et difficiles à comprendre. Beaucoup de gens disent qu'Apple a créé les polices San Francisco pour rendre les petits textes sur l'Apple Watch plus lisibles.

Les lettres sont mélangées dans des textes de petite taille

Mais aujourd’hui, la résolution des écrans des appareils est supérieure à celle des documents imprimés, et les textes des iPhones ne sont pas toujours aussi petits que ceux de l’Apple Watch. Pourquoi Apple a-t-il modifié les polices système non seulement dans l'Apple Watch, mais également dans iOS et Mac OS X.

San Francisco n'est pas qu'une seule police

Les polices San Francisco possèdent de nombreuses fonctionnalités qui les rendent très lisibles. En fait Les polices San Francisco pour Apple Watch et pour iOS/Mac sont deux polices présentant de légères différences.

La famille de polices appelée « SF » est utilisée pour iOS/Mac et « SF Compact » est utilisée pour Apple Watch. Vous pouvez remarquer la différence dans les lettres arrondies o, e. Le SF compact a des lignes verticales plus plates que le SF.

SF et SF Compact

Cette différence donne aux textes dans SF Compact une plus grande marge (indentation) entre les lettres, ce qui se traduit par une plus grande lisibilité sur les petits appareils comme l'Apple Watch.

De plus, les polices SF et SF Compact sont divisées en deux sous-familles : « Texte » et « Affichage ». C'est ce qu'Apple appelle les « tailles optiques ». « Texte » est destiné aux textes de taille plus petite et « Affichage » aux textes de taille plus grande.

Famille de San Francisco

Comme je l'ai mentionné ci-dessus, lorsque vous utilisez des polices sans empattement comme Helvetica, deux lettres adjacentes « se mélangent » et des lettres comme « a », « c », « s » en petite taille se ressemblent.

Polices d'affichage et de texte

La sous-famille « Texte » a plus de marges que la sous-famille « Affichage ». Et les ouvertures de ces polices de texte sont également plus larges, de sorte que les petites tailles de points sont plus lisibles.

Les polices de San Francisco sont dynamiques

L'un des avantages de San Francisco est la manière dont elle optimise dynamiquement les polices de caractères. Le système change automatiquement la police d'affichage/texte en fonction de la taille du texte. La valeur seuil est de 20 pt.

Les concepteurs et les spécialistes n'ont plus besoin de se creuser la tête pour savoir quelle police choisir. Par exemple, ajoutez simplement la police système à UILabel et l'appareil sélectionnera le style approprié pour vous.

Ce qui me frappe dans les polices San Francisco, c'est la façon dont les deux-points sont affichés. Fondamentalement, les deux points sont placés directement au-dessus de la ligne de la police, ils ne sont donc pas centrés verticalement s'ils apparaissent entre les chiffres. Et dans les polices San Francisco, les deux-points sont automatiquement alignés.

Côlon centré verticalement

San Francisco - Police de l'ère numérique

Comme vous pouvez le constater, les polices San Francisco ont été soigneusement conçues pour être faciles à lire, quelle que soit la taille et sur n'importe quel appareil.

Helvetica, qui a été remplacée par les polices San Francisco, a été créée en Suisse en 1957, alors qu'il n'existait pas encore d'appareils numériques. Helvetica est encore largement utilisée par de nombreuses entreprises comme police d'entreprise, et il ne fait aucun doute qu'elle continuera à être utilisée à l'avenir comme police classique de qualité.

D’un autre côté, San Francisco est une police moderne. Il change dynamiquement de style en fonction du contexte. C'est quelque chose comme une police « native », comme si elle avait été spécialement créée pour l'ère numérique qui approche.

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 ?

Ces 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. Ils ont lancé cette tendance en lançant Windows Phone avec le langage de conception 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 donner à votre site l'apparence d'une application, ou souhaitez-vous simplement utiliser de belles polices sans aucun décalage.

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

Il existe actuellement 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 de meilleurs résultats. 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 valeurs CSS depuis le serveur en fonction de l'agent utilisateur, ou de faire de même avec JavaScript (par exemple, envoyer uniquement la famille de polices : "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 parce qu'il présente moins de problèmes majeurs. (La première méthode ne fonctionne pas sur les appareils mobiles, avec des conséquences totalement inacceptables ; la deuxième méthode présente également des problèmes, mais il y en a moins et ils ne sont pas si critiques. Votre appréciation 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.
• Sur les systèmes d'exploitation moins populaires et les configurations plus complexes, choisir la bonne police 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.
• Droid Sans - anciennes versions d'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 sur Windows est plus spectaculaire que sur Mac - de la police bitmap à espacement fixe de Windows 1.0 en 1985 à la police Segoe UI haute résolution de 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 en fonction de 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. (