Rien n’est plus important que la lisibilité du texte sur votre site Web.

Absolument rien.

Si vous ne pouvez pas lire les mots, alors que faites-vous? Qui reçoit votre message?

La conception du texte est aussi importante que les mots eux-mêmes - des polices aux césures, en passant par la façon dont elles sont organisées à l’écran. Une partie de la conception inclut les mots eux-mêmes, la façon dont vous composez les «grands mots» sur votre site peut également faire une différence.

Sélection de police

Il y a tellement de polices à choisir. Cela peut être assez accablant.

Ne le laisse pas être. La meilleure chose à faire en matière de lisibilité est de rester simple.

Sélectionnez une ou deux polices pour votre site. Un bon point de départ consiste à utiliser une police pour la copie principale du corps et une autre pour les gros mots, tels que les en-têtes, les bannières et le texte en petits groupes. Utiliser une police différente pour chaque élément est gênant, déroutant et difficile à lire.

Commencez avec une police sans empattement pour la copie du corps principal. Les sans-empreintes sont les plus faciles à lire pour les écrans et ont tendance à bien fonctionner, même dans les petites tailles. Les polices Serif peuvent commencer à "fonctionner ensemble" ou à perdre leurs empattements en fonction de la taille de la police, de la résolution de l'écran et du contraste de couleur entre le texte et l'arrière-plan.

Typecast

Gardez à l'esprit que votre copie corporelle sera la chose la plus lue sur le site et qu'elle doit être facile à digérer sur des écrans d'ordinateur, de tablette ou d'appareil mobile. Il est correct d'utiliser différents styles de cette police de caractères dans la copie, mais ne pas devenir fou. Les caractères gras et italiques sont parfaits pour les points importants, mais les gros blocs de ces styles peuvent être difficiles à lire.

Si vous avez besoin d'aide pour sélectionner une police en essayant de jumeler des polices avec des outils en ligne tels que Google Web Fonts ou Typecast.

Google webfonts

Césure

