Un guide de référence pour la typographie dans la conception Web mobile

Terminologie de la typographie

Commençons par les notions de base: la terminologie que vous devez connaître avant de trouver les meilleures pratiques en matière de typographie mobile.

Typography: Ce terme fait référence à la technique utilisé pour le style, le formatage et l'arrangement du texte "imprimé" (par opposition à manuscrit).

Police: C'est le système de classification utilisé pour étiqueter une famille de caractères. Donc, ce serait quelque chose comme Arial, Times New Roman, Calibri, Comic Sans, etc.

Police: Ceci approfondit davantage la police de caractères d'un site Web. La police détaille la famille de caractères, la taille du point et les stylisations spéciales appliquées. Par exemple, Arial à 11 points en gras

Size: Il y a deux façons de faire référence à la taille (ou hauteur) d'une police: la taille du traitement de texte en points ou la taille du design web en pixels. Pour les besoins de la conception Web mobile, nous utilisons des pixels.

Voici une comparaison ligne par ligne de différentes tailles de police:

Comme vous pouvez le voir dans WordPress les tailles de police sont importantes pour établir la hiérarchie dans le texte d'en-tête:

Poids: C'est l'autre partie de la définition d'une police de caractères. Le poids se réfère à tous les styles spéciaux appliqués au visage pour le faire apparaître plus lourd ou plus léger. Dans la conception Web, le poids entre en jeu dans les polices d'en-tête qui complètent le texte corporel généralement sans poids.

Voici un exemple d'options que vous pouvez choisir dans le thème WordPress :

Kerning: Cela concerne l'espace entre deux lettres. Il peut être ajusté afin de créer un résultat plus esthétique tout en améliorant la lisibilité. Vous aurez besoin d'un logiciel de conception comme Photoshop pour faire ces types d'ajustements.

Tracking: Le suivi, ou l'espacement des lettres, est souvent confondu avec le crénage car il concerne également l'espace entre les lettres. Cependant, alors que le crénage ajuste l'espacement entre deux lettres afin d'améliorer les apparences, le suivi est utilisé pour ajuster l'espacement sur une ligne. Ceci est plus utilisé pour résoudre les problèmes de densité pendant la lecture.

Voici un exemple de Mozilla sur la façon d'utiliser le suivi pour changer l'espacement des lettres: 19659029] Exemple de suivi normal « />

Menant: L'interlignage, ou interligne, est la distance accordée entre les lignes de base du texte (la ligne de fond sur laquelle repose la police). Comme le suivi, cela peut être ajusté pour résoudre les problèmes de densité.

Si vous avez utilisé un logiciel de traitement de texte pendant un certain temps, vous êtes déjà familier avec le lead. Texte à simple interligne. Texte à double interligne. Même le texte à 1,5 interligne.

Le rôle de la typographie dans la conception web moderne

Quant à savoir pourquoi nous nous soucions de la typographie et de chacune des caractéristiques qui la caractérisent dans la conception web moderne, il y a une bonne raison à cela. Bien que ce soit génial si un article de blog bien écrit ou un jargon de vente super convaincant sur une page d'atterrissage suffisait à satisfaire les visiteurs, ce n'est pas toujours le cas. Les choix que vous faites en termes de typographie peuvent avoir des conséquences majeures sur la possibilité de lire ou non la copie de votre site.

Voici comment la typographie affecte les utilisateurs finaux:

Renforcer l'image de marque
La typographie est une autre façon de créer un style spécifique pour votre design web. Si les images contiennent toutes des lignes claires et des visages sérieux, vous voudrez utiliser une police de caractères également boutonnée.

Définir l'humeur
Cela aide à établir une humeur ou une émotion. Par exemple, une police de caractère plus frivole et légère indiquerait aux utilisateurs que la marque est amusante, jeune et ne se prend pas au sérieux.

Donnez-lui une voix
Elle transmet un sentiment de personnalité et de voix. Bien que le message réel dans la copie puisse dicter ceci bien, l'utilisation d'une police qui renforce le ton serait un choix puissant.

Encourager la lecture
Comme vous pouvez le voir, il existe plusieurs façons de peut ajuster comment le type apparaît sur un écran. Si vous pouvez lui donner le bon sens de la vitesse et la facilité, vous pouvez encourager plus d'utilisateurs à lire tout cela.

Autoriser la numérisation
Numérisation ou jet d'encre (dont je parlerai bientôt) devient de plus en plus commun que les gens s'engagent avec le Web sur leurs appareils intelligents. Pour cette raison, nous avons besoin de moyens pour formater le texte afin d'améliorer la scannabilité et cela implique généralement beaucoup d'en-têtes, de citations tirées et de listes en ligne (à puces, numérotées, etc.).

