Comment gérer de gros paragraphes de texte centré?


11

J'ai travaillé sur un site Web de portefeuille très simple pour moi et le modèle que j'utilise est justifié au centre pour tout le texte. J'ai un peu de texte sur moi et je ne sais pas si c'est la meilleure façon de traiter autant de texte justifié au centre. Cela me semble un peu gênant de lire. Suis-je en train d'imaginer des choses ou existe-t-il une meilleure façon de le faire?

beaucoup de texte centré!

EDIT 1: Mon site Web est basé sur ce modèle gratuit , qui contient également de plus grandes sections de texte aligné au centre. Je voudrais laisser justifier le texte, mais je ne sais pas s'il correspondrait bien à l'apparence du reste du site.

EDIT 2:

J'ai donc inversé les couleurs pour que ce soit du texte noir sur blanc. Voici à quoi il ressemble maintenant, avec une police sens-serif également. J'ai également inclus à quoi ressemble le lien sur ce fond blanc - je devrai peut-être l'assombrir un peu:

Noir sur blanc

EDIT 3:

D'accord, donc à gauche justifié, avec ma tentative de puces. Je vais régler ça bientôt. J'ai besoin de définir correctement la taille de la police, mais vous avez l'idée.

gauche justifié!


Pourquoi avez-vous besoin de souligner que vous parlez anglais? Dans d'autres pays, les gens notent dans leur CV s'ils parlent une ou plusieurs langues étrangères.
imrek

1
@DrunkenMaster Vous supposez que Stacey est dans un pays anglophone. :)
Scott

Je suis dans un pays avec 11 langues officielles et pouvoir parler anglais nativement n'est pas très courant parmi mes concurrents.

@Scott Vérifiez son emplacement, dit l'Afrique du Sud. Quoi qu'il en soit, le centrage du texte n'est pas le seul problème. Les lettres blanches minces sur fond noir sont très difficiles à lire, en particulier une police serif. Si vous avez besoin d'un texte inversé avec de petites lettres, utilisez une police sans empattement, qui serait plus lisible. Sinon, il y a beaucoup de belles polices Web que vous pouvez utiliser, pour donner une touche plus personnelle à votre biographie, après tout, une bonne typographie est presque un must en 2015.
imrek

@DrunkenMaster, vous êtes absolument le bienvenu pour mentionner tous les problèmes que vous trouvez dans une réponse - je suis un noob complet en ce qui concerne cela (comme vous pouvez probablement le dire!) Et j'ai besoin de toute l'aide que je peux obtenir.

Réponses:


10

L'alignement du texte du paragraphe n'est généralement pas un bon choix. La compréhension humaine a été soigneusement formée pour visualiser le texte de certaines manières et lorsque vous centrez le texte d'un paragraphe, vous demandez au lecteur de travailler très dur et de maintenir le chemin visuel à travers le texte.

Cela n'est pas ressenti dans une large mesure lorsque l'on regarde de courts paragraphes d'une ou deux phrases. Mais plus il y a de texte, pire c'est.

Voici un article sur l'alignement du texte

Et UX.SE a une question connexe: le texte aligné à gauche est-il généralement préférable au texte centré?

Si l'alignement à gauche n'est tout simplement pas une option (vous ne savez pas pourquoi ce serait le cas), vous devrez peut-être repenser la conception.

(Note latérale: le type inversé sur le Web est également très difficile pour le lecteur.)

Si vous êtes prêt à utiliser ce modèle. Je suggère d'aligner à gauche le texte du paragraphe dans toutes les zones et d'utiliser une position imaginaire du côté gauche pour les aligner tous. Par exemple, je définirais une zone de contenu et je m'alignerais à gauche dans cette zone:

entrez la description de l'image ici

Les choses "liront" beaucoup plus facilement ...

entrez la description de l'image ici


Il semble que le modèle que j'ai choisi ait quelques problèmes! Je suppose que c'est ce que vous obtenez gratuitement.

Je note que le modèle est complètement défini, mais je voudrais essayer correctement avant d'abandonner et de trouver autre chose.

Je sais juste que le type inversé à contraste élevé fera plus pour détourner les utilisateurs que l'alignement du texte.
Scott

J'ai déjà décidé de changer cela en texte noir sur blanc lorsque j'en aurai l'occasion.

Et je viens de changer les couleurs. voir modifier.

5

Je n'aurais pas de problème avec le texte s'il avait 2 ou 3 paragraphes de moins. Le centrage fonctionne bien pour de petites quantités de texte, mais devient un problème de lisibilité lorsque vous en avez trop.

De ce point de vue, l'alignement à gauche est meilleur que centré (ou aligné à droite).

Le texte aligné à gauche est plus facile à lire que le texte centré pour les paragraphes. En effet, lorsque vous centrez votre texte, la position de départ de chaque ligne change. Cela oblige vos utilisateurs à travailler plus dur pour trouver où chaque ligne commence à continuer à lire.

