Fermer

juin 1, 2018

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

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


Puisque le mobile occupe une place de premier plan dans la recherche, il est important que les sites Web soient conçus de manière à donner la priorité à la meilleure expérience possible pour leurs utilisateurs. Alors que Google a attiré l'attention sur des éléments comme pop-ups qui pourraient perturber l'expérience mobile, qu'en est-il de quelque chose d'aussi simple que le choix de la typographie?

Les travaux sur ordinateur de bureau devraient fonctionner sur le mobile, à condition qu'ils évoluent bien. C'est vrai?

Bien que cela rende certainement beaucoup plus facile les concepteurs de sites Web, ce n'est pas forcément le cas. Le problème pour faire de cette déclaration un élément décisif est qu'il n'y a pas eu beaucoup d'études sur la typographie mobile ces dernières années. Donc, ce que j'ai l'intention de faire aujourd'hui est de donner un bref résumé de ce que nous savons de la typographie dans la conception web, et ensuite voir ce que les experts et les tests UX ont pu révéler sur l'utilisation de la typographie pour mobile. savoir la typographie n'est pas le plus glamour des sujets. Et, étant un concepteur de sites Web, il ne faut pas trop penser à vous, surtout si les clients vous apportent leurs propres guides de style avant de commencer un projet.

Cela dit, avec mobile-first maintenant, typographie

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.

 Polices de caractères dans Office 365
Une offre typique de caractères dans les applications de traitement de texte. (Source: Google Docs ) ( Grand aperçu )

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

 3 éléments essentiels pour définir une police
Un exemple des trois éléments qui définissent une police. (Source: Google Docs ) ( Grand aperçu )

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:

 Un exemple de taille de police
Un exemple de la même chaîne de caractères le texte apparaît à différentes tailles. (Source: Google Docs ) ( Grand aperçu )

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:

 Un exemple de choix de taille de police dans WordPress
Thème WordPress (Source: WordPress ) ( Grand aperçu )

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 :

 choix de poids de police
Exemples de poids de police disponibles avec un thème WordPress. (Source: WordPress ) ( Grand aperçu )

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 « />

Voici à quoi ressemble le suivi normal. (Source: Mozilla ) ( Grand aperçu )
 -1px exemple de suivi
Voici à quoi ressemble le suivi (plus strict) -1px. (Source: Mozilla ) ( Grand aperçu )
 Exemple de suivi 1px
Voici à quoi ressemble le suivi (lâche) 1px. (Source: Mozilla ) ( Grand aperçu )

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:

 La page d'accueil de NerdWallet
NerdWallet utilise des majuscules et des tailles de police plus petites sur mobile. (Source: NerdWallet ) ( Grand aperçu )

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.

 La page d'accueil de Flywheel Sports
'choix de polices intelligentes pour mobile. (Source: Volant moteur ) ( Grand aperçu )

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 .

 Vérificateur de contraste de couleur WebAIM
Un exemple d'utilisation de l'outil de vérification des contrastes de couleurs WebAIM. (Source: WebAIM ) ( Grand aperçu )

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

 Dollar Shave Club, bannière grise
Bannière de page d'accueil Dollar Shave Club avec un fond gris. (Source: Dollar Shave Club ) ( Grand aperçu )
 Bannière beige Dollar Shave Club
Bannière page d'accueil Dollar Shave Club avec fond beige / taupe. (Source: Dollar Shave Club ) ( Grand aperçu )
 Bannière de Dollar Shave Club pourpre
Bannière de page d'accueil Dollar Shave Club avec un fond violet. (Source: Dollar Shave Club ) ( Grand aperçu )

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.

     Page d'accueil de Dove
    Utilisation par Dove d'un suivi régulier et (pour la plupart) d'une limite de 40 caractères. (Source: Colombe ) ( Grand aperçu )

    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 :

     Taille moyenne des écrans des smartphones
    Taille moyenne des écrans des smartphones de 2015 à 2021. (Source: TechCrunch ) ( Grand aperçu )

    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:

     La page d'accueil de Hill Holliday
    Hill Holliday utilise le rapport parfait de mener entre des lignes et des paragraphes. (Source: Hill Holliday ) ( Grand aperçu )

    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 :

     Le jeu de caractères Roboto
    Un instantané du Robot jeu de caractères. (Source: Roboto ) ( Grand aperçu )

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

     Les familles Roboto
    Autres options de polices Roboto à choisir. (Source: Roboto ) ( Grand aperçu )

    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 .

     La police de San Francisco
    La police de San Francisco pour les appareils Apple. (Source: San Francisco ) ( Grand aperçu )

    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:

     Paramètres par défaut de San Francisco
    suggestions pour la police de caractères de San Francisco. (Source: San Francisco ) ( Grand aperçu )

    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 :

     La page d'accueil d'Apple
    Apple utilise ses propres bonnes pratiques de typographie. (Source: Apple ) ( Grand aperçu )

    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:

       Myriad Pro characters
      La police de Myriad Pro en action. (Source: Typekit ) ( Grand aperçu )

      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.

       Typographie par défaut sur mobile
      Une liste de polices par défaut du système pour divers appareils mobiles. (Source: tinytype ) ( Grand aperçu )
       Caractères de caractères pris en charge par Android
      Autre vue de la table qui inclut des polices de caractères compatibles avec Android. (Source: tinytype ) ( Grand aperçu )

      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.

       page
      La police frappante de Typeform n'a rien à voir avec la police actuelle. (Source: Typeform ) ( Grand aperçu )

      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.

     Smashing Editorial (lf, ra, yk, il)

]



Source link