Améliorer l'accessibilité être fait pour concevoir pour l'accessibilité . Votre choix de police joue un grand rôle, d'autant plus que l'expérience mobile doit moins dépendre de grands designs audacieux et de nuances de couleurs, et plus encore de la rapidité et de la qualité des visiteurs de votre message.

un tel rôle dans l'expérience de l'utilisateur, c'est une question qui doit être prise au sérieux lors de l'élaboration de stratégies de nouveaux modèles. Alors, regardons ce que les experts et les tests ont à dire à propos de la manipulation pour mobile

Typographie pour Web Design Mobile: Ce que vous devez savoir

Trop petit, trop léger, trop chic, trop proche … Vous peut rencontrer beaucoup de problèmes si vous ne trouvez pas l'équilibre parfait avec votre choix de typographie dans la conception. Sur mobile, cependant, c'est un peu une histoire différente.

Je ne veux pas dire que le jouer en toute sécurité et en utilisant le système par défaut de Google ou Apple est la voie à suivre. Après tout, vous travaillez si dur pour développer des designs uniques, créatifs et accrocheurs pour vos utilisateurs. Pourquoi jetteriez-vous l'éponge à ce stade et applaudissez Roboto sur votre site Web mobile?

Nous connaissons les éléments clés de la définition et du façonnage d'une police de caractères et nous connaissons la puissance des polices dans le contexte d'un site Web . Alors, examinons et voyons ce que vous devez faire exactement pour que votre typographie joue bien avec le mobile.

Taille

En règle générale, la taille de la police doit être de 16 pixels pour les sites Web mobiles . Tout ce qui est plus petit que cela pourrait compromettre la lisibilité pour les lecteurs malvoyants. Tout ce qui est trop grand pourrait aussi rendre la lecture plus difficile. Vous voulez trouver cette formule parfaite de Goldilocks et, à maintes reprises, elle revient à 16 pixels.

En général, cette règle est une règle à suivre en ce qui concerne le corps du texte de votre site Web mobile. Cependant, que faites-vous exactement pour le texte d'en-tête? Après tout, vous devez être en mesure de distinguer vos titres principaux du reste du texte. Pas seulement pour attirer l'attention sur des messages plus importants, mais aussi pour augmenter la lisibilité d'une page Web mobile.

Le Nielsen Norman Group a rapporté une étude du MIT qui couvrait cette question précise. Que pouvez-vous faire avec un texte que les utilisateurs n'ont qu'à regarder ? En d'autres termes, quel genre de dimensionnement pouvez-vous utiliser pour de courtes chaînes de texte d'en-tête?

Voici ce qu'ils ont trouvé:

Des chaînes de texte courtes et glissables permettent une lecture plus rapide et une meilleure compréhension quand:

• taille plus grande (spécifiquement, 4mm par opposition à 3mm).
• Ils sont tous en majuscules.
• La largeur du lettrage est régulière (et non condensée).

En résumé :

Lettrage minuscule requis 26% plus de temps pour la lecture précise que les majuscules, et le texte condensé requis 11,2% de temps de plus que d'habitude. Il y avait aussi des effets d'interaction significatifs entre le cas et la taille, ce qui suggère que les effets négatifs des lettres minuscules sont exacerbés par de petites tailles de police.

Je serais curieux de voir comment le site NerdWallet Cas. Bien que j'aime le look de ceci, ils ont violé un certain nombre de ces suggestions de dimensionnement et de style:

Après avoir examiné cela plusieurs fois maintenant, je pense que le choix d'une police de plus petite taille pour l'en-tête des majuscules est un choix étrange. Mes yeux sont instantanément attirés par le texte plus gros et plus audacieux sous l'en-tête principal. Donc, je pense qu'il y a quelque chose à la recherche du MIT

Flywheel Sports d'un autre côté, fait un excellent travail d'exemplification de ce point.

Il n'y a aucun doute là où l'attention des visiteurs doit aller: à la tête accrocheur. Il est en majuscules, il est plus grand que tous les autres textes sur la page, et, bien que la police soit incroyablement basique, son infusion avec un type de style manuscrit personnalisé semble vraiment cool ici. Je pense que la seule chose que je corrigerais ici est le contraste entre les polices blanches et jaunes et le fond bleu.

Rappelez-vous: cela s'applique uniquement au dimensionnement (et au style) du texte de l'en-tête. Si vous souhaitez conserver de grandes quantités de texte lisibles, respectez les meilleures pratiques de dimensionnement susmentionnées.

2. Couleur et contraste

