Comment gérer les ascendants et les descendants qui partagent le même espace?


16

Il s'agit de la page d'inscription initiale de l'application de communication de mon client. (J'ai recouvert le logo - notez la boîte blanche - pour son intimité)

Je n'aime pas que le "y" descende et que le "h" monte dans le même espace. rend les deux lignes un peu trop étroites. Aucune suggestion?

(la police de l'application est roboto. Ici - j'utilise Roboto Bold.)

http://d.pr/i/g08p http://d.pr/i/ouTE

Tout autre commentaire de conception nous sera apprécié - tant que vous vous comportez bien :)


1
Ça ne me dérange pas. Vous pouvez peut-être resserrer l'espace entre les deux premières lignes pour le rendre optiquement plus cohérent. Cela dit, ce type semble vraiment grand pour le champ de formulaire.
DA01

essayez les petites capitalisations?
Lauren-Reinstate-Monica-Ipsum

@ DA01 - "le type semble vraiment grand pour le champ du formulaire" - faites-vous référence à "entrez votre numéro de téléphone" ou au numéro de téléphone entré dans la case? Pour le "entrez votre ...", je voulais quelque chose de grand et audacieux avec des flèches et d'autres clichés visuels .... mais peut-être que je l'ai fait.
user12985


Je faisais référence au texte «Veuillez saisir votre téléphone». Je suppose que c'est énervé, mais c'est aussi juste une étiquette pour le domaine, donc cela semble un peu étrange d'être si énorme. Ça me crie dessus.
DA01

Réponses:


15

Vous avez donc généralement quelques options.

Pour le moment, votre problème est que les lignes 1 et 2 sont plus éloignées que les lignes 2 et 3, même si elles ne le sont pas. C'est une illusion d'optique créée par le manque de descendants et ascendeurs entre les deux premiers, mais pas sur les deux seconds.

Les solutions se répartissent en deux catégories de base: éviter cette situation tous ensemble ou y faire face de front. Nous allons commencer par quelques façons de l'éviter.

Option 1: convertir en capitales

Celui-ci évite la situation. Cependant, vous êtes probablement attaché à votre minuscule.

(Ces exemples utilisent d'ailleurs Franklin Gothic car je n'ai pas installé Roboto).

Option 2: réorganiser les sauts de ligne

Dans ce cas, j'ai converti en 2 lignes, mais vous pouvez parfois réorganiser les sauts de ligne d'autres manières.

Avoir seulement deux lignes est une autre façon d'éviter le problème - il n'y a rien pour le comparer.

Option 3: ajustez l'espacement manuellement jusqu'à ce qu'il soit "visuellement correct"

Ici, j'ai considérablement réduit l'écart entre la ligne 1 et 2, de sorte qu'il semble "plus uniforme". Vous ne pouvez pas utiliser une formule pour cela, juste vos yeux.

En réalité, l'écart de ligne entre la première et la deuxième ligne dans cet exemple est beaucoup plus petit que l'écart de ligne entre la deuxième et la troisième, mais il ne semble pas trop mal en raison de l'illusion d'optique créée par les ascendants et les descendants dans la seconde .

Il est plausible que vous puissiez encore améliorer cet exemple rapide - lorsque vous faites cela, essayez de regarder plus loin en arrière, de plisser les yeux, etc., de sorte que vous ne regardez pas les mots, mais la forme des lettres comme si elles étaient des taches.

Option bonus: déplacer les mots pour que les ascendants et les descendants ne se chevauchent pas

Vous ne semblez pas avoir cette option avec les mots que vous avez choisis, mais vous pouvez parfois déplacer les mots vers la gauche ou la droite afin que les descendants et les ascendants ne se chevauchent pas, comme dans cet exemple avec des mots différents.

Soit dit en passant, je pense que votre utilisation du symbole dièse # ne regarde pas à droite et vous serais mieux opter pour Non ou N o - mais c'est mon opinion personnelle.


Je dirais simplement que j'aime Enter (Circle / Logo) puis votre numéro de téléphone. Une autre option serait de ne pas en dire autant du tout, je veux dire que c'est assez évident dans le champ du formulaire qu'il attend un numéro de téléphone.
Ryan

6

Dans la typographie, changer l'interligne peut affecter la façon dont vos spectateurs lisent et interprètent votre pièce.

Par exemple, en diminuant le nombre de interlignes entre deux lignes, provoquant la collision des descendants et des ascendeurs, vous aurez un effet négatif sur la lisibilité globale de votre texte.

En tant que style visuel, une direction serrée peut augmenter le rythme de lecture du texte par le lecteur (dans l'augmentation des lettres qui attirent leur attention) et / ou invoquer une sensation de crampes ou de claustrophobie dans votre pièce globale (1) , ce qui pourrait ne pas soyez votre effet souhaité ici.

D'un autre côté, l'augmentation de l'interligne peut réduire le rythme du lecteur (2) . En introduisant plus d'espace entre chaque ligne, vous ralentissez le rythme du lecteur en réduisant la quantité de lettres qui attirent leur attention. Cela peut provoquer une sensation de sensation détendue dans le texte par le lecteur. Cependant, faites attention à la quantité d'espace blanc que vous laissez, car avoir trop de leader peut entraîner des problèmes de continuité (3) , car les yeux du lecteur doivent se déplacer plus loin entre chaque ligne.

Dat fox

Votre meilleur pari pour améliorer la lisibilité de votre texte serait de faire quelque chose avec un interligne cohérent, comme ceci:

Ma maquette avec superposition

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.