Lisibilité sur le Web (Bootcamp de conception d'UI, semaine 4)

1. Intro: Au cours de la quatrième semaine du bootcamp de conception de l' interface utilisateur, nous examinerons la lisibilité. Nous devrons d'abord comprendre les différentes étapes de la lecture de quelqu'un. Nous examinerons certains des mythes concernant la lisibilité sur les sites Web. Par exemple, le mythe selon lequel les polices sans empattement sont plus faciles à lire que les polices à empattement. Ils ne le sont donc pas. Bien sûr, le mythe selon lequel nous devrions avoir notre police de caractères corporelle toujours à 16 pixels. différentes polices de caractères sont de tailles différentes à 16 pixels et différents appareils ou différentes distances de notre visage. Nous allons plutôt apprendre une formule un peu plus difficile pour nous assurer que nos polices de caractères sont de bonne taille à lire. Et nous veillerons à ce que ces tailles s'adaptent bien aux différents appareils. Nous découvrirons une illusion d'optique qui rend un peu plus délicate que vous ne le pensez d'associer une police de caractères à une police de caractères corporelle. Enfin, nous allons voir comment choisir la longueur de la ligne et la hauteur de la ligne une fois que vous connaîtrez la taille de votre police de caractères. Ensuite, à la fin de ce court cours, vous saurez comment choisir la taille de police, la longueur de la ligne et la hauteur de ligne pour n'importe quelle police de caractères afin de la rendre optimale en termes de lisibilité sur le Web. 2. Comment nous avons lu: Avant de pouvoir parler de lisibilité, nous devons examiner comment les gens lisent réellement. Cela semble assez évident. Mais même si vous regardez une application Web, il y a deux types de lecture différents en cours. La première est quand on essaie de trouver quelque chose. Donc, votre navigation et vos boutons et ce genre de choses où vous savez ce que vous recherchez et que vous utilisez le texte pour vous aider à identifier la chose. Et l'autre est lorsque vous essayez d' extraire des informations à partir de quelque chose, peut-être que vous regardez une visualisation de données ou que vous lisez un article ou un commentaire que quelqu'un a écrit lorsque vous Je ne sais pas encore ce qu'il contient et vous essayez d'extraire et comprendre les informations qu'il contient. Ce sont deux types de lecture très différents pour nous aider à comprendre la différence, je vais emprunter une définition à Toni Basil. Vous avez peut-être entendu parler de Tony Belsen car voici un champion de la lecture de vitesse. C'est un expert sur la façon dont on apprend, et c'est le gars qui a inventé les cartes mentales. Tony Boson dit qu'il y a sept étapes à lire. Le premier est la reconnaissance. Il s'agit d'identifier le E sur la page comme étant celui qui se trouve quelque part dans votre cerveau. La plupart de ces travaux ont été réalisés avant de commencer à lire, lorsque vous apprenez ce que signifient chacune des lettres, l'étape suivante est l'assimilation. C'est la partie physique. C'est à ce moment que la lumière rebondit de l'écran et pénètre dans œil, puis est transportée jusqu'à votre cerveau. La troisième étape est celle de la compréhension. C'est là que nous comprenons réellement ce que disent les mots. Tous les mots de la page combinés ont une certaine signification et comprennent ce qu'est cette signification. La prochaine étape est celle de la connaissance. C'est ici que nous l'appliquons aux autres choses que nous avons apprises précédemment. Peut-être nous formons-nous une sorte d' opinion sur ce que nous avons lu. Nous pourrions le rejeter ou l' intégrer dans nos autres idées. Les trois premières étapes sont toutes apprises à l'école. Mais à moins d'aller au collège ou à l'université, vous n'avez probablement pas vraiment appris le stade des connaissances. Vous n'avez pas vraiment appris à le réécrire selon vos propres mots ou à avoir une opinion sur ce que vous lisez avant d' arriver à l'université. Il s'agit donc d'une étape plus avancée de la lecture. Si nous repensons à notre application Web lorsque nous avons des étiquettes pour les pages, navigation et les boutons, nous n'avons pas à nous soucier de cette étape. Les gens savaient déjà ce qu'ils cherchaient. Nous devons simplement nous inquiéter de ces deux premières étapes. Mais pour toutes les autres parties de notre application où nous donnons des informations à quelqu'un et nous avons besoin qu'il les retire, interagisse avec les informations et les utilise d'une manière ou d'une autre. Ceux-ci s'appliqueront aux sept étapes. La cinquième étape de la lecture est la rétention. Cela a été en fait capable de l' emmagasiner quelque part dans notre cerveau pour la ramener plus tard, lorsque nous en avons réellement besoin, puis nous nous rappelons, c' est-à-dire lorsque nous retirons cette information de le stockage quand nous en avons besoin. Et Tony Buttons, dernière étape, étape sept, c'est la communication. Être en mesure d'utiliser les informations que nous avons stockées et rappelées et de les expliquer à quelqu'un d'autre. Je pense que cela vaut la peine d'être conscient de ces sept étapes et de réfléchir ces sept étapes lorsque nous faisons des choix typographiques. Mais je n'y vais pas trop de détails, certainement pas pour l'instant. Toutefois, si vous prenez une décision semblable à ce que vous devez utiliser comme corps de texte dans un grand bloc de typographie. Nous venons d'examiner les deux premières choses ici, la reconnaissance et l'assimilation. On pourrait dire : Vous savez quoi ? Helvetica est un corps vraiment, vraiment sympa. Suivez-le car c'est très, très rapide à percevoir. Il est très rapide et efficace pour l'assimilation. Il utilise des formes géométriques simples. Il nous faut sensiblement moins d'efforts pour assimiler les lettres. Lorsque nous avons examiné l' anatomie de la typographie, nous avons mentionné que l'ascender d'un Helvetica H n'est pas particulièrement élevé, rend presque identique au n. Cela nous pose des problèmes de reconnaissance instantanés. De même, si vous regardez a, C a une très petite ouverture et la même forme géométrique qu'un O ou un E. Et bien sûr, les majuscules et les minuscules L sont à peu près la même forme. Même si nous prenons simplement en compte ces deux premières étapes lorsque une décision typographique, nous pouvons voir comment elles peuvent réellement se contredire massivement. Helvetica est un excellent choix pour l'assimilation, mais un choix terrible pour la reconnaissance. Et en raison de la surutilisation de la police Helvetica est probablement particulièrement mauvaise pour la mémoire et l'engagement, ce qui signifie que la plupart des étapes entre la compréhension et la communication seront affectées négativement par le choix de cette police de caractères. Maintenant, il peut sembler inutile de regarder la définition de chaque lettre et critiquer ou de louer le facteur de reconnaissance et d' assimilation de ces petits détails minuscules. Mais en tant qu'adulte, quand on lit, on ne regarde presque jamais chaque lettre individuelle. Et si vous lisez assez vite, vous ne pourrez même pas regarder un seul mot à la fois. Cela signifie qu'au fil du temps, nous apprenons à lire un mot entier en raison de la forme générale de ce mot. Ce n'est peut-être même pas celui sur lequel je me concentre actuellement. Il peut s'agir de deux ou même trois mots. Si nous lisons particulièrement rapidement, ce qui signifie qu'il n'est même pas mis au point lorsque nous le lisons. L'identification de la différence entre un Helvetica o et un Helvetica ou C ou E lorsqu'il n'est pas au centre de notre objectif, entraîne une erreur de lecture potentielle et affectera donc négativement la en six étapes. Le moindre détail d'une police de caractères qui affecte la reconnaissance, assimilation, l' engagement dans la mémoire, ou l'un de ces détails, devient extrêmement important lorsque les gens lisent un grand corps de texte parce qu'ils vont le parcourir à un rythme incroyable. Et les moindres détails peuvent les affecter émotionnellement ou affecter leur compréhension. Maintenant, si votre première langue était le japonais ou le chinois, ou d'une manière ou d'une autre les hiéroglyphes mahan ou égyptiens, vous aurez l'habitude de lire un mot entier en tant que symbole unique. Vous étiez déjà en train de lire assez vite. Mais nous devons également être conscients que l' effort perceptuel requis pour assimiler un personnage chinois ou japonais est beaucoup plus difficile. Et l'importance de reconnaissance parce que si les similitudes entre les caractères rendent encore plus important que nous prenions en compte ces facteurs avec ces alphabets. Selon Tony Boson, il y a sept étapes à lire. Lorsque nous prenons en compte tous ces facteurs, il n'y a aucun moyen de dire qu' il y a une seule police de caractères que nous devrions choisir. Ce sera le meilleur dans tous les scénarios. Et même s'il y en a eu, nous ne parlons que de lecture. Nous ne parlons même pas tous les autres aspects de communication visuelle dont nous venons de parler. Nous ne parlons pas de motiver les gens à lire. Nous parlons littéralement de la façon dont ils lisent bien. Tous ces facteurs rendent presque impossible la définition d'un terme comme la lisibilité. Mais nous allons trouver une forme de définition dans la prochaine vidéo. Sachez simplement que ce n'est pas une règle gravée dans la pierre. 3. La lisibilité: Si nous voulions mesurer la lisibilité ou la lisibilité d'un bloc de texte sur un site Web. Il y a plusieurs choses que nous voudrions prendre en compte. La façon dont les gens évaluent la lisibilité est aussi sauvage et variée que la façon dont ils mesurent la convivialité elle-même. Il existe plusieurs techniques dans lesquelles les gens comptent le nombre d'adverbes. Ils examinent la complexité de la structure des phrases, nombre de syllabes par mots qui se trouvent dans le texte. Beaucoup de choses que nous ne regarderons pas tout au long ce cours parce qu'elles n'ont pas de rapport avec la typographie. Mais si vous allez sur un site Web comme readable.com, vous pouvez insérer un paragraphe de texte et le faire coter sur ce genre de choses. Il existe de nombreuses façons de mesurer la vitesse de perception et la précision des polices de caractères perçues. Il y a beaucoup de choses à voir avec la facilité de différencier les lettres de la police de caractères. Et tout ce que je viens de mentionner est uniquement lié aux premières étapes de la lecture, non pas à savoir à quel point il est facile de se souvenir ou de rappeler, ni à quel point il vous engage et vous fait penser et former les vôtres. avis sur le contenu. En tant que typographes Web, il est préférable pour nous de penser aux variables dont nous disposons plutôt qu'à toutes les façons dont nous pouvons écrire la lisibilité dans son ensemble. Maintenant, une fois que nous aurons choisi une police de caractères, nous allons le faire en grande partie en fonction la qualité du caractère de la police de caractères à la marque. Il existe trois variables que nous pouvons contrôler. Nous pouvons contrôler la taille du texte, la hauteur de ligne et la longueur de la ligne. Vous avez peut-être entendu de temps à autre quelques règles de base concernant ces trois variables, particulier avec la taille du texte. Par exemple, vous avez peut-être entendu des gens dire que le texte doit avoir une hauteur d'au moins 16 pixels. Malheureusement, c' est une règle générale. Et en tant que concepteurs typographiques, ce n'est pas vraiment utile pour nous. 16 pixels de hauteur pour une police de caractères ne correspondent pas 16 pixels de hauteur pour une autre police, pour diverses raisons. Les 16 pixels font référence à la boîte environnante et différentes lettres et différentes polices de caractères remplissent ces boîtes de différentes manières. Ils vont peut-être jusqu' aux bords. Ils n'ont absolument aucune garantie que cela se produira. Ils sont peut-être assez petits à l'intérieur de cette boîte. Et même dans ce cas, il existe différents attributs comme la hauteur X et le poids optique. Des choses dont nous parlerons très prochainement dans certaines vidéos qui vont affecter la taille de celle-ci sur la page. Même alors. C'est avant même de parler de design réactif. En fait, nous maintenons différents écrans à différentes distances de notre visage. Ainsi, notre téléphone, lorsque nous regardons l'écran de notre téléphone, nous le maintenons beaucoup plus près que lorsque nous regardons un site Web sur un écran d'écran. Il n'y a aucun moyen de savoir exactement à quel point l'utilisateur tient son téléphone de son visage. Mais d'une manière générale, une taille de 16 pixels sur l'écran d' un téléphone n'est pas la même qu' une taille de 16 pixels sur un moniteur. Les deux autres variables, les hauteurs de ligne sur la longueur des lignes, seront affectées en quelque sorte par le choix de la topographie, puis par la taille de police. Il nous est donc impossible de régler ces problèmes tant que nous n'avons pas cette taille de police. En fait, pour n'importe laquelle de ces variables, la taille du texte, hauteur de ligne et la longueur changeant une vont affecter les trois variables. Si vous regardez la conception d' un site Web existant et que vous dites : Vous savez quoi, nous devons agrandir le texte sur ce site Web. Ça va tout changer. Lorsque nous pensons à la lisibilité en tant que typographes, nous pensons à la taille du texte, la hauteur de ligne et à la longueur de la ligne. Et nous pensons à ces trois choses qui fonctionnent bien ensemble ? Pour le reste de ce cours, je parlerai de la lisibilité et de la façon dont ces trois éléments fonctionnent ensemble. Être bien conscient qu'il y a plusieurs autres choses qui entrent dans la lisibilité du texte ou non, surtout que nous pourrions même considérer à quel point nous nous souvenons et nous rappelons bien les informations dans le cadre de la lisibilité. 4. Ratio d'aspect: Dans la dernière vidéo, j'ai dit que la hauteur globale de la police de caractères n' est pas trop importante pour nous lorsque nous pensons à la lisibilité. Et juste pour prouver ce point, je veux vous montrer quelques textes écrits en Verdana, puis des textures de la même taille, mais en Garamond. Maintenant, une grande différence entre Madonna et Garamond est que Madonna a une très, très haute hauteur X, et Garamond a une très petite hauteur X sur tout. Si vous prenez une police de caractères et que vous divisez la hauteur totale des lettres par la hauteur X, vous obtenez le rapport hauteur/largeur. La hauteur X est normalement environ la moitié de la hauteur de l'ensemble du personnage. Normalement, vous considérez quelque chose autour de 0,5 comme rapport hauteur/largeur. Mais cela pourrait aller de 0,4 à zéro 0,6. Garamond a un rapport d'aspect aussi petit que 0,38. La hauteur X de Garamond est très petite par rapport à la taille globale. N'oubliez pas que la taille correspond à la taille de la boîte environnante. Ainsi, même les majuscules peuvent ne pas rentrer parfaitement dans cette boîte. Pour Donna a un rapport d'aspect nught, 0,58. La hauteur X est assez grande à l'intérieur de la hauteur totale de la lettre. Plusieurs calculatrices sont disponibles en ligne pour connaître le rapport hauteur/largeur de vos polices de caractères. J'aime beaucoup celle-ci sur cette page que je vais partager avec vous. Et j'aime ça parce que je peux mettre le nom de n'importe quelle famille de polices et demie sur mon ordinateur afin de pouvoir calculer toutes sortes de fichiers de polices loufoques et merveilleux que j'ai. Si, par exemple, nous utilisions Verdana et Garamond ensemble, ou si nous utilisions l'une comme police de secours pour l'autre, nous voudrions qu'elles aient à peu près la même taille et qu'elles aient un rythme similaire en bas de la page. Quelque chose dont nous parlerons un peu plus tard. Si, par exemple, nous prenons 16 pixels, nous disons que nous avons des Vedanta de 16 pixels de hauteur. Nous pouvons multiplier 16 par zéro, 0,58, et cela nous donne un chiffre comme 9,28. Il s'agit de la hauteur X de la Verdana qui mesure 16 pixels de hauteur. Maintenant, si nous divisons cela par 0,38, qui est le rapport d'aspect de Garamond, nous obtenons le nombre de vingt quatre quarante deux. Vingt-quatre points quarante deux est une assez bonne taille pour fabriquer Garamond, si nous voulions ressembler à peu près à la même taille que 16 pixels pour Donna. Maintenant, comme vous le verrez, je suis tout à fait de la même taille. Et une partie de la raison est que j'ai choisi deux polices de caractères comme extrémité opposée du spectre, et elles ne se ressemblent même pas de quelque façon que ce soit. Le Garamond est assez grand comparé au Vedanta. Mais il y a aussi quelques autres choses. Garamond est une police de caractères assez ouverte, a de grandes boules ouvertes et des ouvertures, a des lignes assez lourdes et une grande variété. Il y a plusieurs aspects de cette police de caractères qui sont un peu plus difficiles à quantifier pour ces raisons, dans des cas comme celui-ci, je pourrais faire confiance à mon œil un peu plus que les mathématiques. Peut-être que je réduirais un petit peu la taille de la graisse Garamond. Pour l'instant, nous avons juste besoin de faire tout ce que je viens de dire manuellement. Mais à un moment donné dans un avenir pas trop lointain, il existe une règle CSS qui le fait pour nous. Ajustez la taille de police. Maintenant, si j'avais un peu de Garamond et que je lui ai donné une valeur de taille de police ne s'ajuste pas, 0,58 aucun point cinq huitième étant le rapport d'aspect de Verdana, alors donnez-lui une taille de police de 16 pixels, et il atteindrait automatiquement 23,2 pixels de hauteur. Pour moi, essentiellement, notre navigateur ne fera que cette petite équation que nous venons de faire pour nous. La première chose sur laquelle nous avons le contrôle lorsque nous pensons à redoubler nos textures est la taille de la police, mais les tailles de police, ce n'est pas vraiment un intérêt pour nous. La hauteur X ou le rapport hauteur/largeur de la police est ce qui nous intéresse. Nous pouvons trouver le rapport d'aspect des polices à l'aide d'un calculateur de ratio d'aspect en ligne. Ensuite, nous pouvons ajuster les polices de caractères que nous utilisons ensemble afin qu' elles aient la même hauteur X plutôt que la même hauteur. Cependant, nous voulons toujours nous assurer d'utiliser nos yeux, faire confiance à nos yeux et de former nos IE. Parce que si vous aviez quelque chose comme Garamond et Verdana, il y a des tailles tellement différentes que lorsque vous essayez de les rendre uniformes, elles auront toujours l' air un peu décalées que lorsque vous essayez de les rendre uniformes, . De façon réaliste, ce n'est qu' une des nombreuses choses à prendre compte lorsque vous trouvez des polices de caractères qui fonctionnent bien ensemble. 5. Distance de visionnement: Dans la dernière vidéo, nous parlions de la façon de définir vos pixels en hauteur pour une police de caractères en fonction de ses hauteurs x ou de son rapport d'aspect. Bien sûr, nous ne voulons pas mesurer les choses en pixels, car tous nos écrans fonctionnent désormais sur la base de pixels de référence. Un pixel de référence n'a la même taille qu'un pixel si vous utilisez un moniteur de bureau, et qu'il s'agit d'un moniteur de 96 ppp, la résolution de l'écran affecte nombre de pixels d'un pixel de référence, mais il en va de même de la distance entre les appareils et le visage de l'utilisateur. Malheureusement, différents appareils et différents écrans peuvent afficher des pixels de référence à la taille correcte avec des résultats variables. Il vaut donc la peine de comprendre comment ils fonctionnent. Nous parlerons plus tard de la façon de référencer la taille de nos textes. Mais avant cela, je voudrais aborder un point sur le design que j'adore dire, que les designers ne devraient pas se soucier du monde réel. Nous devons nous préoccuper de la perception que les gens ont du monde réel. La quantité de pixels à l'écran ne l'est pas. L'important, c'est la quantité de pixels dans l'œil. J'aime les qualifier de pixels perceptuels, mais l'astronomie et la navigation avaient déjà un terme pour cela, c' est-à-dire des minutes d'arc de minutes d'arc. Une minute d'arc correspond essentiellement au nombre de degrés que la terre tourne en une minute, soit presque exactement 160e de degré. Alors pourquoi est-ce que je vous parle de ce terme utilisé par les astronomes et les navigateurs ? Eh bien, la raison pour laquelle les astronomes parlent de minutes d'arc, c'est parce que parlons de ce que nous pouvons percevoir de la terre. Une minute d'arc est à peu près l' un de nos pixels perceptuels. C'est à quel point nous pouvons vraiment gagner avec nos yeux. Si vous imaginez maintenant votre tête comme la Terre, vous imaginez la vision à 360 degrés que vous avez. Si vous tournez la tête et que vous regardez de haut en bas. Si vous prenez un mouvement d'un degré vers le haut et vers le bas, et seulement un mouvement d'un degré vers la gauche et la droite. Et vous divisez les deux par 60. Vous venez de créer la grille de pixels. C'est ce que vous pouvez réellement voir. Si quelque chose est inférieur à la moitié de la taille d'une minute d'arc, nous ne pouvons pas le voir. Et la raison pour laquelle nous mesurons en degrés ou en minutes d'arc est que la distance par rapport à notre IA fait une grande différence dans la façon dont nous pouvons la voir. Disons donc que nous mesurions quelque chose en pixels et qu'il était sur un écran, sur un moniteur. Les moniteurs se trouvent généralement à 60 centimètres du visage de l'utilisateur. Donc, 16 pixels de hauteur sur ce moniteur seraient de 24 minutes d'arc. Je vous donnerai les calculs pour cela plus tard. Maintenant, si nous affichions le même texte de 16 pixels sur un écran de téléphone portable, que nous tenons généralement environ 30 centimètres de notre visage. Ce serait plus près de 48 minutes d'arc. Et sur un iPad, 45 centimètres de notre visage regarderaient 36 minutes d'arc. Ce diagramme montre donc la différence taille du texte si chacun de ces appareils affichait des pixels réels et qu'ils ont tous la même résolution d'affichage réaliste, car vous maintenez votre téléphone plus près à votre visage, il a normalement une résolution plus élevée. En fait, Apple a donné à l'iPhone un écran Retina de 300 points par pouce ou pixels par pouce, précisément parce que vous le tenez 30 centimètres de votre visage. Cela signifie qu'un pixel représente presque exactement une minute d'arc, ce qui en fait la meilleure qualité perçue possible pour un écran de téléphone mobile. En guise de note, vous avez peut-être remarqué ce symbole drôle après les chiffres en rouge. Ce truc légèrement incliné qui ressemble à un simple guillemets. Il ne s'agit pas d'un guillemet unique, car un symbole principal est utilisé pour deux choses en typographie. Il est utilisé pour indiquer un certain nombre de pieds, et il est utilisé pour indiquer un certain nombre de minutes d'arc. Vous pouvez également abréger cela en écrivant 48 heures du matin, 48 amen ou 48 hommes d'arc. Toutes ces normes sont acceptables. Oui, c'était une façon très compliquée de dire que les choses qui sont plus éloignées semblent plus petites. Mais c'était pour que je puisse vous présenter une de ces calculatrices pratiques. Vous placez votre distance de visionnage, qui est généralement de 30 centimètres, 45 centimètres ou 60 centimètres pour un téléphone, iPad ou un écran de télévision, vous pouvez calculer légèrement différemment un écran de montre ou si vous avez même affaire à des interfaces TV ou à des films, alors dans la taille perçue, vous pouvez dire 20 ou 22 minutes d'arc. 28 à 22 minutes d'arc sont convenues pour être assez confortables pour la lecture, mais je vous donnerai meilleurs calculs pour cela bien plus tard. Et il vous indiquera la taille physique que les textes devraient être sur quelque chose à cette distance si vous voulez voir. C'est à autant de minutes d'arc. Une chose que vous remarquerez à propos de l'une de ces calculatrices est que la sortie n'est pas exprimée en pixels et c'est parce que les pixels pas une taille physique définie. Cela dépend de l'écran. Ou il est temps de revenir aux pixels de référence. Si je regarde la taille perçue ici, vous remarquerez que l' une des options est les pixels de référence ici. Vous remarquerez également que ce n'est malheureusement rien traduisible à partir d'une minute d'arc. La taille convenue d'un pixel de référence n'a malheureusement rien à voir avec notre perception. Il est basé sur un affichage de 96 pixels par pouce, que nous regardons à 60 centimètres de distance, uniquement parce qu'il s'agit de la taille normalisée d'un pixel. Au début de l'Internet, un pixel de référence est égal à 1,2789 minutes d'arc. Il est donc légèrement plus grand qu' un pixel perceptuel ou ce que nous pouvons voir. Et il est également égal à environ aucun point de 213 degrés. Il serait très pratique pour les concepteurs qui se soucient de la perception s' ils faisaient simplement un pixel de référence la même taille qu'une minute d'arc. Mais nous ne parlerons pas trop de pixels de référence de toute façon, nous y reviendrons un peu dans le module d'implémentation, mais nous n'en parlerons pas trop. Et c'est parce qu' il n'y a pas trop d'utilité, parce que différents appareils ne les ont pas vraiment adoptés parfaitement. Un rôle important de la conception et développement frontal n'est jamais de faire confiance à un ordinateur. faut comprendre ce qu' il fait en coulisses car beaucoup d'entre eux vont se tromper. Si nous combinons tout ce que nous savons sur Arcminutes et tout ce que nous savons sur rapport d' aspect ou la hauteur X de notre texte, nous devrions être en mesure de trouver très bons calculs pour notre typographie. Nous regardons encore une chose. Si nous examinons cet article du Journal of vision à partir d' expériences réalisées l'efficacité de la lecture, vitesse de lecture, nous pouvons obtenir un assez bon calcul de la taille nos textes devraient l'être. Si nous voulons que les gens lisent efficacement, nous pourrions vraiment punir nos lecteurs si nous le faisions aussi petit que possible pour qu'elle soit lisible, nous voulons qu'elle soit confortable et facile à lire pour eux rapidement. La hauteur X idéale pour l'efficacité de lecture sur votre site est de neuf minutes d'arc pour la taille de la hauteur X. Cela est en fait basé sur la recherche qui a constaté que la taille parfaite est de six minutes d'arc. Mais on va le faire monter un peu. Alors, assurons que nous nous occupons de tous les points de vue. En fait, si vous créez une application où les utilisateurs sont peut-être un peu plus âgés ou ont peut-être un problème difficile à voir. Vous voudrez peut-être pousser cela jusqu' à 12 minutes d'arc. Mais la taille recommandée est généralement neuf minutes d'arc pour la hauteur X. Maintenant, si par exemple, nous ramenons Vedanta et le Garamond. Nous pouvons simplement multiplier neuf en fonction du rapport hauteur/largeur de ces deux polices de caractères. Et cela ferait de Garamond 24 minutes d'arc et total, alors que Madonna ne compte que 16 minutes d'arc au total. Ou pour remettre cela dans une mesure que tout le monde peut comprendre. Nous pouvons examiner les pixels de référence. Garamond serait de 18,8 pixels de référence, tandis que pour Donna, 12,5 pixels de référence. Cela rendrait Garamond 2,4 millimètres sur un mobile et 4,2 millimètres sur un ordinateur de bureau. Et cela ferait pour Donna 1,4 millimètres sur un mobile et 2,8 millimètres sur un ordinateur de bureau. Nous pouvons constater que la taille recommandée est très différente. En fait, aucun d' entre eux ne se rapproche même de 16 pixels de référence. Que cela nous plaise ou non, nous allons toujours avoir besoin de pixels de référence de temps en temps. Alors, comment ai-je calculé ce dernier chiffre ? Nous savons qu'un pixel de référence équivaut à 1,2789 minutes d'arc. Donc, si vous divisez neuf par 1,2789, vous obtenez quelque chose autour de sept. On pourrait donc dire que sept pixels divisés par le rapport hauteur/largeur vous donnent la hauteur de pixel de référence idéale pour la police de caractères. En tant que concepteurs, nous sommes beaucoup plus préoccupés par les pixels que les gens voient que ceux qui sont affichés à l'écran. Nous ne mesurons donc pas la hauteur du texte à l'aide des pixels affichés à l'écran. Nous le faisons en utilisant des minutes d'arc, ce qui représente le 160e degré des quelques semaines et nous voyons tout autour de nous lorsque nous bougeons la tête. La taille idéale pour que les utilisateurs puissent lire rapidement et efficacement le texte se situe entre 612 minutes d'arc. Nous visons idéalement neuf en plein milieu afin de répondre à tous les goûts. Si vous avez des informations qui prouvent que la plupart de vos utilisateurs ont une vue particulièrement bonne ou particulièrement mauvaise vue. Vous voudrez peut-être déplacer cela un peu plus vers l'un des deux extrêmes. Sinon, nous allons généralement viser une hauteur X de neuf minutes d'arc. Bonjour, il n'y a aucun moyen l'appareil que nous regardons sache loin de nos visages. Bien que les gens aient essayé développer de petites technologies qui le feront. Nous devons donc nous occuper des unités de mesure que le CSS nous fournit. Nous les examinerons un peu plus tard. Tout ce que nous devons nous inquiéter pour l'instant, c'est qu'il n'y a pas de taille minimale pour la typographie. Cela dépend de l'appareil et de la distance que les gens retiennent généralement cet appareil de leur visage. Et que nous pouvons utiliser un calculateur de taille des minutes d'arc afin d'obtenir une taille uniforme entre mobile, tablette et ordinateur de bureau et éventuellement la télévision et les montres. Devrions-nous le vouloir. 6. Grand texte: Nous savons maintenant que la taille optimale pour nos textes, pour que la personne moyenne puisse les lire rapidement et efficacement, est que la hauteur X doit être de neuf minutes d'arc. Bonjour, mais qu'en est-il du reste du texte sur la page ? Qu'en est-il des en-têtes ou du texte sur les boutons ? Toutes ces choses doivent se démarquer un peu parce que le texte du bouton ou d'autres éléments de l'interface utilisateur sont des choses que nous allons rechercher plutôt que de lire activement et les en-têtes doivent saisir notre attention et jurés. Eh bien, la lisibilité n'est pas notre préoccupation avec ces autres morceaux de texte ou bouton comportant deux mots, peut-être que l'en-tête comporte le plus de cinq ou six mots. Nous ne nous inquiétons pas s'il est efficace pour quelqu'un de lire ceux qui ont des éléments d' interface utilisateur étaient inquiets s'il est facile à repérer hors du coin de notre œil et les titres étaient inquiets si cela a un impact et il donne le ton du message du reste du texte. Essentiellement, nous pouvons rendre toutes ces choses un peu plus grandes que ce qui est confortable pour de grandes zones de lecture, car cela résout d'autres objectifs. Cependant, il y a d'autres éléments à prendre en considération qui ne concernent pas la lisibilité, mais qui correspondent parfaitement à ce dont nous venons de parler. Une chose que vous avez peut-être remarquée sur tous ces différents appareils. Votre montre, votre téléphone portable, votre iPad, votre moniteur, votre téléviseur, représentent leur taille. ils sont éloignés de votre visage, plus ils sont grands. Et je ne veux pas seulement dire à quel point ils sont physiquement grands. Je veux dire, ils prennent plus de minutes d'arc s' ils sont plus éloignés. Si vous êtes actuellement assis à 60 centimètres de votre moniteur et que vous tenez votre téléphone portable debout ou confortable à 30 centimètres de votre visage, vous remarquerez que vous pouvez toujours voir votre moniteur, votre téléphone portable couvre peut-être un quart de l'écran. Si vous avez un téléphone massif pour la plupart de nos actifs, encore moins. Nous pourrions donc dire que nous avons beaucoup plus de minutes d'arc disponibles sur un écran de bureau que sur un écran mobile. Encore une fois, probablement un peu évident, mais vous voudrez peut-être vous demander pourquoi nous n' aimons généralement pas avoir de grandes choses proches de nos visages. Idéalement, nous ne voulons pas non plus de gros titres obstructifs. Si vous regardez un panneau publicitaire, le gros texte est massif et le petit texte est assez petit. Le rapport entre les textes d' en-tête et le corps du texte d'un panneau d'affichage est énorme. Bien sûr, un panneau d'affichage a un objectif tout à fait différent de celui d'un téléphone portable. Mais vous remarquerez que plus l' appareil est petit et plus vous le tenez près de votre visage, plus les titres sont petits. Si nous avons un gros texte de bannière sur la page d'accueil d' un site Web ou un en-tête en haut d'une application Web. Le nombre de minutes d'arc va diminuer sur les appareils que nous maintenons plus près de nos visages. Nous avons simplement moins de minutes d'arc disponibles à l'écran. Et nous n'aimons pas non plus avoir de grandes choses trop près de notre visage. Une autre chose à noter avec une grosse typographie, vous avez peut-être remarqué certains moniteurs ces jours-ci, certains téléviseurs et moniteurs branchés ont été courbés et vous demandez à quoi ça sert ? Eh bien, voici un point intéressant pour vous. Si vos yeux sont actuellement positionnés au milieu de votre écran, vous disposez de plus de minutes d'arc au milieu de votre écran, alors que vous en haut à gauche de l'écran, par exemple. Parce que la partie supérieure gauche de votre écran est encore légèrement plus éloignée que le milieu. Et à cause de cela, tout semble s' incliner légèrement vers l'extérieur . Il y a une sorte de distorsion de l' objectif. Lorsque le Parthénon a été construit dans la Grèce antique, ils l'ont construit de sorte qu'aucun des murs n'est droit. n'y a pas de lignes droites sur le Parthénon. Tout ce qui concerne le Parthénon corrige toujours si légèrement ce type de distorsion de lentille que nos yeux ont lorsque les premières polices de caractères ont été coupées, lorsque les pièces métalliques physiques ont été coupées, les grandes lettres étaient prises avec un poids optique différent des lettres plus petites pour corriger ce type de distorsion de l'objectif que nous avons dans nos yeux. Je l'ai mentionné plus tôt. Si vous regardez une police de caractères d'avant le XXe siècle, alors que le processus de découpe du type était un peu plus manuel, la fraise de type donnerait une taille optique ou optique plus petite . J'attends les lettres plus grosses. Il faudrait être très enthousiaste et typographique plus pur pour vouloir faire quelque chose de similaire à cela aujourd'hui, mais c'est à peu près possible. Maintenant, avec les polices de caractères variables, il existe plusieurs raisons pour lesquelles nous travaillons sur notre système typographique que nous n'allons pas faire de la police des en-têtes la même police que le corps. Mais l'un d'entre eux devrait vraiment être qu'ils n'apparaissent pas de toute façon pareils. Il existe quelques familles de polices de caractères disponibles dans lesquelles le concepteur de types a légèrement modifié l'en-tête et le corps du texte afin que vous puissiez les utiliser à différentes tailles. C'est une très bonne option si vous souhaitez utiliser la même police de caractères pour les textes d'en-tête et le corps du texte sans nous paraître légèrement bizarre et déformé. Nous en parlerons un peu plus tard. Pour le texte de titre ou le texte d'interface utilisateur. Nous n'avons pas trop à nous inquiéter facilité de lecture, car il n'y a normalement pas trop de mots tant qu'il est supérieur taille de lisibilité dont nous avons parlé dans la dernière vidéo. Nous ne voulions pas savoir que différents écrans ont généralement des quantités différentes de minutes d'arc, plus nous les tenons près de notre visage, plus l'écran est petit. Par conséquent, nous devrions réduire ces gros morceaux de typographie un peu plus petits en comparaison, car il n'est pas aussi essentiel qu' ils nous sautent dessus lorsque nous le tenons plus près de notre visage. Et nous n'avons pas autant d'écrans immobiliers. Et en tant que leçon de topographie super avancée, j'ai parlé un peu de la façon dont le dimensionnement optique va apparaître de plus en plus grand du texte à cause du fait que quelque chose qui est plus arcminutes big présente une légère distorsion de l'objectif. Si nous voulions utiliser la même police de caractères pour les en-têtes et le corps, nous pouvons choisir une famille de polices une police d'en-tête spécifique, qui aura en fait une optique légèrement inférieure. dimensionnement. Et bien plus tard, nous aborderons le sujet passionnant des polices variables, qui pourrait nous permettre de contrôler ce dimensionnement optique à un niveau beaucoup plus granulaire. 7. Longueur des lignes: Nous disposons maintenant d'un bon calcul pour déterminer la taille de police idéale pour les grands corps de texte. La prochaine mesure que je veux examiner qui aide à la lisibilité est la longueur de la ligne. Nous mesurons la longueur de la ligne en caractères par ligne. Mais comme le nombre de caractères, y compris les espaces, apparaissent sur chaque ligne, vous avez probablement entendu une règle à un moment donné indiquant qu' il devrait y avoir 50 à 70 caractères par ligne pour la longueur de ligne idéale. Je dis quelque chose de 50 à 70 caractères par ligne parce que chaque règle que j'ai jamais entendue comme celle-ci a des chiffres légèrement différents. Ils sont tous basés sur des recherches datant de 1971 qui disaient que la longueur idéale du personnage est comprise entre 5075 caractères par ligne. Et donc idéalement, vous voulez viser environ 60 caractères par ligne. Et c'est l'une de ces règles pour lesquelles vous ne pouvez pas simplement vous renseigner sur typographie si vous traitez spécifiquement de la typographie Web, car ils n'ont pas testé avec la typographie Web en 1971. Et lorsque les gens ont finalement commencé à tester en 98, puis au début des années 2000, ils ont constaté que la longueur de ligne optimale pour la typographie sur un écran numérique était de 95 caractères par ligne. Il s'agit de 95 caractères par ligne, c'est la longueur optimale pour la vitesse et l'efficacité de lecture si vous lisez sur un écran d'ordinateur maintenant avant de vous précipiter et de changer chaque conception numérique que vous avez jamais. fait pour que les textes soient de 95 caractères par ligne. Il y a d'autres choses que je pense que nous devrions envisager. Tout d'abord, nous ne parlons que de lisibilité. La lisibilité était une sorte de convivialité et il y a une autre chose que les concepteurs pensent à beaucoup d'expérience utilisateur. Lorsque les utilisateurs voient un bloc de texte sur un écran d'ordinateur, ils ont l'impression de lire plus rapidement et plus efficacement avec une longueur de ligne inférieure à 95 caractères par ligne. Et ils ont l'impression de progresser davantage. On a l'impression qu'ils lisent plus vite même s'ils ne le sont pas. C'est peut-être à cause du sentiment de progrès que nous ressentons lorsque nous atteignons la fin de la ligne et que nos yeux remontent au début de la ligne suivante. Ou peut-être que c'est ce sentiment satisfaisant de faire défiler le bouton de la souris vers le bas, sachant que nous avons terminé la lecture d'un écran entier pour toutes les raisons pour lesquelles nous devrions être conscients que 95 caractères par ligne peut être la meilleure longueur de ligne acceptée pour la lisibilité sur un écran d'ordinateur, mais cela ne signifie pas que c'est la meilleure expérience pour les utilisateurs. Nous voulons également savoir que les caractères par ligne sont potentiellement assez ambigus. Lorsque nous regardions la taille de notre texte, nous regarderons une minute d' arc et nous regardions le rapport hauteur/largeur. Certaines polices de caractères sont beaucoup plus minces que les autres polices de caractères. Nous avons de grandes lettres larges et des minuscules lettres minces selon la police de caractères que nous choisissons. Et il est possible que nous lisions plus rapidement sur une longueur de ligne plus longue sur un écran d'ordinateur, car l'écran d' ordinateur se trouve généralement à 60 centimètres de notre œil, alors que des documents imprimés comme un journal , un magazine ou un livre se trouvent généralement à environ 45 centimètres de notre œil. Il s'agit, bien sûr, de spéculations. que je veux dire, c'est qu'aucune des recherches que nous avons actuellement sur longueur des lignes n'est suffisamment précise pour que nous puissions l'utiliser comme règle solide. Je pense que c'est l'un des rares cas où vous pouvez ignorer un peu la science et ignorer un peu l' expérience utilisateur, et regarder ce que la plupart des gens font sur leurs sites Web pour voir ce que notre les utilisateurs sont les plus habitués à. Et cela revient à la case 1 comprise entre 4575 caractères par ligne. Cependant, si vous avez déjà affaire à des polices de caractères chinoises, japonaises et coréennes, vous voulez viser environ 15 à 30 caractères par ligne pour une distance de livre iPad votre visage ou jusqu' à 40 sur un écran d'ordinateur. Je recommanderais cependant de pousser à l'extrémité supérieure de ces chiffres, car de plus en plus de sites Web réalisent des prêts plus longs, peut-être basés sur la science ou peut-être pour d'autres raisons. Les heures supplémentaires sont donc de plus en plus habituées à lire des longueurs de ligne plus longues sur les écrans d'ordinateur Mac. Et cela va rendre la lecture plus rapide et plus efficace pour vos utilisateurs si c'est votre objectif. Pour ces raisons, je recommande d'essayer de viser environ 75 caractères par ligne sur un écran d'ordinateur. Et maintenant, nous pouvons probablement spéculer que 60 caractères par ligne sont plutôt bons pour un iPad, car nous savons que c' était la longueur optimale pour le matériel imprimé et que c'est peu près le même endroit que nous aurions un iPad. Ensuite, nous voulons le réduire légèrement plus lorsque nous passons à un écran mobile, peut-être quelque part dans l'ordre de 50 caractères par ligne. Et encore une fois, sachez qu'il ne s'agit pas d'une science exacte sur laquelle je vous ai dit que les expériences sont basées, mais soyez également conscient que lorsque d'autres personnes essaient de vous dire la quantité correcte de caractères par ligne, ils ne fondent pas non plus cela sur une science exacte. Ce qui serait absolument génial comme si nous pouvions varier un peu la ligne en fonction de la largeur des caractères de la police. Et heureusement, avec CSS, nous pouvons en quelque sorte le faire parce que nous pouvons contrôler la largeur à l'aide d'une unité EM plutôt que dire combien de caractères par ligne, par exemple. Et nous examinerons cela un peu plus tard lorsque nous mettrons en œuvre le genre de choses nous parlons en ce moment. Nous mesurons la longueur des lignes avec des caractères par ligne, c'est-à-dire tous les caractères spéciaux, tous les espaces, chaque caractère présent dans la ligne. Des recherches originales ont révélé que 50 à 75 caractères par ligne sont les meilleurs pour la vitesse et l'efficacité de lecture. Mais c'était basé sur l'impression. Lorsque vous regardez un écran d' ordinateur, il s'avère que les caractères optimaux par ligne sont 95. Cependant, les gens ont l'impression progresser davantage avec des lignes plus courtes. Par conséquent, une ligne plus courte peut être une meilleure expérience utilisateur même si la lisibilité est pire. Et il est largement admis, mais pas encore prouvé que nous voudrions moins de caractères par ligne alors que nous rapprochons l'appareil de notre visage pour essayer de le faire correspondre à ce que sont nos utilisateurs. actuellement utilisé pour utiliser d'autres sites Web. Je recommande personnellement d' opter pour quelque chose comme 75 caractères par ligne sur un ordinateur de bureau, 60 caractères par ligne sur un iPad, puis 50 sur un appareil mobile. Mais vous voudrez ajuster cela à la hausse ou baisse selon que vous préférez que votre utilisateur ait une meilleure expérience ou si préférez que votre utilisateur ait vous souhaitez qu'il lise plus rapidement. 8. Hauteur des lignes: Nous avons quelque chose qui ressemble une équation exacte pour déterminer la taille de la police. Nous voudrions peut-être jouer un peu avec ça. Lorsque nous l'examinons, nous avons quelque chose qui est en quelque sorte une équation pour déterminer la longueur de la ligne, mais en grande partie basé sur ce plupart des autres personnes font plutôt que sur ce qui est le mieux pour le lecteur. Et puis, lorsque nous regardons la hauteur de la ligne, ce sera presque entièrement par moi et en faisant confiance à notre propre jugement, nous devenons lentement de moins en moins scientifiques au fur et à mesure que nous travaillons dans chacune de ces sections lorsque nous écrivez notre CSS. C'est pourquoi, dans le développement Web nous appelons cela des hauteurs de ligne. Mais généralement, les concepteurs ou quiconque s' occupe de la typographie le qualifient de leader. Et c'est parce qu'il mettrait de petits morceaux de plomb entre les lignes des polices métalliques de style ancien. Pour comprendre les problèmes liés à la hauteur des lignes ou à la lecture, nous devons comprendre ce qui rend plus efficace la lecture d' une ligne de textes plus longue sur un écran d'ordinateur. Nos yeux ne s'arrêtent pas réellement sur chaque lettre et ils ne s'arrêtent probablement même pas sur chaque mot, selon la vitesse à laquelle vous lisez. Nous effectuons ces mouvements oculaires saccadiques où nos yeux sautent d' un endroit à l'autre, ce qui permet de trouver peut-être trois ou quatre mots à la fois avant de faire un autre saut. Je l'ai mentionné plus tôt. C'est pourquoi avec quelque chose comme Futura, vous ne pouvez pas avoir un OH et un qui ressemble trop, car ils ne sont probablement pas au centre même de votre champ de vision et peut-être un peu floues. Maintenant, faire de notre mouvement oculaire saccadique le prochain endroit optimal pour que nous puissions choisir le nombre optimal de mots que nous pouvons. En fait, c'est un peu délicat. Nous devons connaître les hauteurs de ligne, la longueur de la ligne et la taille de la police exactement. Alors que l'endroit idéal pour sauter sur I2 ensuite, ce mouvement oculaire saccadique sera beaucoup plus facile si nous faisons un petit saut le long d'une ligne droite, alors si nous faisons un grand saut, un angle vers le début de la ligne suivante. Même le lecteur le plus compétent va sauter de temps en temps, surtout s'il a affaire à une hauteur de ligne, une taille de police ou une longueur de ligne auxquelles il n'est pas particulièrement habitué. Avoir une longueur de ligne plus longue et donc moins de lignes signifie qu' plus grand nombre de mouvements oculaires saccadiques se déroulent le long d'une ligne plate standard, mais ajoute que la longueur de la ligne augmente. Nous allons incliner la tête de gauche à droite, nous tendrons tous les yeux de gauche à droite pour reprendre tous les mots. C'est pourquoi j'ai suggéré dans la dernière vidéo de lire longueurs de ligne plus longues sur un écran de bureau que dans un livre, par exemple, uniquement parce que si la taille du type est relativement similaire, la longueur de la ligne est inférieure à quelques minutes d' arc sur un moniteur. En ce qui concerne les hauteurs de lignes, nous voulons vraiment voir ce que font la plupart des autres sites Web. la plupart des sites Web disent que la hauteur de votre ligne devrait être environ 130 à 150  % de la hauteur du texte. Par exemple, si vous avez décidé que 140 % correspond à la meilleure hauteur de ligne et hauteur de votre texte était de 20 minutes d'arc. Bonjour, vous viseriez une hauteur de ligne de 28 minutes d'arc. Quels sont les facteurs qui nous permettraient atteindre une hauteur de ligne de 150 % par rapport à une hauteur de ligne de 130 %. La première chose à faire est que si longueur de votre ligne est relativement longue, vous voulez une hauteur de ligne supplémentaire. Cela signifie que lorsque vous faites ce mouvement oculaire saccadique au début de la ligne suivante, les angles ne sont pas si serrés. Il ajoute également un peu plus d'espace de respiration, un peu plus d'espace blanc autour de ce qui serait autrement un bloc de texte sombre assez dense. Nous allons maintenant examiner cela plus tard, mais une technique courante consiste à regarder une page de texte et à plisser les yeux si légèrement, ou d'ajouter un filtre de flou à la page. Idéalement, nous voulons que la page ait une couleur grise assez cohérente plutôt que de grandes zones noires, sombres, épaisses et denses. Lorsque nous examinons un bloc de texte, la majeure partie du texte n'est pas au centre de notre champ de vision, donc semble floue. Nous voulons que ce texte soit agréable pour notre utilisateur et qu'il n'ait pas l' air intimidant et effrayant. Donc, pour cette raison, si nous avons choisi une police de caractères comme Vedanta, qui a une hauteur X très élevée. Par définition, il a donc des ascenseurs et des descendants assez petits. Par conséquent, nous voulons un peu plus de hauteur de ligne pour ces polices de caractères avec une grande hauteur X. Parce que plus ils se rapprochent l'un de l'autre, plus la couleur de la page est dense et plus nous recherchons l'utilisateur. Si nous avons un rapport hauteur/largeur plus important, un rapport hauteur/hauteur de la police de caractères est plus élevé. Nous voulons également augmenter un peu cette hauteur de ligne. Enfin, la seule chose qui va nous faire changer la hauteur de la ligne est purement basée sur le fait que nous la regardons. Nous devons commencer à faire confiance notre propre perception à un moment donné et à voir à quel point cela paraît dense et intimidant sur la page. En règle générale, si vous doutez de deux hauteurs de ligne possibles pour un bloc de texte, optez probablement pour la plus grande. Vous ne vous inquiétez pas vraiment de l'immobilier lorsque vous avez affaire à des applications Web numériques. Et si cela fonctionne mieux, n'hésitez pas à le pousser au-dessus de 150 %. J'ai vu beaucoup de très bons sites Web pousser tout le mélange jusqu'à 200% de hauteur de ligne. Vous ne voulez jamais vous en tenir rigidement à aucune de ces règles ou à d'autres règles. Si cela fonctionne bien, alors cela fonctionne bien ce que vous devriez faire en fonction expérience de l'utilisateur à la lecture, il va faire des mouvements oculaires saccadiques ou des sauts de différentes manières . tailles le long de la ligne jusqu'à une certaine longueur de ligne. Ces sauts sont plus faciles et plus précis que de revenir à la ligne suivante. Si la longueur de la ligne est relativement longue, nous ferions le mouvement de l'œil saccadique vers la ligne suivante, un angle beaucoup plus serré. Nous voulons donc augmenter la hauteur de la ligne à mesure que nous augmentons la longueur de la ligne. Une technique courante que nous examinerons plus tard pour évaluer nos blocs de texte consiste à flouter l'écran. Le bloc de texte doit avoir une couleur relativement cohérente, mais ne doit pas non plus être trop sombre à une règle 0,1 pour réduire la densité de cette couleur si vous avez affaire à une police de caractères avec une hauteur X importante, a également ajouté plus de hauteur de ligne. Une police de caractères avec une grande hauteur X représente naturellement la majeure partie de la police de caractères. Plus près de la ligne suivante, nous ajoutons un peu d'espace de respiration supplémentaire là-dedans. En fait, nous allons fonder règle de la hauteur de ligne beaucoup plus sur notre propre perception et nos propres yeux visaient environ cent trente, cent cinquante pour cent cent cent cent pour cent pour cent pour cent cent cent cent cent cent pour cent pour cent cent cent cent cent cent cent pour cent pour cent cent cent cent pour cent pour cent hauteur. Et nous le faisons principalement parce que c'est ce que font la plupart des autres sites Web. Il y a beaucoup de sites Web qui vont au-delà de cela, 150 pour cent jusqu'à 170, voire même légèrement plus loin. N'hésitez donc pas à dépasser cette limite supérieure si cela fonctionne bien sur votre application. 9. Localisation: Tout au long de cette section sur la lisibilité, j'ai parlé exclusivement typographie latine ou de texte latin. Et ce que je veux dire par là, c'est l'alphabet que vous voyez actuellement à l'écran. Vous pouvez, de temps à autre, l'entendre appelé alphabet romain. J'évite cela parce que le mot Roman signifie déjà des trucs typographiques. Maintenant, quelques petites choses à propos de notre alphabet latin. C'est un peu étrange. Un seul glyphe. N'oubliez pas qu' un glyphe est l' une des formes, l'un des symboles de l'alphabet peut être un son phonétique. Ainsi, par exemple, comment le H produit un son, il pourrait être combiné avec différents glyphes comme le th des deux, créer un son phonétique unique pour plusieurs glyphes. Lorsque nous mettons un espace, cela signifie qu'un mot a pris fin et que le suivant a commencé. Mais nous avons aussi des mots composés comme nous. Nous pourrions dire où et parfois nous pourrions mettre une apostrophe ou un trait d'union pour dire que les mots étant composés et parfois non, un glyphe peut être un mot entier comme par exemple, moi. Et à bien des égards, l' alphabet latin est assez bizarre, et probablement la langue anglaise est la plus bizarre de tous. Mais juste pour que nous comprenions quelques-unes des règles, tout d' abord, cela va toujours de gauche à droite. Il ne va jamais de haut en bas. Il ne va jamais de droite à gauche. Et nous commençons la prochaine ligne. Si nous examinons cette phrase ici, comment la pandémie du virus du coronavirus va-t-elle changer ? Ramadan pour les musulmans, le texte latin se brise généralement toujours sur un espace moins qu'il n'y ait un mot particulièrement long où nous, cela pourrait mettre une césure n, où vous avez un petit trait d' union à la fin de une ligne pour vous dire que le mot a franchi la ligne. Maintenant, ces règles peuvent changer beaucoup pour différentes langues. En fait, même la règle de césure que j'ai mentionnée, certaines langues pourraient avoir le trait d'union au début de la ligne suivante. Et certaines langues peuvent avoir une césure à la fin d'une ligne et au début de la suivante. Maintenant, lorsque nous avons créé notre mémoire, j'ai dit qu'il est important de savoir pour quelles langues vous créez, mais aussi si vous entretenez une conversation avec votre client au sujet des langues, il y a un grand nombre peu de choses dont vous voulez parler , car certaines règles linguistiques sont moins strictes que d'autres. À travers la suite de cette vidéo, je vais vous donner quelques trucs rapides à rechercher lorsque vous avez affaire à différentes langues, il serait impossible pour moi de le savoir, et encore moins de vous expliquer chaque règle avec chaque alphabet. C'est probablement autant d'alphabets dans le monde que de vidéos dans ce cours. Maintenant, c'est évident que vous devrez peut-être faire face. Vous avez peut-être remarqué que j'ai configuré mon navigateur en arabe. Les onglets se trouvent en haut à droite. Tous les boutons et tout sont à l' opposé. Et si je regarde les sites Web d' Al-Jazeera en arabe, vous pouvez voir que tous les textes qui vont de droite à gauche en tant que concepteur et certainement tant que développeur, cela vaut également la peine de dire que manière générale, tout change de droite à gauche. Donc, l'icône de recherche, qui se trouve normalement en haut à droite, se trouve maintenant en haut à gauche, nous changerions généralement une valeur et le haut du code HTML pour indiquer qu'il s'agit de texte de droite à gauche. que nous pouvons facilement créer tous les styles pour cela. Nous en parlerons davantage dans la section Implémentation. Mais il vaut la peine d'être conscient, si vous êtes concepteur, que vous devrez parfois créer les motifs arabes séparés du reste des designs pour d'autres langues. Parce que les boutons, etc., vont souvent se déplacer de gauche à droite vers de droite à gauche ou certainement dans la majorité des endroits où j'ai travaillé. Normalement, ce n'est pas le cas qu' un designer crée des dessins distincts pour l'arabe. Nous développons tout simplement pour passer de l'autre côté. Mais tout dépend vraiment du client avec lequel vous travaillez. De manière générale, le texte arabe apparaît peu près de la même taille que les textes latins. Donc, à moins qu'il y ait une bonne raison, vous pouvez normalement conserver les mêmes tailles de texte et hauteurs de ligne, mais cela peut dépendre beaucoup la police que vous utilisez pour les textes arabes. Une dernière chose à prendre en compte avec l' arabe est que vous allez de droite à gauche. Si vous devez citer quelque chose au milieu de certains textes arabes dans une autre langue qui va de gauche à droite. Ce texte sera toujours lu de gauche à droite ou vice versa. Si vous citez un peu d'arabe au milieu d'un texte de langue différente, ce texte ira toujours de droite à gauche. C'est bon. Il peut s'avérer difficile de faire face à cette situation. Mais une chose à surveiller, c'est s'il traverse une ligne, on pourrait finir par avoir un saut de ligne dans une autre direction. Si jamais nous avons des citations dans un alphabet qui va dans une direction différente au milieu de certains textes. Nous voulons idéalement l'envelopper dans une sorte de période pour empêcher qu'il ait une citation MIT de saut de ligne. texte japonais est probablement la seule langue, l'alphabet dans lequel vous voudrez peut-être augmenter un peu la taille. Parfois, les gens augmentent la taille du texte d' environ 15 % uniquement parce qu'ils l'ont traduit en japonais. Et c'est parce qu'il y a beaucoup de caractères incroyablement compliqués avec le chinois, il existe une version simplifiée de l'alphabet. Parfois, avec le japonais, il y a certaines lettres ou certains glyphes que vous ne pouvez pas éviter. Si souvent, les gens peuvent augmenter la taille. Une autre chose avec les Japonais, c'est qu'il n' y a pas nécessairement d'espaces. Je suis sur le site de la BBC en ce moment et il y a parfois des espaces, mais exactement quand et où ceux-ci apparaissent peuvent être légèrement débattus. Il est tout à fait acceptable d'écrire du japonais sans espace. Et cette petite marque de ponctuation du cercle est parfois utilisée pour marquer la fin d'une phrase un peu comme un arrêt complet. Maintenant, quelque chose dont nous parlerons à nouveau plus tard est la ponctuation suspendue. Si ce petit symbole de cercle devait apparaître, pourquoi à la fin de la ligne ici, il ne se briserait pas sur une nouvelle ligne. Il accrocherait la marge comme dans la zone blanche à droite, on voit souvent des gens pendre la ponctuation lorsqu'ils écrivent une citation dans des textes latins, parce que le guillemet apparaissent normalement au début de la ligne. Par conséquent, le guillemet est suspendu au-dessus de la marge sur le côté gauche. Il semblerait donc pousser dans la marge. Bien que nous ayons la même règle avec le japonais, ce petit cercle ici, il y a un arrêt complet ou un accrochage dans la marge s'il apparaît à la fin d'une ligne, il y a une règle CSS pour la ligne cassure appelée saut de ligne, saut de trait de ligne. Si nous définissons cette règle à la stricte, cela empêchera certaines parties de syllabes japonaises de franchir la ligne. Parfois, un symbole japonais peut simplement faire partie d'une syllabe. Tout comme la façon dont un seul glyphe en anglais produit un seul son phonétique, mais seulement une partie d'une syllabe. Nous pouvons utiliser cette règle CSS, saut de ligne strict pour empêcher une partie d'une syllabe de passer à la ligne suivante. Ou si nous voulons qu'il soit complètement justifié sans espaces, nous pouvons écrire un saut de ligne libre, ce qui lui permettra de passer à la diapositive suivante. Il existe certaines règles dans le code unique que vous définissez sur votre page. Normalement, en haut de votre page, vous auriez quelque chose comme l'Unicode équivalent à UTF-8. Bien qu'ils soient légèrement différents codes uniques comme ascii, ces codes définiront certaines règles pour lesquelles glyphes peuvent se briser sur une nouvelle ligne et ceux qui ne peuvent pas le faire. Ils sont mis à jour assez souvent, donc je ne vais pas entrer dans les détails ici, mais de temps en temps, vous devrez peut-être vérifier quelles sont les règles Unicode pour ce qui peut et ne peut pas se briser dans différentes langues . Dans les langues d'Asie du Sud-Est comme par exemple, les espaces de liaison n'apparaissent pas entre des mots spécifiques, mais apparaissent en fait à la fin d'une phrase. Le site Web sait comment et où franchir une nouvelle ligne, car UTF-8 a désormais des règles sur les endroits où vous pouvez et ne pouvez pas franchir la ligne suivante en thaï. Mais certaines langues d'Asie du Sud-Est n' ont toujours pas de rôle dans UTF-8, Unicode. Et certains sites Web ont toujours un petit symbole bizarre où vous pouviez ajouter un espace entre les mots sans qu'il apparaisse physiquement sur le site Web pour informer le navigateur où Il pourrait se casser la ligne. Par exemple, quelque part ici se trouve peut-être la fin d'un mot et le début du suivant. Les gens ont l'habitude d'insérer un symbole qui n'avait pas d'espacement visible mais qui agissait comme un espace sur le site Web. Maintenant, ces derniers étaient très problématiques parce que vous pouviez ajouter ces espaces ne sont pas facilement en mesure de voir qu'ils étaient là. Mais vous pouvez également en ajouter plusieurs au même endroit sans vous en rendre compte. Pour la plupart des langues d'Asie du Sud-Est, ce n'est plus un problème. Mais si vous avez affaire à un bailleur, utilisez la langue, il est possible qu'il utilise toujours ces espaces invisibles. Enfin, je voulais juste dire quelques choses sur le coréen. Maintenant, à nouveau en coréen, il existe des règles légèrement différentes pour savoir si vous pouvez briser le mot médian, chaque symbole et le coréen est une syllabe. Plusieurs syllabes peuvent, bien sûr, créer un seul mot. Pouvez-vous briser le milieu du mot ? C'est une autre chose que vous voudrez demander à votre client ou à votre patron. est intéressant avec le coréen est que chaque symbole est une seule syllabe, mais chaque syllabe est composée de sons phonétiques. Le coréen est en fait un alphabet phonétiquement parfait. Cette première syllabe sur la première ligne, par exemple, indique NAM. Et cette forme en L est toujours un son, puis c'est toujours un son, et le carré est toujours un son. Chacun des symboles phonétiques est appelé OGM et l'alphabet s' appelle Hangeul. Maintenant, la police de caractères peut être enregistrée de deux manières différentes. Certaines polices sauvegardent chaque pièce de la syllabe, chaque OGM sous forme de glyphe séparé et certaines polices enregistrent la syllabe entière sous forme de glyphe. La deuxième option est beaucoup plus préférable de nos jours, mais il est possible que vous ayez affaire à la première. Cela peut être important lorsque vous finissez par devoir travailler avec une carrière et caractères à un moment donné qu'il existe techniquement deux façons différentes de sauvegarder les glyphes. C'est tout ce que je voulais vraiment dire à ce stade au sujet de la localisation. Il y a un million d'autres choses que je pourrais dire. Il s'agissait d'une vidéo rapide avec plusieurs choses différentes à faire avec différents alphabets. J'espère que cela m'a été utile. 10. Résumé: lecture comporte plusieurs étapes, allant de l'identification des formes sur la page à la combinaison avec des choses que nous avons déjà apprises, en formant une opinion. Et ensuite, les lacs rappellent cette information et cette opinion. En tant que concepteurs et développeurs, nous ne pouvons pas trop insister sur la toute première étape, en rendant simplement les formes faciles à identifier. Je me suis surtout concentré là-dessus. Mais n'oubliez pas que quelqu'un qui acquiert rapidement des informations peut être inutile s'il ne s' est pas formé d' opinion et s'en souvient. instant, j'espère que vous vous formez vos propres opinions sur tout ce que j'ai à dire. Une fois que nous avons choisi une police de caractères, les variables, nous pouvons contrôler la taille, la longueur de la ligne et la hauteur de la ligne. Nous pouvons utiliser la recherche pour mieux résoudre tous ces problèmes. Mais les derniers ajustements proviendront toujours de votre œil expérimenté. Plus vous vous entraînez, mieux vous obtiendrez. Parfois, nous pourrions comprendre suffisamment nos utilisateurs pour s'éloigner peu du chercheur. Si notre application est destinée aux personnes âgées, nous voudrions peut-être augmenter un peu la taille de cette police. Si nous travaillons avec des universitaires, nous pouvons allonger un peu la longueur de la ligne , car cela leur permet de lire rapidement. Eh bien, comme ces variables mentionnées précédemment, longueur de ligne, la hauteur de ligne et la taille de la police, nous pouvons également contrôler le style, rendre gras ou italique et colorer la police de caractères, par exemple. En règle générale, nous utilisons ces attributs pour nous aider à créer une meilleure hiérarchie visuelle sur notre page et à ajouter un peu plus de style et de caractère à notre conception.