Existe-t-il une règle canonique pour centrer verticalement du texte dans une boîte? Ou, en d'autres termes, comment aligner une boîte autour du texte? Je pourrais imaginer trois options basées sur des métriques typographiques (voir mon illustration non exacte):
- Aligner au milieu de la hauteur x
- Aligner au milieu de la hauteur du capuchon (" ligne moyenne ")
- Aligner au milieu du capuchon + hauteur du descendeur
Je suis principalement un programmeur, mais je dois souvent le faire et j'aimerais savoir s'il existe une règle commune partagée, ou si vous, les concepteurs, faites ce que vous voulez. Je préférerais des liens vers des livres de conception graphique plutôt que des opinions personnelles.
typography
text
alignment
best-practice
ernesto
la source
la source
Réponses:
Bonne question!
J'aime vraiment et suis d'accord avec les réponses données jusqu'à présent. Ma réponse se concentre davantage sur la technique pragmatique que sur le raisonnement scientifique ou mathématique. :RÉ
Cela dit, ma préférence est d'utiliser la ligne de base et la hauteur x (voir la section Termes de type ci-dessous) comme point de départ pour les lignes supérieure et inférieure de ma boîte respectivement. Espérons que ce GIF aide à expliquer:
Une fois que j'ai obtenu le chemin pour s'aligner avec la ligne de base ou la hauteur x, j'utilise ensuite les touches SHIFT+ UPou DOWNfléchées pour créer un remplissage visuel (par défaut, dans Photoshop, chaque incrément est
10px
, donc dans l'exemple ci-dessus, j'ai ajouté un40px
remplissage en haut et bas).Dans cet exemple, vous pouvez voir ce que fait l'outil d'alignement si je devais prendre la même boîte / texte et faire un "Aligner les centres verticaux" (le texte rouge est le résultat de l'utilisation de l'outil d'alignement):
Comme vous pouvez le voir, c'est assez proche (
2px
différence).Pour résumer / conclure:
Techniques que j'utilise:
1px
diff est le reste ... Je vais déplacer le texte1px
(ou plus) vers le haut au lieu de vers le bas.Cadrage photo
… et ici:
Termes de type
- https://www.supremo.tv/typeterms/
PRIME!
Voici un GIF comparant la hauteur du capuchon, le descendeur, l'ascendeur avec tous les minuscules sans descendeur / ascendant:
Je pense que les deux versions s'alignent assez bien dans la boîte.
la source
Le poids visuel est si dynamique qu'il ne peut vraiment pas être dicté par la hauteur x, la hauteur de la casquette, etc.
Certains éléments de votre conception peuvent attirer l'œil dans une direction sur l'autre bien qu'ils soient mathématiquement «centrés», de gauche à droite par rapport à la toile, par exemple.
Le "centre visuel" est l'endroit où tous les poids des éléments sont équilibrés visuellement bien qu'ils ne soient pas au centre exact.
Vous voudrez peut-être essayer d'expérimenter avec cet outil: http://javier.xyz/visual-center/
la source
Le design n'est pas toujours une science exacte. Souvent, ce qui semble correct n'est peut-être pas le vrai centre ou ce qui est mathématiquement correct.
Plus précisément, dans votre question, cela dépendrait des ascendants et des descendants dans le texte pour déterminer au mieux l'alignement optique. S'il n'y a ni ascendants ni descendants, l'alignement idéal peut changer. Dans vos exemples, le numéro trois semble être le meilleur choix car il y a des ascendants et des descendants et leur centrage semble le plus agréable à l'œil.
la source