Minuscule texte 6 façons de l'utiliser efficacement dans la conception Web

Un de le plus gros les tendances de la conception web est en ce moment super petit. ?Minuscule? Les éléments de texte sont devenus une idée populaire, mais c'est une tendance de conception qui a suscité un débat.

Il ne fait aucun doute que les petites tailles de texte peuvent poser des problèmes de lisibilité. Mais, une fois terminé, un petit bloc de texte minuscule peut réellement aider à créer un accent visuel et à attirer les utilisateurs dans certaines parties de la conception.

Rejoignez-nous pour jeter un coup d'œil à la toute petite tendance textuelle, avec des exemples pour vous inspirer.

1. Créer une hiérarchie et une organisation

Le texte surdimensionné est l’option dominante depuis un certain temps pour les pages d’accueil et les en-têtes, mais un changement a été apporté pour fournir davantage d’informations sur le premier écran des moniteurs de bureau. (Une des raisons pourrait être que la taille de l'écran ne cesse de croître, ce qui donne aux concepteurs davantage de travaux sur lesquels travailler.)

C'est où? Minuscule? le texte entre en jeu. L'utilisation de tailles variées et d'échelles proportionnées pour la typographie crée un flux visuel distinct, allant du plus grand lettrage au plus petit. En utilisant un niveau de texte minuscule (généralement inférieur aux tailles de corps habituelles de 14 à 16 points), vous créez un point supplémentaire que l'utilisateur peut regarder. Un texte minuscule, en particulier lorsqu'il est utilisé avec d'autres tailles de texte, peut attirer l'utilisateur parce qu'il est différent.

Maxime Bonhomme utilise un texte minuscule dans la conception d'un site Web de portefeuille. Les éléments de texte les plus petits fournissent des détails clés sur les projets, tandis que les types plus volumineux décrivent le travail. Notez que les minuscules éléments de texte fonctionnent en partie à cause de la quantité d’espace et du nombre de contrats entourant chaque bloc de copie.

2. vous faire regarder

Parfois, un texte minuscule est là pour vous faire regarder ou jeter un second coup d'œil.
Comme il est souvent inattendu ou différent de ce que les utilisateurs voient sur de nombreux autres sites Web, l’élément de conception vous captive.

Mountain Dew, une marque qui n'a pas peur d'être énervée, utilise un traitement de très petit titre. Cela vous fait regarder. Et le titre s'intègre parfaitement au sommet du X pour créer un motif de mouvement des yeux distinct de l'action qui se déplace à travers l'écran avec la vidéo du joueur de la NBA jusqu'au titre de l'identifiant de la marque. Même l'appel à l'action est minuscule, mais l'utilisateur ne se sent pas mal à l'aise car il se sent intentionnel.

3. Créer une navigation engageante

Alors que de nombreux sites Web ont totalement supprimé la navigation des pages d'accueil au profit des éléments de menu style hamburger / hidden, l'utilisation de texte minuscule peut être un moyen de rétablir certains éléments à l'écran sans se sentir envahi. C'est l'un de ces flux et reflets dans les modèles de conception, passant d'un extrême à l'autre. (Est-ce que la navigation surdimensionnée sera la prochaine?)

L'utilisation d'un texte minuscule dans la navigation peut être délicate. Il doit être assez grand pour lire et cliquer facilement. Il est important d'utiliser une police de caractères simple, qui est également très lisible, car un texte minuscule peut être un peu difficile pour les yeux.

Magic of Lapland a trouvé un bon compromis avec de minuscules éléments de texte dans la barre de menus principale. Il y a beaucoup d'espacement autour de chaque élément - certains utilisant même des doubles ponts - et le simple sans empattement en blanc sur fond sombre contribue à la lisibilité. Il y a aussi un deuxième niveau de? Moins important? petit texte au-dessus de la navigation principale pour les voyageurs.

4. Pour mettre en valeur l'espace

Un texte minuscule fonctionne plus efficacement lorsque la toile est grande. Le contraste entre un petit élément et un vaste espace peut être magnifique. De gros blocs de texte minuscule peuvent être choquants et difficiles à lire, alors gardez l'élément de texte concis.

Le texte de teinte doit également être utilisé avec un objectif distinct. Avant de vous lancer dans cette tendance en matière de design, posez-vous la question suivante: pourquoi j'utilise un texte minuscule ici? En quoi cela contribue-t-il à la signification de la conception de mon site Web?

Si vous n'avez pas de réponses solides à ces questions -? Parce que je le veux? ne compte pas - alors vous devriez envisager autre chose.

Moonfarmer fait un travail magnifique en mettant de l'espace en valeur avec un texte minuscule. La conception utilise deux niveaux de typographie et de nombreux canevas largement ouverts pour créer une ambiance et présenter le contenu aux utilisateurs avant de cliquer ou de faire défiler. Le texte minuscule n'est qu'un des nombreux détails de la conception qui vous pousse à vous arrêter et à regarder. Et avec un grand contraste entre les éléments, la lisibilité ne pose aucun problème.

Il est important de garder à l’esprit la conception suivante: vous n’avez pas à utiliser un texte minuscule partout. Traitez-le comme un élément d'art spécial. Moonfarmer utilise un texte minuscule sur la page d’accueil, puis reprend le même caractère à une taille plus commune dans le reste de la conception.

5. Quand le texte N'est pas L'élément le plus important

Parfois, l'élément le plus important à l'écran n'est pas le lettrage. Le texte est secondaire à un élément visuel.

Freelance TV est un exemple parfait d’utilisation de petits textes pour aider les utilisateurs tout en permettant à un autre élément de jouer le rôle principal dans la conception. Pour ce projet, la vidéo est l'élément important. Le petit texte sert d'élément pour fournir des informations supplémentaires et encourager les inscriptions avec un bloc de texte statique qui apparaît quel que soit l'épisode présenté sur la page d'accueil.

6. Créer un élément visuel

Les éléments de texte existent principalement à lire. Cela fait sens, sens logique.

Mais parfois, les éléments de texte fonctionnent comme des éléments visuels, et peu importe qu’ils soient lus ou non. (Cela nécessite une planification et de nombreuses conversations de conception, alors ne vous attaquez pas à ce concept sur un coup de tête.)

HTML Burger utilise plusieurs couches de texte petit et petit. Le petit texte est utilisé comme descripteur avec un traitement de titre surdimensionné. Un petit texte est utilisé dans chacun des? Burger? des wrappers pour créer des éléments visuels sympas avec un peu plus d’informations sur ce que fait l’entreprise. C'est un schéma de conception que vous ne voyez pas beaucoup et dans ce cas, il est percutant.(Mais cette technique est assez difficile à maîtriser; procéder avec prudence.)

Conclusion

Pour aller minuscule ou pas? Cela peut être une décision difficile. Bien que l’utilisation de petits textes soit discutable, il existe des utilisations appropriées pour la typographie minuscule. Pour vous assurer que votre texte contient bien un texte minuscule, donnez-lui beaucoup d'espace, utilisez une police de caractères très lisible et utilisez d'autres indices de conception pour aider les utilisateurs à comprendre les mots.

Enfin, si vous prévoyez d’expérimenter avec un texte minuscule, utilisez-le avec parcimonie. Ce n'est pas une technique qui aidera votre bac à papier à entrer davantage dans un dessin. Cela fonctionne plus efficacement avec de petits blocs de texte dans des emplacements ciblés.