La ​​couleur, en général, est un élément important dans la conception de sites Web. Vous pouvez transmettre beaucoup de choses aux visiteurs en choisissant la bonne palette de couleurs pour les motifs, les images et, oui, votre texte. Mais ce n'est pas seulement la couleur de base de la police qui compte, c'est aussi le contraste entre celle-ci et l'arrière-plan sur lequel elle repose (comme en témoigne ma note ci-dessus sur Flywheel Sports.)

d'une photo occupée ou d'un arrière-plan plus clair ne pose pas trop de problème. Mais "trop" n'est pas vraiment acceptable dans la conception de sites Web. Il ne devrait y avoir aucun problème rencontré par les utilisateurs lorsqu'ils lisent du texte sur un site Web, notamment à partir d'une vue déjà compromise sur un mobile

. ] Les directives relatives à l'accessibilité du contenu Web ( WCAG ) contiennent des recommandations claires sur la manière d'aborder le contraste des couleurs dans la section 1.4.3. Au minimum, les WCAG suggèrent qu'un contraste de 4,5 à 1 devrait être établi entre le texte et le fond pour une lisibilité optimale. Il y a quelques exceptions à la règle:

• Un texte de 18 points ou un caractère gras de 14 points n'a besoin que d'un contraste de 3 à 1.
• Texte qui n'apparaît pas dans une partie active de la page Web
• Le contraste du texte dans un logo peut être défini à la discrétion du concepteur.

Si vous n'êtes pas sûr de la façon d'établir ce rapport entre la couleur de votre police et le fond sur sur lequel il se trouve, utilisez un outil de vérification des contrastes de couleur comme WebAIM .

La chose dont je voudrais vous rappeler, cependant, est l'utilisation de l'opacité ou d'autres paramètres de couleur qui peuvent compromettre la couleur que vous avez choisie. Alors que le code couleur HEX va très bien dans l'outil, il peut ne pas être une représentation précise de la façon dont la couleur s'affiche réellement sur un périphérique mobile (ou sur un écran, vraiment).

Pour résoudre ce problème et vous assurer un contraste assez élevé pour vos polices, utilisez une pipette de couleur intégrée à votre navigateur comme celles de Firefox ou Chrome . Passez simplement la pipette sur la couleur de l'arrière-plan (ou de la police) de votre page Web et laissez-le vous indiquer le code de couleur actuel.

Voici un exemple de ceci en action: Dollar Shave Club .

Ce site présente une rotation d'images dans la bannière supérieure de la page d'accueil. La police reste toujours blanche, mais l'arrière-plan pivote

Basé sur ce que nous savons maintenant, le violet est probablement le seul qui passera avec brio. Cependant, dans le but de vous montrer comment travailler à travers cet exercice, voici ce que l'outil compte-gouttes dit des codes de couleurs HEX pour chacun des arrière-plans:

• Gris: # 9a9a9a
• Beige / taupe: # ffd0a8 [19659064] Violet: # 4c2c59

Voici le contraste entre ces couleurs et la police blanche:

