Vous lisez tailles de police dans UI Design: le Guide complet. Accédez rapidement à d’autres chapitres: Intro * iOS * Android * Web * principes

conception d’une application iPhone ou iPad et vous ne savez pas quelles tailles de police utiliser? Voici le résumé rapide et sale des tailles de police en supposant (a) que vous utilisez la police par défaut D’Apple, San Francisco (ou similaire) et (b) que vous souhaitez faire correspondre les conventions iOS.

directives de typographie iPhone

Voici un résumé rapide des styles., Voir ci-dessous pour une référence visuelle et des directives plus approfondies.,

texte secondaire 15pt couleur plus claire également texte tertiaire,
légendes,
boutons segmentés 13pt ignorer une taille de police entre le texte secondaire et le texte tertiaire contrôles de formulaire
(boutons,
entrées de texte) 17pt mettre en évidence les boutons importants avec un poids de police moyen barre d’action 10pt ne pas aller plus petit que cela

décomposons cet élément-par-élément et regardez des exemples illustrés., Nous couvrirons non seulement les tailles de police réelles, mais aussi la façon dont Apple pense aux styles de texte.

Titles

iOS a quelques gros titres chunky, comme « Inbox” ci – dessous-à 34pt, il s’agit du plus gros texte que vous verrez sur un iPhone.

mais une fois que vous faites défiler, les titres se transforment en 17pt, la taille par défaut pour les actions textuelles également.,

notez que le titre se rétrécit à la même taille que le texte par défaut – mais ils utilisent un poids plus lourd et un placement en haut et au centre pour le distinguer en tant que titre. Ce fut un peu une révélation pour le concepteur débutant Erik, car je m’attendais toujours à ce que les titres soient plus gros que le texte normal (pas simplement plus audacieux).

vues de liste

Les listes sont le pain et le beurre des applications téléphoniques. Vous n’avez jamais su combien de choses étaient réellement des listes jusqu’à ce que vous commenciez à les afficher sur un grand écran mince. Regardons ceux suivant.,

dans une vue de liste – dans cet exemple particulier, emails – iOS traite le nom de l’expéditeur comme un texte de taille normale (17pt), et le sujet et l’aperçu comme un texte secondaire plus petit (15pt). Je pense que cela mérite d’être noté, car encore une fois, en commençant en tant que designer, mon instinct était de faire le contraire: faire du corps la taille par défaut et rendre le nom de l’expéditeur encore plus grand. Remarquez une tendance ici? iOS ne style pas les tailles de police comme vous pourriez vous y attendre naïvement.,

sur la page des paramètres, les options elles-mêmes sont écrites dans le style de texte par défaut, même si les titres de section (par exemple « AirDrop”) sont plus petits (whoa!). Mais notez que même si le titre est plus petit, c’est un poids de police plus épais, ce qui signifie que vous pouvez toujours le reconnaître comme un titre. Nouveau: subtile.

les notes sous les paramètres (« AirDrop vous permet de partager instantanément…”) sont écrites en Police 13pt, qui est la plus petite que nous ayons vue dans l’un de ces exemples D’interface utilisateur.,

les Contrôles de Formulaire

regardons quelques contrôles de réel rapide.

Cela devrait être de commencer à se sentir assez simple maintenant. La seule surprise est le bouton segmenté à la taille 13pt (semble trop petit)., Mon intuition est que, puisque Apple savait que certains de ces boutons auraient de nombreuses options, ils ont juste par défaut une taille de texte plus petite pour le contrôle, même s’il n’y a que deux options.

La Recherche utilise la taille et le poids par défaut, bien que la couleur soit un peu plus claire avant de commencer à taper.

Modals

Cette petite fenêtre contextuelle est un exemple super illustratif de la façon dont Apple style le texte.

• Le titre est la taille par défaut., Ce que vous pensez ne serait pas suffisant, mais qu’avons-nous vu auparavant? Un poids de police plus épais pour compenser ne pas être plus grand.
• Le texte explicatif est 13pt. J’aurais deviné que ce serait 15pt, comme le texte du corps de l’e-mail, mais peut-être qu’ils voulaient juste qu’il tienne sur une ligne?
• l’entrée de mot de passe est 13pt, ce qui serait trop petit pour une entrée de texte normale, bien que mon intuition soit que vous ne verrez qu’un tas de cercles noirs, il n’a pas besoin d’être la taille par défaut.,
• « OK” et « annuler” sont la taille par défaut, mais comme » OK  » est, espérons-le, ce que vous allez appuyer, Apple attire un peu plus l’attention en lui faisant un poids plus épais.