La césure est mauvaise. C'est moche. C'est inefficace et déroutant. (Et ces problèmes s'agrandissent sur toutes les plates-formes.)

Hyphenation

Restez loin de ça.

Si vous avez besoin d'un recyclage, la césure se produit lorsqu'un mot est divisé à la fin d'une ligne, faisant apparaître une partie du mot à la fin d'une ligne et le reste du mot au début du suivant. L'utilisation de la césure est pratiquement démodée en matière de conception de sites Web, mais vous la rencontrez toujours de temps en temps. (Il est utilisé régulièrement dans les publications imprimées, telles que les journaux.)

La pensée derrière l'utilisation des tirets était de permettre au texte d'espacer correctement (et uniformément) entre les lignes. Lorsque vous travaillez avec un texte justifié, vous pouvez rencontrer des problèmes d'espacement lorsque la césure est supprimée.

Mais les tirets qui brisent les mots peuvent rendre le texte difficile à lire. Lire un trait d'union peut amener une personne à trébucher ou à mal interpréter un mot. L'utilisation de tirets peut également modifier par inadvertance l'emphase de certains mots ou leur impact sur le reste de la copie. Inconsciemment, un trait d'union indique au lecteur que le mot est un peu moins important que d'autres mots entièrement rendus.

Réserver des traits d'union uniquement pour les mots qui en ont besoin, par exemple avec des modificateurs, et non pour séparer les lignes. Le texte sera plus propre et plus professionnel et sa lisibilité augmentera sans tous ces traits gênants au bout des lignes.

Bad Racket

Justification

À l’instar de la coupure de mots, la justification intégrale est hors de portée de la conception de sites Web, même si elle est encore couramment utilisée dans l’impression.

Justification

Tapez en utilisant le réglage complet pour remplir complètement chaque ligne d'une marge gauche à la marge droite de sorte que chaque ligne ait la même largeur. L'utilisation de la justification complète crée (et ferme) les espaces entre les mots afin que l'espacement ne soit pas réparti de manière égale. L'utilisation de ce type d'alignement de texte peut fonctionner sur certains sites Web, mais ce n'est pas toujours l'option la plus attrayante. Jetez un coup d'œil à la façon dont votre texte se brise et essayez de le lire plusieurs fois pour déterminer si une justification complète est une option viable.

Il existe également d'autres types de "justification" ou d'alignement de texte. Vous pouvez définir le texte de sorte qu'il soit aligné sur la marge gauche, sur la marge droite ou sur le centre.

Pour les sites Web de langue anglaise, la justification à gauche est la pratique la plus courante. Le texte est aligné sur la marge gauche et a un bord droit irrégulier. La sensation est amicale et facile à lire. Comme cette technique est si courante, de nombreux lecteurs ne remarqueront même pas comment le texte est configuré. C'est la meilleure option pour travailler avec de gros blocs de texte.

Nanozoom

L'alignement à droite est une autre option mais ne fonctionne pas aussi bien pour les morceaux de texte. Le texte étant aligné sur la marge droite et déchiqueté sur la gauche, les points de départ et d'arrêt sont mal placés à l'écran. L'ordre de lecture naturel est inversé et l'idée de lire le texte de cette manière (surtout en grande quantité) peut rendre le lecteur mal à l'aise. Réservez du texte aligné à droite pour les petites cassures si vous souhaitez l'intégrer dans votre schéma de conception.

The paper mill

Le texte centré est un outil très populaire même s'il n'est pas recommandé pour les gros blocs de texte. (Certes, vous le trouverez utilisé de cette façon sur le Web). Les pièges de l’alignement du centre ressemblent beaucoup à ceux associés au texte aligné à droite: les démarrages et les arrêts «naturels» ne sont pas clairs. Le texte aligné au centre peut sembler quelque peu formel (car il est souvent utilisé pour des éléments tels que les invitations) et devrait être réservé aux petits bouts de texte où l'accent est important. Ce n'est pas un bon choix pour les gros blocs de copie.

Autres effets de type

Coups ou contours

Utilisez avec modération des éléments de texte plus grands comme point d’accent mais évitez les petits textes.

Barré ou souligné

Les deux sont couramment utilisés - barré comme une notation que quelque chose n'est plus valide et soulignant pour mettre l'accent. Continuez à utiliser ces outils, mais utilisez-les avec parcimonie. Les deux fonctionnent avec de petits bouts de texte, mais provoquent des problèmes de lisibilité considérables en couvrant plusieurs mots.

53

Inclinaison ou distorsion

Ces effets sont excellents lorsque vous utilisez la typographie comme forme d'art. Ils ne sont pas si efficaces lorsque vous essayez de transmettre un message. Vous devez éviter les manipulations de texte et les distorsions sur la copie principale du corps.

Couleur

hip2save

L'utilisation de la couleur peut être un excellent outil pour mettre l'accent sur un seul mot dans un bloc de texte. (Les combinaisons de couleurs les plus courantes et les plus attrayantes pour les blocs de texte sont le noir ou le gris foncé sur le blanc ou le blanc sur un arrière-plan foncé.) Recherchez des couleurs contrastant parfaitement avec l'arrière-plan. Les couleurs super lumineuses (pensez au jaune ou au fuchsia) peuvent être difficiles à lire, sauf si elles sont utilisées avec une police épaisse et large. Considérez les caractères gras en couleur pour plus d’accent, mais réservez cette technique pour un nombre limité de mots.

Garder grand texte propre

Bien que la césure puisse être considérée comme une question de préférence dans la copie corporelle, elle devrait toujours être évitée en gros caractères. Les styles de justification simples sont un must; le texte à gauche ou aligné au centre est votre meilleure option.

Les en-têtes, les bannières, les éruptions et autres types ou meubles importants doivent être faciles à lire. Non seulement ces mots sont utilisés pour la navigation, mais ils doivent également être lus afin de permettre aux personnes de parcourir le contenu de votre site Web.

Les traits d'union sont des pierres d'achoppement.

L'alignement impaire ne facilitera pas la navigation.

Il y a aussi quelques autres points à prendre en compte lors du tracé de la conception pour votre grand type.

Pensez à la taille du type en proportion de la copie principale du corps. Les titres et les titres beaucoup plus gros et audacieux parleront fort aux lecteurs, tandis que les meubles plus petits et plus fins chuchoteront.

Dewey's Pizza

Le contraste est de la plus haute importance pour les gros mots. Lorsque vous choisissez des polices, choisissez un objet qui ne ressemble pas trop à la copie du corps. Considérez une police avec empattement, en gardant à l'esprit que les empattements fonctionnent mieux dans les grandes tailles, de sorte que les terminaux et les détails de chaque lettre ne soient pas perdus dans les pixels. Une autre option consiste à choisir la couleur pour établir un style et une hiérarchie distincts pour les meubles.

Ethical Studios

Pensez aussi à l'espace autour des grands mots. Assurez-vous que les gros mots sont proches de la copie qu'ils décrivent. Ajouter un espace supplémentaire au-dessus de chaque en-tête ou titre et condenser l'espace entre celui-ci et la copie.

Ecrire pour s'adapter

Enfin, pensez à l'ajustement.

Regardez comment le texte s'aligne une fois que vous avez écrit la copie pour les gros mots. Est-ce qu'il remplit la ligne? Combien de lignes?

Visuellement, vous voulez aller pour les en-têtes qui ont un aspect cohérent. Cela s'applique à la fois au style et à la longueur des mots. Évitez les articles qui remplissent complètement une ligne et seulement une fraction de la ligne suivante. Pensez aux meubles en termes de petits rectangles; vous voulez que tout rentre dans le cadre sans laisser de vide.

modernerd

Créez un style pour les gros mots, que ce soit un en-tête simple contenant seulement quelques mots ou des pensées complètes de deux lignes au-dessus de chaque section de texte. Considérez une partie de ce style comme le type de titre que vous utilisez - posera-t-il une question, sera-t-il un constat, indiquera-t-il comment faire, montre-t-il quelque chose ou est-il plus indirect et mignon?

Essayez d'écrire des en-têtes et des titres d'une seule ligne (deux au maximum), utilisez des mots actifs.

Crafting Type

Cela peut être difficile à accomplir et se méfier des astuces. Ne prenez pas un thésaurus et remplacez-le par un mot juste pour que les choses soient bien faites. (Vous courez le risque d'utiliser le mauvais mot ou d'utiliser un terme que vos lecteurs ne connaissent pas forcément.) Pensez à la conversation lorsque vous écrivez. Composez les mots, puis révisez (coupez ou ajoutez) de manière à préserver l'intégrité de ce que vous voulez exprimer et à produire une copie propre et facile à lire.

Conclusion

La copie propre ne se limite pas à de simples caractères et tirets. Il s’agit d’écrire des copies qui ont du sens et de les présenter de manière lisible.

Pensez à votre public lorsque vous mettez tout cela ensemble. Vous utiliseriez une technique et un style différents lorsque vous écrivez des articles de blog sur des idées de mariage (sens traditionnel et féminin) par rapport aux blogs sur les tatouages ​​(probablement plus énervés et plus sombres). Votre public a un impact sur les visuels, ils devraient également avoir un impact sur votre copie.

Mais surtout, réfléchissez à la manière dont tout se passe. Retirez tout le reste de la conception de votre site, ne laissant que le type. Est-ce facile à lire? Devez-vous zoomer ou dézoomer? Êtes-vous en train de regarder à l'écran? Ce sont les vraies questions auxquelles vous devez répondre car, au bout du compte, la lisibilité est ce qui importe le plus.

Quel texte trouvez-vous difficile à lire en ligne? Quelles techniques utilisez-vous pour garder votre texte lisible? Faites le nous savoir dans les commentaires.

Image / vignette en vedette, image de texte via Shutterstock.