Share
Si vous apprenez la conception Web à partir de zéro et que vous souhaitez améliorer considérablement vos compétences en typographie, cet article est écrit pour vous. Nous aborderons les polices de caractères, les polices de caractères, l’anatomie typographique, la hiérarchie et la manière de choisir les polices de caractères. Vous en apprendrez assez pour devenir dangereux en un rien de temps.
Comme d'habitude pour ces guides complets, nous en couvrirons une quantité considérable, notamment:
Le design Web est une typographie à 95%! Il n'y a pas de webdesign sans type. Alors, pourquoi ne pas améliorer vos compétences en conception Web en appliquant une typographie solide? Il existe un monde riche en lettres à explorer, un monde transmis par des générations de créateurs travaillant avec le graphisme et la création de caractères. Un autre trou de lapin incroyable à plonger dans.
Aux débuts de la conception de sites Web, il tentait de suivre les idées en matière de conception graphique, en particulier la manière dont les livres, les magazines et les journaux étaient conçus et conçus. Ces jours-ci, la conception pour le Web a mûri et ne suit pas ces concepts aussi étroitement que par le passé. La conception Web réactive est un exemple de conception où la conception a clairement mûri au-delà du monde de l’impression de nombreuses façons. Le revers de la médaille est que cela a également conduit à davantage de complexité, ce qui semble être en augmentation constante. Loin d’être menaçante, c’est très excitant et les possibilités ne sont pas seulement croissantes, mais les options sont déjà vastes et cools. Le Web s'est développé - pas mal - et l'avenir semble prometteur!
Le type est plus efficace que tout autre élément lorsque vous transmettez votre message sur le Web. Bien sûr, les graphiques peuvent également les soutenir et les améliorer, mais la communication avec vos utilisateurs se fait principalement par le biais de mots écrits, contrairement au monde de la publicité, où images et graphiques permettent de véhiculer des histoires entières beaucoup plus facilement, même sans utiliser beaucoup de tout.
Sur le web, on parle de des pages, sites Internet, et surtout interfaces. Traiter principalement avec des éléments graphiques s'est révélé difficile, souvent inefficace, ambigu et impropre au marché de masse..
sans pour autant
Dropbox avecCet exemple de Dropbox montre que les graphismes seuls n'atteignent pas le même niveau de communication et sont quand même ambigus au mieux..
Les «polices de caractères» sont des ensembles de lettres, de chiffres et de signes de ponctuation formant des ensembles de styles pour un alphabet. Pensez aux polices typographiques comme à une famille de caractères dont les membres partagent des choix de conception communs mais peuvent varier en poids et en styles. Bodoni ou Gotham, par exemple, sont des caractères.
Vous conception une police de caractères.
Caslon
GothamLes «polices» sont considérées comme un sous-ensemble d'un caractère. Il s’agit des jeux de caractères physiques (ou numériques) d’une police de caractères particulière, de poids et de style particuliers.. Open Sans Light est une police; un fichier que vous utilisez sur votre système.
Vous faire une police.
Open SansLe sujet de la classification des caractères est beaucoup plus vaste que l’on pourrait le penser au premier abord, en particulier les sous-classifications. Les éléments essentiels pour commencer sont rapides à maîtriser, examinons quelques classifications que vous devez absolument connaître..
Les caractères Serif sont nommés d'après les petites extensions, les détails décoratifs, au bout de quelques traits: serifs.
À partir de 10 indicateurs de conception correctifs pour les développeursLes polices Serif sont les plus anciennes dont nous allons parler dans cet article. Ce n’est pas une science exacte, mais on peut soutenir qu’ils remontent à une époque où les Romains gravaient des lettres en pierres, en utilisant l’alphabet latin. Il existe également une théorie intéressante qui dit qu’elles résultent de l’utilisation de ciseaux pour tailler des pierres et constituent un choix artistique en raison des outils utilisés pour créer un meilleur résultat final..
MailChimp
Latinotype
PanaLes empattements sont souvent utilisés pour des textes plus longs, tels que la copie de corps. La preuve selon laquelle ils sont «plus faciles à lire» n’est pas concluante, mais cet argument revient souvent. Ils fonctionnent bien dans une vieille école et dans un environnement classique, mais peuvent également bien fonctionner dans un cadre moderne s'ils sont utilisés correctement..
Le New York TimesLes serifs sont néanmoins un excellent choix pour les en-têtes. Les en-têtes utilisés par le Washington Post illustrent parfaitement l'utilisation d'un serif pour transmettre un certain style de tradition et de qualité, tandis que la copie corps sans-serif lui donne un aspect moderne tout en restant très lisible..
Le Washington PostLes polices de caractères «sans empattement» manquent des extensions empattées.
Projet SoliLes sans empattements ont gagné en popularité dans les années vingt. Ils ont été conçus pour avoir un aspect moderne, industriel et fabriqué à la machine. idéal pour l'industrie de la publicité et le mouvement Art Déco de l'époque.
Omakase de chasse cool
Moyen
WebflowLes «semi-serifs» incorporent les caractéristiques des polices serif et sans serif.
LatinotypeLes «empattements de dalle» sont similaires aux empattements, mais sont beaucoup plus épais et attirent davantage l'attention dans la nature..
VitesseDans le passé, ils étaient souvent utilisés sur des machines à écrire pour s'assurer que le contraste était suffisamment créé sur la page. Au début, il était plus difficile pour les machines à écrire de toujours imprimer des lettres sur une page; cela dépendait de la pression et de la fraîcheur de l’encre, etc. Un serif plus mince était moins efficace pour la composition de machine. Les débuts du secteur de la publicité avaient également besoin de quelque chose de nouveau et d’attirer l’attention..
partout.is
Proday
FlowhubLes polices de caractères «script» imitent souvent l'aspect d'un texte écrit à la main, imitant des variations d'épaisseur et de fluidité. Leur apparence est plus décontractée et informelle, donnant souvent la sensation de quelque chose de fait à la main et de personnel. Les scripts sont généralement très décoratifs et rarement utilisés pour des paragraphes plus longs (espérons-le).
Paravel
Type de famille d'accueil
FemmebotComme son nom l’indique, chaque lettre et chaque caractère de ponctuation de type «monospace» occupent la même largeur horizontale. Les autres polices que nous avons abordées jusqu'à présent ont toutes des caractères de largeur variable. ceux-ci sont connus comme caractères proportionnels.
Les machines à écrire, les premiers ordinateurs et les terminaux étaient de type monospace fortement utilisé. Le matériel de l'époque ne répondait pas aux besoins des largeurs variables d'autres familles de types. Les éditeurs de texte actuels pour l'écriture de code proposent toujours des polices à espacement fixe par défaut. Rien ne parle plus de "pirate informatique" que le code écrit en monospace. Au cours des dernières années, il est également devenu beaucoup plus populaire parmi les concepteurs.
Le prochain siècle
CSSDAPassons maintenant à certaines des caractéristiques anatomiques les plus importantes du type.
Votre travail de concepteur consiste à faire preuve de créativité avec les polices de caractères elles-mêmes et non à réciter tous les détails de leur composition. Tout dépend de ce que vous faites, de ce que vous accomplissez lorsque vous utilisez des polices de caractères. Mon conseil est donc simple: comprendre et mémoriser les bases, s’amuser, jouer avec les polices de caractères et s’y imprégner au fil du temps. Il n'y a rien de mal à ne pas connaître tous les détails de l'anatomie du type! D'autre part, je suis peut-être trop pragmatique à ce sujet. Tu décides!
Wikipédiale de base est la ligne sur laquelle la plupart des caractères sont placés.
Wikipédiale médian d'autre part est le plafond pour la plupart des lettres minuscules.
L’espace entre la ligne de base et la médiane est ce que nous appelons la hauteur x. Cela peut être vu comme étant égal à la hauteur de la lettre minuscule "x", d'où son nom. Plus une police de caractère offre une hauteur de x élevée, plus elle sera lisible aux tailles les plus basses. La plupart des textes que nous lisons dans le monde occidental sont composés de lettres minuscules et, comme la plupart des caractéristiques distinctives permettant de reconnaître des lettres et, par conséquent, des mots, se retrouvent dans cette région. La hauteur x influence considérablement la lisibilité..
Cet espace supplémentaire donne à une police un peu plus d'occasions de laisser transparaître son caractère. Nous avons tendance à lire par sauts et à consommer des lettres rapidement et inconsciemment. Donc, plus de hauteur x est utile pour la copie sur le corps, car les longs paragraphes de texte peuvent devenir fastidieux si les yeux doivent travailler plus fort pour déchiffrer l'alphabet. Des sections telles que les titres où vous utiliserez généralement des tailles de police plus grandes et des quantités de texte plus courtes peuvent tout de même vous en sortir avec des hauteurs x optimales. Vous avez plus de place pour des choix artistiques qui impliquent une certaine humeur ou un caractère sans affecter trop l'expérience de lecture de vos utilisateurs.
le ascendeur est cette partie qui s’étend au-dessus de la médiane, alors que la descender est la partie d'un caractère qui s'étend au-dessous de la ligne de base:
De l'anatomie de la typographie WebDes compteurs sont des zones partiellement ou entièrement fermées. Pensez à un «o» ou à un «a». Le «a», par exemple, a deux compteurs: un partiellement et un complètement fermé. Les polices de caractères avec des compteurs plus grands sont également généralement bonnes pour la lisibilité, car les détails ont plus de place pour être explicitement montrés. Alors, cherchez des polices de caractères avec de grandes hauteurs x et des compteurs plus grands si vous souhaitez donner aux utilisateurs une bonne expérience de lecture..
Examinons maintenant différents types d'espacement en matière de typographie..
Hauteur de la ligne est l'espace entre deux lignes de base conséquentes. En version imprimée, il est très important de créer un rythme vertical cohérent - la grille de base - un système de mini-grille pour la frappe sur une page. Sur le Web, il est notoirement difficile d’atteindre ce type de précision..
De mon nom est MikeLes environnements réactifs rendent l’application de grilles de base encore moins attrayante, de sorte que votre temps pourrait sans doute être mieux investi dans des questions plus pragmatiques..
Une bonne hauteur de ligne pour les paragraphes Web est généralement comprise entre 1,3 et 1,6 (ce qui est proportionnel à la taille de la police). Les titres peuvent et devraient être un peu plus serrés. Il convient de garder à l’esprit que les lecteurs doivent pouvoir passer facilement au début de la ligne suivante. Vous ne voulez pas surcharger les utilisateurs avec une sorte de surcharge mentale, vous devez chercher avec concentration où ils doivent continuer à lire lorsqu'ils atteignent la fin d'une ligne de texte..
Différents degrés de hauteur de ligne peuvent également (étrangement) avoir un impact sur la couleur de votre texte. Les hauteurs de ligne plus étroites semblent plus sombres car l'espace entre les lignes de texte est réduit, et inversement bien sûr. Vous devez trouver un équilibre pour que le texte soit cohérent, léger et lisible lorsque vous ajustez cet espacement. Lisez le texte, utilisez du texte réel et non un mannequin et voyez comment il se sent. Est-ce une bonne expérience de lecture? Cela devrait être à la pointe de votre esprit, toujours!
Ces deux termes signifient la même chose: le nombre de caractères sur une seule ligne de texte. Une bonne mesure pour les dessins sur le Web se situe entre 60 et 85 caractères. La longueur et la hauteur des lignes sont quelque peu symbiotiques et dépendent les unes des autres. Plus la longueur de ligne requise par un paragraphe est importante, plus la hauteur de ligne doit être importante.
S'il semble trop étroit ou trop extensible, ajustez-le jusqu'à ce qu'il soit lisible et «se sente» bien.
Kerning appelé à ajuster les différents espaces blancs entre les lettres individuelles. Ceci est conçu différemment pour chaque type, respectant les besoins de chaque lettre. Un «o» minuscule peut occuper moins d’espace qu'un «t» minuscule, par exemple. Sur le Web, il est fastidieux de s’adapter alors que la pratique du crénage est très répandue dans l’industrie de l’imprimerie..
WikipédiaSur le web ça est possible d’appliquer le crénage en s’appuyant sur les données contenues dans les polices elles-mêmes. Ceci est une fonctionnalité qui peut être déclenchée avec le CSS rendu du texte ou font-feature-settings Propriétés. Gardez à l'esprit que le soutien est loin d'être généralisé à ce stade.
Cela fait référence à l’espacement constant entre toutes les lettres d’un groupe. Il ne cible pas les lettres individuelles comme le crénage, mais constitue plutôt un réglage uniforme qui couvre l’ensemble du passage de texte affecté, ce qui donne plus ou moins de densité et de texture..
Lorsque vous utilisez des morceaux de texte plus volumineux, pour les titres par exemple, un petit espacement des lettres négatives peut être très utile. Vous ne voulez pas donner l'impression que le texte s'éloigne. Comme pour le crénage, lorsque les polices de caractères sont conçues pour être consommées avec des tailles de police plus petites, l'espacement des lettres peut nécessiter ces petites modifications, car le crénage d'origine a été considéré différemment..
Utilisez des citations réelles. Période!
Les autres «citations» souvent utilisées sont en fait des citations droites, qui devraient être utilisées pour les pouces et les pieds. Les apostrophes et les guillemets simples ont également leur contrepartie réelle. Oui, vous devez faire un peu de kung-fu sur votre clavier pour les obtenir, mais le résultat en vaut la peine. Lire la suite:
Un ellipse se réfère aux trois points qui peuvent facilement être confondus avec trois périodes simples. La différence est qu'ils ont plus d'espacement entre chaque période. Vous pouvez utiliser un espace supplémentaire à gauche et à droite, à vous de décider.
Utilisez-le lorsque vous souhaitez omettre le contenu: mots, expressions, lignes, paragraphes ou parties de guillemets. C'est un espace réservé pour indiquer que vous avez omis du texte.
Il n'y a pas besoin d'espaces supplémentaires autour des traits d'union. Leur objectif principal est de relier les mots entre eux, comme beaux-arts, 8 ans et autres.
Ils sont également votre seul choix pour les préfixes et les suffixes. Vous devez également les utiliser si vous avez besoin d’épeler un mot: T-U-T-S-P-L-U-S. La durée et la distance font également partie de leur référentiel:
Pour ces gammes, vous pouvez également utiliser le en tiret.
le en course tire son nom de la longueur de la lettre minuscule «n». Il est un peu plus long qu'un trait d'union et est utilisé pour les plages de valeurs ainsi que pour impliquer des relations comme maître-étudiant. Ou pour souligner.
le em dash est encore un peu plus long, la taille de la lettre majuscule «m». Ils devraient être utilisés pour souligner une pause de pensée et indiquer qu'une phrase est inachevée. Les deux tirets peuvent sembler un peu plus minces qu'un trait d'union, généralement. Veuillez ne pas utiliser deux traits d'union dans les cas où les tirets en ou en em sont plus adaptés. Aucune des versions de tirets ne nécessite un espace supplémentaire.
Je sais que ces détails de ponctuation ne paraissent pas trop vifs, mais ces connaissances de base sur la manière de les utiliser correctement devraient être importantes pour vous si vous aimez créer avec une bonne typographie à l’esprit. Il peut également sembler banal d’avoir trois types de tirets parmi lesquels vous pouvez choisir car ils se ressemblent beaucoup, mais d’un autre côté, beaucoup d’attention et de considération y ont été apportées au fil des ans et nous devons respecter le travail des designers est venu bien avant nous. C’est leur travail acharné et leur travail de pionnier qui le rendent si facile à utiliser aujourd’hui. Faire attention à ces détails est un petit prix à payer pour se tenir sur les épaules de géants.
Il est important que vous transmettiez une forte hiérarchie au sein de votre typographie. Pourquoi? Parce que, comme nous l’avons indiqué au début de cette pièce, les caractères de la page représentent environ 95% de votre conception. Si votre texte contient une hiérarchie faible, vous n'aurez aucune chance de créer une hiérarchie puissante dans votre conception globale..
Trent Walton
TypologiqueLa typographie vous offre de nombreuses façons de donner à vos utilisateurs des ancres visuelles leur permettant de naviguer sur votre site comme vous le souhaitez. En mettant l'accent, vous pouvez leur faire savoir ce qui est le plus important et ce sur quoi ils devraient faire attention en premier. Voici quelques façons de renforcer votre travail dans ce département:
Si vous n’avez pas beaucoup de couleurs sur une page, les éléments qui ont une couleur se démarquent vraiment. Comme toujours, moins c'est plus. Comme les exemples ci-dessous n'utilisent que des couleurs avec parcimonie, l'effet est très puissant, même sans augmenter la taille ni augmenter les blancs..
Paravel
DropboxL'augmentation de la taille relative de la police attirera toujours l'attention sur certains éléments. Ce que j’aime dans la variation de la taille des polices, c’est que vous pouvez facilement créer des «ancres» visuelles que le lecteur peut utiliser pour parcourir une page. Le seul inconvénient est que vous devez vraiment être cohérent avec l'utilisation de tailles de police pour des éléments particuliers. Vous ne pouvez pas le changer à volonté partout. Cela affaiblirait probablement vos conceptions beaucoup plus que d'avoir un texte de taille uniforme.
Typeterrance
DropboxDonnez de l’espace aux éléments typographiques importants. S'ils sont entourés d'espaces vides, ils sont simplement soulignés par cela. Les nouveaux arrivants semblent éviter un peu d'utiliser beaucoup d'espace entre les éléments. En version imprimée, cela peut coûter cher, mais sur le Web, vous obtenez ce matériel gratuitement. Jouez, observez ce que les autres designers proposent et volez à l'occasion. Pas de magie et pas de science de fusée si. Juste un peu d'expérience suffit - vous développerez éventuellement une bonne mesure intestinale.
CSS Zen Garden
Trent WaltonUne famille de caractères étendue vous donnera beaucoup de poids à choisir. Dans bon nombre des exemples ci-dessus, vous pouvez voir différents poids pour différents objectifs au travail. Pour moi, ce n’est pas une chose à laquelle je me lance tout de suite et j’essaie d’abord d’utiliser les autres outils pour créer la hiérarchie. Mais c'est une question de goût, tout ce qui vous convient le mieux, à vous et à vos créations..
Latinotype
DropboxDans la capture d'écran de la page «à propos» de Dropbox, vous pouvez voir que les noms ont un poids différent de celui de leurs titres. Une technique très basique pour créer de l'emphase.
Italique sont parfaits pour des informations secondaires ou tertiaires dans le texte en cours d’exécution (ou l’accent, bien sûr). L'exemple ci-dessous les utilise bien pour afficher une adresse..
Le Type Directors ClubLorsque vous choisissez plusieurs polices de caractères pour votre travail (il est préférable d'éviter d'en choisir plus de deux), il est essentiel que ces polices créent elles-mêmes une sorte de hiérarchie grâce à leur contraste. D'une part, ils doivent pouvoir être facilement distingués les uns des autres et, d'autre part, ne doivent pas être liés l'un à l'autre. Il existe quelques bonnes directives pour la sélection des polices de caractères; le prochain chapitre vous amènera à la vitesse sur celui-là.
Trent Walton
Stuntbox
Jason Santa Maria
Jason Santa MariaN'oubliez pas que toutes les règles ci-dessus ne brillent que si vous les utilisez systématiquement. Si vous changez trop les choses, votre hiérarchie sera considérablement affaiblie. Si tout cela est complètement nouveau pour vous, consultez mon article sur les principes de design visuel pour vous mettre à niveau. Tout ce qui précède fera beaucoup plus de sens après cela.
Nous avons des tonnes de caractères à choisir parmi ces jours. Et pas seulement cela, nous avons des tonnes de services qui veulent nous aider avec ça. Cela peut prendre un certain temps pour avoir une idée de ce qui se passe réellement. Mais pour moi, c'est tout à fait une bonne chose. La typographie Web a parcouru un long chemin, non seulement en termes d'écosystème, mais également en termes de ce que les navigateurs vous permettent de faire..
Lorsque vous décidez des polices que vous souhaitez utiliser, je vous recommande de vous concentrer tout d’abord sur la lisibilité et le style que vous souhaitez véhiculer dans vos créations. Le ton et le message sont également importants car le type a une influence considérable sur ce phénomène grâce à ses différentes caractéristiques. Si vous parvenez à faire tout cela, vous vous démarquerez assez du reste du troupeau..
Assurez-vous de créer un bon contraste entre les choix appariés. Des polices trop similaires peuvent finir par paraître confuses et affecter négativement votre hiérarchie visuelle. Les familles de caractères plus grandes ont également l’avantage d’avoir des tonnes d’options pour varier les exemples. De cette façon, vous ne pouvez utiliser qu'une seule police de caractères sans avoir l'air ennuyeux.
Studios évier de cuisineSi vous voulez aller plus loin, associer un sans serif à une police de caractère serif est le meilleur endroit pour commencer - le plus raisonnable en fait. Cela peut conduire à un contraste plus fort et plus intéressant que vous pouvez utiliser à votre avantage, stylistiquement.
Hanson WuUtilisez vos choix de manière cohérente. Évitez de changer de police de caractères et d’en-têtes partout. Décidez lequel est le meilleur pour la lisibilité et celui qui convient le mieux pour transmettre un style, tout en attirant l'attention des lecteurs, et respectez-le..
Ben GoodyearCertains concepteurs de caractères ont créé des versions serif et sans serif du même caractère. Ceux-ci sont censés travailler ensemble parfaitement. Lorsque votre police a un frère correspondant, vous pouvez trouver un contraste approprié dès le début..
adayinbigdata.comSi vous associez deux polices de caractères, essayez d’obtenir de fortes différences visuelles entre elles. Gardez-le subtil si vous voulez, mais il devrait être au moins perceptible, même à l'œil rapide. À cet égard, lier deux sans empattements ou deux empattements peut être délicat.
ExpositionLorsque vous recherchez des distinctions visuelles, vous souhaitez également vous méfier des caractéristiques communes. Quelque chose qui puisse lier les deux polices de caractères différentes. Leur structure visuelle, la manière dont leurs lettres sont conçues pourraient partager des idées communes. Des compteurs similaires et des squelettes similaires de leurs lettres globales, par exemple. Cela les lie encore plus habilement. Une structure similaire ou une conception géométrique aidera avec cela à coup sûr.
À l'occasion, voler! Lorsque vous trouvez des combinaisons qui vous plaisent, essayez-les vous-même et voyez ce que vous pouvez en faire. Apprendre en imitant le travail des autres, c'est bien.
La typographie manque de lois strictes pour guider vos décisions. Pour moi c'est une bonne chose. À bien des égards, la typographie est subjective, mais la lisibilité est peut-être la seule constante sur laquelle vous devriez toujours vous concentrer avant tout. Prenez toutes les idées et concepts que nous avons abordés avec un grain de sel et voyez-les comme points de départ pour vos propres explorations créatives..
Il existe beaucoup d'espace pour infuser sur le Web une meilleure typographie. C'est un outil formidable pour améliorer la communication et j'estime que ce sont des connaissances culturelles précieuses qui nous ont été transmises au fil de nombreuses générations de travail acharné et d'exploration. C'est fantastique de pouvoir influencer le ton de la langue écrite.
Accentsconagua