Créer des titres avec du texte superposé petit et gros
Les rubriques introduisent du contenu.
Nous pouvons appliquer de nombreux effets et astuces aux en-têtes graphiques pour inciter les lecteurs à continuer à lire, à donner le ton ou à faire ressortir un titre parmi d'autres.
Mais parfois, les techniques les plus évidentes, telles que la modification du poids visuel et de la disposition, fonctionnent beaucoup mieux.
Les titres qui se chevauchent utilisent une petite quantité de gros texte et une grande quantité de petit texte pour communiquer plus qu’un simple titre peut faire seul. Cela semble contradictoire? Seulement si vous ignorez les points fins.
Lisez la suite pour apprendre à créer des titres mémorables avec du texte qui se chevauchent.
Qu'est-ce que les formes impaires ci-dessus ont à voir avec les noms "WDD" et " {$lang_domain} "? Ce sont des artefacts malheureux d’avoir posé un texte sur l’autre sans égard au placement ou au détail. Voici l'image incriminée:
En un coup d'œil, le graphique ci-dessus est une présentation simple d'un nom de blog et de son abréviation. La police de caractères est la police officielle utilisée par le blog. le orange vif vient directement du thème du site Web; et les deux lignes de texte sont centrées presque parfaitement.
Il est même épelé et capitalisé en fonction du style du blog. Mais c'est une tentative d'amateur d'imiter la technique de chevauchement en plaçant une longue ligne de texte sur une courte. (Les faiblesses de cet exemple sont exagérées, mais pas inhabituelles.)
L'ombrage ci-dessus révèle les nouvelles formes créées par les deux morceaux de texte. La relation entre les deux lignes et leur ordre dépend de la manière dont elles sont présentées. Il y a plus à chevaucher le texte que de le placer l'un sur l'autre.
Bien sûr, le chevauchement n’est pas toujours la meilleure façon d’organiser un titre court et un sous-titre long.
Les exemples ci-dessous montrent des traitements possibles quand une conception demande quelque chose de plus créatif h1 et h2 éléments.
Le texte superposé a une élégance qui ne peut pas être facilement dupliquée avec HTML (encore). Deux lignes de texte ensemble représentent souvent plus que la somme de chacune individuellement.
Principes fondamentaux du texte se chevauchant
Le texte se chevauchant contraste deux lignes de type les unes contre les autres. Le gros texte repose sur le petit texte, qui contient souvent plus de mots. Les parties les plus délicates sont de veiller à ce que les deux lignes soient également lisibles, ce qui permet aux deux de travailler ensemble au lieu de s’unir les uns aux autres et de garder le paquet entier sur le sujet.
Différentes techniques modifient l'effet du chevauchement de texte.
Voici les quatre principaux facteurs qui affectent le chevauchement des textes:
- Le placement a à voir avec le positionnement du petit texte par rapport au gros texte. Cela affecte directement la lecture du texte. Si le petit texte est en haut à gauche, il sera probablement lu en premier (avant le gros texte). Si le petit texte est en bas à droite, il sera probablement lu en second.
- Le poids relatif fait référence à la quantité d'attention qu'un morceau de texte attire par rapport à l'autre. Compte tenu de sa taille, le gros texte a tendance à dominer. Cependant, si le gros texte est fondu en arrière-plan, le petit texte sautera.
- La voix (principalement la police de caractères et la couleur) se rapporte aux choix esthétiques qui définissent l'ambiance de la typographie.
- L'interaction est la plus délicate. Cela a à voir avec la façon dont les lettres des textes fonctionnent les unes avec les autres. L'interaction dépend du placement, de la police et des personnages eux-mêmes. Le but est de lier visuellement des lignes de texte apparemment opposées.
Le placement affecte la façon dont les lignes entières sont lues
L'ordre dans lequel vous voulez que les visiteurs lisent le texte est le facteur le plus important pour déterminer comment organiser les lignes de type. L'anglais étant une langue de gauche à droite, le petit texte sur la gauche sera très différent du petit texte sur la droite.
Avec le petit texte dans le coin supérieur gauche, le graphique ci-dessus se lit comme suit: "Évitez-les comme la peste. Clichés. "Pourtant, les" clichés "sont tellement gros que les gens pourraient les lire en premier. L'équilibre entre la taille et le placement met les deux lignes sur un pied d'égalité.
La version ci-dessus est moins ambiguë. Manœuvrer le petit texte en bas à droite donne clairement la priorité au grand texte. Maintenant, il se lit comme suit: "Clichés: évitez-les comme la peste."
Les rubriques ci-dessus sont interchangeables car chaque ligne est plus ou moins indépendante. Lorsque les lignes dépendent les unes des autres, le placement est plus critique. Voici un exemple de mauvais travail:
Mettre le petit texte en bas à droite laisse pendre les lecteurs. "Peste: évitez les clichés comme le ..."? Bien que la plupart des gens le comprennent, le moment d'hésitation est la différence entre une présentation médiocre et une bonne présentation.
La disposition ci-dessus est la meilleure car le petit texte est la première partie de la phrase. Si nous voulons mettre le petit texte à droite, le grand texte devra former la première partie de la phrase. Mais encore une fois, il y a un problème.
Selon la phrase, utiliser uniquement le premier mot pour le grand texte ne suffit pas, car les lignes de texte doivent fonctionner individuellement ou ensemble. Le texte ci-dessus divise la phrase de manière incorrecte. Le verbe "éviter" n'a pas assez de sens en soi pour justifier l'indépendance. Et les "clichés comme la peste" semblent comparer les phrases trop utilisées à la maladie, au lieu de les éviter. La signification de l'ensemble du graphique change.
Même si nous devons réduire le gros texte pour l'adapter, l'utilisation de deux mots (une phrase complète) pour le gros texte améliore la lecture des deux lignes.
Avec un texte qui se chevauche, obtenir le bon phrasé à travers la mise en page est aussi important que le choix de la couleur et de la police.
Équilibrer la domination en travaillant avec, pas contre, le contexte
Bien que le but du gros texte soit de dominer, il peut aussi facilement étouffer les petits textes. Mais ce n'est pas toujours mauvais. Un bon équilibre ne consiste pas à empêcher les gros textes de dominer les petits textes, mais plutôt à montrer leur importance relative.
La taille du grand texte en fait naturellement la déclaration principale. C'est génial si le petit texte est simplement supposé supporter le gros texte. Par exemple:
"WWW" saute en premier. "Bienvenue à l'ère numérique" développe l'idée, en soutenant les trois questions. Mais si le petit texte était censé porter le message principal?
Ci-dessus, le texte principal est "Bienvenue à l'ère numérique." Et qu'est-ce que cela signifie? En fondu, "WWW" fournit un indice.
Plus le gros texte se fond dans l'arrière-plan, moins il prend d'importance. Lorsque le gros texte est à peine visible, le petit texte devient l'élément principal.
L'interaction est dans les détails
La forme d'une police de caractères est la clé de son apparence distincte. Lorsque deux lignes de texte se chevauchent, elles créent des poches, des formes étranges et d'autres distractions subtiles.
Au-dessus, le gros texte orange et le petit texte blanc ajoutent un encombrement inutile aux compteurs (c.-à-d. Les trous à l'intérieur des lettres). Seul, chaque bit supplémentaire ne nuit pas beaucoup à la lisibilité. Mais cela fait partie du problème: comme ils ne sont pas assez mauvais pour rendre le texte illisible, ils pourraient facilement être considérés comme sans importance.
Pour une lisibilité maximale, nous devons conserver les lettres du petit texte.
Comme indiqué ci-dessus, de légers ajustements ont éliminé les interférences:
- Repositionné entre les bornes en forme de pince du grand "C", le mot "texte" est maintenant beaucoup plus clair.
- Remarquez que les tiges verticales de "r" et "n" dans "explicatif" rencontrent les bords du grand "C"
- Les compteurs dans "p" et "o" dans "supportive" ne contiennent plus que du noir.
- Nous avons coupé la grande lettre "A" pour que les minuscules "s" soient "plus favorables".
Le but est de préserver les formes des petites lettres, même si les lecteurs ne le remarquent pas.
La police fait la différence
Toutes les polices de caractères ne conviennent pas aux petites et grandes tailles. A une taille suffisamment petite, les détails d'une police de caractères peuvent disparaître. Et les détails agrandis à une grande taille peuvent parfois créer des problèmes inhabituels.
Les quatre combinaisons de polices ci-dessus échouent pour différentes raisons:
- Cette police de caractères a été conçue pour imiter l'écriture manuscrite. Ses bords irréguliers contiennent des centaines de points vectoriels, dont la plupart sont perdus à une petite taille.
- Mais faites en sorte que le script soit trop gros et que les lettres ressemblent moins à de l'écriture manuscrite et ressemblent davantage à des chemins Illustrator festonnés.
- Les bords calligraphiques de Zapfino se portent mieux que ceux de Texas Hero, mais l'énorme ascendeur du "b" déséquilibre la composition.
- Lucida Blackletter est trop compliqué pour être pratique comme arrière-plan, du moins sans un arrangement très minutieux du petit texte. En outre, son caractère unique disparaît à une petite taille. Est-ce que ces swoops et ces empattements, ou est-ce juste flou?
Pour les gros textes, trop épais ou trop fins, c'est juste
Lorsque vous superposez du texte, pensez à du gros caractères à la fois en texte et en arrière - plan . Plus les lettres sont compliquées, plus elles deviennent texturées. En d'autres termes, ils sont plus susceptibles de masquer les formes de lettres dans le petit texte.
Pour éviter les problèmes, devenez gros ou mince. Les formes extra-épaisses et extra légères fonctionnent mieux qu'un poids régulier du même visage. Les deux interférer moins parce que le petit texte a moins de chance de toucher un bord.
Par exemple, le gros texte dans les variantes Lumière et Noir ci-dessus touche moins de petites lettres. Bien sûr, chaque visage et chaque ensemble de mots sont différents. Mais en général, les poids moyens causent plus de problèmes que les poids minces et épais.
Exemples pratiques
Comment cela pourrait-il fonctionner avec un texte plus probable? Voici quelques exemples de texte qui se chevauchent.
Pourquoi cela fonctionne: Fondu en arrière-plan, le gros texte donne une priorité claire au petit texte. Les formes géométriques de Museo ont peu de distractions.
Problèmes potentiels: Ce chevauchement ne fonctionnerait pas vraiment si le petit texte était plus court. Pour porter le message, le petit texte doit recouvrir les six lettres du grand texte.
Pourquoi cela fonctionne: Le petit texte ne traverse que trois traits de couleur épais et deux traits fins. Beaucoup de contraste, même pour une palette de couleurs chaudes.
Problèmes potentiels: Les bords énergétiques du gros texte semblent aller à l'encontre des lignes élégantes du petit texte.
Pourquoi cela fonctionne: Les deux lignes de texte ont des formes géométriques tranchantes et sont précisément alignées.
Problèmes potentiels: Le petit texte est-il un peu perdu? Les polices reflètent-elles vraiment l'esprit de " steampunk ? "
Pourquoi cela fonctionne: Un suivi généreux dans les grandes lettres et des lignes épurées dans les deux textes rendent chaque caractère clair.
Problèmes potentiels: La texture d'arrière-plan rend-elle le type trop difficile à lire?
Pourquoi cela fonctionne: Le gros texte épais est lisible seul, tandis que le petit texte intime invite à la lecture. Plusieurs remplissages supplémentaires conservent la profondeur de couleur des lettres majuscules "S".
Problèmes potentiels:
Mais ça aide?
Appliquons ces leçons à notre composition originale.
Pourquoi ça marche:
- Le gros texte se fond dans le fond sombre, mais sa taille garantit sa visibilité.
- La couleur vive fait ressortir le petit texte. L'alignement à droite le équilibre.
- Un espacement soigneux des petites lettres et la simplicité des grosses lettres minimisent les conflits.
- Les deux polices partagent des éléments communs. Par exemple, les deux "W" s'alignent bien qu'ils soient sur des faces différentes.
Écrit exclusivement pour Webdesigner Depot par Ben Gremillion . Ben est un concepteur Web qui résout les problèmes de communication avec une meilleure conception.
Quels sont les problèmes potentiels du dernier exemple? S'il vous plaît partager vos pensées dans les commentaires ci-dessous.