7 règles simples pour la typographie mobile
Vous avez probablement entendu dire qu'une bonne typographie est invisible, mais il est plus exact de dire qu'une bonne typographie rend l'acte de lire sans effort.
Lorsque l'œil voyage sur une ligne de texte, il le fait par sauts, appelés saccades; vous ne lisez pas de lettres, ni même de mots, vous lisez des instantanés de parties de mots et votre cerveau remplit ce qu'il espère trouver. Si le cerveau est surpris, il renvoie les yeux pour vérifier si son hypothèse était correcte. Une bonne typographie minimise le travail que vos yeux doivent effectuer en créant un flux fluide le long de la ligne.
Les appareils mobiles présentent des défis inhérents pour tout typographe: l'espace est limité et la lumière ambiante est souvent médiocre. Mais en apportant de simples ajustements aux techniques que nous utilisons déjà pour le Web, nous pouvons améliorer la lisibilité sur les appareils mobiles.
1. Donnez-vous de l'espace
Contrairement à la croyance populaire, la typographie ne concerne pas la disposition de petites lignes ondulées sur un écran; La typographie concerne en grande partie l'espace à l'intérieur et autour d'eux.
La typographie doit beaucoup moins à la forme des lettres qu’à l’espace qu’elles encadrent
Pour comprendre cela, il est utile de comprendre d'où viennent les polices: le trou au milieu d'un «o» (et un «b», un «c», un «p», etc.) est appelé un «compteur». ont été taillés dans du métal pour être utilisés dans les presses d’impression originales, ces compteurs ont été créés par un poinçon en métal qui a été sculpté puis enfoncé dans une assiette. Les concepteurs du premier type travaillaient en fait avec les formes qui ne s'imprimeraient pas . La typographie doit beaucoup moins à la forme des lettres qu’à l’espace qu’elles encadrent.
Quand on parle de hiérarchie, on entend généralement
à travers
, et éventuellement à
. Mais il existe une hiérarchie supplémentaire qui affecte le flux d'une ligne ou d'un paragraphe et qui est la hiérarchie spatiale: l'espace entre les lettres est inférieur à l'espace entre les mots, l'espace entre les mots est inférieur à l'espace entre les lignes, et ainsi de suite.
Pour une lisibilité optimale sur mobile, portez une attention particulière à la hiérarchie spatiale, le regroupement de caractères de style gestalt en mots, lignes et paragraphes est d'autant plus essentiel en lumière naturelle.
2. Obtenez la mesure
Measure est la longueur d'une ligne de texte. Ou, plus exactement, c'est la longueur idéale pour une ligne de texte, car il est rare que chaque ligne corresponde exactement.
La mesure idéale généralement acceptée pour une lecture confortable est d'environ 65 caractères. La longueur physique de la mesure dépendra de la conception de la police, du suivi (voir ci-dessous) et du texte exact que vous utilisez. Les 65 premiers caractères de cet article, figurant dans PT Serif, ont une largeur de 26,875, dans Open Sans, 28.4375em, dans Ubuntu, 27.3125em; si j'avais ajouté des italiques, des petites majuscules ou une douzaine d'autres détails typographiques, cela varierait davantage.
Il est rare que 65 caractères s'étendent jusqu'au bord d'un navigateur de bureau, mais sur la plupart des appareils mobiles, 65 caractères (s'ils sont affichés suffisamment grands pour être lisibles) dépassent les limites du navigateur. Par conséquent, pour les appareils mobiles, vous êtes obligé de réduire votre mesure.
Il n'y a pas de norme communément acceptée pour la mesure sur un écran mobile, mais traditionnellement, les colonnes de texte étroites dans les journaux ou les magazines aspirent à 39 caractères. Comme cette mesure idéale a été testée au cours des siècles, elle nous sert bien pour la typographie mobile.
3. Desserrer, puis serrer
Diriger est l'espace entre les lignes, et lorsqu'il est trop serré, fait que la saccade saute de la fin d'une ligne au début de la suivante difficile à suivre. Lorsqu'ils sont trop lâches, les écarts entre les mots commencent à s'aligner, créant ce que l'on appelle généralement des rivières, interrompant le bon déroulement de la ligne.
l-r: idéal leader, trop serré, trop lâche.
Le standard habituel pour le leader est autour de 1.4em, mais dans mon expérience il est trop serré pour les écrans: l'une des caractéristiques clés d'une police qui fonctionne bien à l'écran est les grands compteurs, et les grands compteurs nécessitent un petit plus pour maintenir la hiérarchie spatiale .
Inverser cette règle, une mesure plus courte nécessite moins de leadership. Ainsi, alors que vous définissez probablement un peu plus de style pour les styles de bureau, n'oubliez pas de le resserrer pour les écrans mobiles.
4. Trouver le bon point
Toutes les polices ont au moins un point sensible; une combinaison de la taille à laquelle ils reproduisent le mieux à l'écran, et le point auquel l'anti-aliasing appliqué dans le navigateur altère le moins possible la conception de la police.
Le point idéal est généralement le point auquel la plupart des traits s'alignent avec la grille de pixels - les polices de pixels, si vous vous en souvenez, ne fonctionnent que lorsqu'elles sont dimensionnées à leur emplacement idéal.
Le fait de définir une police sur son point positif produit un plus grand contraste. Le contraste est particulièrement important lors de la conception pour mobile en raison du risque d'éblouissement susceptible de distraire votre laboratoire d'appareils subtilement éclairé.
Vous constaterez que des ajustements mineurs apportés au leader vont pousser et tirer des lignes sur des pixels entiers. À mon avis, le contraste l'emporte sur celui des écrans mobiles, donc si vous devez faire des compromis pour garder des lignes sur des pixels entiers, faites-le.
L'approche standard pour les concepteurs est de mettre en forme en utilisant une grille de base, mais pour mobile, nous devons utiliser la hauteur x à la place (la hauteur x est littéralement la hauteur de la minuscule «x»). Nous savons par des études de lisibilité que le cerveau reconnaît le sommet des mots, pas le fond, donc pour obtenir un flux de saccade plus important, nous devons nous assurer que le sommet de nos caractères sont le plus étroitement alignés sur les pixels.
5. Ne perdez pas votre chiffon
Un chiffon est le bord d'un bloc de texte. La plupart de ce que vous lisez est aligné à gauche (du moins pour les langues latines), ce qui entraîne un bord droit irrégulier .
Lorsque vos yeux sautent d'un bout à l'autre de la ligne, le cerveau est plus à même de juger de l'angle et de la distance du prochain saut, si tous les sauts sont cohérents - pensez à courir sur les tremplins, c'est beaucoup plus vite si elles sont régulièrement espacées. Pour cette raison, le bord gauche de votre texte doit être plat, chaque ligne commençant au même endroit (l’exact opposé est vrai pour les langues lues de droite à gauche).
Par conséquent, vous ne devez jamais centrer plus de deux ou trois lignes de texte.
Souvent, le texte est justifié, ce qui signifie que les mots sur la ligne sont également espacés, de sorte qu’il n’ya pas de chiffon de chaque côté. (Je soupçonne que le texte justifié est à la mode parce que le design réactif a enseigné aux concepteurs de penser en bloc.) Les textes justifiés entraînent des espaces incohérents et, dans le pire des cas, entraînent quelques mots sur une ligne. Le problème avec le texte justifié est exacerbé par la mesure plus courte, de sorte que le texte justifié peut être illisible sur le mobile.
l-r: aligné à gauche, aligné au centre, justifié.
Si la netteté est vraiment importante pour vous, alors coupez le texte pour adoucir le chiffon, mais ne justifiez jamais le texte sur le mobile.
Le texte à droite irrégulier présente un avantage supplémentaire sur le mobile: le texte est souvent lu dans des situations distrayantes et les lecteurs s'éloignent fréquemment du texte pour vérifier le nom d'une station ou répondre à un appel. Un chiffon crée une forme aléatoire dans la colonne de droite, ce qui aide l'œil à déplacer sa dernière position, avec un minimum de relecture.
6. Réduire le contraste
Alors que nous voulons encourager le contraste entre le texte et l'arrière-plan, nous voulons le réduire entre différents niveaux de type.
Sur mobile, beaucoup moins de texte est visible et le contraste est exagéré
La raison en est que notre cerveau juge l’importance en fonction du contexte. Vos titres peuvent être deux, voire trois fois, la taille de votre corps de texte sur le bureau, et cela fonctionne parce que plus de texte est à l'écran. Sur mobile, beaucoup moins de texte est visible et le contraste est donc exagéré.
La plupart des concepteurs utilisent une séquence de Fibonacci pour dimensionner le texte. Pour les mobiles, resserrez les ratios pour réduire le contraste des tailles de type. Par exemple, si vous utilisez le nombre d'or pour augmenter la taille, vous multipliez par 1,618. Pour les mobiles, prenez la plus petite proportion et multipliez-la par 1,382 à la place.
Les écrans de bureau tolèrent des échelles typographiques plus extrêmes que les écrans mobiles.
7. Ajuster le suivi à l'échelle
Lorsque nous ajustons la taille de nos polices pour mobile, nous devons être conscients des changements nécessaires dans le suivi.
(Permettez-moi de commencer par dire que vous ne devriez pas ajuster le crénage. Le crénage est l'espacement de deux paires de lettres afin que l'espace entre elles soit optiquement cohérent avec l'espace entre les autres caractères. Le crénage a été ajouté à la , et cela a probablement pris des mois. Si vous avez sélectionné une police professionnelle, celle-ci a été correctement effectuée et si vous pensez que cela n'a pas été fait correctement, trouvez une autre police.
Le suivi n'est pas crénage. Le suivi est l'espacement des lettres appliqué à tous les caractères de la police. Vous ne devriez généralement pas ajuster le suivi non plus.
Les exceptions à cette règle concernent les gros textes, tels que les en-têtes et les petits textes, tels que les notes de bas de page. Un texte plus volumineux nécessite moins de suivi et un texte plus petit nécessite plus de suivi. Le premier est dû au regroupement et le second au contraste. Si vous avez apporté des modifications aux en-têtes ou si vous utilisez une police d'affichage généralement plus précise, vous devrez peut-être desserrer le suivi un peu plus rapidement.
Résumé
La typographie est un métier que les concepteurs consacrent toute leur vie à la mise au point, précisément parce que chaque texte, chaque police de caractères et chaque technologie apportent de nouveaux défis. Il n'y a pas de règles strictes qui fonctionneront toujours dans toutes les situations.
Lorsque vous aspirez à la lisibilité, vous devez tenir compte de trois principes: une fluidité dans les lignes, une hiérarchie spatiale claire et un contraste adéquat. Cela est particulièrement vrai pour le Web mobile.
Il n'y a pas de règle qui ne puisse être annulée sur la base de la preuve de vos propres yeux, mais les directives ici serviront de point de départ idéal pour un texte magnifiquement présenté sur les appareils mobiles.