Le raisonnement se résume à vos yeux trop d'exercice pour comprendre le texte. Dans mon cas personnel, j'ai senti que ma vue était attirée au centre du texte, remarquant par exemple des mots comme Matlab / VHDL et Python C ++. Ils me donnent une idée de ce que vous faites, mais vous n'essayez pas seulement d'énumérer les compétences, vous vous décrivez.

Cela dit, le texte n'est pas extrêmement long et le centrer est une «déclaration» de conception. Donc, si vous vouliez que cela reste ainsi, j'envisagerais d' ajouter des indices visuels pour vous aider à naviguer dans le texte. Par exemple, rendre certains mots ou phrases en gras, ou faire varier leur taille. Vous pouvez également utiliser la couleur pour mettre en surbrillance les langues. Je suis sûr que tout votre texte n'a pas la même pertinence, donc il ne devrait pas tous avoir la même apparence.


2

D'autres ont déjà fait des remarques valables sur le texte centré, donc je ne répéterai pas cela.

Il y a d'autres choses que vous devriez considérer:

  • la police serif fine (petite taille de police ou autre police fine) n'est pas un bon choix pour le texte inversé. Essentiellement, cela rend la lecture aussi difficile que le texte centré. Pensez aux personnes ayant de vieux écrans ou des appareils bon marché, qui ne seront pas du tout en mesure de lire le texte.

  • utiliser des polices avec une touche plus personnelle, Georgia ou Times est probablement un choix décent pour les sites de texte lourds qui nécessitent un chargement rapide, mais en 2015, presque tous les concepteurs de sites Web sont obsédés par la typographie . Découvrez les polices sur http://www.google.com/fonts/ Il existe de nombreuses polices serif et sans-serif très lisibles qui surprendront vos visiteurs. Utilisez le contraste, associez de belles polices, utilisez des poids différents, etc.

  • Je suppose que le site Web vous concerne et qu'il ne sera pas vraiment lourd de contenu. Créez une belle image de grand héros pour votre page principale. Comme une belle photo d'un appareil typique sur lequel vous travaillez ou de votre environnement de travail typique. Définissez-le comme image d'arrière-plan et mettez-y un joli gros texte . Cela a presque toujours un impact agréable sur vos visiteurs.

  • Structurez votre texte , utilisez une liste si vous listez des choses, utilisez des titres. Il existe de nombreuses options pour rendre le texte beau. Les vieux paragraphes ternes et ordinaires sont démodés aujourd'hui.


2

En général, il n'est pas bon d'avoir de grandes quantités de texte aligné centré car il n'est tout simplement pas très lisible. Nous suivons les lignes de texte alignées à gauche (ou alignées à droite pour les langues RTL) plus facilement que les lignes alignées centrées.

Pour ce type d'informations en particulier, je recommanderais une mise en page alignée à gauche avec les sections constituées de chaque compétence, pas une structure de paragraphe comme vous l'avez actuellement. Il le garde court, lisible et facilement extensible. Il ajoute également des indices visuels comme Yisela en parle.

Cela pourrait ressembler à cet exemple extrêmement approximatif :

exemple en coupe

Il pourrait être bon d'ajouter un laps de temps de combien de temps vous avez fait ces choses ainsi que de donner une référence à quel point vous êtes bon. Il pourrait aller juste à côté du titre de spécialité, mais doit probablement être moins souligné que le titre.


2

Les titres sont une bonne idée s'il y a un contenu complexe ou varié. Cependant, dans votre cas, vous pourriez également bénéficier d'une structure de paragraphe améliorée. Par exemple, les deux premiers paragraphes pourraient être joints afin de relier votre éducation à qui vous êtes. Dans l'ensemble, cela permet au lecteur de mieux comprendre qui vous êtes, tout en maintenant le déroulement de la discussion.

Les paragraphes que j'écris sont de bons exemples à utiliser comme modèle. Vous pouvez faire une courte déclaration avec la première ligne, puis faire un suivi avec une comparaison, un contraste ou des informations supplémentaires. Cela peut être suivi d'une ou deux lignes qui fournissent des exemples ou des informations connexes supplémentaires pour mieux transmettre le message à votre public. Enfin, terminez par un mot de liaison pour conclure sur ce que vous avez dit.

Considérer ce qui suit:

Je m'appelle Stacey et je suis ingénieur qualifié. J'ai obtenu un baccalauréat en génie, qui m'a donné les connaissances et les compétences pour concevoir des systèmes numériques au cours des cinq dernières années. Des exemples de systèmes que j'ai conçus incluent (...). En plus de mes connaissances techniques, je suis de langue maternelle anglaise avec une formation formelle en communication professionnelle en anglais.

La première ligne arrive à la maison, disant qui vous êtes et ce que vous faites. La deuxième ligne explique pourquoi être un ingénieur qualifié est pertinent. La troisième ligne fournit des exemples qui soutiennent votre expertise technique. La dernière ligne relie vos compétences techniques à d'autres compétences professionnelles. Dans l'ensemble, le paragraphe offre une structure, un flux et une disposition de qualité améliorés.

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.