Page d'accueil » Création de sites web » Typographe 101 Serif contre Sans-Serif

    Typographe 101 Serif contre Sans-Serif

    Au stade de la sélection des polices, un designer se demande souvent, “vers Serif ou Sans-Serif”? Choisir le type de caractère à utiliser dans une conception est d'une importance capitale car il affecte grandement lisibilité, expérience utilisateur et l'esthétique générale de la conception.

    Cependant, peu importe votre expérience en typographie, vous pouvez toujours rester coincé dans le dilemme serif contre sans-serif. Personnellement, je pense qu’un bon moyen d’en sortir consiste à comprendre les bases des empattements et des sans-empattements, et c’est précisément ce que vise cet article.

    Jetons un coup d'oeil à l'écriture suivante qui met en évidence les différences majeures entre les polices serif et sans-serif pour une meilleure compréhension des deux.

    D'où viennent les empattements?

    Les serifs sont petites lignes fines attachées à la fin des traits dans les polices de caractères. On pense qu'ils sont originaires de l'alphabet latin romain utilisé pour graver leurs écrits dans la pierre.

    Bien qu'il n'y ait pas d'origine universellement acceptée à cette pièce décorative en typographie, on pense que les Romains avaient l'habitude de peindre des lettres avec des contours sur la pierre, alors quand les sculpteurs sur pierre suivaient les marques de pinceau qui s'évasaient aux extrémités, qui a abouti à la création de empattements.

    Qu'en est-il des sans-serif?

    Sans-serif, d'autre part, signifie littéralement "sans empattements". Toute police absente de ces traits suspendus à la fin de chaque angle peut être considérée comme une police sans empattement..

    Sachant cela, comment peut le choix d'aller avec empattements ou sans-empattement affecter votre conception? Voici quelques points à considérer:

    Lisibilité

    La lisibilité est souvent mesurée comme avec quelle facilité un lecteur peut digérer le contenu. Bien entendu, la vision étant généralement subjective, de nombreux facteurs entrent en jeu, notamment la niveau d'intérêt ou le lecteur, et comment le contenu est organisé dans le bloc ou l'espace qui lui a été attribué.

    La méthode de présentation du texte "old school" utilise des empattements pour une raison. Avez-vous jamais pensé pourquoi la plupart des journaux utilisent des caractères Serif pour leur contenu? Parce que les empattements sont plus faciles à lire. Ces petites lignes décoratives dans chaque caractère guident vos yeux avec fluidité lorsque vous vous déplacez de ligne en ligne et reliez les lettres lire des textes plus longs moins pénibles pour les yeux.

    Les espaces entre les lettres (puisque vous devez tenir compte des empattements quand il s'agit d'espacement) également donne plus d'espace au lecteur pour identifier facilement les lettres les unes des autres.

    Regardez l'exemple ci-dessous et vous remarquerez que le les polices empattées facilitent la lecture à l'œil parce qu'il crée des espaces entre les lettres et les mots. Cela facilite le déplacement de votre œil d'un mot à l'autre.

    D'autre part, la police empattée devient plus difficile à lire en utilisant le même espacement. C’est parce que la séparation de chaque lettre est plus petite que vous ne pas avoir à mettre les empattements en compte lors de l'espacement.

    Lisibilité

    La lisibilité est la qualité et la clarté du lettrage. Cela concerne les détails de la police et est essentiel car il aide le lecteur à différencier les caractères. Ce diffère en lisibilité car ce dernier est principalement concerné par l’approche du contenu dans son ensemble.

    Dans le cas de l'image ci-dessus, les minuscules L et moi pour sans serif dans Arial se ressemblent beaucoup. Imaginez taper le mot “Illinois”.

    Voici pour souligner mon point.

    Cependant, il est important de noter que si votre police est illisible, elle ne pourra jamais devenir lisible. Mais il existe de nombreux cas de types lisibles qui peuvent sembler illisibles à cause de comment ils sont espacés ou mis à l'échelle par rapport à leur objectif de conception.

    Alex Poole a écrit un article bien expliqué comparant les polices serif et sans-serif afin de déterminer celle qui était la plus lisible..

    Selon lui, cinq caractéristiques sont à noter en matière de lisibilité:

    • Serif ou Sans-serif
    • Point Taille
    • Hauteur X
    • Des compteurs
    • Ascendeurs et descendeurs

    Poole a conclu, en se basant sur des arguments qui soutenaient les deux côtés, qu'il y avait vraiment aucune différence de lisibilité en matière de sélection de caractères. Il a également noté qu'il est possible que des empattements ou leur absence affectent la lisibilité mais la différence n'est même pas mesurable.

    Cependant, il a dit que:

    On peut facilement trouver une différence de lisibilité plus grande chez les membres de la même famille que chez entre une police de caractères serif et sans serif. Il existe également d’autres facteurs tels que la hauteur x, la taille du compteur, l’espacement des lettres et la largeur de trait qui sont plus fréquents. significatif pour la lisibilité que la présence ou l'absence de empattements.

    Mise à l'échelle et résolution

    Le texte dans la conception Web n'est pas statique. Il peut différer d’un écran à l’autre et doit être évolutif. C'est fait afin que le texte soit toujours lisible malgré la taille de l'écran.

    Dans ce domaine, il est prudent de dire que sans-serif remporte la bataille car il est plus flexible pour évoluer. Les polices sans empattement sont beaucoup plus faciles à mettre en valeur et à la lisibilité dans les résolutions plus petites puisqu'ils survivent au maculage en raison du manque de détail dans les.

    IMAGE: heure

    Voici un premier exemple de la mauvaise utilisation de serif. Regardez le dernier paragraphe de la couverture du Time Magazine ci-dessus et vous remarquerez facilement à quel point difficile à lire, car cela ne coule pas facilement surtout avec cette petite taille. Mais remarquez à quel point l’effet est parfait lorsqu’il est passé à sans serif pour “Jonathan Franzen”.

    Il en va de même lorsqu'une police sans empattement est agrandie. L'échelle de la police conserve sa forme générale et le rend plus reconnaissable. Ainsi, s’agissant de la mise à l’échelle, les sans-empattements ont tendance à s’adapter facilement à de meilleures tailles car ils s’ajustent bien à la taille. frottis dans les petites tailles et déchirure dans les plus grandes.

    À serif, ou sans-serif?

    Alors, quelle est la réponse à la question?

    Eh bien, on peut dire que c'est un lien évident. Choisir entre les polices sans-serif et serif revient finalement à votre but d'utiliser le texte. Si le texte que vous appelez est censé rester sur presque la même taille? Alors vous voudriez une meilleure lisibilité ce qui fait de serif un meilleur choix.

    D'autre part, si vous voulez faire la partie texte d'un site responsive, puis choisir une police sans-serif peut être plus sage car vous ne voulez pas que votre texte paraisse trop petit pour être lu.

    IMAGE: GQ

    Jetez un oeil à ces Couvertures de magazines GQ utilisant à la fois les polices serif et sans serif. Le consensus général est que les polices empattées sont utilisées sur du matériel officiel et imprimé, tandis que sans serif est principalement utilisé sur le web. Mais dans ce cas, les deux ont été utilisés, et si vous remarquerez que c'est toujours le nom du modèle de couverture qui est en serif, soulignant ainsi.

    Quelques mots de conclusion

    Rappelez-vous juste que la cohérence est la clé. Votre choix de police doit aller de pair avec l'esthétique générale du design que vous créez. Vous pouvez mélanger et assortir les caractères similaires, barbotez avec les redimensionner afin de déterminer lequel fonctionne. Cependant, rappelez-vous que vous faites cela pour que le l'utilisateur comprendrait le message et votre design a également une apparence esthétique.