Les images semblent mauvaises avec une largeur de paragraphe parfaite
Je travaille sur un WordPress et j'essaie de maintenir largeur de ligne parfaite de ~ 70 caractères . Mon blog a beaucoup de messages et la plupart des messages contiennent à au moins une image par paragraphe, généralement plus. Le site est donc très chargé en médias.
1. MAUVAIS
La capture d'écran ci-dessus montre la vue du contenu du post avec un wrapper défini pour une largeur de 1140 px, il est extrêmement difficile à lire car il y a jusqu'à 150 caractères par ligne. Peut-être qu'au début, tout semble correct, mais en réalité, il est extrêmement fatigant de lire uniquement après quelques lignes.
2. BON (?)
Et ici, les paragraphes sont écrasés à 700 pixels, ce qui donne 50 à 80 caractères assez agréables par ligne.
À mon avis, cela semble assez bien, mais je ne sais pas si ça va si les images sont tellement plus larges que le texte (elles sont toujours à 1140 pixels)? Cela semble beau au début, mais lorsque je fais défiler 10 images par article, mes yeux sautent du milieu de la page (texte) vers la gauche (images) et cela devient rapidement irritant. Ou peut-être que je réagis de manière excessive et que tout est en ordre?
3. MIXTE (?)
Justifier le texte peut aider un peu ici mais personne ne veut lire un texte justifié. De plus, j'ai l'impression que les images sont beaucoup trop petites sur une largeur de 700 pixels, tout semble vraiment compressé. Je pense que cela pourrait être encore pire que le point 1, mais je ne suis pas sûr.
Ma question est - comment aborder ce problème? Le numéro 2 vous convient-il? Peut-être que je devrais changer quelque chose? La typographie est vraiment difficile et tout indice serait très apprécié!
Il n'est pas facile de proposer une réponse sans voir tout le contenu visuel de la page. Ce sont quelques concepts généraux.
Le problème de conception n'est pas le texte, en fait l'énoncé de la question dit qu'il a déjà une solution: un maximum de 50 à 80 caractères par ligne. Le problème est le cadre du conteneur et les lignes structurelles créées par les images.
Il y a un cadre de conteneur défini par les ombres latérales et une partition centrale à trois colonnes donnée par les cadres d'image. Cela établit une structure solide conditionnant l'ensemble de la conception, ce qui fait flotter la colonne de texte en ne respectant aucune de ces lignes.
Dans cette conception telle qu'elle est maintenant proposée, le texte est subordonné aux images et il devrait y avoir un équilibre entre les deux. Cet équilibre est atteint en brisant l'hégémonie de ces lignes structurelles fortes. En fait, la suppression du cadre du conteneur contribue beaucoup à la qualité visuelle:
Les exemples suivants sont des propositions exagérées pour briser ces lignes structurelles verticales.
Réduisez la résistance des axes structurels verticaux
Un cadre de conteneur horizontal solide élimine tout axe émergent de son contenu.
Supprimer la "cartésianité"
Une façon extrême d'éliminer tout axe structurel
Ajoutez du dynamisme
Briser le motif de répétition créé par les trois images égales profite à la conception. Dans cet exemple, non seulement supprime les lignes structurelles émergentes, mais aide également à définir le cadre de texte:
L'axe central de l'image gauche correspond à la marge d'alignement gauche du texte
La deuxième image bord gauche correspond à l'alignement gauche du texte
Le troisième axe central de l'image correspond à la ligne d'alignement gauche du texte.
Il n'y a rien de mal à casser les images en dehors de la largeur du paragraphe, en fait, à bien des égards, cela améliore l'attrait esthétique. Je suppose que sur mobile, ce serait la même largeur. Mais cette technique pour casser les choses hors de la largeur du paragraphe - J'ai vu de nombreuses plateformes d'actualités bien connues le faire.