Share
Chaque caractéristique imaginable de la typographie peut être désignée par son nom. Que vous parliez de la police de caractères elle-même ou de sa disposition dans une mise en page, il existe un énorme glossaire de termes qui peut vous aider à décrire les choses correctement. Jetons un coup d'oeil aux éléments de la typographie qui sont importants pour vous, en tant que concepteur web.
Il existe deux aspects essentiels de la typographie qui concernent directement les concepteurs Web:
Il est donc extrêmement important que vous puissiez exprimer (aux clients ou aux membres de l’équipe) vos opinions et décisions typographiques. Nous n'allons pas nous inquiéter de la minutie des bornes de balles et des titres, mais discutons plutôt de l'anatomie de la typographie, qui compte pour les concepteurs Web..
Certaines propriétés typographiques fondamentales peuvent être manipulées avec CSS. Par exemple, peut-être le plus important, le famille de polices.
Vous entendrez souvent parler de la définition de Police de caractère contre police de caractères, il est donc important que vous connaissiez la différence. Une police est la collection empaquetée de lettres; blocs physiques traditionnellement utilisés en impression, incluant également les fichiers numériques. C'est le mécanisme de livraison.
Une police de caractères est ce que le concepteur crée. la conception. J'ai toujours aimé la comparaison avec la musique; vous achetez un CD (d'accord, nous revenons quelques années en arrière) en tant que mécanisme de diffusion pour écouter de la musique. Vous n'écoutez pas réellement le CD. La situation est similaire à celle de la sélection de polices pour utiliser les polices de caractères fournies..
Grâce à CSS, nous pouvons déterminer nos familles de polices préférées, par ordre de classement. C'est ce que nous appelons le pile de polices.
Nous pouvons aussi manipuler poids de la police à travers des feuilles de style. Le poids est la façon dont nous décrivons l'épaisseur relative du trait d'un personnage..
De nombreuses polices sont produites avec une variété de poids, le plus simplement décrit comme lumière, ordinaire, livre, extra-gras, avec une gamme de variantes en plus. Plus précisément, nous pouvons déterminer le poids d'une police de caractères à l'aide de l'échelle TrueType, qui va de 100 à 900 (400 étant ce que nous appelons couramment des polices régulières)..
Les polices doivent idéalement être produites avec des variantes de poids réelles, numériques ou nommées, pour pouvoir être contrôlées via CSS: poids de la police: 300;, poids de police: gras;. Lorsqu'une variante de police n'est pas disponible, les navigateurs tentent souvent de restituer le poids eux-mêmes, mais les résultats peuvent être moins qu'optimaux..
Majuscule et minuscule reportez-vous aux lettres majuscules et minuscules. Le terme Cas provient des tiroirs utilisés en typographie (la majuscule contenant les lettres majuscules, la minuscule ... vous obtenez l'image).
Nous pouvons remplacer le cas (si nous voulons) via CSS en utilisant text-transform: majuscule; par exemple.
Bien que nous parlions de casse des caractères, il est parfois conseillé (surtout pour les tailles plus petites) d'augmenter l'espacement entre les caractères afin d'améliorer la lisibilité. En termes de CSS, nous appelons cela l'espacement des lettres et il peut être exprimé comme une valeur positive ou négative, généralement mesurée en centièmes de em.
En termes traditionnels, nous appelons espacement des lettres: suivi. Le suivi affecte la densité globale des caractères dans une ligne ou un bloc de texte donné. Le terme trouve son origine (comme beaucoup de termes typographiques) dans l’époque révolue de la composition, en particulier photocomposition, dans lequel les personnages étaient projetés sur un film à travers une lentille. L'espace autour de chaque personnage serait modifié en déplaçant un prisme le long d'une piste, d'où suivi.
La propriété CSS espacement des mots peut aussi vous aider ici. Comme on pouvait s'y attendre, la modification de la valeur d'espacement des mots entraînera une augmentation et une réduction de l'espace entre les mots, ce qui aura également un impact significatif sur la lisibilité..
Jouez avec les valeurs d'espacement des lettres et des mots appliquées au bloc de texte suivant et voyez par vous-même comment la lisibilité est influencée.
Est souvent confondu avec le suivi crénage. Le crénage fait référence à l'ajustement de l'espacement entre des formes de lettre spécifiques (pas un groupe de caractères), encore une fois, pour améliorer la lisibilité..
UNE proportionnel police de caractères (par opposition à un monospace police, dont l'espacement des caractères est uniforme) tiendra compte de certaines paires de caractères nécessitant une aide supplémentaire pour s'asseoir visuellement l'un à côté de l'autre.
Par exemple, majuscule V et UNE, quand ils sont placés ensemble, leur crénage sera généralement réduit pour lutter contre l'espace visuel supplémentaire qui les sépare.
Encore une fois, nous avons la composition de la vieille école à remercier pour le terme, à l'époque où le type était moulé comme des blocs de métal. Kern se réfère à l'encoche faite dans un bloc de caractères, ce qui lui permettrait de se faufiler dans un bloc correspondant. La position de ces encoches masculines / féminines empêcherait que des caractères incompatibles soient placés les uns à côté des autres.
Cela dit, le crénage est un processus associé à la composition pour impression et n'est pas facilement adopté par la typographie Web. Il existe des outils JavaScript, tels que kerning.js, qui peuvent aider les concepteurs à manipuler leur type, caractère par caractère, mais CSS n'a pas encore pris le relais..
En termes de CSS, il y a une proposition pour la propriété police de caractères dans les travaux, mais même cela est limité dans ce qu'il peut faire pour un concepteur typographique.
Définition de la propriété (non standard) rendu du texte: optimise la légitimité; va améliorer les choses dans certains navigateurs modernes, en améliorant le crénage des paires de caractères reconnues. Comme avec police de caractères, cela n'offre pas tellement le contrôle qu'un coup de main. Cela déclenchera également l’utilisation de ligatures disponible dans une police, ce qui me conduit gentiment à…
Les ligatures amènent le crénage au niveau supérieur en proposant des glyphes de remplacement pour certaines paires de caractères. Dans certains cas, les personnages ne s'accorderont pas très bien, quelle que soit leur disposition délicate, auquel cas une ligature peut être conçue. Un exemple classique est la minuscule F et je.
En voici un que vous connaissez bien; reconnaître cela?
L'esperluette est en fait une ligature d'origine, que nous nous sommes habitués à utiliser à la place de Et (signifiant "et" en latin / français).
Dans d'autres cas, des ligatures peuvent être nécessaires pour certaines raretés linguistiques (le ß allemand est peut-être la plus familière de celles-ci) et parfois aussi uniquement pour la décoration. Ce dernier que nous appelons Ligatures discrétionnaires, comme par exemple c et un t se réunir.
Lorsque vous maîtrisez mieux le contenu d'une page Web, vous pouvez utiliser des entités Unicode ou HTML pour afficher des ligatures. Par exemple 5 vous trier avec le "fi" nous avons parlé. Si vous préférez que JavaScript vous aide, ligature.js pourrait faire l'affaire, mais ce n'est pas à l'abri des bombes.
Lorsque vous utilisez CSS pour vous aider, vous pouvez vous appuyer sur rendu de texte: optimise la légitimité que nous avons mentionné, ou vous pouvez utiliser le projet ligatures variantes de police qui a un certain nombre de valeurs telles que ligatures communes, en s'assurant que les ligatures sont affichées autant que possible. Le support du navigateur est incomplet pour le moment, mais il vaut certainement la peine de garder un œil sur.
Comme nous le verrons dans une minute, les proportions d’une police peuvent influer sur la quantité d’espace vertical séparant chaque ligne. Il est donc conseillé de considérer le hauteur de la ligne spécifique à la police utilisée et ajustez en conséquence. Si l'espace vertical est insuffisant, un corps de texte risque d'être encombré et il est difficile pour l'œil de revenir au début de la ligne suivante..
Trop d'espace et la lecture devient tout aussi gênante.
L'utilisation de mesures relatives est toujours recommandée dans la conception Web, en particulier en ce qui concerne la typographie. La hauteur de la ligne doit toujours être fonction de la taille de la police! En utilisant ems définir line-height signifie que cela sera toujours relatif à la taille de la police. Regardez cet exemple et voyez comment la lisibilité est influencée par les valeurs changeantes:
En termes traditionnels, nous désignons l’espacement entre les lignes (à ne pas confondre avec la hauteur de ligne elle-même) comme suit: de premier plan, soi-disant en raison des bandes de plomb en métal qui ont été utilisées dans les presses à imprimer pour augmenter et diminuer l'espacement vertical.
De nos jours, quand la hauteur de ligne est calculée, demi-leader est ajouté à la fois haut et bas des caractères. Par exemple, une taille de police de 36px, avec une hauteur de ligne de 54px (1,5em) entraînerait l'ajout de 9px d'espace sous les caractères et de 9px au-dessus. En effet, cela centre verticalement le texte dans sa ligne.
En suivant notre anatomie typographique contrôlée par CSS, nous arrivons à justification; l'alignement du texte. Dans notre diagramme, le texte est aligné à gauche, mais il peut également être aligné à droite, au centre ou justifié (s’il s’agit de blocs de texte supérieurs à une ligne). Le style via CSS se fait avec la propriété text-align, par exemple text-align: center;.
Le texte entièrement justifié supprime ce que l'on appelle le bord déchiqueté…
… Mais peut causer un arrière-goût désagréable sous forme de rivières ou canaux apparaissant dans le corps de votre texte.
Dans le monde des présentations fluides, où la largeur d'un corps de texte peut être difficile à cerner, le texte justifié doit être utilisé avec prudence..
La sélection de caractères peut être difficile. Qu'il s'agisse d'en-têtes, de corps de texte, de citations en bloc, etc., de nombreux facteurs entrent en jeu. Regardons quelques aspects fondamentaux de l’anatomie typographique qui méritent une attention particulière..
D'abord, avons-nous affaire à un serif police de caractères, ou un sans serif? Les sérifs sont les accidents vasculaires cérébraux supplémentaires qui terminent un accident vasculaire cérébral principal. Des polices telles que Arial n’ont pas ces traits, elles sont sans-serif (une autre leçon de français pour vous là-bas…)
On dit que les serifs aident à la fluidité des lettres, relient des mots cohérents, aident l'œil à lire le texte et facilitent la lecture. Parfois, cependant, ils peuvent compliquer une police de caractères, causant de la fatigue au lecteur et empêchant par conséquent la lisibilité. L'argument est d'actualité depuis des décennies et aucune preuve concrète n'a jamais été présentée avec succès, car aucune des deux n'est plus lisible..
Dans tous les cas, les polices sont parfois de type sérif ou sans empattement (comme le PT de ParaType pour vous permettre de choisir celle que vous préférez)..
Ayant mentionné lisibilité, il est juste que je le distingue rapidement de lisibilité. Nous utilisons la lisibilité lorsque nous parlons des détails les plus fins de la typographie; la capacité de reconnaître des lettres et des mots individuels. La lisibilité joue un rôle plus fonctionnel, en ce qui concerne l'aspect pratique d'un lecteur capable d'absorber un corps de texte.
La lisibilité est évidemment très importante. Pour cette raison, il est sage de prendre hauteur x en compte. La hauteur x du type décrit la hauteur (regardez le x d’un visage particulier), de la de base au sommet des caractères minuscules. Les polices de caractères avec une hauteur x relativement grande ont tendance à être plus lisibles, en particulier pour les petites tailles.
Plus grande hauteur x vient aux dépens de la descendeurs et ascendeurs, qui deviennent logiquement plus courts en relation. Cela peut réduire visuellement l'espace entre les lignes, ce dont nous avons parlé il y a un instant.
Je ne suis pas sûr de la manière dont j'ai atteint ce stade sans définir spécifiquement le type de lettre accident vasculaire cérébral. S'il existe un terme utile pour décrire la personnalité d'une police de caractères, c'est bien cela. Le trait de n'importe quelle lettre peut être horizontal, vertical, diagonal, voire incurvé - et en fonction du trait en question, il peut également avoir un nom plus spécifique..
Le trait principal (généralement droit et lourd) dans une lettre est appelé la tige, laissant le terme accident vasculaire cérébral signifier alors une importance secondaire. Le trait horizontal au-dessus d'un T majuscule s'appelle un bras, ce que vous trouverez combler l'écart dans une majuscule A ou H est un bar, la liste continue…
Les traits dans une lettre, en particulier dans les polices serif, peuvent également varier en style et en poids; une naissance des cheveux être le plus mince présent.
Ensuite, certains traits, en particulier les courbes, auront un poids variable sur leur propre longueur. Ceci est appelé modulation. Cette variation équilibre le poids total d'un personnage et évite les zones particulièrement lourdes où deux traits se rejoignent..
Une mauvaise modulation du trait entraîne souvent une forme de lettre lourde et maladroite par rapport aux autres caractères de l'ensemble. David Kadavy qualifie cet équilibre d'équilibre de texture et constitue souvent une mesure de la qualité dans une police de caractères bien exécutée. Regardez un corps de texte, puis brouillez les yeux pour avoir une impression de la texture générale.
Il y a milliers des termes du glossaire et des adjectifs à comprendre si vous souhaitez décrire correctement les questions typographiques. Nous avons couvert quelques bases ici et j’espère qu’au moins quelques-unes d’entre elles seront de nouveaux ajouts à votre vocabulaire! Essayez d’en lancer un au hasard dans la conversation la prochaine fois que vous rencontrez un nouveau - ils seront très impressionné…
Accentsconagua