Diriger: l'espace est tout aussi important que les mots
Un élément clé de toute conception de site Web est le type. La sélection des polices, des tailles et des couleurs peut constituer une grande partie de la manière dont vous décrivez votre site. Tout aussi important que la forme des lettres elles-mêmes, il y a l'espacement autour de ces lettres et en particulier le principal utilisé dans les blocs de texte.
Plus vous utilisez de type, plus le leader devient important. Derrière la police et la taille, c'est l'un des facteurs clés à prendre en compte lorsque vous examinez la lisibilité du type.
Les principales spécifications que vous utilisez pour un logo ou un écran de démarrage peuvent être très différentes de celles utilisées pour le type dans un article de blog.
D'autres éléments de conception ont également un impact sur la manière dont vous devez utiliser le leader. La taille du type, la largeur des colonnes et même la couleur de fond peuvent vous aider à faire des choix judicieux.
La façon dont vous utilisez le plus souvent intervient pour de gros blocs de texte.
Qu'est-ce qui mène?
L' insertion principale - prononcée prononcée est l'espacement entre les lignes de type. Le leader était traditionnellement mesuré en points (tout comme les polices). Le terme provient des presses à lettres de style ancien, lorsque le type était défini à la main. Des bandes de plomb ont été placées entre les lignes de type pour que tout reste parfaitement aligné.
Depuis l'avènement de la publication numérique, il a souvent été confondu avec la hauteur de ligne. La hauteur de ligne est l'ensemble de l'espace d'une ligne de base - le plan imaginaire sur lequel des lettres telles que «a», «x» et «n» sont reliées à la suivante. En revanche, l'interligne correspond à l'espace entre le bas d'une lettre sur une ligne et le haut d'une lettre sur l'autre: il s'agit littéralement de la hauteur de la ligne moins la hauteur du texte.
En typographie numérique, en particulier la typographie Web, les termes «leader» et «hauteur de trait» sont souvent utilisés indifféremment. En CSS par exemple, il n'y a pas de valeur de départ, nous utilisons plutôt line-height.
Alors que le leadership était autrefois une valeur physique et mesurable, il est maintenant le plus souvent utilisé comme concept: l'impression visuelle de l'espace entre deux lignes.
La manière dont le leader est utilisé dans un bloc de texte peut affecter la lisibilité. Il y a une fine ligne entre le type étant trop rapproché et trop éloigné. Les deux extrêmes peuvent être durs pour les lecteurs. Diriger est tout au sujet de modifier la densité de type. La clé est de comprendre quel message vous souhaitez que votre type transmette et de faire correspondre le premier en conséquence.
Pas de solution parfaite
Il n'y a pas de formule parfaite et magique pour déterminer combien vous aurez besoin. Une combinaison de facteurs intervient - taille du type, couleur, effet souhaité et surtout lisibilité.
En règle générale, le point de départ est généralement le même que celui de la police utilisée. Certains logiciels, en particulier les navigateurs Web, vont un peu plus loin et définissent la valeur par défaut un peu plus élevée que la taille des points, en utilisant généralement une valeur par défaut de 120%. Les blocs comportant du texte à 10 points ont donc un interligne de 12 points.
Cette philosophie convient parfaitement aux grands blocs de texte, tels que les articles de blog, qui utilisent des caractères communs sans ascendeurs, descendeurs ou ligatures extravagants sur des arrière-plans de couleur pâle et neutre (pensez au type noir sur blanc ou beige). Vous maintenez le sentiment que toutes les lignes de texte vont ensemble tout en ajoutant juste assez d'espace pour que cela soit facile pour les yeux.
Les blocs de texte sont plus faciles à lire lorsque l'interligne est plus large que l'espacement des mots. Cette proportion aidera l'œil à se déplacer sur la page, puis à descendre, en suivant le flux naturel d'espacement entre l'obscurité et la lumière.
Cette hauteur de ligne "normale" semblera également appropriée pour les choses qui nécessitent beaucoup de lecture. C'est la norme utilisée par de nombreux sites Web et publications imprimées.
Garde-le serré
Un trait étroit ou négatif apparaît lorsque les lignes de type sont plus proches que la taille du point. Par exemple, si votre type est dimensionné à 14 points, tout point en dessous de 14 points serait considéré comme serré, même s'il ne semble pas trop espacé sur l'écran.
Une conduite étroite peut créer un sentiment de contrainte. Il peut également être utilisé pour créer le chaos. D'un autre côté, une meilleure gestion peut être utilisée comme méthode pour rassembler des éléments de type ou pour créer un sens distinct de l'organisation. Pendant de nombreuses années dans la presse écrite et en ligne, les organisations de presse ont utilisé certaines des spécifications les plus strictes en matière de type de corps. En version imprimée, c'était pour économiser de l'espace; en ligne, c'est pour préserver le sentiment de crédibilité et l'apparence associée aux organisations et à leurs partenaires d'impression.
Pensez à la casse et aux lettres situées au-dessus et au-dessous de la hauteur x lors de la définition des spécifications de hauteur de ligne. Lorsque vous travaillez avec tous les majuscules, il n'y a pas d'ascendant ni de descendeur. Vous devriez donc peut-être resserrer l'espacement des lignes, comme la technique utilisée par Regenerate Music Co.
Le type utilisé dans des tailles plus grandes, telles que les titres ou les logos, peut parfois bénéficier d'une meilleure gestion.
Se détendre
Lâche, ou positif, le début ajoute un espacement de sorte que le début est supérieur à la taille de point utilisée pour le type. Par exemple, si votre type est dimensionné à 14 points, tout espace de 15 points ou plus serait considéré comme lâche. Avec certaines polices de caractères, l’espacement peut ne pas paraître lâche à l’écran, même s’il est classé de cette manière.
Lâche leader peut rendre une page légère et aérée. Il s’agit d’une astuce éprouvée par les concepteurs pour ajouter du plomb lorsque le type est trop volumineux ou trop lourd sur la page. Il est difficile de lire et de suivre si vous utilisez beaucoup de texte. il est préférable de réserver pour quelques mots.
La plupart des concepteurs ont tendance à utiliser une méthode plus souple pour le type de corps principal sur les blogs et pour d’autres grands blocs de texte. Lâche, mais pas trop lâche, il est facile de lire et de suivre. Il peut faire apparaître un texte plus petit qu’il ne l’est et aider à équilibrer des lignes de texte extrêmement longues. Notez l'utilisation de l'interligne sur le blog A List Apart, la police plus grande du corps utilise une spécification tandis que le plus petit type de la barre latérale droite est beaucoup plus souple, ce qui facilite le suivi du plus petit type et son équilibre avec les autres éléments de la page .
De nombreux concepteurs optent également pour une approche plus souple en utilisant des polices sans empattement. Cela peut être une option particulièrement utile lorsque vous travaillez avec des polices avec des fioritures ou des ligatures exagérées. L'espace supplémentaire permet aux lettres de respirer sans se chevaucher.
Si vous envisagez d'utiliser beaucoup de caractères gras, de caractères colorés ou de polices lourdes, vous devez également prendre les devants. Le blog Bloggess utilise une combinaison de couleurs, de caractères gras et de majuscules sur tout le site, ce qui en fait un outil de lisibilité indispensable. Dans ce cas, le relâchement permet également d'attirer l'attention sur les parties importantes du texte, qui sont en couleur et en gras.
Couleurs de fond et premier plan
La couleur et le contraste sont particulièrement importants lors du choix d'une hauteur de ligne.
Sur les arrière-plans sombres, vous pouvez utiliser un peu plus d’orientation que sur un fond plus clair pour atténuer une sensation de masse. Les couleurs sombres peuvent ajouter du poids à votre conception, tout comme le fait de choisir entre l'une ou l'autre, mais le choix d'utiliser l'une ou l'autre vous permet de créer plus d'équilibre.
La même chose est vraie lorsque vous utilisez un type de couleur. Les couleurs, autres que les gris noirs et noirs, peuvent ajouter différentes quantités de poids à votre dessin. Selon la couleur de l’arrière-plan, certains textes peuvent même avoir l’air de saigner sur l’arrière-plan - cela arrive pour certaines personnes, en particulier lors de la lecture de lettres rouges sur fond blanc. L'ajout de leaders peut aider à rendre ces types de texte plus lisibles.
Changer les largeurs et les premiers
Le design réactif rend la compréhension (et le type en général) encore plus importante.
Avec des résolutions d'écran et des formes variables, les spécifications de type doivent être adaptées en conséquence pour garantir la lisibilité d'un site. Au fur et à mesure que le texte rétrécit (ou grossit) à l'écran, le premier doit être ajusté en conséquence.
N'oubliez pas de garder à l'esprit les proportions de hauteur des lignes lorsque vous effectuez ces ajustements. Parce que le type sera plus petit pour les appareils mobiles et autres petits écrans. Pensez à augmenter la hauteur de ligne de 20% par rapport à ce que vous avez utilisé pour la conception à grande échelle. L'augmentation de l'avance devrait aider à la lisibilité lorsque jumelée à un type plus petit.
Ainsi, lorsque vous déterminez les spécifications principales de votre site, vous devez définir plusieurs ensembles de seuils: un pour la conception de votre site Web de base, un pour les périphériques de taille moyenne tels que l’iPad et les autres tablettes et un pour les téléphones mobiles. Chacun peut avoir un ensemble de proportions différent utilisé pour le texte à la hauteur de la ligne.
Conclusion
Maintenant que vous disposez de nombreux outils et conseils de pointe, par où commencer?
Il n'y a pas de liste de contrôle. Votre meilleur pari est de jeter un oeil sur le type et de voir ce que cela donne (utilisez le bon test des yeux à l'ancienne). Laissez-le reposer pendant un moment et y revenir plus tard. Vous sentez-vous toujours la même chose à propos du texte? Est-ce que le sentiment que vous ressentez correspond au sentiment que vous avez en tête pour la conception de votre site?
Notez que cela est plus efficace lorsque le bloc de texte contient une copie réelle plutôt qu'un texte d'espace réservé. Vous voulez obtenir une vue réaliste et les options d'espace réservé contiennent parfois des nombres impairs de lettres qui ne sont pas utilisées tout le temps dans la copie réelle.
Joue avec. Montrez votre conception de texte à quelqu'un d'autre pour des opinions supplémentaires. Demandez-leur ce qu'ils en pensent.
Veillez également à jumeler votre bloc de texte avec le reste des éléments de la conception. Ce n'est peut-être pas la première étape, mais parfois, le tout peut créer des effets imprévus. Assurez-vous qu'il passe à nouveau le test de l'œil.