Est-ce que ce type fait ma conception look gras?
Rien ne peut gâcher un design comme la typographie qui ne correspond pas. Que ce soit trop grand (ou trop petit), une mise à l’échelle de type incorrecte est un problème majeur.
C'est un problème pour plus de conceptions que vous ne le pensez. Trop souvent, vous visitez un site Web où le type est parfaitement rendu sur un navigateur de bureau, mais pour y revenir plus tard à partir d’un téléphone et le trouver difficile à lire. Cela arrive tout le temps.
Le problème est que le type n'a pas vraiment été mis à l'échelle pour chaque périphérique. C'est un problème totalement évitable quand on considère une échelle typographique pour les projets.
Qu'est-ce qu'une échelle typographique?
Une échelle typographique visuelle encapsule les tailles, l’espace et les proportions des éléments de type par rapport à un autre dans un projet. Cela inclut tout, du style de texte du corps principal aux titres, aux sous-titres, aux légendes et à tout autre élément de texte.
L'échelle aide à déterminer la taille et l'emplacement des éléments de texte en relation les uns avec les autres. Pour la conception Web, en particulier, l'échelle de type visuel correspond souvent à des balises dans votre CSS (telles que h1, h2, h3, p, etc.).
Une échelle de type vous aide à créer une harmonie et un rythme dans la conception. Cela vous évite également les problèmes de style, car les éléments de texte correspondent aux éléments CSS, de sorte que chaque partie de la conception utilise les mêmes éléments et la même cohérence.
L'échelle doit être basée sur la taille du texte du corps. (Toujours définir une police et une taille pour cela en premier). Ensuite, construisez l'échelle autour de cette typographie principale. Vous ne savez pas par où commencer? Google a un recommandation solide :
- Utilisez une taille de police de base de 16 pixels CSS. Ajustez la taille en fonction des propriétés de la police utilisée.
- Utilisez des tailles relatives à la taille de base pour définir l'échelle typographique.
- Le texte nécessite un espace vertical entre les caractères. La recommandation générale est d'utiliser la hauteur de ligne par défaut du navigateur de 1,2 em.
- Limiter le nombre de polices utilisées et l'échelle typographique.
Créer l'harmonie et le rythme
Une échelle de types ne se contente pas d'aider les utilisateurs à se déplacer dans la copie, elle crée une harmonie et un rythme pour le flux de texte. Ceci est important sur n'importe quel appareil.
Alors, où commencez-vous?
UX Matters propose certaines des meilleures recherches disponibles sur le minimum tailles de texte par appareil . Notez que ce sont des tailles minimales et que les tailles de corps de texte continuent à augmenter (tout comme l'espacement des lignes), vous devez donc considérer des tailles de points plus importantes. Steven Hoober recommande de commencer au moins 40 pour cent de plus que les minimums recommandés. De plus, les styles de contenu améliorés peuvent aller jusqu'à 80% au-dessus du minimum, mais vous devez également faire preuve de prudence avec un type exceptionnellement grand.
| Type d'appareil | Taille minimale | 40% de recommandation (ajusté pour une utilisation facile) | 80% maximum (ajusté pour une utilisation facile) |
| Petit téléphone | 4 | 5,6 (6) | 7,2 (7,5) |
| Grand téléphone | 6 | 8.4 (8.5) | 10,8 (11) |
| Phablet | 7 | 9,8 (10) | 12,6 (13) |
| Tablette | 8 | 11,2 (11,5) | 14,4 (14,5) |
| Ordinateur portable / bureau | dix | 14 (14) | 18 (18) |
Une fois la taille du texte du corps définie, vous pouvez déterminer la taille des éléments de texte à prendre en charge. Il y a un art à cela et le test de vue est souvent un bon point de départ.
Il n’ya presque pas de titre trop gros. Dites ce que vous devez dire et taillez-le pour mettre à l'échelle les mots dans l'espace. Un titre à deux lignes sera plus grand qu'une ligne même si le texte a exactement la même taille.
La manière la plus simple de penser à la mise à l'échelle pour les titres et autres éléments de test plus importants est de travailler en pourcentage sur la base du corps du texte. Bien que chaque concepteur ait un point de départ différent, 250% plus grand que le corps du texte constitue un bon point de départ pour le titre; 150% pour h2, 75% pour h3 et 50% pour les éléments tels que les guillemets. (Ce n'est pas une règle, juste un point de départ.)
Voici pourquoi les pourcentages, et non la taille des jeux, sont importants: Une fois la taille du type de corps définie, les pourcentages ajustent les tailles en conséquence, quelle que soit la taille de l'écran. Chaque élément de type est relatif au type de corps.
Directives sur les caractères et l'espacement
Il existe d’autres directives que les concepteurs doivent également utiliser pour taper à l’écran. En ce qui concerne l’espacement, l’une des règles a été d’examiner les caractères par ligne pour en assurer la lisibilité.
- Ordinateur de bureau et gros appareils: 60 à 75 caractères par ligne
- Téléphones et petits appareils: 35 à 40 caractères par ligne
Notez que la lisibilité sur les écrans plus petits est basée sur le fait d'avoir moins de caractères (texte plus grand).
La même idée s'applique également à l'espacement. Vous avez besoin de plus d'espace entre les lignes de texte lorsque la taille de l'écran est limitée afin de faciliter la lecture et l'analyse du contenu par les utilisateurs. Envisagez d'ajouter un espacement de ligne supérieur de 25% sur les périphériques plus petits que pour la typographie de bureau.
La taille et l'espacement supplémentaires facilitent la sensation de resserrement ou de resserrement que les utilisateurs peuvent ressentir lorsqu'ils essaient de lire sur des appareils plus petits. Comme le canevas est petit, le flux de lecteurs et la lisibilité sont essentiels pour que les utilisateurs puissent continuer à défiler.
Conseils pour commencer
Il y a de nombreuses façons de créer une échelle typographique et de veiller à ce que le texte ne donne pas un aspect gras à votre conception. Votre façon de procéder dépend probablement de votre niveau de confort avec le code et le développement en plus de la conception.
La meilleure option consiste à utiliser un design réactif avec des requêtes multimédias. Ceci est l'option de concepteur-développeur qui fournira le plus haut niveau de contrôle sur les spécifications de texte. (Pour plus d'informations, reportez-vous aux recommandations de Google ci-dessus).
Une autre voie consiste à concevoir différentes versions. Bien qu'il s'agisse d'un concept assez ancien, il existe encore des sites utilisant des URL mobiles et des URL de bureau pour leurs sites Web. Ce n'est pas recommandé dans la plupart des cas, mais pour certains sites Web où la conception est radicalement différente ou si les utilisateurs éprouvent des problèmes différents, cela peut être une option.
L'option facile est de commencer avec un thème pour votre site Web. Veillez simplement à opter pour une option entièrement réactive. Lorsque vous utilisez un thème réactif de haute qualité, la plupart des devinettes sont éliminées pour vous. Tout ce que vous devez vraiment penser, c'est la taille du texte du corps. Assurez-vous de vérifier tout pour vous assurer que les tailles de type de mobile répondent à vos normes.
3 outils pour créer une échelle de types
Il existe un certain nombre d’outils pour vous aider à voir l’impact exact d’une échelle de typographie visuelle. Voici quelques-unes des options les plus conviviales.
- Échelle de type : Saisissez du texte et jouez avec des options telles que la taille, l'échelle et la police à l'écran; graduez le CSS ou modifiez le code directement à partir de l'outil;
- Échelle modulaire : L'échelle fonctionne comme une règle pour aider à déterminer les tailles pour le type; puis téléchargez les résultats sous forme de plug-in Sass ou JS ou affichez-les à l'écran;
- Calculatrice de typographie Golden Ratio : L'outil optimise la taille, la hauteur des lignes, la largeur et les caractères par ligne en utilisant le nombre d'or
Conclusion
La bonne échelle typographique gardera votre design svelte et élégant. C'est l'harmonie supplémentaire que les utilisateurs peuvent ne pas comprendre mais contribue à la lisibilité et à la convivialité globales.
Il est probable que l’échelle soit désactivée si la conception «ne semble pas correcte». Un format mal dimensionné peut être difficile à cerner, mais c’est souvent un endroit à regarder lorsque quelque chose dans un design est déséquilibré. Jouez avec différentes options d’échelle avant de choisir quelque chose, et rappelez-vous que la tendance actuelle est pour un type un peu plus grand que par le passé.