La typographie avec les CSS

Il existe plusieurs propriétés pour définir la typographie (ou police de style)

• font-size pour définir la taille de la fonte
• font-family pour définir le nom de la fonte
• font-weight pour définir la graisse de la fonte
• font-style pour définir le type d’italique

Au sujet de font-size

Il existe différents types d’unités :

• le pixel px, la plus populaire et la plus utilisée
• le rem rem, une unité relative à la taille de typo définie pour la balise html
• le em em, une unité relative à la taille de typo définie pour la balise parent
• le point pt
• le viewport vw et vh

Au sujet de font-weight

Il existe différents types de valeurs :

• la valeur numérique
  Exemple : 400, 700, 900
• la valeur littérale
  Exemple : normal ou bold…

La propriété font-family permet de spécifier une famille de typo à une balise ou à un ensemble de balises

article > button {
 padding: 20px;
 font-family: Montserrat, sans-serif;
 }

header {
 padding: 20px;
 font-family: 'Times New Roman', serif;
 }

Si la typo est composée de plusieurs mots, on l’encadre avec des quotes.

Fontes et compatibilité

Il faut s’assurer que la fonte spécifiée sera disponible sur tous les systèmes d’exploitation

Des exemples de fontes serif compatibles

• Georgia
• Times New Roman

Des exemples de fontes sans serif compatibles

• Arial
• Verdana
• Tahoma
• Impact

Il faut toujours préciser le type d’empatement en dernier recours !

Lorsque l’on choisit d’exploiter une typo sur un site, on doit faire attention aux éventuels copyright.

Les droits sur les typos

• Les typos libres
• Les typos gratuites pour un usage personnel
• Les typos payantes

L’utilisation des typos payantes peut être soumise à une limitation en terme de nombre de visiteurs !

Ressources en ligne

• Font Squirrel
• Google Fonts
• Dafont
• Velvetine (FR)

Un article sur le choix des typos

Alsacréations : Quelles polices de caractères (fontes) utiliser sur le Web ?

Par défaut, le navigateur cherche la fonte spécifiée dans votre code CSS sur le disque dur de l’utilisateur. Si votre utilisateur ne possède pas cette typographie, le navigateur va afficher une police par défaut, souvent de la Times New Roman ou de l’Arial.

Et ça n’est pas ce que vous voulez !

Comment utiliser une police de style personnalisée ?

Pour forcer le navigateur à utiliser une typographie qui ne se trouve pas sur l’ordinateur de votre internaute, on utilise une syntaxe CSS : la règle @font-face

/* SpaceWham */
@font-face {
    font-family: 'SpaceWham';
    src: url('../font/space-wham-webfont.woff2') format('woff2'),
         url('../font/space-wham-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;

}

/* Hasteristico */
@font-face {
    font-family: 'Hasteristico';
    src: url('../font/Hasteristico-Light.woff2') format('woff2'),
        url('../font/Hasteristico-Light.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Hasteristico';
    src: url('../font/Hasteristico-Bold.woff2') format('woff2'),
        url('../font/Hasteristico-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

Générer des règles font-face

Vous pouvez utiliser le site Font Squirrel Generator

Il faut disposer d’une typo au format suivant et le site vous fournira tout un kit prêt à l’emploi.

• .ttf
• .otf
• .woff

Les autres propriétés avec des exemples de valeurs :

• color: #ff7700;
• letter-spacing: 1px;
• line-height: 1.5;
• text-transform: uppercase;
• text-decoration: underline;
• text-shadow: 3px 3px 5px blue;

Les valeurs de color

En langage CSS, la couleur peut être codée de 4 manières différentes

• l’héxadécimal
• le rgb
• le rgba
• littéralement