• Gris: 2.81 à 1
• Beige / taupe: 1.42 à 1
• Violet: 11.59 à 1. [19659085] De toute évidence, les milieux gris et beige vont se prêter à une très mauvaise expérience pour les visiteurs mobiles.

  Aussi, si je devais deviner, je dirais que "Essayez un ensemble de démarrage sans risque maintenant." est seulement une police de 10 points (qui est seulement d'environ 13 pixels). Donc, la taille de la police fonctionne également contre le facteur de lisibilité, sans parler du mauvais choix de couleurs utilisées avec les fonds plus clairs.

  La leçon ici est que vous devriez vraiment réfléchir à la couleur et au contraste. de la typographie travaillera pour le bénéfice de vos lecteurs. Sans ces étapes supplémentaires, vous pouvez involontairement empêcher les visiteurs d'aller de l'avant sur votre site.

  3. Suivi

  Clair et simple: le suivi dans la conception de sites Web mobiles doit être utilisé pour contrôler la densité. La recommandation standard est qu'il n'y ait pas plus de 30 à 40 caractères sur une ligne. Quelque chose de plus ou de moins pourrait affecter défavorablement la lisibilité.

  Bien qu'il semble que Dove repousse les limites de cette limite de 40 caractères, je pense que c'est bien fait.

  

  La police est si simple et propre, et le suivi est uniformément espacé. Vous pouvez voir que, en gardant la quantité de mots sur une ligne reléguée aux limites recommandées, cela donne à ce segment de la page l'apparence qu'il sera facile à lire. Et c'est exactement ce que vous voulez que vos choix typographiques fassent: accueillir les visiteurs pour qu'ils s'arrêtent un bref instant, lire la quantité de texte non menaçante, puis continuer leur chemin (ce qui, espérons-le, est la conversion).

  4. Leading

  Selon le NNG le contenu qui apparaît au-dessus de la ligne de flottaison sur un écran de bureau de 30 pouces équivaut à cinq balayages sur un périphérique mobile de 4 pouces. Certes, ces données sont un peu vieux comme la plupart des smartphones sont maintenant entre cinq et six pouces :

  

  Même ainsi, disons que cela équivaut à trois ou quatre bons coups de l'écran du smartphone pour arriver à la pointe du pli sur le bureau. C'est beaucoup de travail que vos visiteurs mobiles doivent faire pour obtenir les bonnes choses. Cela signifie également que leur patience sera déjà mince au moment où ils y arriveront. Comme l'a souligné le NNG, une session mobile dure en moyenne environ 72 secondes. Comparez cela au bureau à 150 secondes et vous pouvez voir pourquoi c'est un gros problème.

  Cela signifie deux choses pour vous:

  1. Vous devez absolument couper l'excès sur mobile. Si cela signifie créer un ensemble de contenu complètement différent et plus court pour le mobile, faites-le
  2. Soyez très prudent avec le lead.

  Vous avez déjà pris soin d'optimiser la taille et la largeur de votre police, ce qui est bien. Cependant, trop de direction et vous pourriez involontairement demander aux utilisateurs de faire défiler encore plus qu'ils ne le devraient. Et avec chaque rouleau vient la possibilité de fatigue, d'ennui, de frustration ou de distraction.

  Donc, vous devez trouver un bon équilibre entre l'espacement des lignes pour améliorer la lisibilité et la quantité de travail dont ils ont besoin

  Le site Hill Holliday n'est pas seulement une source d'inspiration géniale pour devenir un peu "fou" avec la typographie mobile, mais il a aussi fait un fantastique travail dans l'utilisation conduisant à rendre plus facile à lire de plus grands corps de texte:

  

  Différentes ressources vous donneront différentes directives sur la façon de créer de l'espacement pour les appareils mobiles. J'ai vu des suggestions pour n'importe où entre 120% à 150% de la taille du point de la police. Puisque vous devez également considérer l'accessibilité lors de la conception pour mobile, je vais vous suggérer de suivre les directives WCAG :

  • L'espacement entre les lignes doit être de 1,5 (ou 150%, selon le ratio qui vous convient)
  • L'espacement entre les paragraphes doit alors être de 2,5 (ou de 250%).

  En fin de compte, il s'agit de prendre des décisions intelligentes en fonction de l'espace avec lequel vous travaillez. Si vous n'avez qu'une minute pour les accrocher, ne la gaspillez pas avec trop d'espace vertical. Et ne les éteignez pas avec trop peu.

  5. Polices acceptées

  Avant de décrire ce qui rend une police acceptable, je veux d'abord regarder quelles sont les polices par défaut d'Android et d'Apple. Je pense que nous pouvons apprendre beaucoup de choses en regardant ces choix:

  Android
  Google utilise deux polices de caractères pour ses plates-formes (bureau et mobile): Roboto et Noto. Roboto est le principal défaut. Si un utilisateur visite un site Web dans une langue qui n'accepte pas Roboto, alors Noto est la sauvegarde secondaire

  Ceci est Roboto :

  

  Il est également important de noter que Roboto a un certain nombre de familles de polices parmi lesquelles choisir:

  

  Comme vous pouvez le voir, il existe des versions de Roboto avec un crénage condensé, une face plus lourde et serif, ainsi qu'une option plus lâche, semblable à un sérif. Dans l'ensemble, cependant, c'est juste une police de caractères vraiment propre et simplement stylisée. Vous ne risquez pas de susciter de vraies émotions lorsque vous l'utilisez sur un site Web, et cela ne transmet peut-être pas beaucoup de personnalité, mais c'est un choix sûr et intelligent.

  Apple
  Apple a son propre ensemble de lignes directrices de typographie pour iOS avec sa propre police de caractères système: San Francisco .

  

  Pour la plupart, ce que vous voyez est ce que vous obtenez avec San Francisco. C'est juste une police de base sans empattement. Si vous examinez les suggestions recommandées par Apple sur les paramètres par défaut de la police, vous ne trouverez même pas l'utilisation de la stylisation en gras ou des règles de taille, de premier plan ou de suivi bizarres:

  

  Comme avec presque tout ce que Apple fait, la formule de typographie est très basique. Et tu sais quoi? Ça marche vraiment. Ici, il est en action sur le site Apple :

  

  Tout comme la police de caractères de Google, Apple a choisi une police de caractères simple et classique. Bien que cela ne puisse pas aider votre site à se démarquer de la concurrence, il ne fera jamais n'importe quoi pour nuire à la lisibilité ou la lisibilité de votre texte. Ce serait aussi un bon choix si vous voulez que votre visuel laisse un plus grand impact.

  Mes recommandations

  Et, donc, cela m'amène maintenant à mes propres recommandations sur ce que vous devriez utiliser en termes de type pour les sites Web mobiles. Voici le verdict:

  1. N'ayez pas peur de commencer avec une police par défaut du système. Ils vont être vos choix les plus sûrs jusqu'à ce que vous compreniez jusqu'où vous pouvez pousser les limites de la typographie mobile.

  2. Utilisez uniquement une police sans empattement ou serif. Si votre site Web de bureau utilise une police décorative ou manuscrite, abandonnez-la pour quelque chose de plus traditionnel sur mobile.

     Cela dit, vous n'avez pas à ignorer complètement les polices de caractères décoratives. Dans les exemples de Hill Holliday ou Flywheel Sports (comme montré ci-dessus), vous pouvez voir comment de petites touches personnalisées de type non traditionnel peuvent ajouter un peu de saveur.

  3. N'utilisez jamais plus de deux polices sur mobile. Il n'y a tout simplement pas assez de place pour que les visiteurs puissent gérer visuellement autant d'options.

     Assurez-vous que vos deux polices de caractères se complètent mutuellement. Plus précisément, recherchez les visages qui utilisent une largeur de caractère similaire. La conception de chaque visage peut être unique et bien contrastée avec l'autre, mais il devrait y avoir une certaine uniformité dans ce que vous présentez aux yeux des visiteurs mobiles.

  4. Évitez les polices de caractères qui ne sont pas distinctes ensemble de caractères. Par exemple, comparez les majuscules "i", minuscules "l" et le nombre "1" à côté l'un de l'autre. Voici un exemple de la police de caractères Myriad Pro du site Web Typekit:

     

     Tandis que le nombre "1" n'est pas trop problématique, le "i" majuscule (la première lettre dans cette séquence) et le "l" minuscule (le second) sont juste trop semblables. Cela peut créer des ralentissements non désirés dans la lecture sur mobile.

     Aussi, assurez-vous de revoir comment votre police gère la conjonction de "r" et "n" à côté de l'autre. Pouvez-vous différencier chaque lettre ou est-ce qu'ils forment ensemble une unité indiscernable? Les visiteurs mobiles n'ont pas le temps de s'arrêter et de comprendre quels sont ces caractères, alors assurez-vous d'utiliser une police de caractères qui donne à chaque caractère son propre espace.

  5. Utilisez des polices compatibles autant de dispositifs que possible. Vos meilleurs paris seront: Arial, Courier New, Géorgie, Tahoma, Times New Roman, Trebuchet MS et Verdana.

     

     

     Je pense que le site Typeform est un bon exemple d'un site qui utilise un choix de caractères "sûr", mais qui ne l'empêche pas de séduire les visiteurs avec leur message ou leur design.

     

     Il est court, précis, parfaitement dimensionné, bien positionné, et globalement un choix solide s'ils essayent de faire preuve de stabilité et de professionnalisme (ce que je pense qu'ils sont).

  6. Quand vous êtes Vous vous sentez à l'aise avec la typographie mobile et vous voulez vous diversifier davantage, jetez un œil à cette liste des meilleures polices de caractères Web de WebsiteSetup . Vous trouverez ici que la plupart des choix sont vos types de serif et sans serif de base. Ce n'est vraiment rien d'excitant ou de bouleversant, mais il vous donnera quelques variations à jouer si vous voulez ajouter un peu plus de saveur à votre type de mobile.

  Wrapping Up

  Je sais, je sais. La typographie mobile n'est pas drôle. Mais la conception web ne consiste pas toujours à créer quelque chose d'excitant et de tranchant. Rester fidèle à des choix pratiques et sécuritaires est ce qui vous garantira la meilleure expérience utilisateur à la fin. Et c'est ce que nous voyons en ce qui concerne la typographie mobile.

  La quantité réduite de biens immobiliers et les délais plus courts sur le site ne se prêtent tout simplement pas bien aux choix typographiques expérimentaux (ou aux choix de conception, en général ) vous pouvez utiliser sur le bureau. Alors, pour aller de l'avant, votre approche devra être plus sur l'apprentissage de la façon de l'intégrer tout en créant un look fort et cohérent pour votre site web.

  (lf, ra, yk, il)