Les normes pour la typographie sur le web ont changé. Les concepteurs optent pour une typographie plus grande, plus facile à lire, plus transparente et cohérente pour tous les appareils. La tendance vers une typographie Web plus grande a commencé avec des traitements surdimensionnés au-dessus du rouleau, des titres aux éléments de texte d'en-tête de héros plus artistiques.
La taille du corps du texte a simultanément commencé à augmenter sur les appareils mobiles pour améliorer la lisibilité. Et à partir de là, la tendance a commencé à se répercuter sur presque tous les aspects du type Web. Si vous n'avez pas encore pensé à la taille de la copie sur votre site Web, il est temps de revenir sur cette copie 12 ou 14 points / pixel. Le grand texte est dedans!
Titres surdimensionnés
L'implémentation la plus évidente - et la plus facile - d'un texte plus volumineux consiste à utiliser des titres surdimensionnés pour attirer l'attention de l'utilisateur.
Un titre surdimensionné convient mieux lorsqu'il n'y a pas beaucoup de mots longs ou compliqués à prendre en compte. Il s’agit d’un traitement personnel qui fait que le lettrage doit être facile à comprendre.
Conseils pour réussir:
- Tenez-vous en à une police de caractères serif ou sans serif que vous pouvez utiliser dans d'autres parties du dessin. Les options de nouveauté ou de script peuvent rapidement devenir délicates.
- Faites-le grand - trop grand inconfortablement - puis reculez un peu pour trouver la bonne harmonie dans le design.
- Commencez avec un texte d'au moins 80 points et développez-le pour remplir l'écran. Veillez à utiliser une taille relative dans la conception finale afin qu'elle s'adapte correctement à tous les périphériques. (La règle CSS appropriée est "font-size", qui utilise une échelle de pourcentage basée sur une taille standard de 100%.)
Faire le cas pour une plus grande copie de corps
Si la copie du corps de votre site Web ne représente pas au moins 16 points, il est temps de repenser votre situation en matière de typographie.
Cette règle? a des racines dans le mobile, car un texte plus petit que celui des entrées fait un zoom sur certains appareils. (Cela peut être agaçant en termes d’expérience utilisateur.) La solution consiste à créer des niveaux de typographie suffisamment grands pour être lus et compris facilement.
En outre, l'objectif est que le texte sur un appareil mobile soit facilement lisible lorsqu'il est maintenu à une distance naturelle (typiquement environ une demi-longueur de bras, similaire à la lecture d'un livre).
Un texte plus volumineux peut être plus facile à lire à cette distance et convient mieux à la taille de l'écran. Les utilisateurs ne devraient pas avoir à plisser les yeux ou à rapprocher l'appareil de leur visage pour comprendre raisonnablement le texte.
Conseils pour réussir:
- Commencez avec une taille de corps d'environ 16 points. Ceci est généralement acceptable pour les ordinateurs de bureau et les appareils mobiles.
- Utilisez une police très lisible avec une largeur de trait régulière et des lignes épurées pour optimiser la lisibilité.
- Ajustez légèrement la taille vers le haut ou le bas pour les polices de caractères minces (agrandissez-les) ou larges (réduisez-les).
- Pour les pages contenant beaucoup de texte, envisagez d’agrandir encore avec du texte brut pour réduire la fatigue visuelle, par exemple 18 points ou même 20 points. (À titre indicatif, Medium utilise un corps de texte en 21 points et le site de Jeffrey Zeldman en présente 24.)
Augmenter la hiérarchie globale
Vous devez donc faire plus que simplement ajuster la taille du texte sur une partie de la conception de votre site Web. Vous devez repenser toute la hiérarchie de la typographie.
À mesure que la taille du corps du texte augmente, vous devrez redimensionner le reste du type en conséquence. Sinon, vous pourriez vous retrouver avec une échelle typographique choquante dans laquelle certaines tailles de texte sont difficiles à différencier les unes des autres.
Pour augmenter la taille d'une grande typographie, telle que des titres ou des sous-en-têtes, il est un peu moins essentiel de modifier l'échelle typographique globale. Même si ces éléments grossissent, la distinction naturelle entre les éléments de corps de texte restera (évidemment). Vous devriez également envisager d'augmenter la taille générale du texte du corps s'il commence à sembler déplacé ou si la taille du gros type fait en sorte que le corps du texte semble plus petit que ce qu'il est réellement. (Les illusions d'optique peuvent ruiner une hiérarchie de concepteurs.)
Conseils pour réussir:
- Ajustez les tailles de texte proportionnellement les unes aux autres tout au long de la conception.
- Faites attention à la façon dont le contraste de couleur et de taille influe sur l'apparence de laisser des tailles.
- Faites confiance à vos yeux si le texte semble trop grand ou trop petit, continuez à faire des ajustements jusqu'à ce qu'il vous semble correct.
N'oubliez pas de régler l'espacement des lignes
Lors de l’ajustement des éléments de texte, ne négligez pas l’espace entre les lignes. Un texte de taille plus grande nécessite souvent un interligne plus important.
Envisagez de créer des règles d'espacement des lignes basées sur un pourcentage de la taille du texte plutôt que sur une hauteur fixe. (De cette façon, ces modifications seront ajustées automatiquement.)
Conseils pour réussir:
- Commencez avec 1,5 fois (150%) la taille du texte du corps pour l'interligne du même bloc en texte. Si cela semble serré, augmentez l'interligne.
- Les éléments de fond et de texte avec un contraste extrême nécessitent souvent un petit espacement supplémentaire pour une sensation plus harmonieuse. Ajoutez un interligne pour le texte blanc sur un arrière-plan noir, diminuez-le pour les arrière-plans gris moyen.
- Jouez une attention particulière aux ascendeurs et aux descendeurs de la police de caractères choisie et ajustez l'espacement des lignes en conséquence.
La taille des textes augmente également, hors ligne
Et bien que cette tendance de la typographie vise principalement les projets de conception Web, la taille des textes augmente en général. Des courriers électroniques aux documents imprimés, les concepteurs utilisent les mêmes directives pour les projets numériques avec des conceptions imprimées de tailles similaires. (Vous pouvez assimiler un appareil mobile à une carte postale.)
Un bon design est un bon design.
Et tant de projets comportent de multiples composants dans lesquels nous nous concentrons sur une expérience utilisateur commune. Vous voulez donc que la conception d'un site Web ressemble à celle d'une carte postale associée.
L’autre point commun est que vos yeux commencent tout juste à s’habituer à voir un texte d’une certaine taille. Tout comme avec les modèles d'utilisateur, les modèles visuels facilitent la compréhension et la visualisation rapides. Un texte plus volumineux ne fait pas exception.
Conclusion
Avez-vous commencé à remarquer un changement dans les tailles que vous utilisez pour la typographie dans divers projets de conception? Personnellement, j’ai été surpris de la rapidité avec laquelle cela m’a pris. En fait, je me retrouve à faire pression tout le temps pour des tailles de caractères de plus en plus grandes.
C’est ainsi que commencent les tendances et les modifications apportées aux modèles de conception courants. J'aimerais entendre vos expériences avec essayer plus gros type. At-il été bien reçu ou avez-vous eu beaucoup de résistance? Faites-moi savoir sur Twitter et tag @designshack.