ces tailles de police suivent un modèle clair, et elles illustrent de belles astuces de style de texte, mais il y a des incohérences étranges à coup sûr.

Barre d’Action

Enfin, nous avons de la barre d’action en bas de l’écran. C’est le plus petit texte que j’ai pu trouver dans toute L’UI – 10pt. Je resterais à l’écart d’une si petite taille autant que possible.,

directives de typographie iPad

Depuis la dernière mise à jour (mai 2020), les iPad ont généralement des densités de pixels inférieures à celles des iPhones. Étant donné que les iPads ont moins de pixels par pouce, Tout ce qui est dimensionné en « pixels” ou « points » sera légèrement plus grand sur un iPad. Parce que nous tenons les iPads légèrement plus loin de nos yeux que les iPhones, cela s’équilibre bien – vous pouvez garder la plupart des mêmes tailles de police sur iPad et iPhone. Alors commencez n’importe quel travail de typographie iPad en lisant la section iPhone ci-dessus.,

cela étant dit, la plus grande différence concerne les titres. Comme vous avez un canevas plus grand pour travailler avec, une taille de police de corps idéale reste idéale – mais vous avez beaucoup plus d’espace pour les titres plus grands.

ainsi, Alors que certaines applications utilisent l’iPhone-style 17pt titres…

d’Autres sont plus gros.,

Donc, dans l’ensemble, pour iPad, vous allez être à la suite d’un lot d’iPhone styles, mais avec un peu plus d’espace pour faire preuve de créativité dans vos en-têtes.

San Francisco Guidelines

la police iOS par défaut est San Francisco. Vous pouvez télécharger San Francisco gratuitement. Il n’est pas nécessaire d’utiliser San Francisco lors de la création d’une application iOS, mais si vous voulez qu’elle ait cet aspect iOS par défaut, alors SF est votre nouveau meilleur ami.,

Apple aimerait que vous soyez une poupée et suivez quelques règles supplémentaires lors de L’utilisation de San Francisco.

tout d’abord, utilisez SF Pro Display à des tailles de police de 20 ou plus. Utilisez uniquement SF Pro Text pour le corps du texte et les plus petits.,

Font Size	Font Family
19 or smaller	SF Pro Text
20 or larger	SF Pro Display

Second, San Francisco is designed to have different character spacing at different sizes., Donc, si vous voulez imiter parfaitement l’apparence « iOS par défaut”, disposez de quelques options:

1. ajustez manuellement l’espacement des caractères en fonction de la taille de votre police selon le tableau ci-dessous
2. utilisez les styles de texte directement depuis la bibliothèque Apple iOS UI Design Sketch (slash Photoshop slash XD)
3. utilisez ce plugin Sketch pratique pour que l’espacement des caractères de SF soit automatiquement défini correctement, en fonction de sa taille de police

ou ignorez simplement le fait Qu’Apple vous indique de modifier L’espacement des caractères en fonction de la taille de la police.centième de pixel. Vivre libre ou mourir, l’homme.,

Font Style	Font Size	Character Spacing
Bold title	34pt	0.41
Body text	17pt	-0.41
Secondary text	15pt	-0.24
Tertiary text	13pt	-0.08
Smallest text	10pt	0.,12

San Francisco est la police par défaut de l’iPhone et de l’iPad. Donc, si vous l’utilisez, mieux vaut connaître ces restrictions. Cependant, vous pouvez, bien sûr, concevoir des applications iOS dans la police de votre choix. Veillez à ce que d’autres apparaissent plus grands ou plus petits, ou moins lisibles, même à la même taille.,

continuer au chapitre 2: Android/Material Design Font Size Guidelines

une dernière Note

Si c’est votre première fois ici, vous pourriez également être intéressé par:

• Learn UI Design, mon cours vidéo en ligne complet sur la conception d’interface utilisateur
• The Design Newsletter, un bulletin de plus de 40 000 personnes avec des articles de conception originaux visant à vous donner des conseils tactiques pour améliorer vos compétences UX / UI.

certaines personnes ont de très belles choses à dire sur la newsletter.,

Merci pour votre newsletter. C’est peut-être la meilleure newsletter que j’ai reçue depuis 1999, quand j’ai commencé à travailler en freelance.

Tricia Littlefield
fondatrice, TheSimpleWeb

chaque fois que je reçois un e-mail de votre part, je suis comme ‘putain, c’est un long e-mail! Pas moyen de lire tout cela », puis j’ai commencé à lire et je suis comme « putain, c’est tellement flippant brillant » et tout lire.,

Jean-Philippe
UX Stratège, Freelance