Y a t'il de bons ou mauvais caractères ?
Oui, il en existe quelques mauvais…
…mais il y a surtout de mauvais usages !
En réalité, il n'y a pas en soi de bons ou mauvais caractères. Il y a des caractères appropriés à des usages spécifiques.
Au départ, Comic Sans MS était une police destinée à des applications pour enfant.
Capitales | abcdefghijklmnopqrstuvwxyz |
Minuscules | abcdefghijklmnopqrstuvwxyz |
Chiffres | 0123456789 |
Accents | æoeàäâùûçöôéèêëîï æoeàäâùûçöôéèêëîï |
Ponctuation | .,;…: «!?»({[]}) |
Symboles | &=+/\@§%£$* |
Regular
Bold
Italique
Bold italique
100 Thin
300 Light
400 Normal
500 Medium
700 Bold
900 Ultra-Bold
italique
italique
italique
italique
italique
italique
Attaque
Empattement
Pleins
Déliés
Contre-formes
Axe
Ligne de base
Hauteur d'œil
Hauteur de capitale
Jambages inférieurs
Jambages supérieurs
Corps
A savoir avant toute chose :
Cependant…
Chaque caractère d’imprimerie possède son propre passé, véhicule un bagage culturel, historique et social, et crée par sa seule présence sur une page, au-delà du sens des mots écrits, une véritable ambiance.
« Nous lisons le mieux
ce que nous lisons le plus. »
Bien que le but généralement admis de la typographie soit d'améliorer la lisibilité du texte écrit, l'une des fonctions les plus prosaïques du graphisme est, en réalité, d'aider les lecteurs à ne pas tout lire.
Bien que nous soyions désormais habitués à voir des espaces entre les mots, le langage parlé est perçu comme un flot continu, sans "blancs" audibles.
Ilsuffitd'essayerdelireunelignedetextedépourvued'espacespourensaisirtoutel'importance!
p {
font-size: 16px;
line-height: 18px;
}
p {
font-size: 16px;
line-height: 24px;
}
p {
font-size: 16px;
line-height: 34px;
}
p {
font-family: 'Times New Roman';
font-size: 16px;
line-height: 22px;
}
p {
font-family: Verdana;
font-size: 16px;
line-height: 22px;
}
p {
font-family: Verdana;
font-size: 16px;
line-height: 24px;
}
text-align: left;
text-align: center;
text-align: right;
Alinéa français
p {
text-indent: 30px;
}
Alinéa anglais
p {
text-indent: -30px;
padding-left: 30px;
}
p {
padding-bottom: 20px;
}
À éviter !
p {
padding-bottom: 20px;
text-indent: 30px;
}
Un fichier de police typographique contient toutes les informations requises pour qu’un ordinateur puisse afficher les caractères correspondant.
Ces formats ne sont pas (ou peu) compressés et contiennent généralement des jeux de caractères complets.
Leur poids, souvent conséquent, convient peu au web.
/* latin-ext */
@font-face {
font-family: 'Libre Baskerville';
font-style: normal;
font-weight: 400;
src: local('Libre Baskerville'), local('LibreBaskerville-Regular'), url(https://fonts.gstatic.com/[…].woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Libre Baskerville';
font-style: normal;
font-weight: 400;
src: local('Libre Baskerville'), local('LibreBaskerville-Regular'), url(https://fonts.gstatic.com/[…].woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
Auparavant, une police de caractères était représentée par différents fichiers pour les différentes fontes.
Avec une police variable, toutes ces combinaisons de style et de graisse sont contenues dans un seul fichier.
Windows 10
Photoshop
La propriété CSS font-variation-settings
permet de contrôler les caractéristiques typographiques de bas niveau pour les polices OpenType ou TrueType en utilisant les quatres lettres représentant les axes des caractéristiques qu'on souhaite faire varier, ainsi que les valeurs pour les variations associées.
font-variant-settings: 'WGHT' 100;
font-variant-settings: 'WGHT' 400, 'WDTH' 100, 'OPSZ' 14, 'GRAD' 88;
Design : Microsoft
Éditeur : Microsoft
Infos : developer.microsoft.com
h1 {
font-family: 'Bahnschrift';
font-variation-settings: 'wght' 400, 'wdth' 100;
}
Design : Owen Earl
Éditeur : indestructible type*
Infos : indestructibletype.com
h1 {
font-family: 'Renner';
font-variation-settings: 'wght' 100, 'ital' 0;
}
Design : Frank Grießhammer
Éditeur : Adobe Systems Inc.
Infos : github.com
h1 {
font-family: 'AdobeVF';
font-variation-settings: 'wght' 400, 'CNTR' 0;
}
Design : Hansje van Halem
Éditeur : Typotheque
Infos : typotheque.com
h1 {
font-family: 'Wind VF';
font-variation-settings: 'WIND' 0;
}
Design : Thomas Huot-Marchand
Éditeur : 205TF
Infos : 205.tf
h1 {
font-family: 'Minerale';
font-variation-settings: 'wght' 0;
}
Design : Jan Charvát
Éditeur : RenegadeFonts
Infos : renegadefonts.com
h1 {
font-family: 'Hela';
font-variation-settings: 'wght' 100;
}
Design : David Berlow
Éditeur : Font Bureau
Infos : github.com
h1 {
font-family: 'Amstelvar';
font-variation-settings: 'wght' 400, 'wdth' 100, 'opsz' 14, 'XOPQ' 88, 'XTRA' 402, 'YOPQ' 50, 'YTSE' 18, 'GRAD' 88, 'YTAS' 750, 'YTDE' 250, 'YTUC' 750, 'YTRA' 1000;
}