Le mobile est grand en ce moment. Mais souvent la typographie est petite. Quand il s'agit de créer du bon type sur de petits écrans, les défis sont nombreux.
Alors, comment tirer le meilleur parti de la réactivité, du design mobile et de la typographie? La première étape consiste vraiment à comprendre le type et la seconde consiste à réfléchir à la façon dont les gens lisent. Rassemblez les deux et vous obtiendrez une idée de la création d'un excellent type de mobile en un rien de temps. C'est une compétence que chaque concepteur doit maîtriser à l'ère numérique.
Notions de base sur la typographie mobile et réactive
Contrairement au type conçu pour l'impression et même pour de nombreux projets de conception Web de bureau, la typographie mobile et réactive n'est souvent pas mesurée à l'aide du système de points traditionnel. Plutôt que de choisir une police de caractères et de l’utiliser à 14 points avec 15 points d’avance,? le type mobile et responsive est conçu en utilisant des pixels, des ems ou des rems. Ces unités flexibles sont basées sur un pourcentage et peuvent aider les concepteurs à créer plus facilement du type pour plusieurs périphériques.
Deux des considérations les plus importantes lors de la conception du type pour les appareils mobiles sont la taille et l'espace. Le texte doit être assez grand pour être lu facilement et il doit y avoir suffisamment d’espace entre les lignes pour que le texte ne soit pas encombré dans le petit espace.
Il n’existe pas de formule magique pour déterminer la taille ou l’espacement à utiliser. Mais généralement, le type de mobile devrait être un peu plus grand que celui des ordinateurs de bureau et inclure davantage d’espacement des lignes. Si de nombreuses personnes affirment que le nombre optimal de caractères par ligne pour l'impression et la conception des postes de travail est compris entre 60 et 75 caractères, ce nombre devrait être réduit de moitié pour les mobiles.
Comment les gens lisent
La clé de tout style de typographie, sur tout appareil, est la lisibilité. Si l'utilisateur ne peut pas le lire, la conception ne fonctionne pas.
Ceci est particulièrement important sur les appareils mobiles. Et il y a tellement d'options mobiles, il est pratiquement impossible de savoir comment votre lettrage sera rendu sur chaque appareil. Alors travaillez vraiment pour affiner votre type pour les largeurs d'écran les plus populaires.
Pensez à la façon dont les gens lisent lors de la planification de votre conception mobile. Vous devrez peut-être ajuster les relations entre différents éléments de type, tels que l'en-tête et le texte principal. (Le site de Chattanooga Renaissance Fund, ci-dessus, fait un excellent travail dans ce domaine.) Tout type trop grand peut ronger l'écran rapidement, ce qui distrait les lecteurs. Le type trop petit peut être omis ou vu sans importance.
Pensez également à l'alignement. Généralement, les gens lisent de gauche à droite. Surtout sur un petit appareil, gardez les styles d’alignement simples pour une lisibilité maximale.
Tout est question de largeur
Le facteur clé lors de la conception du type pour les appareils mobiles, les applications ou les tablettes est la largeur de l'écran. Et rappelez-vous, il y a deux largeurs à prendre en compte: verticale (comment la plupart des gens tiennent leur téléphone) et horizontale.
Un texte trop volumineux créera de nombreuses ruptures dans le type et, si vous utilisez une césure, de nombreux traits d'union. (Il convient de noter que peu de concepteurs de sites Web utilisent des traits d'union; ils constituent un caractère rare dans le corps du texte pour le Web.) comprendre.
Si le texte est trop petit, le lecteur risque d’être épuisé et d’avoir du mal à se concentrer sur le texte. Il peut également être difficile de trouver le début et la fin des lignes de texte s’il ya trop de lettres à digérer à la fois.
Design dans l'espace
Lorsqu'il s'agit de petits écrans, l'espace est une considération clé. Pensez aux éléments que vos utilisateurs peuvent rencontrer: faible contraste sur l'écran en raison de l'éclairage, rembourrage afin que le texte ne heurte pas le bord de l'écran (ou un étui de téléphone lâche) ou que les utilisateurs puissent faire défiler l'écran sans cliquer accidentellement lien.
En ajoutant un peu d'espace au texte, entre les lignes et dans les marges, vous aidez les utilisateurs à mieux interagir avec les mots. Un bon espacement facilite également la lisibilité, en particulier dans des conditions inférieures à la normale. Comme avec d'autres techniques, le bon espacement est essentiel et une surabondance d'espaces blancs peut nuire à la zone de contenu de l'écran ou même nuire à la lisibilité.
Un bon point de départ est compris entre 10 et 20%. Jouez avec les chiffres pour déterminer l’espace supplémentaire à ajouter entre les lignes. Vous pouvez également envisager d'utiliser l'espacement des paragraphes car les graphiques peuvent paraître plus longs sur des écrans plus petits. Cet espace supplémentaire donne aux lecteurs la perception que le texte n’est pas trop dense et qu’il se sentira plus facile à lire.
Gardez les polices simples
Il y a une raison pour laquelle vous voyez autant de caractères sans empattement sur les sites Web mobiles et dans les applications. Ils sont généralement faciles à lire.
Lorsque vous sélectionnez des caractères pour des blocs de texte dans une conception mobile, pensez à autre chose qu'un logo ou un élément d'art typographique, optez pour quelque chose de simple, de poids standard et de largeur de trait assez uniforme. Évitez les polices de caractères de nouveauté, les styles condensés et les lettres avec des traits fins.
De plus en plus de concepteurs choisissent d’utiliser un deuxième ensemble de caractères pour les sites mobiles par rapport à la version de bureau, qui peut inclure une palette de types plus élaborée. Bien que ce concept ait des avantages et des inconvénients, il peut constituer une solution si vous avez à cœur de choisir une police de caractères spécifique pour la conception de bureau.
Méfiez-vous également des astuces de type. Les effets tels que les ombres ou les biseaux peuvent sembler superbes avec des tailles plus grandes, mais ils risquent de ne pas être lisibles ou de gêner la lisibilité sur un écran de seulement quelques centimètres de large. Oubliez les astuces lorsque vous travaillez sur un plan type pour votre site mobile.
Proportions mobiles et échelle
Bien qu'il n'y ait pas de solution parfaite, Jason Pamental de H + W Design possède l'un des meilleurs sur le marché. Il a détaillé son échelle de mesure moderne pour le blog Typecast avec CSS et une échelle complète de chiffres.
L'idée est que chaque élément de type dans une conception Web doit être pensé et mis à l'échelle séparément pour une expérience de conception Web optimisée. Souvent, nous (collectivement en tant que concepteurs) adaptons tout en même temps.Pamental montre pourquoi ce n’est pas la meilleure idée à travers un exemple simple, où l’en-tête occupe la quasi-totalité de l’écran.
Aucune conversation sur la typographie Web mobile ne serait complète sans penser au texte de Pamental. Assurez-vous de le lire vous-même et voyez comment ses idées pourraient se traduire dans votre travail.
Considérer la fonctionnalité
Une dernière chose à prendre en compte lors de la conception de la typographie mobile est son fonctionnement réel. Alors que certains types sur les sites Web de bureau sont conçus pour cliquer et lier, la typographie mobile en fait souvent même plus. Certains textes permettent aux utilisateurs de passer un appel, d'autres types contiennent un lien, d'autres permettent aux utilisateurs d'acheter un produit ou le texte d'une application peut faire partie d'un jeu.
Concevez ce type pour que les utilisateurs sachent exactement ce qu’il fera. Et rendez-le suffisamment grand pour que les utilisateurs puissent effectuer cette action facilement. Les zones de texte actives doivent être suffisamment grandes pour pouvoir être tapées et séparées des autres actions de texte afin qu'une seule chose se produise à la fois. Toute autre configuration risque de créer de la confusion et de frustrer les utilisateurs.
Conclusion
Comme pour tout projet de conception, les lignes directrices et les conseils ne sont qu'un endroit pour commencer. La typographie mobile fait partie des domaines dans lesquels les concepteurs commencent vraiment à s’immerger et les tendances vont évoluer.
Assurez-vous de combiner les idées ci-dessus avec les vôtres pour obtenir les meilleurs résultats. (Et si vous avez des conseils supplémentaires, nous aimerions les entendre.) Le conseil n ° 1 est de tester, tester, tester. Plus vous essayez de styles de texte, plus vous aurez une idée précise de son apparence et de son utilité pour les utilisateurs.
Source de l'image: Phil Roeder. Remarque sur les images: les images de ce message sont affichées en mode Bureau et également sur un iPhone 5S.